/* =========================================================
   MEOW — estilo "Liquid Glass" (preto)
   Ativo quando <html data-ui="glass">. O estilo antigo (Lavanda) continua no app.css.
   Fundo de cor pura (sem desenho nem animação); componentes de vidro com desfoque,
   borda clara e brilho interno; toque "líquido" com mola.
   Tem versão clara e escura, seguindo o interruptor de tema do usuário.
   ========================================================= */

/* ---------- CLARO ---------- */
:root[data-ui="glass"]{
  --bg:#eceff0; --panel:#f4f6f7; --card:#ffffff; --panel2:#eef1f2; --hover:#e6eaec; --line:rgba(13,20,23,.08);
  --text:#0d1417; --muted:#6f7c82; --soft:#cfd6d9;
  --accent:#0d1417; --accent-ink:#ffffff; --pop:#ff5b1f; --pop-ink:#ffffff;
  --lime:#a6ec5b; --lime-ink:#0d1417; --lime-text:#3f7f12;
  --out:#0d1417; --out-ink:#ffffff; --in:#eef1f2; --chat-bg:#ffffff;
  --danger:#e5402f; --ok:#7fd63f; --link:#0d1417; --read:#3f7f12;
  --shadow:0 18px 40px rgba(13,20,23,.10); --shadow-sm:0 6px 18px rgba(13,20,23,.07);
  --glass-bg:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  --glass-line:rgba(255,255,255,.95); --glass-edge:rgba(13,20,23,.07); --glass-hi:#ffffff; --glass-shadow:0 8px 26px rgba(13,20,23,.08);
  --head-bg:rgba(255,255,255,.82); --head-text:#0d1417; --head-sub:#3f7f12;
  --back-bg:#0d1417; --back-ink:#ffffff;
  --tab-bg:rgba(255,255,255,.78); --tab-ic:#0d1417; --tab-ic-bg:rgba(13,20,23,.05); --tab-on:#0d1417; --tab-on-ink:#ffffff;
  --gap:#f4f6f7; /* cor do "respiro" ao redor de avatares e selos */
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
/* ---------- ESCURO ---------- */
@media (prefers-color-scheme: dark){
  :root[data-ui="glass"]:not([data-theme="light"]){
    --bg:#05090b; --panel:#0b1418; --card:#121c20; --panel2:#18242a; --hover:#1b282e; --line:rgba(255,255,255,.08);
    --text:#eef3f4; --muted:#87969c; --soft:#34434a;
    --accent:#ffffff; --accent-ink:#0b1418; --lime-text:#a6ec5b;
    --out:#ffffff; --out-ink:#0b1418; --in:#18242a; --chat-bg:#0a1114; --link:#a6ec5b; --read:#a6ec5b;
    --shadow:0 18px 40px rgba(0,0,0,.5); --shadow-sm:0 6px 18px rgba(0,0,0,.4);
    --glass-bg:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
    --glass-line:rgba(255,255,255,.12); --glass-edge:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.2); --glass-shadow:0 10px 30px rgba(0,0,0,.45);
    --head-bg:#0b1418; --head-text:#ffffff; --head-sub:#a6ec5b;
    --back-bg:#ffffff; --back-ink:#0b1418;
    --tab-bg:rgba(9,15,18,.62); --tab-ic:#dfe7ea; --tab-ic-bg:rgba(255,255,255,.07); --tab-on:#ffffff; --tab-on-ink:#0b1418;
    --gap:#0b1418;
    color-scheme:dark;
  }
}
:root[data-ui="glass"][data-theme="dark"]{
  --bg:#05090b; --panel:#0b1418; --card:#121c20; --panel2:#18242a; --hover:#1b282e; --line:rgba(255,255,255,.08);
  --text:#eef3f4; --muted:#87969c; --soft:#34434a;
  --accent:#ffffff; --accent-ink:#0b1418; --lime-text:#a6ec5b;
  --out:#ffffff; --out-ink:#0b1418; --in:#18242a; --chat-bg:#0a1114; --link:#a6ec5b; --read:#a6ec5b;
  --shadow:0 18px 40px rgba(0,0,0,.5); --shadow-sm:0 6px 18px rgba(0,0,0,.4);
  --glass-bg:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  --glass-line:rgba(255,255,255,.12); --glass-edge:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.2); --glass-shadow:0 10px 30px rgba(0,0,0,.45);
  --head-bg:#0b1418; --head-text:#ffffff; --head-sub:#a6ec5b;
  --back-bg:#ffffff; --back-ink:#0b1418;
  --tab-bg:rgba(9,15,18,.62); --tab-ic:#dfe7ea; --tab-ic-bg:rgba(255,255,255,.07); --tab-on:#ffffff; --tab-on-ink:#0b1418;
  --gap:#0b1418;
  color-scheme:dark;
}

[data-ui="glass"] body{font-family:var(--font);font-weight:600;letter-spacing:-.005em}
[data-ui="glass"] h1,[data-ui="glass"] h2,[data-ui="glass"] b{letter-spacing:-.02em}

/* =========================================================
   Vidro líquido: desfoque, borda clara, brilho interno e reflexo que corre ao passar
   ========================================================= */
[data-ui="glass"] :where(.row,.search,.banner,.menu,.post,.sq-btn,.composer label.icon-btn,.rec-bar,.locked,.toast,.nudge-btn){
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--glass-edge),var(--glass-shadow);
}
[data-ui="glass"] :where(.row,.btn,.tab svg,.sq-btn,.fab,.icon-btn,.nudge-btn,.composer .send){position:relative;overflow:hidden;isolation:isolate}
[data-ui="glass"] :where(.row,.btn,.sq-btn,.fab,.nudge-btn,.composer .send)::after{
  content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-60%)}
[data-ui="glass"] :where(.row,.btn,.sq-btn,.fab,.nudge-btn,.composer .send):hover::after{animation:sheen 1s ease forwards}
@keyframes sheen{0%{opacity:0;transform:translateX(-60%)}30%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
/* toque "líquido": encolhe com mola e volta ondulando */
[data-ui="glass"] :where(.row,.btn,.sq-btn,.fab,.icon-btn,.nudge-btn,.tab,.sw-row,.story){transition:transform .35s cubic-bezier(.3,1.6,.4,1),background .25s,border-color .25s}
[data-ui="glass"] :where(.row,.btn,.sq-btn,.fab,.icon-btn,.nudge-btn,.sw-row):active{transform:scale(.95);transition-duration:.12s}
[data-ui="glass"] button.row:hover{transform:translateY(-2px)}

/* ---------- estrutura (fundos de cor pura) ---------- */
[data-ui="glass"] .shell{background:var(--bg)}
[data-ui="glass"] .side{background:var(--panel)}
[data-ui="glass"] .side-head h1{font-weight:800;font-size:26px}
[data-ui="glass"] .brand b{font-weight:800;font-size:18px}
[data-ui="glass"] .brand img{border-radius:9px}
[data-ui="glass"] .me-btn .av{border-color:var(--gap)}
[data-ui="glass"] .sec-row h2{font-weight:800}
[data-ui="glass"] .pill-count{background:var(--glass-bg);color:var(--text);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--glass-edge)}
[data-ui="glass"] .sec{color:var(--muted)}
@media (min-width:900px){
  [data-ui="glass"] .side,[data-ui="glass"] .main{border-radius:34px}
}

/* ---------- barra de abas: bolhas de vidro só com ícone ---------- */
[data-ui="glass"] .tabbar{background:var(--tab-bg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-line);border-radius:36px;padding:8px;gap:6px;justify-content:space-around;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--glass-edge),0 16px 40px rgba(0,0,0,.18)}
[data-ui="glass"] .tab{flex:0 0 auto;padding:0;gap:0;border-radius:50%}
[data-ui="glass"] .tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-ui="glass"] .tab svg{width:54px;height:54px;padding:15px;border-radius:50%;color:var(--tab-ic);background:var(--tab-ic-bg);border:1px solid var(--glass-edge)}
[data-ui="glass"] .tab.on svg{background:var(--tab-on);color:var(--tab-on-ink);border-color:transparent;box-shadow:0 8px 20px rgba(0,0,0,.2);animation:blob .6s cubic-bezier(.3,1.5,.4,1)}
@keyframes blob{0%{border-radius:50%;transform:scale(.7)}35%{border-radius:42% 58% 55% 45%/55% 45% 58% 42%;transform:scale(1.12)}70%{border-radius:55% 45% 48% 52%/45% 55% 45% 55%;transform:scale(.97)}100%{border-radius:50%;transform:scale(1)}}
[data-ui="glass"] .tab:active svg{transform:scale(.88)}
[data-ui="glass"] .badge{top:-2px;left:calc(50% + 12px);background:var(--pop);border-color:var(--gap)}

/* ---------- busca e listas ---------- */
[data-ui="glass"] .search{border-radius:999px}
[data-ui="glass"] .search input::placeholder{color:var(--muted)}
[data-ui="glass"] .row{border-radius:26px}
[data-ui="glass"] .row .av{border-color:var(--gap)}
[data-ui="glass"] .online{background:var(--lime);border-color:var(--gap)}
[data-ui="glass"] .row-top small.unread{color:var(--lime-text)}
[data-ui="glass"] .count{background:var(--pop);box-shadow:0 4px 12px rgba(255,91,31,.35)}
[data-ui="glass"] .row.active{outline:1.5px solid var(--accent)}
/* conversa com mensagem nova: vidro com brilho lima */
[data-ui="glass"] .row.hot{background:linear-gradient(135deg,rgba(166,236,91,.26),rgba(166,236,91,.06));color:var(--text);
  border-color:rgba(166,236,91,.6);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(166,236,91,.25),var(--glass-shadow)}
[data-ui="glass"] .row.hot .prev{color:var(--text)}
[data-ui="glass"] .row.hot .row-top small,[data-ui="glass"] .row.hot .typing{color:var(--lime-text)}
[data-ui="glass"] .row.hot .av{border-color:var(--lime)}
[data-ui="glass"] .row.hot .online{border-color:var(--gap)}
[data-ui="glass"] .typing{color:var(--lime-text)}
[data-ui="glass"] .prev .tick.read,[data-ui="glass"] .tick.read{color:var(--read)}
[data-ui="glass"] .msg.out .tick.read{color:var(--lime)}
@keyframes flash{0%{box-shadow:0 0 0 4px rgba(166,236,91,.5)}100%{box-shadow:var(--glass-shadow)}}
[data-ui="glass"] .banner>svg{color:var(--text)}
[data-ui="glass"] .banner.notice{background:linear-gradient(135deg,rgba(166,236,91,.3),rgba(166,236,91,.08));color:var(--text);border-color:rgba(166,236,91,.55);box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow)}
[data-ui="glass"] .banner.notice>svg,[data-ui="glass"] .banner.notice .icon-btn{color:var(--text)}

/* ---------- botões ---------- */
[data-ui="glass"] .btn{font-weight:800;letter-spacing:-.01em}
[data-ui="glass"] .btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(0,0,0,.18)}
[data-ui="glass"] .btn.ghost{background:var(--glass-bg);border:1px solid var(--glass-line);color:var(--text);box-shadow:0 0 0 1px var(--glass-edge)}
[data-ui="glass"] .fab{background:var(--lime);color:var(--lime-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px rgba(166,236,91,.35)}
[data-ui="glass"] .sq-btn{border-radius:50%}
[data-ui="glass"] .icon-btn:hover{background:var(--hover)}
[data-ui="glass"] .seg{background:var(--panel2);border:1px solid var(--line)}
[data-ui="glass"] .seg button.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px rgba(0,0,0,.2)}
[data-ui="glass"] .sw{background:var(--soft)}
[data-ui="glass"] .sw.on{background:var(--lime)}
[data-ui="glass"] .sw::after{box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* ---------- login ---------- */
[data-ui="glass"] .auth{background:var(--bg)}
[data-ui="glass"] .auth-card{background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--glass-edge),0 30px 70px rgba(0,0,0,.14)}
[data-ui="glass"] .auth-logo{background:#0d1417;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.25)}
[data-ui="glass"] label input,[data-ui="glass"] .field{border-radius:18px;border:1px solid var(--line);background:var(--panel2)}
[data-ui="glass"] label input:focus{border-color:var(--accent);background:var(--card)}

/* ---------- conversa ---------- */
[data-ui="glass"] .main{background:var(--chat-bg)}
[data-ui="glass"] .chat-head{background:var(--head-bg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  min-height:84px;border-radius:0 0 30px 30px;padding:calc(env(safe-area-inset-top) + 14px) 16px 16px;
  border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08)}
[data-ui="glass"] .chat-head .back{width:48px;height:48px;border-radius:50%;background:var(--back-bg);color:var(--back-ink);border:0;box-shadow:0 6px 16px rgba(0,0,0,.18)}
[data-ui="glass"] .chat-head .av{border-color:var(--line);box-shadow:none}
[data-ui="glass"] .chat-head .who b{color:var(--head-text);font-weight:800}
[data-ui="glass"] .chat-head .who small{color:var(--head-sub)}
[data-ui="glass"] .nudge-btn{background:linear-gradient(135deg,#ff6a33,#ff5b1f);color:#fff;border-color:rgba(255,255,255,.3)}
[data-ui="glass"] .nudge-btn:disabled{background:var(--panel2);color:var(--muted);border-color:var(--line)}
[data-ui="glass"] .msgs{padding-top:18px;gap:6px}
[data-ui="glass"] .bubble{border-radius:20px;box-shadow:none;font-weight:600}
[data-ui="glass"] .msg.in .bubble{border-bottom-left-radius:6px}
[data-ui="glass"] .msg.out .bubble{border-bottom-right-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
[data-ui="glass"] .day span{background:var(--panel2);color:var(--muted);box-shadow:none}
[data-ui="glass"] .composer{padding:10px 14px calc(14px + env(safe-area-inset-bottom))}
[data-ui="glass"] .composer textarea{background:var(--panel2);box-shadow:none;border:1px solid var(--line)}
[data-ui="glass"] .composer label.icon-btn{color:var(--text);background:var(--panel2);box-shadow:none;border:1px solid var(--line)}
[data-ui="glass"] .composer .send{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 22px rgba(0,0,0,.2)}
[data-ui="glass"] .composer .send.rec{background:var(--accent);color:var(--accent-ink)}
[data-ui="glass"] .rec-bar{background:var(--panel2);box-shadow:none;border:1px solid var(--line)}
[data-ui="glass"] .rec-wave{color:var(--accent)}
[data-ui="glass"] .rec-bar .dot{background:var(--pop)}
[data-ui="glass"] .msg.nudge-msg span{background:rgba(255,91,31,.12);color:var(--pop);box-shadow:none}
[data-ui="glass"] .m-file{background:color-mix(in srgb,currentColor 9%,transparent)}
[data-ui="glass"] .empty-main img{box-shadow:0 18px 40px rgba(0,0,0,.2)}
[data-ui="glass"] .empty-main h2{font-weight:800}

/* ---------- atualizações e perfil ---------- */
[data-ui="glass"] .ring.new{background:conic-gradient(from 210deg,var(--lime),#e7ffb8,var(--pop),var(--lime))}
[data-ui="glass"] .ring.seen{background:var(--soft)}
[data-ui="glass"] .ring .av{border-color:var(--gap)}
[data-ui="glass"] .ring .plus{background:var(--lime);color:var(--lime-ink);border-color:var(--gap)}
[data-ui="glass"] .post{border-radius:32px}
[data-ui="glass"] .post-media{border-radius:24px}
[data-ui="glass"] .like.on{color:var(--lime-text)}
[data-ui="glass"] .like.on svg{fill:var(--lime);stroke:var(--lime-text)}
[data-ui="glass"] .post-actions .icon-btn{color:var(--text)}
[data-ui="glass"] .av-edit{background:conic-gradient(from 210deg,var(--lime),#e7ffb8,var(--pop),var(--lime))}
[data-ui="glass"] .av-edit .av{border-color:var(--gap)}
[data-ui="glass"] .av-edit .cam{background:var(--lime);color:var(--lime-ink);border-color:var(--gap)}
[data-ui="glass"] .profile form{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:28px;
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px var(--glass-edge),var(--glass-shadow)}
[data-ui="glass"] .menu{border-radius:28px}
[data-ui="glass"] .menu button svg{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
[data-ui="glass"] .menu .danger svg{color:var(--danger)}

/* ---------- janelas, avisos e visualizador ---------- */
[data-ui="glass"] .overlay{background:rgba(5,10,12,.4)}
[data-ui="glass"] .sheet{background:var(--glass-bg);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 -10px 40px rgba(0,0,0,.2)}
[data-ui="glass"] .sheet:not(.lightbox){background-color:var(--panel)}
[data-ui="glass"] .sheet.lightbox{background:none;border:0;box-shadow:none;backdrop-filter:none}
[data-ui="glass"] .toast{color:#fff;background:linear-gradient(135deg,rgba(20,30,34,.9),rgba(11,20,24,.82));border-color:rgba(255,255,255,.14);border-radius:999px}
[data-ui="glass"] .push-banner{border-radius:26px}
[data-ui="glass"] .sv-like.on,[data-ui="glass"] .sv-burst svg{color:var(--lime);fill:var(--lime)}
[data-ui="glass"] .vw-file-ic{background:#0d1417;box-shadow:0 12px 26px rgba(0,0,0,.25)}

@media (prefers-reduced-motion: reduce){
  [data-ui="glass"] :where(.row,.btn,.sq-btn,.fab,.nudge-btn,.composer .send)::after{display:none}
}

/* gato MEOW no Liquid Glass */
[data-ui="glass"] :where(.cat-slot:not(.empty),.cat-card,.cp-acts button,.meow-b,.cm-chip,.cm-dice,.cm-hear){
  background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
[data-ui="glass"] .msg.out .meow-b{background:var(--out);color:var(--out-ink);border-color:transparent}
[data-ui="glass"] .cm-chip.on{border-color:var(--text)}
[data-ui="glass"] .cm-sw.on{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--text)}
[data-ui="glass"] .cc-go,[data-ui="glass"] .cat-plus{background:var(--lime);color:var(--lime-text)}
[data-ui="glass"] .cp-card{background:var(--panel);border:1px solid var(--glass-line)}
[data-ui="glass"] .cp-m b{background:var(--lime)}
[data-ui="glass"] .cp-m[data-m="food"] b{background:var(--pop)}
[data-ui="glass"] .cp-m[data-m="nrg"] b{background:#5ab0ff}
[data-ui="glass"] .cp-p.z{color:var(--text)}
[data-ui="glass"] .sel-bar{background:var(--head-bg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
[data-ui="glass"] .msg-menu{background:var(--panel);border-color:var(--glass-line)}
[data-ui="glass"] .msg.selected::before{background:color-mix(in srgb,var(--text) 9%,transparent)}