/* ===== lunex — base (tokens do design system, enxutos) =====
   Vem do design system do app de referência, com só o que o chat usa:
   claro/escuro, cores, sombras, botões, cabeçalho e esqueleto de carregamento.
   Nada de nav inferior, tiles, skins de time, telas de função. */

@font-face{font-family:'Poppins';font-weight:300;font-display:swap;src:url('/static/fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('/static/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('/static/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('/static/fonts/poppins-600.woff2') format('woff2')}

/* ---------- tokens: tema CLARO (padrão) ---------- */
:root{
  color-scheme:light;
  --bg0:#eceef1; --bg1:#f6f7f9; --bg2:#ffffff;
  --app-bg:radial-gradient(1200px 640px at 110% -14%,color-mix(in srgb,var(--ink2) 3%,transparent),transparent 62%),
    radial-gradient(1000px 560px at -12% 4%,color-mix(in srgb,var(--ink2) 2.5%,transparent),transparent 60%),var(--bg0);
  --surf:#ffffff; --surf2:#f7f8fa; --line:#e5e8ec; --line2:#d4d8dd;
  --ink:#0b0d10; --ink2:#3a4048; --ink3:#6b7280;
  --teal:#0d2f78; --teal-h:#0a2660; --teal-2:#2a52b8; --teal-soft:#e6eaf6; --teal-btn:#0d2f78;
  --unread:#1f54e0; --unread-glow:rgba(31,84,224,.45); --unread-soft:#e9f0ff;
  --ok:#1f7a5c; --ok-2:#37b889; --ok-soft:#e3f3ec; --ok-line:#bfe6d2; --ok-ink:#136046;
  --warn:#9c8a0a; --warn-soft:#faf6dc; --warn-line:#ece0b3; --warn-ink:#6f6206;
  --err:#d23f3f; --neg:#d23f3f; --err-soft:#fbe9e9; --err-line:#f0d2d2; --err-ink:#a23a33;
  --info-soft:#e6eaf6; --info-line:#c2cdec; --info-ink:#0d2f78;
  --r:18px; --r-sm:13px; --r-lg:24px;
  --sh:0 12px 30px rgba(20,30,55,.10); --sh-sm:0 4px 16px rgba(20,30,55,.06);
  --nav-h:0px; --nav-bg:var(--bg0);
  --foot:#aab2bd;
  --font-titulo:'Poppins',system-ui,sans-serif;
  /* aqui não existe menu lateral do app: a lista de conversas começa no zero */
  --side-w:0px; --rail-w:0px;
  --z:1;
}

/* ---------- tokens: tema ESCURO (escolhido na mão) ---------- */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg0:#0a0b0d; --bg1:#0f1115; --bg2:#14171c;
  --surf:#15181d; --surf2:#1b1f25; --line:#262b32; --line2:#333a43;
  --ink:#f3f5f7; --ink2:#bdc3cc; --ink3:#8b939d;
  --teal:#8fb4f7; --teal-h:#143a8f; --teal-2:#aecaf9; --teal-soft:#13224a; --teal-btn:#0d2f78;
  --app-bg:radial-gradient(1200px 620px at 110% -12%,color-mix(in srgb,var(--ink2) 6%,transparent),transparent 58%),
    radial-gradient(1000px 560px at -12% 6%,color-mix(in srgb,var(--ink2) 5%,transparent),transparent 55%),
    radial-gradient(900px 520px at 50% 122%,color-mix(in srgb,var(--ink2) 4%,transparent),transparent 60%),var(--bg0);
  --unread:#4f8cff; --unread-glow:rgba(79,140,255,.6); --unread-soft:#1b2a4d;
  --ok:#2f9e74; --ok-2:#54d3a0; --ok-soft:#10271f; --ok-line:#1d4636; --ok-ink:#7fe0b8;
  --warn:#d1ba0f; --warn-soft:#2a2608; --warn-line:#48400f; --warn-ink:#e8d65a;
  --err:#f06a6a; --neg:#f06a6a; --err-soft:#2e1818; --err-line:#4e2727; --err-ink:#f2a6a6;
  --info-soft:#13224a; --info-line:#27407a; --info-ink:#9cb6ee;
  --sh:0 12px 30px rgba(0,0,0,.5); --sh-sm:0 4px 16px rgba(0,0,0,.35);
  --nav-bg:var(--bg0);
  --foot:#3a4250;
}

/* ---------- tema ESCURO automático (segue o aparelho, se não escolheu "claro") ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg0:#0a0b0d; --bg1:#0f1115; --bg2:#14171c;
    --surf:#15181d; --surf2:#1b1f25; --line:#262b32; --line2:#333a43;
    --ink:#f3f5f7; --ink2:#bdc3cc; --ink3:#8b939d;
    --teal:#8fb4f7; --teal-h:#143a8f; --teal-2:#aecaf9; --teal-soft:#13224a; --teal-btn:#0d2f78;
    --app-bg:radial-gradient(1200px 620px at 110% -12%,color-mix(in srgb,var(--ink2) 6%,transparent),transparent 58%),
      radial-gradient(1000px 560px at -12% 6%,color-mix(in srgb,var(--ink2) 5%,transparent),transparent 55%),
      radial-gradient(900px 520px at 50% 122%,color-mix(in srgb,var(--ink2) 4%,transparent),transparent 60%),var(--bg0);
    --unread:#4f8cff; --unread-glow:rgba(79,140,255,.6); --unread-soft:#1b2a4d;
    --ok:#2f9e74; --ok-2:#54d3a0; --ok-soft:#10271f; --ok-line:#1d4636; --ok-ink:#7fe0b8;
    --warn:#d1ba0f; --warn-soft:#2a2608; --warn-line:#48400f; --warn-ink:#e8d65a;
    --err:#f06a6a; --neg:#f06a6a; --err-soft:#2e1818; --err-line:#4e2727; --err-ink:#f2a6a6;
    --info-soft:#13224a; --info-line:#27407a; --info-ink:#9cb6ee;
    --sh:0 12px 30px rgba(0,0,0,.5); --sh-sm:0 4px 16px rgba(0,0,0,.35);
    --nav-bg:var(--bg0);
    --foot:#3a4250;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  min-height:100vh; min-height:100dvh; color:var(--ink);
  font-family:'Poppins',system-ui,Segoe UI,Roboto,sans-serif; font-weight:400;
  background:var(--app-bg) fixed;
  -webkit-font-smoothing:antialiased;
  padding:calc(env(safe-area-inset-top) + 6px) 18px calc(env(safe-area-inset-bottom) + 22px);
}
a{color:inherit;text-decoration:none}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pagehead{padding:14px 2px 6px}
.pagehead h1{font-family:var(--font-titulo);font-weight:700;font-size:25px;margin:0;letter-spacing:-.5px}
.pagehead.chat-head{display:flex;align-items:center;gap:8px;
  padding-top:calc(env(safe-area-inset-top) + 10px)}

.card{background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;margin:13px 0;box-shadow:var(--sh-sm)}
.card h2{font-weight:600;font-size:16.5px;margin:0 0 6px}
.card p{margin:0 0 15px;color:var(--ink2);font-size:14.5px;line-height:1.55}

button,.btn{font-family:inherit;font-size:15.5px;font-weight:600;border:0;cursor:pointer;width:auto;
  padding:14px 16px;border-radius:var(--r-sm);color:#fff;text-align:center;display:inline-block;
  background:linear-gradient(180deg,var(--teal-btn),var(--teal-h));box-shadow:var(--sh-sm);transition:transform .1s,filter .2s}
button:active,.btn:active{transform:scale(.98);filter:brightness(1.04)}
button:disabled{opacity:.5;box-shadow:none}
button.ghost{background:var(--teal-soft);border:1px solid var(--line2);color:var(--teal);box-shadow:none}
button.neg,.btn.neg{background:var(--err-soft);border:1px solid var(--err-line);color:var(--err-ink);box-shadow:none}

.status{font-size:13.5px;margin-top:12px;min-height:18px}
.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}.muted{color:var(--ink3)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--warn);animation:pulse 1.4s infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,186,15,.45)}70%{box-shadow:0 0 0 9px rgba(209,186,15,0)}100%{box-shadow:0 0 0 0 rgba(209,186,15,0)}}

.empty{text-align:center;color:var(--ink3);font-size:14.5px;padding:54px 16px;line-height:1.6}
.empty .big{font-size:34px;display:block;margin-bottom:10px}
.skel{height:96px;border-radius:var(--r);margin:13px 0;border:1px solid var(--line);
  background:linear-gradient(100deg,var(--surf) 30%,var(--bg0) 50%,var(--surf) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- tela de entrar ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:380px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--sh)}
.login-card h1{font-family:var(--font-titulo);font-size:30px;margin:0 0 4px;letter-spacing:-.5px}
.login-card .sub{color:var(--ink3);font-size:14px;margin:0 0 22px}
.login-card label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px}
.login-card input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg1);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;outline:none;
  transition:border-color .2s}
.login-card input:focus{border-color:var(--teal-2)}
.login-card button{width:100%;margin-top:22px}
.login-erro{margin-top:14px;font-size:13.5px;color:var(--err-ink);background:var(--err-soft);
  border:1px solid var(--err-line);border-radius:var(--r-sm);padding:10px 12px}