/* EVOLUT-ON - Redesign (handoff designer) - camada moderna v2, isolada e reversivel.
   Traducao 1:1 do design-system pras classes reais. Remova o <link> de modern.css p/ reverter. */

/* ============ TOKENS — tema da loja (hightech) ============
   Identidade MONOCROMATICA (escolha do Otavio): #0a0a0a (fundo) + #4d4d4d (acento).
   Escala de cinzas derivada entre os dois. Trocar --accent/--bg muda tudo. */
body[data-theme="hightech"]{
  --accent:#4d4d4d; --accent-2:#5e5e5e;
  --accent-glow:color-mix(in srgb,var(--accent) 60%,transparent);
  --accent-ink:#ffffff;
  --bg:#0a0a0a; --bg-2:#0f0f0f;
  --surface:#161616; --surface-2:#1e1e1e; --surface-3:#262626;
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.15);
  --text:#f0f0f0; --text-dim:#9a9a9a; --text-faint:#5e5e5e;
  --bubble-them:#1a1a1a; --bubble-me:color-mix(in srgb,var(--accent) 45%,#1a1a1a);
  --shadow:0 18px 40px -22px rgba(0,0,0,0.9);
  --amber:#f59e0b; --rose:#fb7185; --blue:#60a5fa; --green:#34d399;
  /* pontes p/ os nomes de token JA usados pelo codebase (componentes existentes herdam a paleta nova) */
  --bg-darkest:var(--bg); --bg-dark:var(--bg-2); --bg-mid:var(--surface);
  --bg-panel:var(--surface); --bg-card:var(--surface); --bg-darker:var(--bg);
  --bg-hover:var(--surface-2); --bg-active:var(--surface-3);
  --border-light:var(--border-strong);
  --border-glow:color-mix(in srgb,var(--accent) 35%,transparent);
  --text-primary:var(--text); --text-sec:var(--text-dim); --text-muted:var(--text-faint);
  --accent-dark:var(--accent-2);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,transparent);
  --success:var(--green);
  --shadow-glow:0 0 20px color-mix(in srgb,var(--accent) 20%,transparent);
  --glass:color-mix(in srgb,var(--surface) 78%,transparent); --glass-border:var(--border);
  --msg-out-bg:var(--bubble-me); --msg-out-text:var(--text);
  --msg-in-bg:var(--bubble-them); --msg-in-text:var(--text);
  color-scheme:dark;
}
:root{
  --r:14px; --r-sm:calc(var(--r)*.6); --r-lg:calc(var(--r)*1.5); --r-pill:999px;
  --radius-sm:var(--r-sm); --radius-md:var(--r); --radius-lg:var(--r-lg); --radius-xl:calc(var(--r)+8px);
  --transition:all .15s cubic-bezier(.4,0,.2,1);
}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}


/* ========== Topbar/Header (.app-header) ========== */
/* ============================================================
   OVERRIDE — TOPBAR / HEADER  (superficie: .app-header)
   Fonte da verdade: crm-styles.css secao TOPBAR (.topbar/.brand*/.userpill*/.search*/.channel*/.iconbtn)
   Traduzido 1:1 para as classes REAIS do EVOLUT-ON (index.html + assets/style.css).

   Regra #1: SO propriedades visuais. Nada de display/position/flex-direction/width/overflow.
   Regra #2: modern.css carrega POR ULTIMO; especificidade espelha os seletores existentes.
   Regra #3: os tokens do design-ref (--surface, --r-pill, --text-dim, etc.) NAO existem
             no CSS de producao (assets/style.css). Por isso TODO token tem fallback de
             producao via var(--token, <fallback>) -> funciona com ou sem a camada do design-ref.

   PRECONDICAO: linkar este arquivo DEPOIS de assets/style.css?v=14 no index.html.
   ============================================================ */

/* ---- Barra (.topbar -> .app-header) ----
   Mantenho display:flex/height/padding/position existentes (nao mexo no layout). */
.app-header{
  background:var(--surface, var(--bg-panel));
  border-bottom:1px solid var(--border);
  gap:18px;                       /* spec .topbar gap */
  box-shadow:none;
  /* backdrop-filter:none;        // opcional: fundo agora e opaco; descomente se quiser cortar o blur legado */
}
/* linha-gradiente animada do ::after vira borda de acento discreta */
.app-header::after{
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  opacity:.5;
}

/* ---- Logo (.app-header .logo -> especificidade 0,0,2,0) ---- */
.app-header .logo{
  border-radius:var(--r-sm, var(--radius-sm));
  filter:drop-shadow(0 2px 10px var(--accent-glow));
}

/* ---- Marca (.app-header .brand-name -> espelha 0,0,2,0) ----
   Spec brand-name: 19px/800, letter-spacing .04em, cor solida --text, nowrap.
   Reseto o gradient-clip legado (text-fill transparent) pra texto solido fiel ao spec. */
.app-header .brand-name{
  font-size:19px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--text, var(--text-primary));
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
/* Subtitulo "High Tech Informatica" — spec .brand-sub 11.5px --text-faint */
.app-header .brand-sub{
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-faint, var(--text-muted));
}
/* Chip "v1.8" (span com style INLINE no markup, sem classe) -> spec .brand-chip.
   Selecionado por .app-header .brand>div>span[style]; brand-name (sem attr style) nao casa.
   !important vence o style inline. */
.app-header .brand>div>span[style]{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  color:var(--accent) !important;
  background:color-mix(in srgb,var(--accent) 18%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent) !important;
  border-radius:var(--r-pill, 999px) !important;
  padding:2px 7px !important;
}

/* ---- User pill (.vendor-info + filhos) -> spec .userpill ----
   Mantem o inline display:none do markup (so vira flex quando o JS remove o display:none). */
.vendor-info{
  background:var(--surface-2, var(--bg-mid));
  border:1px solid var(--border);
  border-radius:var(--r-pill, 999px);
  padding:5px 6px 5px 10px;
  gap:10px;
}
.vendor-avatar{
  background:linear-gradient(135deg,var(--accent),var(--accent-2, var(--accent-dark)));
  color:var(--accent-ink, #fff);
  font-weight:700;
  font-size:13px;
}
.vendor-name{
  font-size:14px;
  font-weight:600;
  color:var(--text, var(--text-primary));
}
/* Botao "Sair" -> spec .userpill-exit: ghost, hover vira rose. */
.logout-btn{
  background:none;
  border:none;
  color:var(--text-faint, var(--text-muted));
  font-size:13px;
  font-weight:600;
  border-radius:var(--r-sm, var(--radius-sm));
  padding:4px 8px;
  transition:var(--transition);
}
.logout-btn:hover{
  color:var(--rose, #fb7185);
  background:color-mix(in srgb,var(--rose, #fb7185) 12%,transparent);
  border-color:transparent;
}

/* ---- Busca "Boa Dica" (.header-bd-* -> spec .search/.search-btn) ----
   Spec .search: pill, fundo --surface-2, borda --border; focus: borda acento + anel 3px. */
.header-bd-search{
  background:var(--surface-2, var(--bg-mid));
  border:1px solid var(--border);
  border-radius:var(--r-pill, 999px);
  padding:4px 4px 4px 16px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.header-bd-search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--surface, var(--bg-panel));
}
.header-bd-icon{ color:var(--text-faint, var(--text-muted)); }
.header-bd-input{
  color:var(--text, var(--text-primary));
  font-size:14px;
}
.header-bd-input::placeholder{ color:var(--text-faint, var(--text-muted)); }
/* Botao "Buscar" -> spec .search-btn: fundo acento, texto ink 14px/700, pill, glow.
   Substitui o roxo legado #a29bfe/#6c5ce7 pelo token de acento do tema. */
.header-bd-btn{
  background:var(--accent);
  color:var(--accent-ink, #fff);
  border:none;
  border-radius:var(--r-pill, 999px);
  font-weight:700;
  font-size:14px;
  padding:7px 18px;
  box-shadow:0 4px 14px -5px var(--accent-glow);
  transition:filter .15s,box-shadow .15s;
}
.header-bd-btn:hover{ filter:brightness(1.06); }

/* ---- Chips de canal WhatsApp / Instagram (.status-dot -> spec .channel) ----
   Spec .channel: pill, fundo --surface-2, borda --border, 12.5px/600 --text-dim. */
.status-dot{
  background:var(--surface-2, var(--bg-mid));
  border:1px solid var(--border);
  border-radius:var(--r-pill, 999px);
  color:var(--text-dim, var(--text-sec));
  font-size:12.5px;
  font-weight:600;
  padding:7px 12px;
  gap:7px;
}
/* Dot generico — espelha 0,0,2,0 (base define border-radius:50%, mantida). */
.status-dot .dot{
  width:8px;
  height:8px;
}
/* WhatsApp: o dot reflete o ESTADO REAL. O JS (setWaDot) seta a classe
   "dot connected|connecting|disconnected". NAO forcar verde: a base e cinza
   (desconhecido/reconectando) e cada estado tem sua cor. Especificidade
   #wa-status .dot.<estado> (0,1,2,0) vence a base (0,1,1,0). */
#wa-status .dot{
  background:var(--text-muted, #647596);
  box-shadow:none;
}
#wa-status .dot.connected{
  background:#22c55e;
  box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 30%,transparent);
}
#wa-status .dot.connecting{
  background:#f59e0b;
  box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 30%,transparent);
}
#wa-status .dot.disconnected,
#wa-status .dot.waiting_qr{
  background:#ef4444;
  box-shadow:0 0 0 3px color-mix(in srgb,#ef4444 30%,transparent);
}
/* Instagram: dot tem background:#E1306C INLINE no markup -> !important pro background;
   box-shadow (halo) nao tem concorrente inline, dispensa !important. #e1306c literal permitido. */
#ig-status .dot{
  background:#e1306c !important;
  box-shadow:0 0 0 3px color-mix(in srgb,#e1306c 22%,transparent);
}

/* ---- Botao de tema (.header-theme-btn -> spec .iconbtn/.iconbtn--tool) ----
   Mantenho a pill 34px (layout existente) e troco cores p/ tokens. */
.header-theme-btn{
  background:var(--surface-2, var(--bg-mid));
  border:1px solid var(--border);
  color:var(--text-dim, var(--text-sec));
  border-radius:var(--r-pill, 999px);
  transition:var(--transition);
}
.header-theme-btn:hover{
  background:var(--surface-3, var(--bg-hover));
  border-color:var(--border-strong, var(--border-light));
  color:var(--text, var(--text-primary));
}

/* ========== Tabs / Chips de filtro (.filter-bar / .chip-strip / .chip / .chip-count / .filter-bar-actions / #btnOpenFilters / #btnSortOrder) ========== */
/* ============================================================
   OVERRIDE - Superficie: Tabs / Chips de filtro
   Alvo do designer (crm-styles.css): .tabs/.tab/.tab-count/.tab--active/.tabs-actions
   Traduzido 1:1 para o MARKUP e os TOKENS REAIS do codebase:
     .tabs         -> .filter-bar          (container)   [index.html:2517]
     .tabs-scroll  -> .chip-strip          (strip pills) [index.html:2518]
     .tab          -> .chip                              [index.html:2519+]
     .tab-count    -> .chip-count
     .tab--active  -> .chip.active
     .tabs-actions -> .filter-bar-actions  [index.html:2531]

   TOKENS: os tokens do SPEC (--surface*/--text-dim/--text-faint/
   --accent-ink/--r-pill/--border-strong) NAO existem neste codebase
   (so no crm-styles.css de referencia). Mapeados para o :root real
   (assets/style.css):
     --surface   -> --bg-dark
     --surface-2 -> var(--bg-card, var(--bg-mid))
     --surface-3 -> --bg-hover
     --text-dim  -> --text-sec
     --text      -> --text-primary
     --text-faint-> --text-muted
     --accent-ink-> #fff
     --border-strong -> --border-light
     --r-pill    -> 999px
   color-mix: 'in srgb' (convencao unica do codebase; 0 usos de oklab).

   REGRA #1: so propriedades VISUAIS. NAO toca
   display/position/flex/width/overflow de container.
   PRE-REQ: linkar <link rel=stylesheet href="assets/modern.css?v=1">
   DEPOIS do </style> inline (index.html:3606) p/ vencer por ordem de fonte.
   ============================================================ */

/* --- Container da barra de filtros (= .tabs do spec) ---------
   spec: fundo surface, borda inferior, padding 11/20, gap 10.
   Mantem display:flex/align/flex-shrink ja existentes; so visual. */
.filter-bar {
  gap: 10px;
  padding: 11px 20px;                      /* spec 11/20 (era 8/14) */
  background: var(--bg-dark);              /* spec --surface */
  border-bottom: 1px solid var(--border);
}

/* --- Strip dos pills (= .tabs-scroll do spec) ----------------
   NAO altera flex-wrap/justify-content/overflow (regra #1):
   o codebase usa wrap+center; manter para nao quebrar o fluxo.
   So ajusta o gap entre pills para o ritmo do spec (8px). */
.chip-strip {
  gap: 8px;                               /* spec 8px */
}

/* --- Pill / tab (= .tab do spec) ----------------------------
   spec: surface-2, borda --border, texto dim, 13/600, pad 8/14, pill. */
.chip {
  gap: 8px;
  padding: 8px 14px;                      /* spec 8/14 */
  border-radius: 999px;                   /* spec --r-pill */
  background: var(--bg-card, var(--bg-mid)); /* spec --surface-2 */
  border: 1px solid var(--border);
  color: var(--text-sec);                 /* spec --text-dim */
  font-size: 13px;                        /* spec 13px */
  font-weight: 600;
  transition: var(--transition);
}

/* hover: texto --text + borda mais forte (spec).
   Preserva o realce sutil por --row-color ja existente. */
.chip:hover {
  background: var(--bg-hover);            /* spec --surface-3 */
  color: var(--text-primary);            /* spec --text */
  border-color: color-mix(in srgb,
    var(--row-color, var(--border-light)) 50%, var(--border-light));
}

/* ATIVO (= .tab--active do spec): tint de acento, borda de acento,
   texto de acento. --row-color (fallback --accent) preserva a
   cor-por-categoria do markup (style="--row-color:#..."). */
.chip.active {
  background: color-mix(in srgb,
    var(--row-color, var(--accent)) 16%, transparent);   /* spec 16% */
  border-color: color-mix(in srgb,
    var(--row-color, var(--accent)) 45%, transparent);   /* spec 45% */
  color: var(--row-color, var(--accent));
  box-shadow: 0 0 14px color-mix(in srgb,
    var(--row-color, var(--accent)) 18%, transparent);
}

/* --- Contador (= .tab-count do spec) ------------------------
   spec base: fundo surface-3, texto faint, 11/700, pad 1/8, pill. */
.chip-count {
  font-size: 11px;                        /* spec 11px */
  font-weight: 700;
  padding: 1px 8px;                       /* spec 1/8 */
  border-radius: 999px;                   /* spec --r-pill */
  background: var(--bg-hover);            /* spec --surface-3 */
  color: var(--text-muted);               /* spec --text-faint */
  border: 1px solid transparent;          /* neutraliza borda antiga */
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}

/* contador no ativo: fundo acento solido + ink (spec).
   Keyed em --row-color p/ casar com a cor da categoria. */
.chip.active .chip-count {
  background: var(--row-color, var(--accent));  /* spec accent solido */
  color: #fff;                                  /* spec --accent-ink */
  border-color: transparent;
}

/* --- Botoes de acao (= .tabs-actions do spec) ---------------
   Reais: #btnOpenFilters (filtrar) e #btnSortOrder (inverter).
   'fixados' do spec nao tem markup -> nada a estilizar.
   IDs (1-0-0): so vencem se modern.css carregar depois do <style> inline. */
.filter-bar-actions { gap: 6px; }

#btnOpenFilters,
#btnSortOrder,
#btnTogglePinned {
  border-radius: 999px;
  background: var(--bg-card, var(--bg-mid)); /* spec iconbtn surface-2 */
  border: 1px solid var(--border);
  color: var(--text-sec);
  transition: var(--transition);
}
#btnSortOrder { color: var(--text-primary); } /* seta de ordenacao mais legivel */

#btnOpenFilters:hover,
#btnSortOrder:hover,
#btnTogglePinned:hover {
  background: var(--bg-hover);            /* spec iconbtn:hover surface-3 */
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* --- Responsivo (ESPELHA os breakpoints inline existentes) ---
   CRITICO: sem isto, a regra base .chip deste override (carregada
   por ultimo) venceria por ordem de fonte as regras .chip dentro
   dos @media inline (index.html:3497-3505) em telas <=1400px,
   defeitando o shrink e causando overflow no flex-wrap. */
@media (max-width: 1400px) {
  .chip { padding: 5px 9px; font-size: 11.5px; gap: 5px; }
  .chip-count { font-size: 9.5px; padding: 1px 6px; min-width: 18px; }
}
@media (max-width: 1200px) {
  .chip { padding: 4px 8px; font-size: 10.5px; }
}

/* ========== Rail lateral (nav) ========== */
/* ============================================================
   RAIL LATERAL (nav) — override fiel ao handoff (.rail/.rail-btn/.rail-tip)
   Mapeado p/ classes reais: .nav-sidebar / .nav-sidebar-btn / .nav-tooltip
   TOKENS: usa SO os tokens reais do :root de style.css (verificado por grep).
   Os nomes do spec (--surface/--r-sm/--text-faint) NAO existem aqui e foram
   remapeados: surface->bg-mid, surface-2->bg-hover, surface-3->bg-active,
   text-faint->text-muted, text->text-primary, r-sm->radius-sm, r-pill->999px.
   Regra #1: so propriedades visuais. Larguras de container (56px/40px) INTOCADAS.
   modern.css carrega por ultimo -> sem !important.
   ============================================================ */

/* --- .rail -> .nav-sidebar : fundo de superficie (mid) + densidade do spec --- */
.nav-sidebar {
  background: var(--bg-mid);             /* spec .rail: var(--surface) -> token real --bg-mid */
  border-right: 1px solid var(--border); /* mantem borda sutil tokenizada */
  padding: 14px 0;                       /* spec .rail: 14px 0 (era 10px 0) */
  gap: 6px;                              /* spec .rail: gap 6px (era 4px) */
}

/* --- .rail-btn -> .nav-sidebar-btn : pilula neutra, raio do token --- */
.nav-sidebar-btn {
  border-radius: var(--radius-sm);       /* spec .rail-btn: var(--r-sm) -> token real --radius-sm (8px) */
  background: transparent;               /* spec: fundo transparente em repouso */
  border: 1px solid transparent;         /* mantem borda invisivel p/ nao "pular" no hover */
  color: var(--text-muted);              /* spec .rail-btn: var(--text-faint) -> token real --text-muted */
  transition: var(--transition);         /* token real ja existente */
}

/* --- hover: clareia icone + fundo de hover (sem borda forte do legado) --- */
.nav-sidebar-btn:hover {
  color: var(--text-primary);            /* spec: vira var(--text) -> token real --text-primary */
  background: var(--bg-hover);           /* spec .rail-btn:hover: var(--surface-2) -> token real --bg-hover */
  border-color: transparent;            /* spec nao usa borda no hover; sobrescreve o --border do legado */
}

/* --- ativo: acento + wash de fundo (sem glow/box-shadow do legado) --- */
.nav-sidebar-btn.active {
  color: var(--accent);                                            /* spec .rail-btn--active */
  background: color-mix(in srgb, var(--accent) 15%, transparent); /* spec: wash 15% do acento */
  border-color: transparent;                                      /* remove --border-glow do legado */
  box-shadow: none;                                               /* spec nao tem glow no ativo */
}

/* --- barra de acento vertical 3px (spec .rail-btn--active::before) --- */
/* .nav-sidebar-btn ja e position:relative (style.css linha 499). left:-8px = borda
   esq. interna do rail. O pai .app-body tem overflow:hidden, logo o -14px do spec
   (rail 64px) seria CORTADO no rail real de 56px; -8px fica na borda sem clip. --- */
.nav-sidebar-btn.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;                  /* spec --r-pill (inexistente aqui) -> literal 999px */
  background: var(--accent);
}

/* --- .rail-tip -> .nav-tooltip : superficie elevada + sombra do token --- */
.nav-tooltip {
  background: var(--bg-active);           /* spec .rail-tip: var(--surface-3) -> token real --bg-active */
  color: var(--text-primary);            /* spec: var(--text) -> token real --text-primary */
  border: 1px solid var(--border);       /* mantem contorno sutil */
  border-radius: var(--radius-sm);       /* spec: var(--r-sm) -> token real --radius-sm (era 6px) */
  font-size: 12px;                       /* spec .rail-tip: 12px (era 11px) */
  font-weight: 600;
  padding: 5px 10px;
  box-shadow: var(--shadow);             /* spec usa var(--shadow) -> token real --shadow */
}

/* --- PDV (.pdv-btn): mantem a identidade Indigo do produto, so realinha o
   raio ao token novo. Cores indigo sao literais permitidos (#818cf8/#a5b4fc). --- */
.nav-sidebar-btn.pdv-btn {
  border-radius: var(--radius-sm);       /* harmoniza com os demais botoes do rail */
}

/* ========== Lista de leads + cards (sidebar / lead-item / status-tag / label-dots / pin-icon) ========== */
/* =====================================================================
   OVERRIDE - Lista de leads + cards   (modern.css)
   ---------------------------------------------------------------------
   PRE-REQUISITO DE INSTALACAO: index.html hoje NAO referencia modern.css.
   Adicionar no <head>, de preferencia DEPOIS de style.css:
       <link rel="stylesheet" href="assets/modern.css?v=1">
   ATENCAO A ORDEM: alguns seletores-alvo (.status-tag, .label-dots,
   .label-dot, .pin-icon, .no-reply-dot) vivem em blocos <style> INLINE
   no index.html, que carregam DEPOIS de qualquer <link> do <head>. Para
   vencer o inline sem depender de ordem de origem, TODO o override e
   prefixado com `body ` (os temas ja usam body[data-theme], entao `body`
   sempre casa e nao muda o matching) -> +1 de especificidade.
   ---------------------------------------------------------------------
   TOKENS REAIS (style.css :root): --bg-dark/--bg-mid/--bg-panel/
   --bg-hover/--bg-active | --border/--border-light | --text-primary/
   --text-sec/--text-muted | --accent/--accent-dark/--accent-glow(.12)/
   --accent-soft(.08) | --warning/--danger | --radius-sm/md/lg | --shadow.
   NAO existem: --bg-2 --surface --surface-2 --border-strong --text
   --text-faint --accent-ink --r --r-pill --amber --rose (eram do spec).
   REGRA: so propriedades visuais. Sem mexer em display/position/flex/
   overflow/width. Cores por canal/etiqueta vem inline -> nao tocar.
   ===================================================================== */

/* ---- Coluna da lista (spec .leads: fundo --bg-2 -> aqui --bg-dark) ----
   border-right deixado a cargo do .sidebar::after (gradiente do codebase). */
body .sidebar{
  background:var(--bg-dark);
}

/* ---- Busca de contato (spec .leads-search + .field) ---- */
body .sidebar-search{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);
}
body .search-input{
  background:var(--bg-mid);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:0 14px;
  height:42px;
  color:var(--text-primary);
  font-size:14px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
body .search-input:focus{
  border-color:var(--accent);
  background:var(--bg-panel);
  box-shadow:0 0 0 3px var(--accent-soft);   /* anel de foco (igual ao real) */
}
body .search-input::placeholder{ color:var(--text-muted); }

/* ---- Scroll da lista (spec .leads-scroll: respiro lateral) ---- */
body .leads-list{
  padding:0 10px 14px;
}

/* ---- Card de lead (spec .lead) --------------------------------------
   NUNCA overflow:hidden aqui: .pin-icon e absolute (top/right:6px) e
   seria cortado. Vira card com borda sobre o fundo --bg-dark.          */
body .lead-item{
  margin-top:8px;                            /* gap entre cards */
  padding:13px 13px 13px 16px;               /* row-pad + 4px p/ a barra de acento */
  background:var(--bg-mid);                  /* card = surface real */
  border:1px solid var(--border);
  border-bottom:1px solid var(--border);     /* anula a divisoria full-width antiga */
  border-radius:var(--radius-md);
  transition:border-color .14s,transform .14s,box-shadow .14s,background .14s;
}
body .lead-item:hover{
  background:var(--bg-hover);
  border-color:var(--border-light);
  transform:translateY(-1px);                /* elevacao sutil do spec */
  box-shadow:var(--shadow);
}
/* Ativo (spec .lead--active): borda+fundo tingidos de acento.
   A barra de 3px a esquerda ja existe via border-left no codebase. */
body .lead-item.active{
  background:color-mix(in srgb,var(--accent) 9%,var(--bg-mid));
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  border-left:3px solid var(--accent);
}

/* ---- Avatar (44px ja no codebase; so refina anel) -------------------
   A cor (border-color) vem inline por canal -> nao mexer.             */
body .lead-avatar{
  box-shadow:0 0 0 1px var(--border);
}
/* Badge de canal: refina apenas o anel (borda) p/ casar com o card.
   A cor de fundo e inline (por canal) e fica intocada. */
body .channel-badge{
  border:2px solid var(--bg-mid);            /* anel = cor do card */
}

/* ---- Corpo / textos (spec .lead-name / .lead-preview) ---- */
body .lead-name{
  font-weight:700;
  font-size:15px;
  color:var(--text-primary);
}
body .lead-preview{
  color:var(--text-muted);
  font-size:12.5px;
  margin-top:5px;
}

/* ---- Coluna lateral (horario + unread) (spec .lead-side) ---- */
body .lead-meta{ gap:8px; }
body .lead-time{
  font-size:11.5px;
  color:var(--text-muted);
}

/* ---- Contador de nao-lidas (spec .lead-unread: pill acento solido) ---- */
body .unread-badge{
  background:var(--accent);                  /* solido (sem gradiente) */
  color:#fff;                                /* nao ha --accent-ink no codebase */
  font-size:11px;
  font-weight:800;
  padding:0 6px;
  min-width:20px;
  height:20px;
  line-height:20px;
  border-radius:999px;
  box-shadow:none;
}

/* ---- Tags de status (spec .badge: pill com tom da cor) --------------
   Cores semanticas remapeadas para tokens reais (--accent/--warning/
   --danger). 'novo' = acento (spec) — no real era azul.               */
body .status-tag{
  gap:4px;
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  margin-top:6px;
}
body .status-tag.novo{
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
body .status-tag.aguardando{
  background:color-mix(in srgb,var(--warning) 16%,transparent);
  color:var(--warning);
  border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);
}
body .status-tag.silencioso{
  background:color-mix(in srgb,var(--danger) 14%,transparent);
  color:var(--danger);
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
}

/* ---- Etiquetas (label-dots) (spec .tag: pill contornado) ------------
   A cor de fundo de cada .label-dot e inline (style="background:...") ->
   so ajustamos forma/peso/raio; a cor permanece a da etiqueta.        */
body .label-dots{ gap:6px; margin-top:9px; }
body .label-dot{
  font-size:10.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  letter-spacing:.02em;
  line-height:16px;
}

/* ---- Pin (spec .lead-pin: cor faint; ativo = acento) ---- */
body .pin-icon{ color:var(--text-muted); }
body .pin-icon.active{ color:var(--accent); }

/* ---- Estado vazio (spec .leads-empty) ---- */
body .no-leads{ color:var(--text-muted); font-size:13px; }

/* ========== Chat: header + thread + bolhas ========== */
/* ============================================================
   OVERRIDE — Superficie: CHAT (header + thread + bolhas)
   EVOLUT-ON — fiel ao design_handoff (crm-styles.css secao 3).
   Cola em assets/modern.css (carregado POR ULTIMO, apos
   assets/style.css e apos os <style> inline do index.html).

   IMPORTANTE: os tokens do SPEC (--bg/--surface/--text/--bubble-*
   /--r-*) NAO existem neste codebase. Tudo foi remapeado 1:1 para
   os tokens REAIS de assets/style.css :root:
     --bg          -> --bg-darkest
     --surface     -> --glass (header ja usa glass)
     --surface-2   -> --bg-mid
     --text        -> --text-primary
     --text-dim    -> --text-sec
     --text-faint  -> --text-muted
     --bubble-them -> --msg-in-bg
     --bubble-me   -> --msg-out-bg
     --rose        -> --danger
     --r-lg        -> --radius-lg
     --r-sm        -> 5px (literal, igual ao codebase atual)
     --r-pill      -> 999px (literal)
     --shadow/--accent/--border -> existem, mantidos.
   Apenas propriedades visuais. Sem display/position/flex/overflow.
   Mesma especificidade dos blocos inline -> vence por ordem.
   ============================================================ */

/* ---- Painel do chat (.chat no spec) ----
   Fundo --bg-darkest + leve glow radial de accent no topo (spec: thread).
   .chat-messages herda transparente, entao o glow aparece atras das bolhas.
   NAO altero flex/overflow/position. Sobrepoe style.css l.858 (mesma espec.). */
.chat-area {
  background:
    radial-gradient(900px 500px at 80% 0%,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--bg-darkest);
}

/* ---- Estado vazio (.chat--empty/.empty no spec) ----
   OBS: o markup real de #chatPlaceholder so tem <p> (sem .icon/svg).
   A regra .icon svg fica como no-op defensivo caso um icone seja
   adicionado depois; nao quebra nada hoje. */
.chat-placeholder .icon svg {
  stroke: var(--accent);
  opacity: .9;                    /* spec: .empty-mark opacity .9 */
}
.chat-placeholder p {
  font-size: 18px;                /* spec: .empty-title 18px/700 */
  font-weight: 700;
  color: var(--text-primary);     /* spec usa --text no titulo */
}

/* ---- Cabecalho do chat (.chat-head no spec) ----
   fundo --surface, borda inferior, padding 12/18.
   Mantenho o blur de vidro ja existente (refinamento do codebase). */
.chat-header {
  padding: 12px 18px;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}
/* Nome (.chat-head-name 16px/700) — espec. (0,2,0), bate com style.css l.915 */
.chat-header-info .chat-lead-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}
/* Meta "WhatsApp · telefone" (.chat-head-meta 12px, tabular) */
.chat-header-info .chat-lead-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Separador de dia (.thread-day no spec) ----
   pill centralizado 11.5px/700, fundo --surface-2, borda --border.
   Espec. (0,1,1) = bate com o bloco inline (index.html l.3523). */
.msg-date-sep span {
  background: var(--bg-mid);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: normal;
  box-shadow: none;
}

/* ---- Bolha base (.bubble no spec) ----
   raio --r-lg, padding 11px 14px 8px, sombra suave, fonte 14px/1.5. */
.msg-bubble {
  padding: 11px 14px 8px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--shadow);
}

/* Recebida (.bubble--them): fundo --bubble-them, borda --border,
   canto inf-esquerdo menor. Espec. (0,2,0) bate com style.css l.974
   e com o override de style.css l.2222 -> modern.css (ultimo) vence. */
.msg-row.in .msg-bubble {
  background: var(--msg-in-bg);
  color: var(--msg-in-text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}

/* Enviada (.bubble--me): fundo --bubble-me, borda accent 30%,
   canto inf-direito menor. Espec. (0,2,0) bate com style.css l.981/2223. */
.msg-row.out .msg-bubble {
  background: var(--msg-out-bg);
  color: var(--msg-out-text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-bottom-right-radius: 5px;
  box-shadow: var(--shadow);
}

/* ---- Horario (.bubble-time no spec) ----
   10.5px, --text-faint, alinhado a direita. Espec. (0,1,0) bate style.css l.988. */
.msg-time {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 5px;
}
/* Recebida tambem alinha o horario a direita (spec: .bubble-time flex-end).
   Espec. (0,2,0) bate com style.css l.995 (que alinha a esquerda) -> sobrepoe. */
.msg-row.in .msg-time {
  color: var(--text-muted);
  text-align: right;
}

/* Status de entrega. Duplo-check 'lido' em accent (spec: o tick do
   horario usa --accent). 'falha' segue --danger. As regras .read/.failed
   tem espec. (0,2,0) = bate com o bloco inline (index.html l.363/373).
   OBS semantica: isso troca o tick 'lido' de #53bdeb (azul WhatsApp)
   para accent, conforme o redesign do handoff. Se a equipe quiser manter
   o azul de ACK, remova a regra .msg-status.read abaixo. */
.msg-status.read { color: var(--accent); }
.msg-status.failed { color: var(--danger); }
.msg-status.failed svg { stroke: var(--danger); }

/* ---- Card de citacao (.quote no spec -> .msg-quote no codebase) ----
   Borda esq accent, autor em accent. NAO mexo em overflow/white-space:
   o .quote-text mantem o ellipsis (nowrap/overflow/max-width) ja definido
   no bloco inline (index.html l.512), pois so sobrescrevo cor/tamanho.
   Espec. (0,1,0) = bate com inline l.500/511/512 -> modern.css vence. */
.msg-quote {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.msg-quote:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.quote-author {            /* spec: .quote-by — autor em accent/800 */
  color: var(--accent);
  font-weight: 800;
  font-size: 11px;
}
.quote-text {              /* spec: .quote-head — texto secundario (mantem ellipsis) */
  color: var(--text-sec);
  font-size: 12px;
}

/* ========== Composer/input ========== */
/* ============================================================
   COMPOSER / INPUT  —  override fiel ao spec (.composer / .composer-field /
   .qbtn / .composer-tools / .send do crm-styles.css do designer)
   Traduzido para as classes E TOKENS REAIS do codebase:
     classes : .chat-input-area, .input-wrapper, .msg-input, .input-actions,
               .send-btn, .pdv-trigger-btn, .ai-trigger-btn, .mic-btn, .action-btn
     tokens  : --surface ->--bg-dark/--bg-mid | --surface-2 ->--bg-mid
               --surface-3 ->--bg-hover | --text ->--text-primary
               --text-dim ->--text-sec  | --text-faint ->--text-muted
               --accent-ink ->#fff (literal do spec) | --r-pill ->999px (literal)
               --accent / --accent-glow / --border / --transition  (existem no :root real)
   ATENCAO: requer <link rel="stylesheet" href="modern.css"> APOS assets/style.css
   no <head> do index.html, senao o override nao vale pela ordem de cascata.
   modern.css carrega POR ULTIMO -> classe unica vence pela ordem (sem !important).
   SO props visuais. Layout/flex/position/overflow intactos.
   ============================================================ */

/* --- .composer (container externo): so visual; mantem flex-shrink existente --- */
.chat-input-area {
  padding: 14px 18px;                 /* spec .composer: padding 14px 18px */
  background: var(--bg-dark);         /* spec --surface -> --bg-dark (composer) */
  border-top: 1px solid var(--border);
}

/* --- .composer-field (pill): no codebase eh o .input-wrapper.
   Mantem display:flex / align-items:flex-end existentes; so visual. --- */
.input-wrapper {
  background: var(--bg-mid);          /* spec --surface-2 -> --bg-mid */
  border: 1px solid var(--border);
  border-radius: 999px;              /* spec --r-pill: 999px */
  padding: 6px 8px 6px 12px;          /* aproxima ~50px do spec mantendo align-items:flex-end */
  gap: 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);   /* spec: anel de foco de acento */
  background: var(--bg-hover);                 /* leve clareada no foco (--surface-3) */
}

/* --- .composer-field input --- */
.msg-input {
  color: var(--text-primary);        /* spec --text */
  font-size: 14px;                    /* spec: 14px */
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.msg-input::placeholder { color: var(--text-muted); }   /* spec --text-faint */

/* --- .composer-tools (cluster a direita) --- */
.input-actions { gap: 2px; }

/* --- .qbtn--cart -> .pdv-trigger-btn (catalogo/PDV, verde) ---
   Literal WhatsApp permitido (#22c55e -> #16a34a, spec .qbtn--cart).
   NB: o 2o botao (#osTriggerBtn) tem background indigo INLINE e permanece indigo. */
.pdv-trigger-btn {
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 4px 14px -5px color-mix(in srgb, #22c55e 60%, transparent);
  transition: var(--transition);
}
.pdv-trigger-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, #22c55e 65%, transparent);
}

/* --- .qbtn--ai -> .ai-trigger-btn (IA, gradiente violeta) ---
   Literais de IA permitidos: #a78bfa -> #7c3aed (spec .qbtn--ai). */
.ai-trigger-btn {
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border: 1px solid transparent;
  box-shadow: 0 4px 14px -5px color-mix(in srgb, #7c3aed 55%, transparent);
  transition: var(--transition);
}
.ai-trigger-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, #7c3aed 60%, transparent);
}

/* --- .qbtn--tool / tools -> .action-btn (lightning, anexo, drive, receipt) ---
   So tamanho/hover tematizados; as cores INLINE de cada botao sao preservadas.
   OBS: a cor de hover (var(--accent)) NAO se aplica aos botoes com style="color:..."
   inline (inline vence o :hover) — limitacao ja existente no style.css base. */
.action-btn {
  border-radius: 50%;
  color: var(--text-sec);            /* spec --text-dim (cor base p/ botoes sem cor inline) */
  transition: var(--transition);
}
.action-btn:hover {
  background: var(--bg-hover);        /* spec --surface-3 */
  color: var(--accent);              /* spec .qbtn--tool:hover { color: var(--accent) } */
}

/* --- mic --- */
.mic-btn {
  border-radius: 50%;
  color: var(--text-sec);            /* spec --text-dim */
  transition: var(--transition);
}
.mic-btn:hover { background: var(--bg-hover); color: var(--accent); }

/* --- .send -> .send-btn (circulo de acento solido + glow; hover scale 1.04) ---
   Troca o gradiente/sombra ciano hardcoded por cor solida + glow tokenizado. */
.send-btn {
  border-radius: 50%;
  background: var(--accent);
  color: #fff;                        /* spec --accent-ink: #ffffff */
  border: none;
  box-shadow: 0 6px 18px -6px var(--accent-glow);   /* spec .send: glow de acento */
  transition: var(--transition);
}
/* garante tinta sobre o acento (cinto-de-seguranca contra heranca de cor de icone) */
.send-btn [class*="ph-"] { color: #fff !important; }
.send-btn:hover {
  filter: brightness(1.06);
  transform: scale(1.04);                            /* spec .send:hover { scale 1.04 } */
  box-shadow: 0 8px 22px -6px var(--accent-glow);
}
.send-btn:disabled {
  background: var(--bg-active);       /* estado desabilitado coerente com o tema */
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
  filter: none;
}

/* ========== Login ========== */
/* ===========================================================================
   OVERRIDE — SUPERFICIE: LOGIN  (handoff EVOLUT-ON redesign -> codebase REAL)
   ---------------------------------------------------------------------------
   AVISO DE REVISAO ADVERSARIAL:
   O bloco original usava o vocabulario de tokens do SPEC do designer
   (crm-styles.css: --bg, --surface, --surface-2, --border-strong, --accent-2,
   --accent-ink, --text, --text-dim, --text-faint, --rose, --r, --r-pill).
   NENHUM desses tokens existe no codebase real (FRONT/assets/style.css :root
   + index.html body[data-theme=hightech]). Foram TODOS remapeados para os
   tokens reais abaixo. Sem isso, card/inputs/botao ficariam sem estilo.

   Mapeamento spec -> token REAL do projeto:
     --bg            -> --bg-darkest        (#060a13 / hightech #0a0a0a)
     --surface(card) -> --glass             (translucido: o card e vidro)
     --surface-2     -> color-mix(bg-mid)   (fundo de input)
     --border-strong -> --border-light
     --accent-2      -> --accent-dark
     --accent-ink    -> #fff (literal, = inline original)
     --text          -> --text-primary
     --text-dim      -> --text-sec
     --text-faint    -> --text-muted
     --rose          -> --danger
     --r (input/btn) -> 10px literal (= inline original)
     --r (card)      -> --radius-xl (20px)
     orb violeta     -> --purple (#8b5cf6, existe) / glow #7c3aed permitido
     --shadow, --accent, --accent-glow, --border -> existem (usados direto)

   ORDEM DE CARGA: este arquivo (modern.css) DEVE ser o ULTIMO <link> do <head>,
   depois de assets/style.css e DEPOIS do <style> inline. Como os alvos sao
   seletores de id/classe (nao style=""), basta mesma especificidade + ordem
   p/ vencer. !important so onde o inline usa shorthand de background.
   So props VISUAIS. display/position/flex/width/overflow INTACTOS.
   =========================================================================== */

/* ---- Fundo: token + grade sutil mascarada (era #060a13 fixo) ---- */
#loginOverlay {
  background-color: var(--bg-darkest) !important;
  /* grade sutil + vinheta que escurece as bordas (SEM mask -> overlay continua OPACO
     e cobre o app por inteiro) + glow de acento no topo. NUNCA usar mask-image aqui:
     mascarar o container fura a cobertura e o app vaza por tras. */
  background-image:
    radial-gradient(125% 125% at 50% 38%, transparent 42%, var(--bg-darkest) 82%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    radial-gradient(1100px 600px at 50% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%) !important;
  background-size: auto, 46px 46px, 46px 46px, auto !important;
  background-position: center !important;
  background-repeat: no-repeat, repeat, repeat, no-repeat !important;
}

/* ---- Orb 1 (topo-esq) -> ACENTO. So retinta; geometria inline mantida ---- */
#loginOverlay::before {
  background: radial-gradient(circle, var(--accent), transparent) !important;
  opacity: .5 !important;
}

/* ---- Orb 2 (baixo-dir) -> accent-dark (era #8b5cf6) ---- */
#loginOverlay::after {
  background: radial-gradient(circle, var(--accent-dark), transparent) !important;
  opacity: .4 !important;
}

/* ---- Card: vidro (--glass) + blur 22px + borda forte + raio + sombra ---- */
.login-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);              /* 20px (= spec calc(r+8) aprox.) */
  box-shadow: var(--shadow);
  padding: 40px 38px 32px;
}

/* ---- Orb 3 violeta atras do card (substitui .orb--3 do DOM) ----
   Glow violeta literal permitido (cor de IA do projeto). z-index:-1 = atras. */
.login-card::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  right: -150px; top: 30%;
  border-radius: 50%;
  background: #7c3aed;
  filter: blur(60px);
  opacity: .22;
  z-index: -1;
  pointer-events: none;
}

/* ---- Logo: glow de acento (era drop-shadow ciano fixo) ---- */
.login-logo {
  filter: drop-shadow(0 4px 20px var(--accent-glow));
}

/* ---- Titulo: 30px/800, tracking .05em, gradiente text->accent, nowrap ---- */
.login-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .05em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Subtitulo: --text-sec ---- */
.login-sub {
  color: var(--text-sec);
  font-size: 13.5px;
}

/* ---- Label: 11/800 uppercase, tracking .1em, --text-muted ---- */
.login-field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Input: h52, surface translucida, borda --border, raio 10px ---- */
.login-field input {
  height: 52px;
  padding: 0 16px;                       /* altura controla o vertical */
  background: color-mix(in srgb, var(--bg-mid) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-field input::placeholder { color: var(--text-muted); }

/* ---- Foco: borda acento + anel 3px glow + fundo painel ---- */
.login-field input:focus {
  border-color: var(--accent);
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ---- Botao Entrar: gradiente accent->accent-dark, h52, 15.5/800, glow ---- */
.login-btn {
  height: 52px;
  padding: 0;                            /* altura fixa controla o vertical */
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .03em;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  box-shadow: 0 12px 30px -10px var(--accent-glow);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.login-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px var(--accent-glow);
  opacity: 1;                            /* anula o opacity:.92 inline */
}

/* ---- Erro: --danger tokenizado (era #ef4444 fixo) ---- */
.login-error {
  color: var(--danger);
  font-size: 13px;
}

/* ===========================================================================
   RESPONSIVO — preserva o @media (max-width:480px) do <style> inline.
   Como este arquivo carrega DEPOIS com a mesma especificidade de classe, as
   regras nao-media acima venceriam DENTRO do breakpoint e quebrariam o mobile.
   Re-declarado aqui para manter o layout responsivo intacto.
   =========================================================================== */
@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px;
    border-radius: 16px;
  }
  .login-title { font-size: 22px; white-space: normal; }
}

/* ===========================================================================
   OPCIONAIS — .login-pill ("CRM · v2.0") e .login-foot ("Acesso seguro...")
   NAO existem no DOM atual (index.html 2404-2415: .login-sub -> .login-field
   direto). Ficam comentados; so ative apos inserir os nos no markup.
   (--r-pill nao existe no projeto: usar 999px literal; --accent existe.)
   ---------------------------------------------------------------------------
   .login-pill {
     display: inline-block; margin: 12px 0 26px;
     font-size: 11px; font-weight: 700; letter-spacing: .08em;
     color: var(--accent);
     background: color-mix(in srgb, var(--accent) 14%, transparent);
     padding: 5px 14px; border-radius: 999px;
   }
   .login-foot {
     margin-top: 18px; font-size: 11.5px; color: var(--text-muted);
   }
   =========================================================================== */

/* ░░░░░░░░░░ Gravação de áudio (estilo WhatsApp) ░░░░░░░░░░ */
/* Mic: rosa de base; durante a gravação vira botão CANCELAR (lixeira) vermelho */
.mic-btn{ color:#f43f5e; }
.mic-btn .ico-cancel{ display:none; }
.mic-btn.recording{ color:#fff; background:var(--danger); }
.mic-btn.recording:hover{ background:var(--danger); filter:brightness(1.08); }
.mic-btn.recording .ico-mic{ display:none; }
.mic-btn.recording .ico-cancel{ display:block; }
.mic-btn.recording::before, .mic-btn.recording::after{ display:none; } /* sem ripple no modo cancelar */

/* Botão Enviar "armado" enquanto grava (convida a mandar o áudio) */
.input-wrapper.recording .send-btn{
  background:var(--accent) !important; color:var(--accent-ink,#fff) !important;
  opacity:1 !important; animation:sendArmed 1.3s ease-in-out infinite;
}
@keyframes sendArmed{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }

/* Barra indicadora: pílula flutuante acima do campo */
.recording-bar{
  background:color-mix(in srgb, var(--danger) 9%, var(--bg-mid));
  border:1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  border-radius:var(--radius-md);
  margin:0 2px 8px; padding:9px 14px; gap:11px;
  color:var(--danger);
}
.rec-dot{
  width:10px; height:10px; border-radius:50%; background:var(--danger); flex-shrink:0;
  animation:recDot 1.3s ease-out infinite;
}
@keyframes recDot{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 60%,transparent); opacity:1 }
  70%{ box-shadow:0 0 0 9px transparent; opacity:.55 }
  100%{ box-shadow:0 0 0 0 transparent; opacity:1 }
}
#recTimer{ color:var(--text-primary); }
.rec-hint{ color:var(--text-muted); }

/* Onda: 9 barras, alturas variadas, animação suave */
.rec-wave{ gap:3px; height:24px; }
.rec-wave span{ width:3px; background:var(--danger); border-radius:3px;
  animation:recWave 1s ease-in-out infinite alternate; transform-origin:center; }
.rec-wave span:nth-child(1){ height:9px;  animation-delay:0s }
.rec-wave span:nth-child(2){ height:17px; animation-delay:.12s }
.rec-wave span:nth-child(3){ height:23px; animation-delay:.24s }
.rec-wave span:nth-child(4){ height:13px; animation-delay:.36s }
.rec-wave span:nth-child(5){ height:20px; animation-delay:.16s }
.rec-wave span:nth-child(6){ height:10px; animation-delay:.30s }
.rec-wave span:nth-child(7){ height:18px; animation-delay:.06s }
.rec-wave span:nth-child(8){ height:14px; animation-delay:.22s }
.rec-wave span:nth-child(9){ height:8px;  animation-delay:.40s }
@keyframes recWave{ from{ transform:scaleY(.28) } to{ transform:scaleY(1) } }

/* ░░░░░░░░░░ Orçamento rápido: igualar aos quick-actions ░░░░░░░░░░ */
/* Era .action-btn (círculo transparente) no meio dos preenchidos (carrinho/IA) -> destoava.
   Vira quick-action circular preenchido emerald, 38px = mesmo tamanho dos outros. Mira só este botão. */
.action-btn[onclick*="openOrcamentoRapido"]{
  width:38px; height:38px; min-width:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#10b981,#0ea5a3) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  box-shadow:0 4px 14px -5px color-mix(in srgb,#10b981 60%,transparent);
}
.action-btn[onclick*="openOrcamentoRapido"]:hover{
  filter:brightness(1.06);
  background:linear-gradient(135deg,#10b981,#0ea5a3) !important;
  color:#fff !important;
  box-shadow:0 6px 18px -6px color-mix(in srgb,#10b981 65%,transparent);
}
.action-btn[onclick*="openOrcamentoRapido"] [class*="ph-"]{ color:#fff !important; }

/* ░░░░░░░░░░ Centralizar verticalmente o campo de mensagem ░░░░░░░░░░ */
/* Textarea (min-height 36px inline, sem padding) deixava o texto colado no topo,
   desalinhado dos botões (38px). Igualo a altura e dou padding simétrico:
   9 + 20(line) + 9 = 38 (border-box) -> 1 linha perfeitamente centralizada na fileira.
   Mantém .input-wrapper align-items:flex-end -> multilinha cresce pra cima (estilo chat). */
.msg-input{
  min-height:38px !important;
  line-height:20px;
  padding-top:9px !important;
  padding-bottom:9px !important;
}