/* ============================================================================
   EVOM Design System
   Um arquivo, sem build. O painel roda em kiosk num Pi, entao nada de bundler:
   tokens e componentes vivem aqui e sao servidos junto com o HTML.

   Ordem: tokens -> base -> tipografia -> elemento assinatura -> componentes.
   ========================================================================== */

:root{
  /* ---- fundos ---- */
  --evom-bg-950:#08090B;
  --evom-bg-900:#0D0F12;
  --evom-bg-850:#121419;
  --evom-bg-800:#181B20;

  /* ---- superficies ---- */
  --evom-surface-1:#101216;
  --evom-surface-2:#16191E;
  --evom-surface-3:#1D2127;

  /* ---- ambar: o acento. Um so, como manda a regra. ---- */
  --evom-gold-300:#F6C88A;
  --evom-gold-400:#E9A85A;
  --evom-gold-500:#D88936;
  --evom-gold-glow:rgba(233,168,90,.18);

  /* ---- gelo: contraponto frio, nunca compete com o ambar ---- */
  --evom-ice-100:#F1F7FA;
  --evom-ice-200:#D9E7EE;
  --evom-ice-300:#B9CCD7;
  --evom-ice-glow:rgba(217,231,238,.14);

  /* ---- texto ---- */
  --evom-text-primary:#F5F5F3;
  --evom-text-secondary:#A8ADB5;
  --evom-text-muted:#686E78;

  /* ---- bordas ---- */
  --evom-border:rgba(255,255,255,.08);
  --evom-border-active:rgba(246,200,138,.28);

  /* ---- semanticas ---- */
  --evom-success:#65C99B;
  --evom-warning:#E8B65B;
  --evom-danger:#DF6D6D;
  --evom-info:#80B9D4;

  /* ---- raios ---- */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* ---- ritmo vertical: escala de 4, pra espacamento nao virar chute ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- profundidade: sombra tingida do fundo, nunca preto puro ---- */
  --shadow-sm:0 2px 8px rgba(4,5,7,.5);
  --shadow-md:0 12px 32px rgba(4,5,7,.45);
  --shadow-lg:0 20px 60px rgba(4,5,7,.55);

  /* ---- gradiente assinatura. Detalhe, nunca area grande. ---- */
  --evom-signature:linear-gradient(110deg,
    #E9A85A 0%, #F6C88A 35%, #EDEEEF 65%, #B9CCD7 100%);

  /* ---- movimento: curto e ease-out. Nada saltando. ---- */
  --t-fast:150ms cubic-bezier(.16,1,.3,1);
  --t-base:200ms cubic-bezier(.16,1,.3,1);
  --t-slow:250ms cubic-bezier(.16,1,.3,1);

  /* ---- camadas: escala fechada, sem z-index 9999 solto ---- */
  --z-base:0; --z-cena:1; --z-conteudo:2; --z-nav:20; --z-overlay:60; --z-topo:100;

  /* ---- tipografia ---- */
  --font-ui:'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-display:'Sora', 'Geist', sans-serif;
  --font-mono:ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================ base ======================================= */

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  color:var(--evom-text-primary);
  background:
    radial-gradient(circle at 20% 0%, rgba(216,137,54,.10), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(185,204,215,.07), transparent 30%),
    var(--evom-bg-950);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grao: quebra a chapa digital. Fixo, sem custo de layout. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:var(--z-topo);
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:rgba(233,168,90,.26); color:var(--evom-text-primary); }

:focus-visible{
  outline:2px solid var(--evom-gold-400);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.09); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.16); background-clip:content-box; }

/* ========================== tipografia =================================== */

.h1, h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px, 2.6vw, 40px); letter-spacing:-.04em; line-height:1.05;
  margin:0; color:var(--evom-text-primary); text-wrap:balance;
}
.h2, h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px, 1.9vw, 28px); letter-spacing:-.025em; line-height:1.15;
  margin:0; text-wrap:balance;
}
.h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(16px, 1.3vw, 19px); letter-spacing:-.015em; margin:0;
}
p{ margin:0 0 var(--sp-4); max-width:65ch; text-wrap:pretty; }

.label{
  font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--evom-text-muted);
}
.mono, .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.t-sec{ color:var(--evom-text-secondary); }
.t-muted{ color:var(--evom-text-muted); }

/* Gradiente assinatura em texto: so em numero de destaque ou wordmark. */
.t-signature{
  background:var(--evom-signature);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===================== elemento assinatura EVOM ==========================
   Anel de inteligencia: metade ambar quente, metade gelo. Serve de avatar,
   loader e marca. O giro e lento de proposito: presenca, nao chamariz.        */

.evom-mark{
  --tam:28px;
  position:relative; width:var(--tam); height:var(--tam); flex:none;
  border-radius:50%;
  background:conic-gradient(from 210deg,
    var(--evom-gold-400) 0deg, var(--evom-gold-300) 70deg,
    var(--evom-ice-100) 150deg, var(--evom-ice-300) 220deg,
    rgba(185,204,215,.15) 290deg, var(--evom-gold-400) 360deg);
  /* anel, nao disco */
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 56%);
          mask:radial-gradient(circle, transparent 54%, #000 56%);
  animation:evom-orbita 14s linear infinite;
}
.evom-mark::after{
  content:''; position:absolute; inset:-30%;
  background:radial-gradient(circle, var(--evom-gold-glow), transparent 65%);
  pointer-events:none;
}
.evom-mark.pensando{ animation-duration:3.2s; }
.evom-mark.grande{ --tam:44px; }
.evom-mark.pequeno{ --tam:20px; }
@keyframes evom-orbita{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .evom-mark{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ superficies ================================ */

.card{
  background:linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  padding:var(--sp-5);
  transition:border-color var(--t-base), transform var(--t-base);
}
.card.interativo:hover{
  border-color:rgba(246,200,138,.18);
  transform:translateY(-2px);
}
.card.plano{ background:none; border:0; padding:0; }

.divisor{ height:1px; background:var(--evom-border); border:0; margin:var(--sp-5) 0; }

/* ============================== botoes =================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:.01em;
  padding:10px 18px; min-height:40px;      /* alvo de toque confortavel */
  border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast), border-color var(--t-fast),
             color var(--t-fast), transform var(--t-fast);
}
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.btn-primary{ background:#F1F1EE; color:#101010; }
.btn-primary:hover:not(:disabled){ background:#fff; }

.btn-secondary{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08);
  color:var(--evom-text-primary);
}
.btn-secondary:hover:not(:disabled){
  background:rgba(255,255,255,.07); border-color:var(--evom-border-active);
}

.btn-ghost{ background:none; color:var(--evom-text-secondary); padding:8px 12px; }
.btn-ghost:hover:not(:disabled){ color:var(--evom-text-primary); background:rgba(255,255,255,.04); }

/* CTA especial, um por tela no maximo */
.btn-gold{
  background:linear-gradient(110deg, var(--evom-gold-500), var(--evom-gold-400));
  color:#150E05; font-weight:600;
}
.btn-gold:hover:not(:disabled){ filter:brightness(1.06); }

.btn-icone{ padding:8px; min-height:36px; width:36px; }

/* ============================== campos =================================== */

.campo{
  width:100%; font-family:var(--font-ui); font-size:15px; line-height:1.5;
  color:var(--evom-text-primary);
  background:rgba(22,25,30,.92);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.campo::placeholder{ color:var(--evom-text-muted); }
.campo:focus{
  outline:none;
  border-color:rgba(233,168,90,.32);
  box-shadow:0 0 0 1px rgba(233,168,90,.06), 0 0 40px rgba(233,168,90,.07);
}

/* O campo principal e o componente mais refinado do sistema. */
.campo-principal{
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:16px 18px;
  resize:none;
}

/* ============================== badges =================================== */

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; letter-spacing:.05em;
  padding:4px 9px; border-radius:var(--radius-xs);
  background:rgba(255,255,255,.05); border:1px solid var(--evom-border);
  color:var(--evom-text-secondary);
}
.badge .ponto{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-ok{ color:var(--evom-success); border-color:rgba(101,201,155,.24); background:rgba(101,201,155,.07); }
.badge-alerta{ color:var(--evom-warning); border-color:rgba(232,182,91,.24); background:rgba(232,182,91,.07); }
.badge-risco{ color:var(--evom-danger); border-color:rgba(223,109,109,.26); background:rgba(223,109,109,.08); }
.badge-info{ color:var(--evom-info); border-color:rgba(128,185,212,.24); background:rgba(128,185,212,.07); }

/* ============================== sidebar ==================================
   So aparece no modo conversa. Numa TV de parede ninguem clica em menu.      */

.sidebar{
  display:flex; flex-direction:column; gap:var(--sp-1);
  width:236px; flex:none; padding:var(--sp-5) var(--sp-3);
  background:var(--evom-bg-950);
  border-right:1px solid var(--evom-border);
}
.sidebar-marca{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-3) var(--sp-5);
}
.sidebar-marca .nome{
  font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:.02em;
}
.sidebar .grupo{ padding:var(--sp-5) var(--sp-3) var(--sp-2); }

.nav-item{
  position:relative; display:flex; align-items:center; gap:var(--sp-3);
  padding:9px var(--sp-3); border-radius:var(--radius-sm);
  color:var(--evom-text-secondary); font-size:14px;
  text-decoration:none; cursor:pointer; border:0; background:none; width:100%;
  font-family:var(--font-ui); text-align:left;
  transition:background var(--t-fast), color var(--t-fast);
}
.nav-item:hover{ background:rgba(255,255,255,.03); color:var(--evom-text-primary); }
.nav-item svg{ width:17px; height:17px; flex:none; stroke-width:1.6; opacity:.85; }
.nav-item.ativo{
  background:rgba(255,255,255,.045); color:var(--evom-text-primary);
  box-shadow:inset 0 0 24px rgba(233,168,90,.05);
}
.nav-item.ativo::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:17px; border-radius:2px; background:var(--evom-gold-400);
}
.nav-item.ativo svg{ color:var(--evom-gold-300); opacity:1; }

/* =============================== chat ====================================
   Mensagem do EVOM nao mora dentro de card: avatar, nome e resposta direto
   sobre o fundo. Card so pra fala do usuario, que e o elemento inserido.     */

.msg{ display:flex; gap:var(--sp-4); max-width:78ch; }
.msg-eu{ align-self:flex-end; max-width:min(62ch,88%); }
.msg-eu .balao{
  background:var(--evom-bg-800);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-md);
  padding:12px 16px;
}
.msg-evom .quem{
  font-size:12px; font-weight:500; letter-spacing:.06em;
  color:var(--evom-text-secondary); margin-bottom:var(--sp-2);
}
.msg-evom .conteudo{ color:var(--evom-text-primary); }
.msg .corpo{ white-space:pre-wrap; word-wrap:break-word; min-width:0; }
.msg .rodape{
  font-family:var(--font-mono); font-size:11px; color:var(--evom-text-muted);
  margin-top:var(--sp-2);
}

/* =========================== tooltip / dropdown ========================== */

[data-dica]{ position:relative; }
[data-dica]::after{
  content:attr(data-dica); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--evom-surface-3); color:var(--evom-text-primary);
  border:1px solid var(--evom-border); border-radius:var(--radius-xs);
  padding:6px 10px; font-size:12px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity var(--t-fast), transform var(--t-fast);
  box-shadow:var(--shadow-md); z-index:var(--z-overlay);
}
[data-dica]:hover::after, [data-dica]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

.painel-flutuante{
  background:var(--evom-surface-2); border:1px solid var(--evom-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:var(--sp-2); z-index:var(--z-overlay);
}

/* ============================== estados ================================== */

.esqueleto{
  background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
  background-size:200% 100%; border-radius:var(--radius-xs);
  animation:esqueleto 1.6s ease-in-out infinite;
}
@keyframes esqueleto{ to{ background-position:-200% 0; } }

.vazio{ color:var(--evom-text-muted); font-size:14px; }

/* Entrada escalonada: nada monta tudo de uma vez. */
.entra{ animation:entra var(--t-slow) both; }
.entra:nth-child(2){ animation-delay:40ms; }
.entra:nth-child(3){ animation-delay:80ms; }
.entra:nth-child(4){ animation-delay:120ms; }
@keyframes entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .entra, .esqueleto{ animation:none; }
  .card.interativo:hover{ transform:none; }
}

/* ========================= acesso por teclado ============================ */

.pular-para-conteudo{
  position:absolute; left:-9999px; top:var(--sp-3);
  background:var(--evom-surface-3); color:var(--evom-text-primary);
  padding:10px 16px; border-radius:var(--radius-sm); z-index:var(--z-topo);
}
.pular-para-conteudo:focus{ left:var(--sp-3); }

.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}