:root{
  --bg:#0b0f14;
  --panel:#111721;
  --panel2:#141c28;
  --border:rgba(255,255,255,.08);
  --text:#f5f7fa;
  --muted:#99a2b3;
  --gold:#d4af5f;
  --accent:#2b84ff;
  --danger:#ff4d5b;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(180deg,#0a0d12,#0e1320);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
button,input{font:inherit}
.hidden{display:none!important}
.screen{height:100dvh;width:100%}
.center-screen{display:flex;align-items:center;justify-content:center;padding:24px}
.hero-card,.sheet,.auth-card,.settings-card,.call-card{width:min(460px,100%);background:rgba(17,23,33,.92);border:1px solid var(--border);border-radius:28px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.logo{width:88px;height:88px;border-radius:24px;display:block;margin:0 auto 16px}
.logo.small{width:64px;height:64px;border-radius:18px}
h1,h2,h3,p{margin:0}
.sub,.muted,.hint{color:var(--muted)}
.device-actions,.call-actions,.header-actions{display:flex;gap:12px;flex-wrap:wrap}
.device-actions button,.call-actions button,.header-actions button{flex:1}
.primary,.secondary,.ghost,.danger,.tab,.nav-btn,.send-btn{border:0;border-radius:18px;padding:14px 16px;cursor:pointer}
.primary{background:linear-gradient(180deg,#e2c278,#d4af5f);color:#17120a;font-weight:800}
.secondary{background:#202a38;color:var(--text)}
.ghost{background:#182131;color:var(--text);border:1px solid var(--border)}
.danger{background:var(--danger);color:#fff}
.top-back{margin-bottom:16px}
.sheet ol{padding-left:20px;line-height:1.6}
.auth-screen{display:flex;align-items:center;justify-content:center;padding:20px}
.tabs{display:flex;gap:8px;margin:16px 0}
.tab{background:#1d2635;color:#cbd2df;flex:1}
.tab.active{background:#2a3649;color:#fff}
.form{display:none;flex-direction:column;gap:12px}
.form.active{display:flex}
.form input,.search-box input,#messageInput{width:100%;background:#0e1520;border:1px solid var(--border);color:var(--text);border-radius:16px;padding:14px 16px}
.error{color:#ff8e98;margin-top:12px;min-height:1.2em}
.app-shell{display:grid;grid-template-columns:360px 1fr;min-height:100dvh}
.sidebar{background:rgba(13,17,24,.96);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:100dvh}
.sidebar-header{padding:20px 18px 14px;border-bottom:1px solid var(--border)}
.brand{font-size:18px;font-weight:800}
.search-box{padding:12px}
.search-results,.chat-list{overflow:auto}
.search-results{max-height:160px}
.result-card,.chat-card{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.result-card:hover,.chat-card:hover{background:#141d2b}
.chat-card.active{background:#192437}
.bottom-nav{display:flex;gap:12px;padding:14px;border-top:1px solid var(--border);margin-top:auto;padding-bottom:calc(14px + var(--safe-bottom))}
.nav-btn{flex:1;background:#162132;color:#e8edf7}
.nav-btn.active{background:#253349}
.chat-panel{display:flex;flex-direction:column;min-height:100dvh;background:linear-gradient(180deg,#0b1017,#0a0e15)}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);padding-top:calc(14px + var(--safe-top))}
.icon-btn{min-width:44px}
.chat-title{font-size:18px;font-weight:700}
.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.bubble{max-width:min(80%,420px);padding:12px 14px;border-radius:18px;line-height:1.4;word-wrap:break-word}
.bubble.me{align-self:flex-end;background:#2a425e}
.bubble.them{align-self:flex-start;background:#182131}
.bubble .meta{display:block;margin-top:6px;color:#9bb2ce;font-size:12px}
.file-link{display:block;color:#cfe0ff;margin-top:8px}
.composer{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--border);padding-bottom:calc(12px + var(--safe-bottom));background:rgba(11,16,23,.98);position:sticky;bottom:0}
.attach{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;border-radius:16px;background:#182131;border:1px solid var(--border)}
#messageInput{flex:1;min-height:48px}
.send-btn{min-width:108px;background:linear-gradient(180deg,#e2c278,#d4af5f);color:#17120a;font-weight:800}
.settings-panel{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0b1017,#0a0e15);min-height:100dvh}
.call-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
@media (max-width:900px){
  .app-shell{display:block}
  .sidebar,.chat-panel,.settings-panel{min-height:100dvh;height:100dvh}
  .sidebar{position:relative}
  .chat-panel,.settings-panel{position:fixed;inset:0;background:linear-gradient(180deg,#0b1017,#0a0e15);z-index:8;transform:translateX(100%);transition:transform .25s ease}
  .chat-panel.open,.settings-panel.open{transform:translateX(0)}
  .header-actions{gap:8px}
  .header-actions button{padding:10px 12px;font-size:13px}
  .messages{padding-bottom:8px}
}