/* Pediro Hub — fundacao de design system v1.0 (Brand Kit, 07/08/2026).
   FASE 1 da migracao (ver plano em _docs/migracao_design_system.md): traz o
   pediro-hub-tokens.css inteiro (111 tokens: spacing, tipografia, sombra,
   motion, escala --brand-50..900 do violeta institucional, sistema
   --client-accent-* pra identidade por tenant) mas MANTEM os 18 tokens que
   ja existiam apontando pros valores EXATOS de antes — inclusive --brand
   (verde Ramarc) e --r-md/--r-lg (que no arquivo novo tem px diferente).
   Zero mudanca visual nesta fase, por decisao explicita do Theylon: o Hub
   ainda nao separa Console (chrome do Pediro, seria violeta) de Workspace
   (cliente, usa --client-accent) — trocar --brand pra violeta agora
   pintaria o produto inteiro sem essa separacao existir. Ver bloco
   "COMPAT FASE 1" logo abaixo. */

:root {
  color-scheme: dark;

  /* Typography */
  --font-brand: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display: 2.5rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-label: 0.08em;

  /* 4px spacing system */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Shape */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.625rem;
  --r-lg: 0.875rem;
  --r-xl: 1.125rem;
  --r-2xl: 1.5rem;
  --r-pill: 999px;

  /* Structure */
  --sidebar-width: 15.5rem;
  --sidebar-collapsed-width: 4.5rem;
  --topbar-height: 4rem;
  --owner-bar-height: 2rem;
  --content-max: 90rem;

  /* Brand — violeta institucional do Pediro Hub, constante entre tenants */
  --brand-50: #f3f1ff;
  --brand-100: #e8e4ff;
  --brand-200: #d3cbff;
  --brand-300: #b7aaff;
  --brand-400: #9181ff;
  --brand-500: #6f5cf6;
  --brand-600: #5b46e8;
  --brand-700: #4b35d4;
  --brand-800: #3d2baf;
  --brand-900: #2f227f;

  --brand-hover: var(--brand-300);
  --brand-active: var(--brand-500);
  --brand-solid: var(--brand-600);
  --brand-solid-hover: var(--brand-700);
  --brand-border: rgba(145, 129, 255, 0.34);
  --on-brand: #ffffff;

  /* Tenant layer — sobrescrever em [data-client-theme="<slug>"] por cliente */
  --client-accent: #f2bd4f;
  --client-accent-hover: #ffd06a;
  --client-accent-solid: #9a6510;
  --client-accent-bg: rgba(242, 189, 79, 0.12);
  --client-accent-border: rgba(242, 189, 79, 0.32);
  --on-client-accent: #17130a;

  --bg-card-raised: #171a23;
  --bg-input: #0e1016;
  --bg-overlay: rgba(3, 4, 7, 0.76);
  --border-strong: #3a4050;
  --ink-disabled: #555d6b;
  --ink-inverse: #171922;

  --success: #58d9a0;
  --success-solid: #18764c;
  --success-bg: rgba(51, 199, 130, 0.12);
  --success-border: rgba(88, 217, 160, 0.3);

  --danger: #ff737c;
  --danger-solid: #b52f3b;
  --danger-bg: rgba(255, 92, 104, 0.12);
  --danger-border: rgba(255, 115, 124, 0.3);

  --info: #78acff;
  --info-solid: #285ec7;
  --info-bg: rgba(87, 147, 255, 0.12);
  --info-border: rgba(120, 172, 255, 0.3);

  --warn-solid: #8a5a00;
  --warn-border: rgba(243, 191, 85, 0.3);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.28);
  --shadow-focus: 0 0 0 3px rgba(145, 129, 255, 0.28);
  --shadow-client-focus: 0 0 0 3px rgba(242, 189, 79, 0.24);

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --brand-hover: var(--brand-800);
  --brand-active: var(--brand-900);
  --brand-solid: var(--brand-700);
  --brand-solid-hover: var(--brand-800);
  --brand-border: rgba(75, 53, 212, 0.24);

  --client-accent: #8a5700;
  --client-accent-hover: #6f4600;
  --client-accent-solid: #f1b942;
  --client-accent-bg: rgba(154, 101, 16, 0.09);
  --client-accent-border: rgba(154, 101, 16, 0.24);
  --on-client-accent: #211605;

  --bg-card-raised: #ffffff;
  --bg-input: #fbfcfe;
  --bg-overlay: rgba(20, 24, 33, 0.56);
  --border-strong: #bcc4d1;
  --ink-disabled: #a0a7b3;
  --ink-inverse: #f7f8fb;

  --success: #176b46;
  --success-solid: #176b46;
  --success-bg: rgba(23, 107, 70, 0.09);
  --success-border: rgba(23, 107, 70, 0.22);

  --danger: #ad2935;
  --danger-solid: #ad2935;
  --danger-bg: rgba(173, 41, 53, 0.08);
  --danger-border: rgba(173, 41, 53, 0.22);

  --info: #2459bb;
  --info-solid: #2459bb;
  --info-bg: rgba(36, 89, 187, 0.08);
  --info-border: rgba(36, 89, 187, 0.22);

  --warn-solid: #7a5000;
  --warn-border: rgba(122, 80, 0, 0.22);
}

/* Exemplo de override por tenant — o workspace da Ramarc usa verde, nao o
   violeta institucional. Estrutura pronta pra quando existir 2º cliente. */
[data-client-theme="ramarc"] {
  --client-accent: #5bdd71;
  --client-accent-hover: #7be88b;
  --client-accent-solid: #23783a;
  --client-accent-bg: rgba(91, 221, 113, 0.12);
  --client-accent-border: rgba(91, 221, 113, 0.3);
  --on-client-accent: #07150a;
}
:root[data-theme="light"] [data-client-theme="ramarc"] {
  --client-accent: #23783a;
  --client-accent-hover: #175e2b;
  --client-accent-solid: #47c960;
  --client-accent-bg: rgba(35, 120, 58, 0.09);
  --client-accent-border: rgba(35, 120, 58, 0.24);
}

/* ── COMPAT FASE 1 — mantem os 18 tokens que ja existiam iguaizinhos ao
   antes (mesmo valor exato), pra garantir zero mudanca visual nesta fase.
   Precisa vir DEPOIS dos blocos acima na cascata (mesma especificidade,
   ordem no arquivo decide) pra vencer os valores novos. Remover só quando
   a Fase 2+ (Console/Workspace) for aprovada e --brand puder virar violeta
   de fato. */
:root {
  --bg-app: #0b0d10;
  --bg-side: #101317;
  --bg-card: #14181d;
  --bg-card-hover: #191e24;
  --border: #232830;
  --border-soft: #1a1e24;

  --ink: #f2f4f6;
  --ink-mute: #9aa4af;
  --ink-subtle: #5c6570;

  --brand: #3ec74e;
  --brand-dim: #1f7e34;
  --brand-bg: rgba(62, 199, 78, 0.12);

  --warn: #d4a53f;
  --warn-bg: rgba(212, 165, 63, 0.12);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

:root[data-theme="light"] {
  --bg-app: #f5f6f8;
  --bg-side: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f2f4;
  --border: #e1e4e8;
  --border-soft: #ebedf0;

  --ink: #14181d;
  --ink-mute: #5c6570;
  --ink-subtle: #8a929c;

  --brand: #2fa845;
  --brand-dim: #1f7e34;
  --brand-bg: rgba(47, 168, 69, 0.10);

  --warn: #a8791f;
  --warn-bg: rgba(168, 121, 31, 0.10);
}
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .app-sidebar,
:root[data-theme="light"] .card,
:root[data-theme="light"] .kpi-card,
:root[data-theme="light"] .ig-post,
:root[data-theme="light"] .conv-item {
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04);
}
:root[data-theme="light"] .dropdown-menu {
  box-shadow: 0 16px 34px rgba(20, 24, 29, 0.14);
}

/* Modal de edição de lead */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center; z-index: 100;
}
.modal-backdrop.active { display: flex; }
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  width: 420px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: 14px;
}
.modal-close { background: none; border: none; color: var(--ink-mute); font-size: 15px; cursor: pointer; }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 18px; }
.field-col { display: flex; flex-direction: column; }
.field-label { font-size: 11.5px; color: var(--ink-mute); margin: 10px 0 5px; }
.field-input, .field-select, .field-textarea {
  width: 100%; background: var(--bg-app); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 9px 11px; color: var(--ink); font-size: 13px; font-family: var(--font-sans);
}
.field-textarea { resize: vertical; min-height: 60px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-save { flex: 1; }
.config-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--ink-mute);
}
.config-row:last-child { border-bottom: none; }
.config-row b { color: var(--ink); font-weight: 700; }

.theme-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  background: var(--bg-app); font-size: 12px; color: var(--ink-mute); margin-bottom: 10px;
}
.theme-toggle:hover { color: var(--ink); border-color: rgba(62,199,78,0.3); }
.theme-toggle .ic { font-size: 13px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar fixa à esquerda (07/08 — voltou de propósito: a versão horizontal
   centralizada foi pedido explícito do Theylon em s111, mas "ficou muito
   ruim" no uso real. Cada grupo (Pediro Hub/Negócio/Anúncios/Gestão/Sistema)
   já abria/fechava inline via .dropdown/.is-open — isso nunca mudou, só o
   CONTAINER virou vertical de novo. goToView()/aplicarPermissoesUI() em
   app.js continuam batendo nos mesmos seletores/atributos ".nav-item"/
   ".dropdown", sem nenhuma mudança de JS além do alvo do toggle mobile
   (ver setupMobileNavToggle). */
.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky; top: 0;
  background: var(--bg-side);
  border-right: 1px solid var(--border-soft);
  padding: 16px 12px;
  overflow-y: auto;
  z-index: 80;
}
.app-content { flex: 1; min-width: 0; }

/* Barra fina só pro hamburguer no mobile (a sidebar vira drawer off-canvas
   abaixo de 900px — ver media query no fim do arquivo). Escondida no
   desktop, onde a sidebar já fica sempre visível. */
.mobile-topbar {
  display: none;
  position: sticky; top: 0; z-index: 70;
  align-items: center; gap: 10px;
  height: 56px; padding: 0 14px;
  background: var(--bg-side); border-bottom: 1px solid var(--border-soft);
}
.mobile-topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }

/* Fundo escurecido atrás do drawer mobile — clicar nele fecha (mesma ideia
   de qualquer off-canvas nav). Só existe/aparece <900px. */
.sidebar-backdrop { display: none; }

.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  cursor: pointer; border-radius: var(--r-sm);
  padding: 6px 8px; margin-bottom: 6px;
  transition: opacity var(--duration-fast, 120ms) var(--ease-standard, ease);
}
.topbar-brand:hover { opacity: 0.8; }
.topbar-brand .dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg);
}
.topbar-brand img {
  flex-shrink: 0; display: block;
}

/* Hamburguer — só aparece <900px, dentro do .mobile-topbar. */
.topbar-menu-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 32px; height: 32px; border-radius: var(--r-sm); flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-soft); cursor: pointer;
}
.topbar-menu-toggle:hover { border-color: rgba(62,199,78,0.3); }
.topbar-menu-bar {
  width: 15px; height: 2px; border-radius: 2px; background: var(--ink-mute);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.topbar-menu-toggle.is-open .topbar-menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar-menu-toggle.is-open .topbar-menu-bar:nth-child(2) { opacity: 0; }
.topbar-menu-toggle.is-open .topbar-menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav vertical — grupos em dropdown (Pediro Hub / Negócio / Anúncios /
   Gestão / Sistema), cada um clicável pra estender os itens de baixo
   (accordion inline) + item solto ("Visão geral"). */
.topbar-nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow-y: auto; margin-top: 6px;
}

/* Dropdown genérico — reusado pelos grupos de nav (accordion inline) E pelo
   menu de usuário (.topbar-user-menu sobrescreve pra voltar a ser flutuante
   — ver bloco próprio abaixo; ver setupDropdowns() em app.js, sem mudança). */
.dropdown { position: relative; }
.dropdown-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink-mute); background: transparent; cursor: pointer; white-space: nowrap;
}
.dropdown-trigger:hover { background: var(--bg-card-hover); color: var(--ink); }
.dropdown-trigger .care { font-size: 9px; opacity: 0.7; transition: transform 0.15s ease; }
.dropdown.has-active .dropdown-trigger { color: var(--brand); }
.dropdown.is-open .dropdown-trigger { background: var(--bg-card-hover); color: var(--ink); }
.dropdown.is-open .dropdown-trigger .care { transform: rotate(180deg); }

.dropdown-menu {
  display: none;
  position: static; transform: none;
  min-width: 0; z-index: auto;
  background: transparent; border: none; box-shadow: none;
  padding: 3px 0 3px 20px;
  flex-direction: column; gap: 2px;
}
.dropdown.is-open .dropdown-menu { display: flex; }
.dropdown-menu .nav-item { white-space: nowrap; }

/* Grupos de nav SEMPRE abertos (08/08 — pedido do Theylon: "tira o
   accordion, deixa tudo visível"). Escopado a .topbar-nav pra não afetar o
   menu de conta (.topbar-user-menu, no rodapé da sidebar, fora de
   .topbar-nav) — esse continua popup normal (abre/fecha no clique, ver
   setupDropdowns() em app.js). Especificidade de 2 classes
   (.topbar-nav .dropdown-menu) já vence a base ".dropdown-menu{display:none}"
   sem precisar de !important. Único controle que resta é ligar/desligar a
   SIDEBAR INTEIRA (mobile — ver .topbar-menu-toggle/.sidebar-backdrop). */
.topbar-nav .dropdown-menu { display: flex; }
.topbar-nav .dropdown-trigger { cursor: default; }
/* :not(.has-active) pra não apagar o destaque "você está aqui" (cor
   --brand/--brand-solid do .has-active, ver embaixo) quando o mouse passa
   por cima do rótulo do grupo ativo. */
.topbar-nav .dropdown:not(.has-active) .dropdown-trigger:hover { background: transparent; color: var(--ink-mute); }
.topbar-nav .dropdown-trigger .care { display: none; }

.sidebar-bottom {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px;
}

/* Avatar do usuário — trigger continua só o círculo, mas o menu (nome/
   papel/tema/logout) precisa voltar a ser POPUP flutuante, não accordion
   inline como os grupos de nav (não faz sentido empurrar o resto da
   sidebar pra baixo por causa do menu de conta). Abre pra CIMA (bottom:
   100%) porque nasce no rodapé da sidebar, sem espaço abaixo. */
.topbar-user-trigger { width: auto; padding: 2px; border-radius: 50%; justify-content: center; }
.topbar-user-menu {
  display: none;
  position: absolute; bottom: calc(100% + 8px); left: 0; right: auto; top: auto; transform: none;
  min-width: 240px; z-index: 90;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 6px;
  box-shadow: 0 -16px 34px rgba(0,0,0,0.35);
  flex-direction: column; gap: 2px;
}
.dropdown.is-open .topbar-user-menu { display: flex; }

/* "Painel" - link discreto (nao faixa colorida) pra owner/socio voltarem
   ao console quando estao dentro do workspace de um cliente. Estilo
   pedido pelo Theylon (referencia: sidebar do sistema de delivery dele) -
   pequeno, cinza, sem cor de destaque. */
.side-voltar-painel {
  display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box;
  font-size: 12px; color: var(--ink-mute); padding: 6px 10px; margin-bottom: 4px;
  cursor: pointer; border-radius: var(--r-sm); white-space: nowrap;
}
.side-voltar-painel:hover { color: var(--ink); background: var(--bg-card-hover); }
.side-voltar-painel .ic { font-size: 12px; }

/* Tela de transicao ao "entrar no painel" de um cliente - mesma logica de
   qualquer app polido (Slack, Linear): transicao breve e deliberada, nao
   finge esperar rede que ja carregou. */
.workspace-loading-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg-app);
  z-index: 999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}
.workspace-loading-overlay.visivel { display: flex; }
.workspace-loading-overlay .dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-bg); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--brand);
  border: 1px solid rgba(62,199,78,0.3);
}
.workspace-loading-overlay .spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-soft); border-top-color: var(--brand);
  animation: girar 0.8s linear infinite;
}
.workspace-loading-overlay .rotulo {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle);
}
@keyframes girar { to { transform: rotate(360deg); } }

.side-cliente {
  display: block; width: 100%; box-sizing: border-box;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand); background: var(--brand-bg); border: 1px solid rgba(62,199,78,0.25);
  border-radius: var(--r-sm); padding: 5px 9px; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Card de "receita do mês" — voltou a viver fixo no rodapé da sidebar
   (07/08, junto com o resto da nav voltando a ser vertical). Largura cheia
   agora que tem a coluna inteira da sidebar, não só o espaço de uma pill
   espremida na topbar — por isso ".side-meta-falta" ("faltam RX") volta a
   aparecer, tem espaço de sobra. */
.side-meta-card {
  display: flex; align-items: center; gap: 8px; cursor: pointer; width: 100%;
  box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 8px 12px;
}
.side-meta-card:hover { border-color: rgba(62,199,78,0.3); }
.side-meta-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); white-space: nowrap; }
.side-meta-value { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.side-meta-value span { font-size: 10.5px; font-weight: 500; color: var(--ink-subtle); }
.side-meta-bar {
  display: block; width: 34px; height: 4px; flex-shrink: 0;
  background: var(--bg-card-hover); border-radius: 999px; overflow: hidden;
}
.side-meta-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.side-meta-falta { font-size: 10px; color: var(--ink-subtle); white-space: nowrap; margin-left: auto; }

/* Usuário — avatar abre o dropdown com nome/papel/status/logout/rodapé
   (mesmo componente .dropdown dos grupos de nav, ver acima). */
.side-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; }
.side-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; border: 1px solid rgba(62,199,78,0.3);
}
.side-user-name { font-size: 13px; font-weight: 700; }
.side-user-role { font-size: 11px; color: var(--ink-subtle); }
.side-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-mute); padding: 8px 6px;
  border-top: 1px solid var(--border-soft);
}
.side-status .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.side-logout {
  font-size: 12.5px; color: var(--ink-subtle); cursor: pointer;
  padding: 10px 6px 4px;
}
.side-logout:hover { color: var(--danger); }
.side-footer {
  font-size: 10px; color: var(--ink-subtle); line-height: 1.4;
  border-top: 1px solid var(--border-soft); padding: 8px 6px 2px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-mute);
  cursor: pointer; border: 1px solid transparent;
}
.nav-item:hover { background: var(--bg-card-hover); color: var(--ink); }
.nav-item.active {
  background: var(--brand-bg); color: var(--brand);
  border-color: rgba(62,199,78,0.25);
  font-weight: 600;
}
.nav-item .ic { width: 16px; text-align: center; opacity: 0.9; }

/* Abas de canal */
.canal-tabs { display: flex; gap: 8px; margin-top: 14px; }
.canal-tab {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--ink-mute);
}
.canal-tab:hover { color: var(--ink); }
.canal-tab.active { background: var(--brand-bg); border-color: rgba(62,199,78,0.3); color: var(--brand); }

/* Conversas — master-detail */
.conv-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.conv-list-card { padding: 8px; max-height: 72vh; overflow-y: auto; }
.conv-detail-card { min-height: 72vh; max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; }
.conv-detail-empty { margin: auto; color: var(--ink-subtle); font-size: 13px; }

.conv-list { display: flex; flex-direction: column; gap: 2px; }
.conv-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent;
}
.conv-item:hover { background: var(--bg-card-hover); }
.conv-item.active { background: var(--brand-bg); border-color: rgba(62,199,78,0.25); }
.conv-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-app); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--ink-mute);
}
.conv-body { flex: 1; min-width: 0; }
.conv-tel-row { display: flex; align-items: center; gap: 6px; }
.conv-tel { font-size: 13px; font-weight: 700; }
.conv-nome { font-size: 11px; color: var(--brand); }
.conv-preview { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--bg-app); border: 1px solid var(--border-soft); color: var(--ink-subtle); flex-shrink: 0; }
.conv-tag.cliente { color: var(--brand); background: var(--brand-bg); border-color: rgba(62,199,78,0.25); }

/* Painel de leitura — visual autêntico WhatsApp (paleta oficial modo escuro) */
.conv-detail-card { padding: 0; overflow: hidden; }
.conv-detail-head {
  padding: 12px 18px; background: #202c33; border-bottom: 1px solid #131c21;
  display: flex; align-items: center; gap: 12px;
}
.conv-detail-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #2a3942;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #8696a0;
}
.conv-detail-tel { font-weight: 700; font-size: 14.5px; color: #e9edef; }
.conv-detail-sub { font-size: 12px; color: #8696a0; margin-top: 1px; }
.conv-thread {
  padding: 18px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1;
  background-color: #0b141a;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.015) 0%, transparent 40%),
                     radial-gradient(circle at 80% 70%, rgba(255,255,255,0.015) 0%, transparent 40%);
}
.msg-row { display: flex; margin: 3px 0; }
.msg-row.human { justify-content: flex-start; }
.msg-row.ai { justify-content: flex-end; }
.msg-bubble {
  max-width: 65%; padding: 7px 10px 9px; border-radius: 8px; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.msg-bubble.human { background: #202c33; color: #e9edef; border-top-left-radius: 2px; }
.msg-bubble.ai { background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
.msg-time { font-size: 10px; color: rgba(233,237,239,0.5); margin-top: 3px; text-align: right; }
.conv-detail-empty { color: var(--ink-subtle); font-size: 13px; }

@media (max-width: 1100px) {
  .conv-layout { grid-template-columns: 1fr; }
}

/* Main */
.main { padding: 26px 32px 60px; overflow-x: hidden; }

.view { display: none; }
.view.active { display: block; }

.view-header { margin-bottom: 20px; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 4px;
}
.view-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.view-sub { color: var(--ink-mute); font-size: 13.5px; margin-top: 4px; }

.proto-banner {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--warn); background: var(--warn-bg);
  border: 1px solid rgba(212,165,63,0.3);
  padding: 4px 10px; border-radius: 999px; margin-top: 10px;
}

.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
.kpi-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.kpi-ic-brand { background: var(--brand-bg); color: var(--brand); }
.kpi-ic-warn { background: var(--warn-bg); color: var(--warn); }
.kpi-ring {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--border-soft); border-top-color: var(--brand);
  border-right-color: var(--brand);
}
.kpi-num { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.kpi-label { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }
.kpi-sub { font-size: 11px; color: var(--ink-subtle); margin-top: 6px; }

/* Bloco de saudação / relógio */
.greet-block {
  text-align: center; padding: 46px 20px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.greet-icon { font-size: 26px; margin-bottom: 6px; }
.greet-hello { font-size: 20px; font-weight: 700; }
.ink-brand { color: var(--brand); }
.greet-sub { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; }
.greet-clock {
  font-size: 64px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.greet-date { font-size: 13px; color: var(--ink-mute); margin-top: 10px; margin-bottom: 26px; }
.greet-progress { width: 100%; max-width: 440px; }
.greet-progress-head {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-mute); margin-bottom: 8px;
}
.greet-progress-bar {
  height: 6px; background: var(--bg-card-hover); border-radius: 999px; overflow: hidden;
}
.greet-progress-fill { height: 100%; background: var(--brand); border-radius: 999px; }

/* Linha inferior: 3 colunas */
.bottom-row {
  display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 16px;
}
.card-title { font-weight: 700; font-size: 14px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.card-link { font-size: 12px; color: var(--ink-mute); cursor: pointer; }
.card-link:hover { color: var(--brand); }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.quick-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card-hover); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 14px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.quick-btn:hover { border-color: rgba(62,199,78,0.3); color: var(--brand); }

.activity-list { display: flex; flex-direction: column; gap: 4px; }
.activity-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--border-soft);
}
.activity-item:last-child { border-bottom: none; }
.activity-item .ic {
  width: 26px; height: 26px; border-radius: 8px; background: var(--bg-card-hover);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.activity-item > div:nth-child(2) { flex: 1; min-width: 0; }
.activity-title { font-size: 12.5px; font-weight: 600; }
.activity-sub { font-size: 11px; color: var(--ink-subtle); }
.activity-time { font-size: 10.5px; color: var(--ink-subtle); flex-shrink: 0; }

.assistant-card { display: flex; flex-direction: column; }
.assistant-suggestions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.assistant-suggestion {
  text-align: left; background: var(--bg-card-hover); border: 1px solid var(--border-soft);
  color: var(--ink-mute); border-radius: var(--r-sm); padding: 9px 10px; font-size: 12px;
  font-family: var(--font-sans); cursor: pointer;
}
.assistant-suggestion:hover { border-color: rgba(62,199,78,0.3); color: var(--ink); }
.assistant-reply {
  flex: 1; overflow-y: auto; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute);
  white-space: pre-wrap; margin-bottom: 8px;
}
.assistant-reply.err { color: var(--danger); }
.assistant-input-row { display: flex; gap: 8px; margin-top: auto; }
.assistant-input {
  flex: 1; background: var(--bg-app); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 9px 10px; color: var(--ink); font-size: 12.5px;
  font-family: var(--font-sans);
}
.assistant-send {
  /* texto escuro pra contraste sobre --brand (verde) */
  background: var(--brand); color: #08130a; border: none; border-radius: var(--r-sm);
  padding: 9px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.assistant-send:disabled { opacity: 0.6; cursor: not-allowed; }
.assistant-note { font-size: 10.5px; color: var(--ink-subtle); margin-top: 8px; text-align: center; }

/* Nova conta: tiles de "tipo de conta" (Owner/Sócio/Equipe/Lojista, s110) -
   mesma linguagem visual da tela de cadastro do app Pediro (referência
   trazida pelo Theylon: tiles arredondados escuros, ícone em cima do
   rótulo, destaque sutil no selecionado). */
.tipo-conta-grid {
  display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 10px;
}
.tipo-conta-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 104px;
  background: var(--bg-app); border: 1.5px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 16px 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-mute);
  transition: border-color .12s, background .12s, color .12s, transform .12s, box-shadow .12s;
}
.tipo-conta-tile:hover {
  background: var(--bg-card-hover); color: var(--ink); border-color: var(--border-strong);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
/* Ícone: violeta institucional por padrão (Owner) - escala --brand-* nunca
   congelada, ver bloco "Console (Owner)" no fim do arquivo. Sócio/Lojista
   ganham acento próprio (--info/--warn); Equipe fica neutro. --client-accent
   nunca aparece aqui de propósito (é identidade do Operador/lojista). */
.tipo-conta-tile .ic {
  width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--brand-solid); background: rgba(111, 92, 246, 0.14);
}
.tipo-conta-tile.active { border-color: var(--brand-border); background: rgba(111, 92, 246, 0.1); color: var(--ink); }
.tipo-conta-tile[data-tipo="socio"] .ic { color: var(--info); background: var(--info-bg); }
.tipo-conta-tile[data-tipo="socio"].active { border-color: var(--info-border); background: var(--info-bg); }
.tipo-conta-tile[data-tipo="equipe"] .ic { color: var(--ink-mute); background: var(--bg-card-hover); }
.tipo-conta-tile[data-tipo="equipe"].active { border-color: var(--border-strong); background: var(--bg-card-hover); }
.tipo-conta-tile[data-tipo="lojista"] .ic { color: var(--warn); background: var(--warn-bg); }
.tipo-conta-tile[data-tipo="lojista"].active { border-color: var(--warn-border); background: var(--warn-bg); }
@media (max-width: 560px) {
  .tipo-conta-grid { grid-template-columns: repeat(2, 1fr); }
  .tipo-conta-tile { min-height: 92px; }
}

@media (max-width: 1100px) {
  .bottom-row { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 20px;
}

.placeholder-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 40px 28px; text-align: left;
}
.placeholder-card h3 { margin: 0; font-size: 16px; }
.placeholder-card p { margin: 0; color: var(--ink-mute); font-size: 13.5px; max-width: 480px; }

/* Funil kanban */
.funil-grid {
  display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.funil-col {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-app); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  max-height: 74vh;
}
.funil-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  padding: 12px 12px 10px; border-bottom: 3px solid var(--kanban-cor, var(--border));
  border-radius: var(--r-md) var(--r-md) 0 0; flex-shrink: 0;
}
.funil-col-head .n {
  color: var(--ink); font-weight: 800; font-size: 11px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  padding: 1px 8px; border-radius: 999px;
}
.funil-col-body {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  overflow-y: auto; flex: 1; transition: background 0.1s;
}
.funil-col-body.drag-over { background: var(--brand-bg); }
.kpi-card[data-view] { cursor: pointer; }
.kpi-card[data-view]:hover { border-color: rgba(62,199,78,0.35); }
.lead-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--kanban-cor, var(--brand));
  border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: grab; transition: transform 0.1s, box-shadow 0.1s;
}
.lead-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); border-color: var(--kanban-cor, var(--brand)); }
.lead-nome { font-size: 13px; font-weight: 700; }
.lead-carro { font-size: 12px; color: var(--ink-mute); }
.lead-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 10.5px; color: var(--ink-subtle);
}
.pill {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-card-hover); border: 1px solid var(--border-soft);
}
.funil-col-empty { padding: 16px 10px; text-align: center; font-size: 12px; color: var(--ink-subtle); }

/* Instagram — perfil real, gerador de conteúdo, métricas (inspirado no
   padrão MazyoHub: header de perfil autêntico, chat+preview no gerador,
   grid de charts nas métricas) */
.ig-pane { display: none; }
.ig-pane.active { display: block; }

/* Perfil */
.ig-profile-header { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.ig-avatar-ring {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; padding: 3px;
  background: conic-gradient(from 225deg, #ffdb8b, #ee2a7b, #6228d7, #ffdb8b);
}
.ig-avatar-ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--bg-app); display: block;
}
.ig-profile-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ig-username { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.ig-verified { color: #3897f0; }
.ig-btn-outline {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-sm);
  background: var(--bg-app); border: 1px solid var(--border-soft); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.ig-btn-outline:hover { border-color: rgba(62,199,78,0.35); color: var(--brand); }
.ig-profile-stats-row { display: flex; gap: 22px; margin-top: 12px; font-size: 13.5px; color: var(--ink-mute); }
.ig-profile-stats-row b { color: var(--ink); font-weight: 800; }
.ig-profile-bio { margin-top: 10px; font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
.ig-profile-bio b { color: var(--ink); }
.ig-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-bg); color: var(--brand); border: 1px solid rgba(62,199,78,0.3);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.ig-subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.ig-subtab {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-subtle); background: none; border: none;
  cursor: pointer; padding: 10px 2px; border-bottom: 2px solid transparent;
}
.ig-subtab:hover { color: var(--ink-mute); }
.ig-subtab.active { color: var(--ink); border-bottom-color: var(--brand); }

.ig-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.ig-search-input {
  flex: 1; background: var(--bg-app); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 9px 12px; color: var(--ink); font-size: 13px; font-family: var(--font-sans);
}
.ig-filter-pills { display: flex; gap: 6px; flex-shrink: 0; }
.ig-filter-pill {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--bg-app); border: 1px solid var(--border-soft); color: var(--ink-mute);
}
.ig-filter-pill:hover { color: var(--ink); }
.ig-filter-pill.active { background: var(--brand-bg); border-color: rgba(62,199,78,0.3); color: var(--brand); }

.ig-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px;
}
.ig-post {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-soft); cursor: pointer;
}
.ig-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-post-play {
  position: absolute; top: 8px; right: 8px; color: #fff; font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.ig-post-stats {
  position: absolute; inset: auto 0 0 0; padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-size: 11px; color: #fff; display: flex; gap: 10px;
}

/* Gerador de conteúdo — layout chat + preview, igual ao módulo de referência */
.ig-tipo-tabs { display: flex; gap: 8px; }
.ig-tipo {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  background: var(--bg-app); border: 1px solid var(--border-soft); color: var(--ink-mute);
}
.ig-tipo:hover { color: var(--ink); }
.ig-tipo.active { background: var(--brand-bg); border-color: rgba(62,199,78,0.3); color: var(--brand); }

.ig-gerador-layout { display: grid; grid-template-columns: 400px 1fr; gap: 16px; align-items: start; }
.ig-gerador-panel { display: flex; flex-direction: column; gap: 12px; }
.ig-gerador-hint { font-size: 12px; color: var(--ink-subtle); line-height: 1.5; }
.ig-gerador-preview {
  min-height: 480px; display: flex; flex-direction: column;
}
.ig-preview-empty {
  margin: auto; text-align: center; color: var(--ink-subtle); max-width: 260px;
}
.ig-preview-empty .ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand-bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px;
}
.ig-preview-empty .t { font-weight: 700; font-size: 14px; color: var(--ink-mute); margin-bottom: 6px; }
.ig-preview-empty .s { font-size: 12px; line-height: 1.5; }
/* Variante de erro reaproveitando o mesmo bloco de estado vazio (Google Ads
   reconexão, etc) - Workspace v1.2, s112 08/08. */
.ig-preview-empty.is-danger .ic { background: var(--danger-bg); color: var(--danger); }

.ig-result-block { margin-bottom: 18px; }
.ig-result-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 6px;
}
.ig-result-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.ig-slide-item {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.ig-slide-item:last-child { border-bottom: none; }
.ig-slide-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-app);
  border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--ink-mute);
}

@media (max-width: 1100px) {
  .ig-gerador-layout { grid-template-columns: 1fr; }
}

/* Métricas — cards + charts SVG hand-rolled (zero deps) */
.ig-metricas-note {
  font-size: 12px; color: var(--ink-mute); background: var(--bg-app); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 18px; line-height: 1.5;
}
.ig-metricas-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 20px 0; align-items: stretch; }
.ig-chart-card { min-height: 220px; }
.ig-chart-title { font-size: 12px; font-weight: 700; color: var(--ink-mute); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.ig-donut-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 12.5px; }
.ig-donut-legend-item { display: flex; align-items: center; gap: 8px; }
.ig-donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ig-donut-legend-item b { margin-left: auto; color: var(--ink); }
.ig-bar-row { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.ig-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.ig-bar {
  width: 100%; max-width: 34px; background: var(--brand); border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.ig-bar-label { font-size: 10.5px; color: var(--ink-subtle); flex-shrink: 0; }

.ig-metrica-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ig-metrica-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--r-sm); background: var(--bg-app); border: 1px solid var(--border-soft);
}
.ig-metrica-thumb {
  width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0;
  background: var(--bg-card);
}
.ig-metrica-rank {
  width: 22px; flex-shrink: 0; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink-subtle);
}
.ig-metrica-caption { font-size: 12.5px; color: var(--ink-mute); flex: 1; }
.ig-metrica-nums { font-size: 12px; color: var(--ink-subtle); white-space: nowrap; }

.chat-dock {
  position: fixed; right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  /* texto escuro pra contraste sobre --brand (verde) */
  background: var(--brand); color: #08130a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

@media (max-width: 900px) {
  /* Sidebar vira drawer off-canvas (07/08) — mesmo padrão já usado no
     Console/Operador (Brand Kit). Fechada por padrão (translateX -100%),
     aberta pelo hamburguer do .mobile-topbar (setupMobileNavToggle em
     app.js agora alvo #app-sidebar, não mais #topbar-nav). */
  .mobile-topbar { display: flex; }
  .topbar-menu-toggle { display: flex; }
  .app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 85;
    width: min(84vw, var(--sidebar-width));
    transform: translateX(-100%);
    transition: transform var(--duration-normal, 220ms) var(--ease-standard, ease);
  }
  .app-sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 44px rgba(0,0,0,0.35); }
  .sidebar-backdrop.is-open {
    display: block; position: fixed; inset: 0; z-index: 84;
    background: var(--bg-overlay, rgba(0,0,0,0.55)); border: 0; padding: 0; cursor: pointer;
  }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .funil-grid { grid-template-columns: repeat(6, 220px); }
}

/* ════════════════════════════════════════════════════════════════════════
   Console (Owner) — reskin s110-B: Clientes / Auditoria / Suporte / Contas.

   Identidade violeta institucional do Pediro: --brand-50..900, --brand-hover,
   --brand-active, --brand-solid, --brand-solid-hover, --brand-border,
   --on-brand — essa escala NUNCA foi congelada pela "COMPAT FASE 1" lá em
   cima (só --brand/--brand-bg foram, e continuam verdes pro resto do
   produto até a Fase 4 do plano de migração ser aprovada). Por isso os
   componentes abaixo usam --brand-solid/--brand-border direto, nunca
   --brand/--brand-bg. --client-accent também não aparece aqui de propósito
   — é identidade do Operador/lojista, não do Console.
   Ver _docs/migracao_design_system.md. ═══════════════════════════════════ */

/* Painel base (como .card, mas com overflow controlado p/ header+tabela) */
.console-panel {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xs); overflow: hidden;
}
.console-panel-head {
  padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.console-panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.console-panel-head p { margin: 3px 0 0; font-size: 11px; color: var(--ink-subtle); }

/* Estados: carregando / vazio / erro */
.console-empty { padding: 40px 20px; text-align: center; color: var(--ink-subtle); font-size: 12.5px; }
.console-state-error {
  padding: 14px 16px; border-radius: var(--r-md); font-size: 12.5px;
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
}

/* Badge de status semântico - nunca cor solta, sempre par cor+fundo+borda */
.console-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.console-badge.is-neutral { color: var(--ink-mute); background: var(--bg-card-hover); border-color: var(--border-soft); }
.console-badge.is-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.console-badge.is-warn    { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.console-badge.is-danger  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.console-badge.is-info    { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.console-badge.is-brand   { color: var(--brand-solid); background: rgba(111, 92, 246, 0.14); border-color: var(--brand-border); }

/* Avatar circular por iniciais - usado em Clientes/Auditoria/Contas */
.console-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: var(--bg-card-hover); border: 1px solid var(--border-soft);
}
.console-avatar.is-brand { background: rgba(111, 92, 246, 0.14); border-color: var(--brand-border); color: var(--brand-solid); }
.console-avatar.is-sm { width: 27px; height: 27px; font-size: 9.5px; }

/* Entidade (avatar + nome + linha secundária) */
.console-entity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.console-entity-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.console-entity-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-entity-sub { font-size: 11px; color: var(--ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.console-mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-subtle); }

/* Botão - primário usa a escala violeta institucional (Console = Pediro) */
.console-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 14px; border-radius: var(--r-md);
  font-size: 11.5px; font-weight: 700; font-family: var(--font-sans);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.console-btn.is-sm { min-height: 27px; padding: 0 10px; font-size: 10.5px; }
.console-btn.is-primary { background: var(--brand-solid); color: var(--on-brand); }
.console-btn.is-primary:hover { background: var(--brand-solid-hover); }
.console-btn.is-secondary { background: var(--bg-card-hover); border-color: var(--border); color: var(--ink-mute); }
.console-btn.is-secondary:hover { border-color: var(--border-strong); color: var(--ink); }
.console-btn.is-ghost { background: transparent; border-color: var(--border-soft); color: var(--ink-mute); }
.console-btn.is-ghost:hover { color: var(--ink); border-color: var(--border-strong); }
.console-btn.is-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.console-btn.is-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.console-btn:disabled { opacity: .5; cursor: not-allowed; }
.console-btn.full-width { width: 100%; }

/* Editar/desativar conta (07/08) - varias acoes por linha da tabela de
   Contas, empilha em telas estreitas em vez de estourar a coluna. */
.console-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Segredo revelado (senha provisória) - mono, acento violeta */
.console-secret {
  display: inline-flex; align-items: center; margin-top: 4px;
  padding: 5px 10px; border-radius: var(--r-sm); font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(111, 92, 246, 0.14); border: 1px solid var(--brand-border); color: var(--brand-solid);
  user-select: all;
}

/* Tabela densa (Clientes/Auditoria/Contas) - linhas por grid, sem <table> */
.console-table-wrap { overflow-x: auto; }
.console-table-head, .console-table-row {
  display: grid; align-items: center; gap: 12px; width: 100%;
}
.console-table-head {
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  color: var(--ink-subtle); font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.console-table-row {
  padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent; background: transparent; text-align: left;
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); cursor: default;
}
.console-table-row:last-child { border-bottom: 0; }
.console-table-row.is-clickable { cursor: pointer; }
.console-table-row.is-clickable:hover { background: var(--bg-card-hover); }
.console-table-row.is-selected { background: var(--bg-card-hover); border-left-color: var(--brand-solid); }

.cols-clientes  { grid-template-columns: minmax(180px, 1.6fr) 100px 90px 24px; }
.cols-auditoria { grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) 130px 100px; }
.cols-contas    { grid-template-columns: minmax(170px, 1.4fr) 92px minmax(90px, .8fr) 96px minmax(260px, auto); }
/* Início do Console (Fase 9) - lista compacta de clientes: nome, os 2
   números que só existem pra quem tem funil anexado com certeza (ver
   routes/visao-geral.js), status. */
.cols-visao-clientes { grid-template-columns: minmax(180px, 1.6fr) 130px 140px 90px; }

@media (max-width: 720px) {
  .console-table-head.cols-clientes, .console-table-row.cols-clientes { min-width: 480px; }
  .console-table-head.cols-auditoria, .console-table-row.cols-auditoria { min-width: 600px; }
  .console-table-head.cols-contas, .console-table-row.cols-contas { min-width: 760px; }
  .console-table-head.cols-visao-clientes, .console-table-row.cols-visao-clientes { min-width: 540px; }
}

/* Clientes: lista (esquerda) + detalhe do selecionado (direita/abaixo) */
.console-clients-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr); gap: 14px; align-items: start; }
.console-detail-body { padding: 18px; }
.console-detail-body h4 { margin: 10px 0 0; font-size: 16px; font-weight: 700; }
.console-detail-list { margin: 14px 0 0; display: flex; flex-direction: column; }
.console-detail-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 11.5px; }
.console-detail-list > div:last-child { border-bottom: 0; }
.console-detail-list > div > span:first-child { color: var(--ink-subtle); }
.console-detail-actions { padding: 14px 18px; border-top: 1px solid var(--border-soft); display: grid; gap: 8px; }

@media (max-width: 900px) {
  .console-clients-layout { grid-template-columns: 1fr; }
}

/* Suporte admin: lista vertical de tickets, acento de 3px pelo status */
.console-tickets { display: flex; flex-direction: column; gap: 10px; }
.console-ticket {
  background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.console-ticket.is-aberto { border-left-color: var(--danger); }
.console-ticket.is-em_andamento { border-left-color: var(--warn); }
.console-ticket.is-resolvido { border-left-color: var(--success); }
.console-ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.console-ticket-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.console-ticket-meta { font-size: 10.5px; color: var(--ink-subtle); margin-top: 2px; }
.console-ticket-msg { margin: 12px 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-card-hover); font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.console-ticket-composer { display: flex; flex-direction: column; gap: 8px; }
.console-ticket-composer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .console-ticket-head { flex-direction: column; }
}

/* Contas: linha de resultado do reset de senha (abaixo da linha da tabela) */
.console-reset-msg { padding: 4px 16px 12px; font-size: 11px; color: var(--ink-subtle); border-bottom: 1px solid var(--border-soft); }

/* ════════════════════════════════════════════════════════════════════════
   Workspace v1.2 (Brand Kit) — reskin das 13 telas reais do painel do
   cliente: Visão Geral, CRM, Conversas, Meu Site, Instagram, Google Ads,
   Meta Ads, Financeiro, Agenda, Assistente, Configurações, Suporte,
   Meus Dados. Fonte: Brand Kit/_extracted_workspace/PediroHub_Workspace_v1_2/
   (protótipo + Specs). Ver _docs/migracao_design_system.md, Fase 7.

   Princípio #1 da Spec: "o workspace pertence visualmente ao cliente" —
   --client-accent-*, nunca --brand-*/--brand-bg puros. index.html marca
   <body data-client-theme="ramarc"> pra essa escala resolver pro verde real
   da Ramarc (ver bloco [data-client-theme="ramarc"] no topo do arquivo).

   Problema real de arquitetura resolvido aqui: várias classes genéricas
   (.card, .kpi-card, .assistant-send, .eyebrow, .funil-*, .conv-*, .ig-*...)
   já existiam ANTES desta fase e são compartilhadas com o Console (ex:
   #view-contas usa .card/.assistant-send no formulário "nova conta") e com
   telas fora de escopo desta tarefa. Renomear essas classes seria arriscado
   (várias são usadas funcionalmente por querySelectorAll em app.js — drag
   and drop do kanban, tabs, dedup de listeners). Em vez disso: cada
   <section id="view-*"> das 13 telas do Workspace ganhou a classe adicional
   ".workspace-view" (só marcação, .view/.active continuam intactos — ver
   goToView() em app.js) e as regras abaixo SÓ atuam dentro desse escopo —
   zero risco de vazar pro Console ou pra qualquer outra tela. ═══════════ */

/* ── Painéis: bump pro raio/sombra da Spec (--r-xl + --shadow-xs) sem
   quebrar o .card/.kpi-card usados também no Console (override só aqui). */
.workspace-view .card,
.workspace-view .kpi-card {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
}

/* ── Eyebrow (rótulo pequeno acima do título de cada view) */
.workspace-view .eyebrow { color: var(--client-accent); }

/* ── KPIs (Visão Geral, Google Ads, Meta Ads, Financeiro, Instagram, Meu Site) */
.workspace-view .kpi-ic-brand { background: var(--client-accent-bg); color: var(--client-accent-solid); }
.workspace-view .kpi-ring { border-top-color: var(--client-accent-solid); border-right-color: var(--client-accent-solid); }
.workspace-view .kpi-card[data-view]:hover { border-color: var(--client-accent-border); }

/* ── Saudação / relógio (Visão Geral) */
.workspace-view .ink-brand { color: var(--client-accent); }
.workspace-view .greet-progress-fill { background: var(--client-accent-solid); }

/* ── Ações rápidas / links de card (Visão Geral) */
.workspace-view .card-link:hover { color: var(--client-accent); }
.workspace-view .quick-btn:hover { border-color: var(--client-accent-border); color: var(--client-accent); }

/* ── Assistente (widget da Visão Geral + tela cheia) */
.workspace-view .assistant-suggestion:hover { border-color: var(--client-accent-border); color: var(--ink); }
.workspace-view .assistant-send {
  background: var(--client-accent-solid); color: var(--on-client-accent);
}
.workspace-view .assistant-send:hover { background: var(--client-accent-hover); }
.workspace-view .assistant-send:disabled:hover { background: var(--client-accent-solid); }

/* ── CRM (kanban) — spec §5 pede raio de painel maior nas colunas (o resto
   do kanban já estava bem desenhado, ver comentário original em .funil-*). */
.workspace-view .funil-col { border-radius: var(--r-lg); }
.workspace-view .funil-col-body.drag-over { background: var(--client-accent-bg); }
.workspace-view .lead-card { border-left-color: var(--kanban-cor, var(--client-accent-solid)); }
.workspace-view .lead-card:hover { border-color: var(--kanban-cor, var(--client-accent-solid)); }

/* ── Conversas */
.workspace-view .canal-tab.active { background: var(--client-accent-bg); border-color: var(--client-accent-border); color: var(--client-accent); }
.workspace-view .conv-item.active { background: var(--client-accent-bg); border-color: var(--client-accent-border); }
.workspace-view .conv-nome { color: var(--client-accent); }
.workspace-view .conv-tag.cliente { color: var(--client-accent); background: var(--client-accent-bg); border-color: var(--client-accent-border); }
/* .msg-bubble.ai já usa o verde autêntico do WhatsApp (#005c4b) de propósito
   — não é --brand nem --client-accent, é a paleta oficial do produto que a
   bolha representa (ver comentário original acima, "visual autêntico
   WhatsApp"). Fora do escopo desta reskin. */

/* ── Instagram */
.workspace-view .ig-btn-outline:hover { border-color: var(--client-accent-border); color: var(--client-accent); }
.workspace-view .ig-badge { background: var(--client-accent-bg); color: var(--client-accent); border: 1px solid var(--client-accent-border); }
.workspace-view .ig-subtab.active { border-bottom-color: var(--client-accent); }
.workspace-view .ig-filter-pill.active,
.workspace-view .ig-tipo.active { background: var(--client-accent-bg); border-color: var(--client-accent-border); color: var(--client-accent); }
.workspace-view .ig-preview-empty .ic { background: var(--client-accent-bg); color: var(--client-accent); }
.workspace-view .ig-result-label { color: var(--client-accent); }
.workspace-view .ig-bar { background: var(--client-accent-solid); }

/* ── Badge genérico (Spec §3: altura mín 20px, r-pill, uppercase, sempre
   texto+cor+fundo+borda) — usado nos estados de integração (Google Ads
   "Reconexão necessária", Meta Ads "Sincronizado"), Financeiro ("Configurar"
   taxa) e qualquer status pontual novo dentro do Workspace. Variante
   ".is-client" é a única com acento do tenant; as demais são semânticas
   (sucesso/aviso/erro/info) e reaproveitam os mesmos pares de token que
   .console-badge já usa no Console — cores idênticas, não é duplicação de
   decisão de design, só de escopo de classe (ver comentário no topo desta
   seção sobre por que não reusar .console-badge direto aqui). */
.workspace-view .badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  min-height: 20px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.workspace-view .badge.is-neutral { color: var(--ink-mute); background: var(--bg-card-hover); border-color: var(--border-soft); }
.workspace-view .badge.is-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.workspace-view .badge.is-warn    { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.workspace-view .badge.is-danger  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.workspace-view .badge.is-info    { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.workspace-view .badge.is-client  { color: var(--client-accent); background: var(--client-accent-bg); border-color: var(--client-accent-border); }

/* ── Cabeçalho de view com badge de status ao lado do título (Google Ads,
   Meta Ads, Meu Site — Spec §9/§10: "estado atual" tem que ser visível de
   cara, não só depois de ler o corpo do painel). */
.workspace-view .view-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Tabela (Financeiro: comissão por loja, despesas). Reaproveita o padrão
   .table do protótipo mapeado pros tokens reais — sem <table> global no
   projeto ainda, então nasce escopada ao Workspace de propósito. */
.workspace-view .ws-table-wrap { overflow-x: auto; }
.workspace-view .ws-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.workspace-view .ws-table th, .workspace-view .ws-table td { padding: 10px 12px; text-align: left; }
.workspace-view .ws-table thead th {
  color: var(--ink-subtle); font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid var(--border-soft);
}
.workspace-view .ws-table tbody tr { border-top: 1px solid var(--border-soft); }
.workspace-view .ws-table tbody tr:first-child { border-top: 0; }
.workspace-view .ws-table-empty { padding: 16px 12px; color: var(--ink-subtle); }
/* .money-pos/.money-neg/.is-configure não ficam presas a .ws-table: também
   aparecem no .kpi-num do "resultado estimado" (Financeiro) fora de tabela. */
.workspace-view .money-pos { color: var(--success); }
.workspace-view .money-neg { color: var(--danger); }
.workspace-view .is-configure { color: var(--warn); font-weight: 700; }

/* ── Alerta de painel (Financeiro: "lojas sem taxa configurada" — Spec §11,
   sempre no topo, acionável). Mesmo par de token do .badge.is-warn, em
   formato de faixa em vez de pill. */
.workspace-view .ws-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--r-lg);
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn);
}
.workspace-view .ws-alert b { font-size: 12.5px; color: var(--ink); display: block; }
.workspace-view .ws-alert small { display: block; color: var(--ink-mute); font-size: 11px; margin-top: 2px; }

/* ── Agenda: ênfase proporcional a dias parado (Spec §12: "dias_no_status
   define ênfase; períodos muito longos usam --danger"). .is-mild é o
   estágio intermediário (ainda não crítico, já não é recente). */
.workspace-view .visit-days { font-size: 11px; color: var(--ink-subtle); white-space: nowrap; }
.workspace-view .visit-days.is-mild { color: var(--warn); font-weight: 700; }
.workspace-view .visit-days.is-danger { color: var(--danger); font-weight: 800; }

/* ── Links/ações que usavam var(--brand) hardcoded dentro de string JS
   (wa.me na Agenda) — ver app.js, agora aponta pra --client-accent-solid. */
.workspace-view a.ws-link { color: var(--client-accent-solid); }
.workspace-view a.ws-link:hover { color: var(--client-accent-hover); }

/* ── Assistente em tela cheia (08/08 — reskin na linguagem visual do app
   Claude Code: painel único tipo IDE, sidebar de sugestões + headline de
   boas-vindas + chat + barra de comando fixa no rodapé). Troca a antiga
   .assistant-layout (280px+1fr genérico, Spec §13 original). Os ids
   funcionais (assistant-suggestions-full/assistant-reply-full/
   assistant-input-full/assistant-send-full) não mudaram, só a casca. O
   widget compacto da Visão Geral (.assistant-card dentro de .bottom-row)
   não usa nada disto — continua card único, sem mudança.

   Decisão de conteúdo (ver relatório da sessão): nada de estatística
   fabricada (tokens/sessões/branch git da referência não fazem sentido
   aqui — é um chat sem histórico persistido, não um agente de código).
   Só headline com nome real + as MESMAS 3 sugestões que já existiam,
   movidas pra lateral (opção explicitamente aceita no pedido original em
   vez de inventar categorias novas). */
.workspace-view .assistant-ide {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 640px; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}
.workspace-view .assistant-ide-side {
  background: var(--bg-app); border-right: 1px solid var(--border-soft);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 16px;
}
.workspace-view .assistant-ide-side-head {
  display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--ink);
}
.workspace-view .assistant-ide-new {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: var(--client-accent-solid); color: var(--on-client-accent); border: none;
  border-radius: var(--r-md); padding: 9px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font-sans);
}
.workspace-view .assistant-ide-new:hover { background: var(--client-accent-hover); }
.workspace-view .assistant-ide-groups-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle);
  font-weight: 800; margin-bottom: 8px;
}
.workspace-view .assistant-ide-side .assistant-suggestions { margin-bottom: 0; }
.workspace-view .assistant-ide-side .assistant-suggestion { background: transparent; border-color: transparent; }
.workspace-view .assistant-ide-side .assistant-suggestion:hover {
  background: var(--bg-card-hover); border-color: var(--client-accent-border); color: var(--client-accent);
}

.workspace-view .assistant-ide-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workspace-view .assistant-ide-headline { padding: 28px 28px 8px; }
.workspace-view .assistant-ide-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
  color: var(--client-accent); margin-bottom: 6px;
}
.workspace-view .assistant-ide-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
.workspace-view .assistant-ide-sub { color: var(--ink-mute); font-size: 13px; margin-top: 6px; max-width: 560px; }

.workspace-view .assistant-ide-chat {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 6px 28px 12px;
}
.workspace-view .assistant-ide-chat .assistant-reply { margin-bottom: 0; }

.workspace-view .assistant-ide-bar {
  border-top: 1px solid var(--border-soft); background: var(--bg-app);
  padding: 14px 28px 18px;
}
.workspace-view .assistant-ide-context {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-subtle);
  margin-bottom: 8px; font-family: var(--font-mono);
}
.workspace-view .assistant-ide-bar .assistant-input-row { margin-top: 0; }
.workspace-view .assistant-ide-bar .assistant-input { padding: 12px 14px; font-size: 13.5px; border-radius: var(--r-md); }
.workspace-view .assistant-ide-bar .assistant-send { padding: 0 20px; border-radius: var(--r-md); }
/* Lembrete de dependência (chave/crédito Anthropic no servidor) - discreto
   de propósito, não é status ao vivo (ver comentário em index.html). */
.workspace-view .assistant-ide-hint { font-size: 10.5px; color: var(--ink-subtle); margin-top: 8px; }

@media (max-width: 1100px) {
  .workspace-view .assistant-ide { grid-template-columns: 1fr; min-height: 0; }
  .workspace-view .assistant-ide-chat { min-height: 360px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Fase 4 — separação real Console (violeta) × Workspace (verde do cliente)
   (s112 08/08). Ver _docs/migracao_design_system.md, Fase 4, e o comentário
   de VIEWS_CONSOLE/atualizarModoOwnerBanner() em app.js (fonte única da
   distinção — não duplicar a lista de views aqui).

   Duas frentes, porque o app é 1 shell só (não duas páginas separadas):

   1) Marcação .console-view nas 5 seções que VIEWS_CONSOLE já considera
      "console" (clientes/auditoria/suporte-admin/contas/meus-dados) — mesmo
      padrão .workspace-view da Fase 7, espelhado. A maior parte do conteúdo
      dessas 5 já usa classes .console-* dedicadas (Fase 6) e já é violeta;
      isto aqui cobre só o resíduo de classes GENÉRICAS que também aparecem
      lá (.eyebrow, .assistant-send no form "nova conta" de #view-contas,
      trocar-senha de #view-meus-dados) — sem isso, ficavam verdes (valor
      default de --brand herdado do COMPAT FASE 1) só por acidente de
      reaproveitamento de classe, não por decisão nenhuma.

   2) data-area="console"|"workspace" no <body> (setado em
      atualizarModoOwnerBanner()) para os poucos elementos de CASCA
      compartilhada que ficam FORA de qualquer <section> — vivem na sidebar,
      sempre visíveis, então .console-view/.workspace-view (que escopam
      <section>, não a sidebar irmã) não alcançam: avatar da conta, dot de
      status "online", e o grupo de navegação ativo no accordion. */

.console-view .eyebrow { color: var(--brand-solid); }
.console-view .assistant-send { background: var(--brand-solid); color: var(--on-brand); }
.console-view .assistant-send:hover { background: var(--brand-solid-hover); }
.console-view .assistant-send:disabled:hover { background: var(--brand-solid); }

/* .kpi-card (Fase 9, Início do Console) herdaria --brand/--brand-bg
   congelados em verde (COMPAT FASE 1) se nada aqui interviesse - mesma
   lógica do bloco ".workspace-view .kpi-ic-brand" acima, só que pro violeta
   institucional em vez do verde do cliente. */
.console-view .kpi-ic-brand { background: rgba(111, 92, 246, 0.14); color: var(--brand-solid); }
.console-view .kpi-ring { border-top-color: var(--brand-solid); border-right-color: var(--brand-solid); }
.console-view .kpi-card { border-radius: var(--r-xl); box-shadow: var(--shadow-xs); }

body[data-area="console"] .dropdown.has-active .dropdown-trigger { color: var(--brand-solid); }
body[data-area="console"] .topbar-brand .dot {
  background: var(--brand-solid); box-shadow: 0 0 0 3px rgba(111, 92, 246, 0.16);
}
body[data-area="console"] .side-user-avatar {
  background: rgba(111, 92, 246, 0.14); color: var(--brand-solid); border-color: var(--brand-border);
}
body[data-area="console"] .side-status .pulse {
  background: var(--brand-solid); box-shadow: 0 0 0 3px rgba(111, 92, 246, 0.16);
}