/* Samb-AI — DESIGN SYSTEM clean + vidro (LEVE, sem travar o celular).
   Lição: backdrop-filter (blur) em vários elementos trava no mobile. Aqui o "vidro" é
   feito com TRANSLUCIDEZ (barata) e o blur fica SÓ na barra inferior (1 elemento fixo).
   Paleta CINZA neutra (mais parecida com vidro real que o azul). */

:root{
  --accent:#c3c9d4 !important;        /* cinza claro suave (era verde/azul) */
  --accent-2:#9aa3b2 !important;
  --bg:#0c0f16 !important;
  --surface:rgba(255,255,255,0.045) !important;   /* superfície = vidro translúcido (sem blur) */
  --surface-2:rgba(255,255,255,0.07) !important;
  --line:rgba(255,255,255,0.08) !important;        /* bordas bem suaves em todo o app */
  --radius:16px !important;
}

/* ---- superfícies de chrome: OPACAS ----
   Eram translúcidas (rgba .82) + blur. Como o blur é desligado logo abaixo (custo no
   celular), sobrava só a transparência: o texto do conteúdo aparecia ATRAVÉS do menu e
   do cabeçalho, ilegível. Chrome fixo/sticky agora é sólido. */
header, form, #quickchips, #attachbar, #persona-bar{
  background:var(--bg,#0c0f16) !important;
  border-color:rgba(255,255,255,0.08) !important;
}
#sb-drawer, #drawer{
  background:#0e1420 !important;
  border-color:rgba(255,255,255,0.10) !important;
  box-shadow:2px 0 24px rgba(0,0,0,.5);
}
/* abas/barras sticky: fundo OPACO pra não vazar conteúdo por trás */
.tabs, .tabbar, .topbar, .toolbar{ background:var(--bg,#0c0f16) !important; }

/* ---- MATA o blur em tudo (performance no celular); só a barra inferior mantém ---- */
header, form, #quickchips, #attachbar, #drawer, #sb-drawer, #overlay, #sb-ov,
#persona-bar, .topbar, .tabs, .tabbar, .toolbar, .card, .panel{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ---- blur SÓ na barra inferior (1 elemento fixo, pequeno = barato) ---- */
#botnav{
  background:rgba(16,20,28,0.7) !important;
  backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important;
}

/* ---- remover o VERDE/azul de cores fixas antigas ---- */
[style*="#1fb87a"], [style*="#22c55e"]{ color:var(--accent) !important; }

/* ---- bolha do usuário: vidro cinza (era colorido sólido) ---- */
.user .bubble, .msg.user .bubble{
  background:rgba(255,255,255,0.10) !important; color:var(--text,#e8edf4) !important;
  border:1px solid rgba(255,255,255,0.14) !important; font-weight:500;
}

/* ---- botão primário / enviar: cinza claro (sem cor) ---- */
#send, .primary, button.gen, .btn-primary{
  background:rgba(230,234,240,0.92) !important; color:#0c0f16 !important; border:none !important;
}

/* ---- campos consistentes e translúcidos ---- */
input:not([type=checkbox]):not([type=radio]), textarea, select{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid var(--line) !important; border-radius:12px !important;
}

/* ---- cards/painéis: bordas suaves + mais radius ---- */
.card, .panel, .box, .tile, .item, .surface{ border-color:var(--line) !important; border-radius:14px; }

/* ---- toast/notificação acima da barra inferior (senão some atrás dela) ---- */
#toast{ bottom:calc(74px + env(safe-area-inset-bottom)) !important; }

/* ---- respiro/tipografia + scrollbars discretas ---- */
body{ line-height:1.5; }
h1,h2,h3{ letter-spacing:-.01em; }
*::-webkit-scrollbar{ width:7px; height:7px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }