/* Moldura do painel: menu lateral claro, cabeçalho fixo, área principal e painel do agente. */

.app { display: flex; min-height: 100vh; background: var(--surface-sunken); }
.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; width: 100%; max-width: 1320px; padding: var(--space-8) var(--space-8) var(--space-16); }
.main:focus { outline: none; box-shadow: none; }

/* Menu lateral */
.sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); flex: none; overflow: auto;
  display: flex; flex-direction: column; background: var(--apis-white); border-right: 1px solid var(--border-default);
}
.brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font: var(--weight-semibold) 15px/1.2 var(--font-sans); color: var(--text-heading); }
.brand__sub { font: var(--weight-regular) var(--size-caption)/1.3 var(--font-sans); color: var(--text-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.nav__item {
  --icon-size: 18px;
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-md);
  color: var(--apis-gray-700); font: var(--weight-regular) 15px/1 var(--font-sans); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.nav__item:hover { background: var(--surface-hover); color: var(--apis-navy-900); }
.nav__item[aria-current="page"] { background: var(--apis-navy-50); color: var(--apis-navy-900); font-weight: var(--weight-semibold); }
.nav__item--strong { color: var(--apis-navy-900); font-weight: var(--weight-semibold); }
.nav__label { flex: 1; }

.project-card { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.project-card__kicker { font: var(--weight-regular) var(--size-caption)/1 var(--font-sans); color: var(--text-muted); }
.project-card__name { font: var(--weight-semibold) 15px/1.3 var(--font-sans); color: var(--text-heading); }

.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--border-subtle); }
.user { display: flex; align-items: center; gap: 10px; }
.user__text { flex: 1; min-width: 0; }
.user__name { font: var(--weight-semibold) var(--size-small)/1.2 var(--font-sans); }
.user__role { font: var(--weight-regular) var(--size-caption)/1.3 var(--font-sans); color: var(--text-muted); }
.user__logout { padding: 0; border: 0; background: none; color: var(--apis-navy-900); font: var(--weight-semibold) 13px/1 var(--font-sans); }
.user__logout:hover { color: var(--text-link-hover); }

/* Cabeçalho */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: var(--header-h);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: 10px var(--space-8);
  background: var(--apis-white); border-bottom: 1px solid var(--border-default);
}
.topbar__logo { display: none; height: 34px; width: auto; }
.menu-btn { display: none; }
/* Base de 260px: com pouco espaço, as ferramentas descem para a linha de baixo em vez de espremer o caminho */
.crumbs { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: var(--space-2); font: var(--weight-regular) 15px/1.3 var(--font-sans); color: var(--text-muted); }
.crumbs a { color: var(--apis-navy-900); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:first-child { flex: none; font-weight: var(--weight-semibold); } /* "Portfólio" nunca encurta */
.crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.crumbs__current { color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.pending-link {
  --icon-size: 16px;
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-sm); padding: 0 var(--space-3);
  border: 1.5px solid var(--apis-orange-200); border-radius: var(--radius-md); background: var(--apis-orange-50);
  color: var(--apis-orange-800); font: var(--weight-semibold) var(--size-small)/1 var(--font-sans); text-decoration: none; white-space: nowrap;
}
.pending-link:hover { background: var(--apis-orange-100); color: var(--apis-orange-800); }
.processing-flag { display: inline-flex; align-items: center; gap: 6px; font: var(--weight-regular) 13px/1 var(--font-sans); color: var(--apis-blue-700); white-space: nowrap; }

/* Painel do agente */
.chat {
  position: sticky; top: 0; z-index: 30; height: 100vh; width: 420px; max-width: 100vw; flex: none;
  display: flex; flex-direction: column; background: var(--apis-white);
  border-left: 1px solid var(--border-default); box-shadow: var(--shadow-lg);
}

.menu-backdrop { display: none; }

/* Telas médias: o chat passa por cima do conteúdo */
@media (max-width: 1279px) {
  .chat { position: fixed; right: 0; top: 0; bottom: 0; }
}

/* Telas estreitas e celular: menu lateral vira gaveta */
@media (max-width: 899px) {
  /* Fechada, a gaveta some também para o teclado (visibility), depois da animação */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; height: auto; visibility: hidden;
    transform: translateX(-100%); box-shadow: var(--shadow-lg);
    transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }
  .app--menu-open .sidebar { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-standard); }
  .app--menu-open .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: var(--surface-overlay); }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 10px var(--space-4); }
  .topbar__logo { display: block; }
  .main { padding: var(--space-4); }
}

@media (max-width: 599px) {
  .chat { width: 100vw; border-left: 0; }
  .crumbs { flex-basis: calc(100% - 100px); }
}