/* ═══════════════════════════════════════════════════
   ANI-TECH AI — Themed to ANICADE Tech Brand
   Fonts: Orbitron (display) + Rajdhani (body)
   Colors: #0B1C2D bg | #00BFFF accent | #C6A85C gold
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

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

:root{
  /* ANICADE Tech brand palette */
  --bg:       #0B1C2D;
  --bg2:      #0d2035;
  --bg3:      #0f2540;
  --card:     rgba(13,26,42,0.92);
  --bd:       rgba(255,255,255,0.07);
  --bd2:      rgba(198,168,92,0.18);
  --bd3:      rgba(0,191,255,0.18);
  --ac:       #00BFFF;   /* deep sky blue */
  --gold:     #C6A85C;   /* gold */
  --success:  #39ff14;
  --tx:       #F5F7FA;
  --tx2:      #94A3B8;
  --tx3:      #4a6080;
  --red:      #ff4466;
  --amber:    #FFB020;
  --green:    #00D4A0;
  /* layout */
  --sb:       278px;
  --r:        12px;
  --font:     'Rajdhani',sans-serif;
  --head:     'Orbitron',sans-serif;
  --mono:     'JetBrains Mono',monospace;
}

html{font-size:15px}
body{background:var(--bg);color:var(--tx);font-family:var(--font);height:100dvh;overflow:hidden;font-weight:500}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(198,168,92,.25);border-radius:8px}
.hidden{display:none!important}
a{color:inherit;text-decoration:none}

/* Gradient text helpers */
.g-blue{background:linear-gradient(90deg,var(--ac),#0077cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.g-gold{background:linear-gradient(90deg,var(--gold),#e8c97a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── SPINNER ─── */
.spinner{width:22px;height:22px;border:2px solid rgba(198,168,92,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.spinner.sm{width:14px;height:14px;border-width:1.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── ORGANIC RING ANIMATION (ANICADE brand) ─── */
@keyframes ringSpin1{to{transform:rotate(360deg)}}
@keyframes ringSpin2{to{transform:rotate(-360deg)}}

/* ─── INSTALL BANNER — ANICADE style ─── */
.install-banner{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;gap:12px;
  background:rgba(13,26,45,0.97);border-bottom:1px solid rgba(198,168,92,.25);
  padding:10px 16px;font-size:13px;
  box-shadow:0 4px 30px rgba(0,0,0,.5);
  animation:slideDown .4s cubic-bezier(.34,1.28,.64,1) both;
}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.install-icon{width:36px;height:36px;border-radius:9px;border:1.5px solid rgba(0,191,255,.25);overflow:hidden;flex-shrink:0}
.install-icon img{width:100%;height:100%;object-fit:cover}
.install-text strong{display:block;font-family:var(--head);font-size:.72rem;color:var(--tx);letter-spacing:.5px}
.install-text span{font-size:.78rem;color:var(--tx2)}
.install-yes{background:linear-gradient(135deg,var(--ac),#0077aa);border:none;border-radius:20px;color:#0B1C2D;font-family:var(--head);font-size:.6rem;font-weight:700;padding:7px 14px;cursor:pointer;flex-shrink:0;letter-spacing:.5px;transition:all .2s}
.install-yes:hover{transform:scale(1.05);box-shadow:0 4px 14px rgba(0,191,255,.3)}
.install-no{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--tx2);border-radius:20px;padding:7px 11px;font-family:var(--font);font-size:.78rem;cursor:pointer;flex-shrink:0;transition:all .2s}
.install-no:hover{color:var(--red)}
.install-text{flex:1}

/* ─── AUTH OVERLAY ─── */
.auth-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:900;padding:20px;overflow-y:auto;
}

/* ANICADE brand: animated rings background */
.auth-rings{position:absolute;top:50%;left:50%;pointer-events:none}
.auth-ring{
  position:absolute;border:1.5px solid transparent;border-radius:38% 62% 63% 37%/41% 44% 56% 59%;
}
.auth-ring:nth-child(1){width:700px;height:700px;margin:-350px 0 0 -350px;border-color:rgba(0,191,255,.07);animation:ringSpin1 22s linear infinite}
.auth-ring:nth-child(2){width:500px;height:500px;margin:-250px 0 0 -250px;border-radius:41% 44% 56% 59%/38% 62% 63% 37%;border-color:rgba(198,168,92,.05);animation:ringSpin2 15s linear infinite}
.auth-ring:nth-child(3){width:320px;height:320px;margin:-160px 0 0 -160px;border-color:rgba(0,191,255,.04);animation:ringSpin1 32s linear infinite reverse}

.auth-card{
  position:relative;z-index:1;
  background:rgba(13,26,45,0.96);
  border:1px solid rgba(198,168,92,.2);
  border-radius:18px;
  padding:36px 38px 30px;
  width:100%;max-width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(0,191,255,.04);
  animation:cardIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* Logo area in auth */
.auth-logo{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.auth-logo-ring{
  position:relative;width:56px;height:56px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.auth-logo-ring::before{
  content:'';position:absolute;inset:0;
  border-radius:38% 62% 63% 37%/41% 44% 56% 59%;
  border:2px solid rgba(198,168,92,.4);
  animation:ringSpin1 6s linear infinite;
}
.auth-logo-ring::after{
  content:'';position:absolute;inset:6px;
  border-radius:41% 44% 56% 59%/38% 62% 63% 37%;
  border:1.5px solid rgba(0,191,255,.3);
  animation:ringSpin2 4s linear infinite;
}
.auth-logo-img{
  width:40px;height:40px;border-radius:50%;
  object-fit:cover;position:relative;z-index:2;
  border:1.5px solid rgba(198,168,92,.3);
  box-shadow:0 0 16px rgba(198,168,92,.2);
}
.auth-logo-name{display:block;font-family:var(--head);font-size:1rem;font-weight:900;letter-spacing:1px;color:var(--gold);text-shadow:0 0 14px rgba(198,168,92,.3)}
.auth-logo-sub{display:block;font-size:.65rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}

.auth-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 0;color:var(--tx2);font-size:.85rem}
.auth-tabs{display:flex;gap:3px;background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:10px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:8px 6px;border:none;background:none;font-family:var(--head);font-size:.6rem;font-weight:700;letter-spacing:.08em;color:var(--tx2);border-radius:7px;cursor:pointer;transition:all .18s;text-transform:uppercase}
.auth-tab.active{background:rgba(198,168,92,.12);color:var(--gold);box-shadow:0 1px 8px rgba(0,0,0,.4);border:1px solid rgba(198,168,92,.2)}
.form-sub{font-family:var(--font);font-size:.85rem;color:var(--tx2);margin-bottom:16px;font-weight:500}

.field{margin-bottom:12px}
.field label{display:block;font-family:var(--head);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);margin-bottom:5px}
.field-inner{display:flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.15);border-radius:9px;transition:border-color .2s,box-shadow .2s}
.field-inner:focus-within{border-color:rgba(0,191,255,.4);box-shadow:0 0 0 3px rgba(0,191,255,.06)}
.field-inner>svg{width:14px;height:14px;color:var(--tx3);flex-shrink:0;margin-left:12px}
.field-inner input,.field-inner select{flex:1;background:none;border:none;outline:none;color:var(--tx);font-family:var(--font);font-size:.9rem;font-weight:500;padding:11px 12px}
.field-inner input::placeholder{color:var(--tx3)}
.field-inner select{cursor:pointer;appearance:none;-webkit-appearance:none}
.field-inner select option{background:var(--bg2);color:var(--tx)}
.eye-btn{background:none;border:none;padding:0 11px;cursor:pointer;color:var(--tx3);display:flex;align-items:center;transition:color .2s}
.eye-btn:hover{color:var(--tx2)}
.eye-btn svg{width:14px;height:14px}

.trial-info-box{display:flex;align-items:flex-start;gap:9px;background:rgba(198,168,92,.06);border:1px solid rgba(198,168,92,.2);border-radius:8px;padding:9px 12px;margin:3px 0 11px;font-size:.8rem;color:var(--tx2);line-height:1.5}
.trial-info-box svg{width:13px;height:13px;color:var(--gold);flex-shrink:0;margin-top:1px}
.trial-info-box strong{color:var(--gold)}

.form-err{font-size:.78rem;color:var(--red);background:rgba(255,68,101,.07);border:1px solid rgba(255,68,101,.18);border-radius:7px;padding:8px 12px;margin-bottom:11px;display:flex;align-items:center;gap:6px}

/* ANICADE-style primary button */
.form-btn{
  width:100%;padding:13px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--ac),#0077aa);
  border:none;border-radius:10px;color:#0B1C2D;
  font-family:var(--head);font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
  box-shadow:0 4px 22px rgba(0,191,255,.2);margin-bottom:12px;
}
.form-btn svg{width:14px;height:14px;transition:transform .2s}
.form-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,191,255,.32)}
.form-btn:hover svg{transform:translateX(3px)}
.form-btn:active{transform:scale(.98)}
.form-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.form-switch{font-size:.78rem;color:var(--tx2);text-align:center;font-family:var(--font)}
.form-switch a{color:var(--ac);text-decoration:none;font-weight:600}
.form-switch a:hover{text-decoration:underline}

/* Admin login button — gold variant */
.admin-login-btn{background:linear-gradient(135deg,rgba(198,168,92,.15),rgba(198,168,92,.05))!important;border:1px solid rgba(198,168,92,.3)!important;color:var(--gold)!important}
.admin-login-btn:hover{background:rgba(198,168,92,.12)!important;box-shadow:0 4px 18px rgba(198,168,92,.2)!important}

/* ─── ADMIN OVERLAY ─── */
.admin-overlay{position:fixed;inset:0;background:rgba(5,12,22,.88);backdrop-filter:blur(10px);z-index:800;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.admin-panel{background:rgba(11,24,38,.98);border:1px solid rgba(198,168,92,.2);border-radius:16px;width:100%;max-width:960px;padding:28px;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:cardIn .3s ease}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(198,168,92,.12)}
.admin-title{display:flex;align-items:center;gap:10px;font-family:var(--head);font-size:.9rem;font-weight:700;color:var(--gold);letter-spacing:1px}
.admin-title svg{width:18px;height:18px;color:var(--gold)}
.admin-close{background:none;border:none;color:var(--tx3);cursor:pointer;padding:6px;border-radius:8px;display:flex;transition:all .2s}
.admin-close:hover{color:var(--red);background:rgba(255,68,101,.08)}
.admin-close svg{width:18px;height:18px}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.astat{background:rgba(255,255,255,.03);border:1px solid var(--bd2);border-radius:12px;padding:16px;text-align:center}
.astat-val{display:block;font-size:1.8rem;font-weight:900;font-family:var(--head);color:var(--gold);line-height:1}
.astat-lbl{display:block;font-size:.62rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;font-family:var(--head)}
.admin-section-title{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);margin-bottom:12px}
.admin-section-title svg{width:14px;height:14px;color:var(--ac)}
.admin-section-title.danger{color:var(--red);margin-top:24px}
.admin-section-title.danger svg{color:var(--red)}
.admin-table-wrap{overflow-x:auto;margin-bottom:24px;border-radius:10px;border:1px solid var(--bd)}
.admin-table{width:100%;border-collapse:collapse;font-size:.8rem;font-family:var(--font)}
.admin-table th{background:rgba(255,255,255,.03);color:var(--tx2);font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.6rem;padding:10px 12px;text-align:left;border-bottom:1px solid var(--bd)}
.admin-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--tx);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.atrial-ok{color:var(--success);font-weight:600;font-family:var(--mono)}
.atrial-warn{color:var(--amber);font-weight:600;font-family:var(--mono)}
.atrial-exp{color:var(--red);font-weight:600;font-family:var(--mono)}
.admin-broadcast{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.admin-broadcast textarea{background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.15);border-radius:9px;color:var(--tx);font-family:var(--font);font-size:.88rem;padding:11px 14px;resize:vertical;outline:none;transition:border-color .2s}
.admin-broadcast textarea:focus{border-color:rgba(0,191,255,.3)}
.admin-broadcast textarea::placeholder{color:var(--tx3)}
.admin-save-note{align-self:flex-end;display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--ac),#0077aa);border:none;border-radius:8px;color:#0B1C2D;font-family:var(--head);font-size:.6rem;font-weight:700;padding:8px 16px;cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.admin-save-note:hover{transform:scale(1.03)}
.admin-danger-row{display:flex;gap:10px;flex-wrap:wrap}
.admin-danger-btn{display:flex;align-items:center;gap:7px;background:rgba(255,68,101,.08);border:1px solid rgba(255,68,101,.25);color:var(--red);border-radius:8px;padding:8px 14px;font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.admin-danger-btn:hover{background:rgba(255,68,101,.15)}
.admin-danger-btn svg{width:13px;height:13px}
.admin-safe-btn{display:flex;align-items:center;gap:7px;background:rgba(0,191,255,.06);border:1px solid rgba(0,191,255,.2);color:var(--ac);border-radius:8px;padding:8px 14px;font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}
.admin-safe-btn:hover{background:rgba(0,191,255,.12)}
.admin-safe-btn svg{width:13px;height:13px}
.admin-btn{background:none;border:1px solid rgba(198,168,92,.2);color:var(--gold);border-radius:7px;padding:5px 8px;cursor:pointer;display:flex;align-items:center;font-family:var(--head);font-size:.55rem;gap:4px;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.admin-btn svg{width:13px;height:13px}
.admin-btn:hover{color:var(--gold);border-color:var(--gold);background:rgba(198,168,92,.08)}
.admin-act-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.aa{background:none;border:1px solid var(--bd);color:var(--tx2);border-radius:5px;padding:3px 7px;font-family:var(--mono);font-size:.64rem;cursor:pointer;display:flex;align-items:center;gap:2px;transition:all .2s;white-space:nowrap}
.aa svg{width:11px;height:11px}
.aa.extend{color:var(--success);border-color:rgba(57,255,20,.2)}
.aa.extend:hover{background:rgba(57,255,20,.05)}
.aa.view{color:var(--ac);border-color:rgba(0,191,255,.2)}
.aa.view:hover{background:rgba(0,191,255,.06)}
.aa.ban{color:var(--amber);border-color:rgba(255,176,32,.2)}
.aa.ban:hover{background:rgba(255,176,32,.06)}
.aa.del{color:var(--red);border-color:rgba(255,68,101,.2)}
.aa.del:hover{background:rgba(255,68,101,.06)}

/* ─── APP SHELL ─── */
.app{display:flex;height:100dvh;overflow:hidden}
.app.hidden{display:none!important}

/* ─── SIDEBAR ─── */
.sidebar{
  width:var(--sb);min-width:var(--sb);
  background:rgba(10,22,36,.98);
  border-right:1px solid rgba(198,168,92,.12);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:100;
}
.sb-header{
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(198,168,92,.1);
  background:rgba(11,24,38,.95);
}
.sb-logo{display:flex;align-items:center;gap:11px}
.sb-logo-ring{position:relative;width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sb-logo-ring::before{content:'';position:absolute;inset:0;border-radius:38% 62% 63% 37%/41% 44% 56% 59%;border:1.5px solid rgba(198,168,92,.35);animation:ringSpin1 6s linear infinite}
.sb-logo-ring::after{content:'';position:absolute;inset:5px;border-radius:41% 44% 56% 59%/38% 62% 63% 37%;border:1px solid rgba(0,191,255,.25);animation:ringSpin2 4s linear infinite}
.sb-logo-img{width:26px;height:26px;border-radius:50%;object-fit:cover;position:relative;z-index:2;border:1px solid rgba(198,168,92,.25)}
.sb-name{display:block;font-family:var(--head);font-size:.8rem;font-weight:900;letter-spacing:1.5px;color:var(--gold);text-shadow:0 0 10px rgba(198,168,92,.25)}
.sb-by{display:block;font-size:.6rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-top:1px;font-family:var(--font)}

.trial-banner{margin:9px 9px 3px;background:linear-gradient(135deg,rgba(198,168,92,.07),rgba(0,191,255,.03));border:1px solid rgba(198,168,92,.15);border-radius:9px;padding:9px 11px}
.trial-banner-top{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--tx2);margin-bottom:6px;font-family:var(--font)}
.trial-banner-top svg{width:12px;height:12px;color:var(--gold);flex-shrink:0}
.trial-days{color:var(--gold);font-weight:700;font-size:.88rem;font-family:var(--mono)}
.trial-banner.warning .trial-days{color:var(--amber)}
.trial-banner.expired .trial-days{color:var(--red)}
.trial-bar-wrap{background:rgba(255,255,255,.06);border-radius:4px;height:3px;overflow:hidden}
.trial-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--ac));border-radius:4px;transition:width .4s}
.trial-banner.warning .trial-bar-fill{background:linear-gradient(90deg,var(--amber),#FF8C00)}
.trial-banner.expired .trial-bar-fill{background:var(--red)}

.new-btn{
  margin:9px 9px 3px;display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,rgba(0,191,255,.08),rgba(198,168,92,.04));
  border:1px solid rgba(0,191,255,.18);color:var(--ac);border-radius:var(--r);
  padding:9px 13px;font-family:var(--head);font-size:.6rem;font-weight:700;
  cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase;
}
.new-btn svg{width:14px;height:14px}
.new-btn:hover{background:linear-gradient(135deg,rgba(0,191,255,.14),rgba(198,168,92,.08));border-color:var(--ac);box-shadow:0 0 14px rgba(0,191,255,.12)}

.sb-section-label{padding:9px 14px 4px;font-family:var(--head);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);display:flex;align-items:center;gap:5px}
.sb-section-label svg{width:10px;height:10px}
.chat-list{flex:1;overflow-y:auto;padding:3px 7px;display:flex;flex-direction:column;gap:2px}
.chat-item{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.chat-item:hover{background:rgba(255,255,255,.04)}
.chat-item.active{background:rgba(198,168,92,.07);border-color:rgba(198,168,92,.15)}
.ci-ico{color:var(--tx3);flex-shrink:0;display:flex}
.ci-ico svg{width:12px;height:12px}
.chat-item.active .ci-ico{color:var(--gold)}
.chat-item-lbl{font-size:.8rem;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:var(--font)}
.chat-item.active .chat-item-lbl{color:var(--tx)}
.chat-item-del{background:none;border:none;color:var(--tx3);cursor:pointer;padding:2px;border-radius:4px;display:flex;opacity:0;transition:opacity .15s}
.chat-item:hover .chat-item-del{opacity:1}
.chat-item-del:hover{color:var(--red)}
.chat-item-del svg{width:11px;height:11px}
.sb-foot{padding:9px;border-top:1px solid rgba(198,168,92,.1);display:flex;flex-direction:column;gap:7px}
.sys-note{background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.2);border-radius:8px;padding:8px 10px;display:flex;align-items:flex-start;gap:7px;font-size:.73rem;color:var(--amber);line-height:1.45}
.sys-note svg{width:12px;height:12px;flex-shrink:0;margin-top:1px}
.user-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(198,168,92,.12);border-radius:9px;padding:7px 9px}
.user-av{width:28px;height:28px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,rgba(198,168,92,.15),rgba(0,191,255,.1));border:1px solid rgba(198,168,92,.2);display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--head);font-weight:700;font-size:.82rem}
.user-info{flex:1;min-width:0}
.user-nm{display:block;font-size:.8rem;font-weight:600;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)}
.user-plan{display:block;font-size:.62rem;color:var(--tx3);margin-top:1px;font-family:var(--font)}
.logout-btn{background:none;border:none;color:var(--tx3);cursor:pointer;padding:3px;border-radius:5px;display:flex;transition:color .2s}
.logout-btn:hover{color:var(--red)}
.logout-btn svg{width:13px;height:13px}
.install-sb-btn{display:flex;align-items:center;gap:7px;width:100%;padding:7px 9px;background:rgba(0,191,255,.05);border:1px solid rgba(0,191,255,.15);color:var(--ac);border-radius:8px;font-family:var(--head);font-size:.6rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.install-sb-btn svg{width:13px;height:13px;flex-shrink:0}
.install-sb-btn:hover{background:rgba(0,191,255,.1);border-color:var(--ac)}
.db-status{display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:7px;font-size:.67rem;color:var(--tx3);font-family:var(--font)}
.db-status svg{width:11px;height:11px;flex-shrink:0}
.db-status.ok{border-color:rgba(57,255,20,.18);color:var(--success)}
.db-status.ok svg{color:var(--success)}
.db-status.err{border-color:rgba(255,68,101,.2);color:var(--red)}
.db-status.err svg{color:var(--red)}
.db-status.syncing{color:var(--amber)}
.menu-btn{display:none;position:fixed;top:13px;left:13px;z-index:400;background:rgba(11,28,45,.96);border:1px solid rgba(198,168,92,.2);color:var(--gold);border-radius:8px;padding:7px;cursor:pointer}
.menu-btn svg{width:17px;height:17px;display:block}

/* ─── MAIN ─── */
.main{flex:1;display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--bg);position:relative;min-width:0}
/* Subtle grid overlay */
.main::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,191,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,191,255,.018) 1px,transparent 1px);background-size:46px 46px;pointer-events:none;z-index:0}

/* ─── TOPBAR ─── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;height:52px;
  border-bottom:1px solid rgba(198,168,92,.1);
  background:rgba(10,20,34,.95);backdrop-filter:blur(12px);
  position:relative;z-index:10;flex-shrink:0;gap:8px;
}
.chat-title{font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.5px;text-transform:uppercase;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.live-badge{display:flex;align-items:center;gap:5px;font-family:var(--head);font-size:.55rem;color:var(--ac);letter-spacing:.08em;background:rgba(0,191,255,.06);border:1px solid rgba(0,191,255,.14);border-radius:20px;padding:4px 10px;text-transform:uppercase}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 7px var(--ac);animation:pulse 2.5s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── CHAT AREA ─── */
.chat-area{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;scroll-behavior:smooth}

/* ─── WELCOME SCREEN ─── */
.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;padding:32px 16px;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Hero logo with rings */
.welcome-logo-ring{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.welcome-logo-ring::before{content:'';position:absolute;inset:0;border-radius:38% 62% 63% 37%/41% 44% 56% 59%;border:2px solid rgba(198,168,92,.35);animation:ringSpin1 6s linear infinite}
.welcome-logo-ring::after{content:'';position:absolute;inset:8px;border-radius:41% 44% 56% 59%/38% 62% 63% 37%;border:1.5px solid rgba(0,191,255,.28);animation:ringSpin2 4s linear infinite}
.welcome-logo-img{width:72px;height:72px;border-radius:50%;object-fit:cover;position:relative;z-index:2;border:2px solid rgba(198,168,92,.3);box-shadow:0 0 28px rgba(198,168,92,.2),0 0 50px rgba(0,191,255,.1)}

.welcome-eyebrow{font-family:var(--head);font-size:.62rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);margin-bottom:10px;opacity:.8}
.welcome h1{font-family:var(--head);font-size:2rem;font-weight:900;letter-spacing:-.5px;margin:6px 0 8px;color:var(--tx);line-height:1.1}
.welcome h1 .gold-txt{color:var(--gold);text-shadow:0 0 24px rgba(198,168,92,.35)}
.welcome h1 .blue-txt{color:var(--ac);text-shadow:0 0 24px rgba(0,191,255,.3)}
.welcome p{color:var(--tx2);font-size:.9rem;max-width:380px;line-height:1.65;margin-bottom:24px;font-family:var(--font)}
.brand-link{color:var(--gold);font-weight:600}
.brand-link:hover{text-decoration:underline}

.suggestions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px;width:100%}
.sug{
  background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:11px;
  padding:11px 12px;display:flex;align-items:flex-start;gap:8px;
  cursor:pointer;transition:all .25s;text-align:left;
  color:var(--tx2);font-family:var(--font);font-size:.78rem;line-height:1.4;font-weight:500;
}
.sug svg{width:14px;height:14px;flex-shrink:0;color:var(--ac);margin-top:1px}
.sug:hover{border-color:rgba(198,168,92,.3);background:rgba(198,168,92,.05);color:var(--tx);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.3)}

/* ─── MESSAGES ─── */
.messages{padding:14px 16px;display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto;width:100%;overflow-x:hidden;box-sizing:border-box}
.msg{display:flex;gap:10px;animation:msgIn .28s ease;min-width:0}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Avatars */
.av{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.av.ai{overflow:hidden;border:1px solid rgba(198,168,92,.2)}
.av.ai img{width:100%;height:100%;object-fit:cover}
.av.user{background:rgba(0,191,255,.1);border:1px solid rgba(0,191,255,.16);color:var(--ac);font-family:var(--head);font-size:.75rem;font-weight:700}
.msg-body{flex:1;min-width:0;overflow:hidden}
.msg-from{font-family:var(--head);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.msg-from.ai{color:var(--gold)}
.msg-from.user{color:var(--ac)}

/* Bubbles */
.bubble{
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  border-radius:0 11px 11px 11px;
  padding:12px 15px;font-size:.88rem;line-height:1.72;color:var(--tx);
  overflow-x:auto;word-break:break-word;overflow-wrap:break-word;
  max-width:100%;box-sizing:border-box;font-family:var(--font);font-weight:500;
}
.msg.user-msg .bubble{
  background:rgba(0,191,255,.06);border-color:rgba(0,191,255,.12);
  border-radius:11px 0 11px 11px;
}

/* Markdown in bubbles */
.bubble h1,.bubble h2,.bubble h3{font-family:var(--head);font-weight:700;margin:12px 0 5px;word-break:break-word;letter-spacing:.5px}
.bubble h1{font-size:1.1rem}
.bubble h2{font-size:.98rem;color:var(--gold)}
.bubble h3{font-size:.9rem;color:var(--ac)}
.bubble p{margin:5px 0;word-break:break-word;overflow-wrap:break-word}
.bubble ul,.bubble ol{padding-left:19px;margin:5px 0}
.bubble li{margin:3px 0}
.bubble strong{color:var(--gold);font-weight:700}
.bubble em{color:var(--tx2)}
.bubble a{color:var(--ac);text-decoration:underline}
.bubble code{background:rgba(0,191,255,.08);border:1px solid rgba(0,191,255,.14);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:.8em;color:var(--ac);word-break:break-all}
.bubble pre{background:rgba(5,12,20,.9);border:1px solid rgba(198,168,92,.15);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:12px 14px;overflow-x:auto;margin:9px 0;max-width:100%;box-sizing:border-box}
.bubble pre code{background:none;border:none;padding:0;font-size:.79rem;color:#9CDCFE;font-family:var(--mono);line-height:1.6;white-space:pre;word-break:normal;overflow-wrap:normal}
.code-wrap{position:relative;max-width:100%}
.copy-btn{position:absolute;top:7px;right:7px;background:rgba(198,168,92,.1);border:1px solid rgba(198,168,92,.2);color:var(--gold);border-radius:5px;padding:2px 7px;font-size:.62rem;font-family:var(--mono);cursor:pointer;transition:all .2s;letter-spacing:.04em;white-space:nowrap}
.copy-btn:hover{background:rgba(198,168,92,.2)}
.thinking{display:flex;gap:5px;align-items:center;padding:3px 0}
.thinking span{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:blink 1.4s infinite;opacity:.45}
.thinking span:nth-child(2){animation-delay:.2s}
.thinking span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{transform:scale(.8);opacity:.35}40%{transform:scale(1.2);opacity:1}}

/* Message action buttons */
.msg-acts{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.mab{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid rgba(198,168,92,.14);color:var(--tx3);border-radius:6px;padding:3px 8px;font-family:var(--mono);font-size:.62rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.mab svg{width:11px;height:11px;flex-shrink:0}
.mab:hover{color:var(--gold);border-color:rgba(198,168,92,.3);background:rgba(198,168,92,.05)}
.mab.speaking{color:var(--gold);border-color:var(--gold);background:rgba(198,168,92,.07);animation:spkPulse 1.2s infinite}
@keyframes spkPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* AI image display */
.ai-img-wrap{display:flex;flex-direction:column;gap:8px;max-width:100%}
.ai-img-spinner{display:flex;align-items:center;gap:8px;padding:10px;color:var(--tx2);font-size:.8rem}
.ai-img{width:100%;max-width:440px;border-radius:10px;border:1px solid rgba(198,168,92,.2);display:block}
.ai-img-cap{font-size:.72rem;color:var(--tx2);font-style:italic;line-height:1.4;font-family:var(--font)}
.ai-img-dl{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-family:var(--mono);color:var(--ac);cursor:pointer;padding:4px 0}
.ai-img-dl svg{width:12px;height:12px}
.ai-img-dl:hover{text-decoration:underline}

/* ─── INPUT AREA ─── */
.input-area{padding:8px 16px 5px;position:relative;z-index:10;flex-shrink:0;background:linear-gradient(to top,var(--bg) 55%,transparent)}
.input-box{display:flex;align-items:flex-end;gap:8px;background:rgba(13,28,46,.95);border:1px solid rgba(198,168,92,.18);border-radius:13px;padding:8px 10px;transition:border-color .2s,box-shadow .2s;max-width:820px;margin:0 auto}
.input-box:focus-within{border-color:rgba(0,191,255,.4);box-shadow:0 0 0 3px rgba(0,191,255,.05)}
textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--tx);font-family:var(--font);font-size:.9rem;font-weight:500;line-height:1.5;min-height:22px;max-height:140px;overflow-y:auto;min-width:0}
textarea::placeholder{color:var(--tx3)}
.send-btn{width:34px;height:34px;background:linear-gradient(135deg,var(--ac),#0077aa);border:none;border-radius:9px;color:#0B1C2D;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;box-shadow:0 0 12px rgba(0,191,255,.2)}
.send-btn svg{width:14px;height:14px}
.send-btn:hover{transform:scale(1.07);box-shadow:0 0 18px rgba(0,191,255,.35)}
.send-btn:active{transform:scale(.96)}
.send-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.mic-btn,.voice-call-btn{width:32px;height:32px;border:1px solid rgba(198,168,92,.18);background:rgba(255,255,255,.03);border-radius:8px;color:var(--tx2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s}
.mic-btn svg,.voice-call-btn svg{width:14px;height:14px}
.mic-btn:hover,.voice-call-btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(0,191,255,.06)}
.mic-btn.listening{border-color:var(--red);color:var(--red);background:rgba(255,68,101,.08);animation:micPulse 1s infinite}
.voice-call-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(198,168,92,.08);box-shadow:0 0 12px rgba(198,168,92,.18)}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,68,101,.4)}50%{box-shadow:0 0 0 6px rgba(255,68,101,0)}}
.input-note{text-align:center;font-size:.64rem;color:var(--tx3);margin-top:5px;letter-spacing:.02em;max-width:820px;margin-left:auto;margin-right:auto;font-family:var(--font)}
.note-link{color:var(--gold)}
.note-link:hover{text-decoration:underline}

/* ─── FOOTER ─── */
.footer{display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 16px;font-size:.65rem;color:var(--tx3);border-top:1px solid rgba(198,168,92,.1);letter-spacing:.04em;position:relative;z-index:10;flex-shrink:0;flex-wrap:wrap;font-family:var(--font)}
.fsep{color:rgba(255,255,255,.1)}
.footer-link{color:var(--tx3)}
.footer-link:hover{color:var(--gold)}

/* Toast */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(17px);background:rgba(10,22,38,.97);border:1px solid rgba(198,168,92,.2);color:var(--tx);padding:9px 16px;border-radius:9px;font-size:.8rem;opacity:0;transition:all .27s;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:7px;max-width:90vw;white-space:normal;font-family:var(--font)}
.toast.err{border-color:rgba(255,68,101,.3);color:var(--red)}
.toast.ok{border-color:rgba(57,255,20,.25);color:var(--success)}
.toast.warn{border-color:rgba(255,176,32,.28);color:var(--amber)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── VOICE OVERLAY ─── */
.voice-overlay{position:fixed;inset:0;background:rgba(5,12,22,.95);backdrop-filter:blur(16px);z-index:600;display:flex;align-items:center;justify-content:center}
.voice-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:40px 32px}
.voice-rings{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center}
.vring{position:absolute;width:100%;height:100%;border-radius:38% 62% 63% 37%/41% 44% 56% 59%;border:2px solid rgba(198,168,92,.2);animation:ringSpin1 6s linear infinite}
.vring.r2{border-radius:41% 44% 56% 59%/38% 62% 63% 37%;border-color:rgba(0,191,255,.15);animation:ringSpin2 4s linear infinite;animation-delay:-2s}
.voice-logo-img{width:72px;height:72px;border-radius:50%;object-fit:cover;position:relative;z-index:1;border:2px solid rgba(198,168,92,.3);box-shadow:0 0 28px rgba(198,168,92,.25),0 0 50px rgba(0,191,255,.12)}
.voice-title{font-family:var(--head);font-size:1rem;font-weight:900;color:var(--gold);letter-spacing:1px;text-shadow:0 0 16px rgba(198,168,92,.3)}
.voice-sub{font-size:.82rem;color:var(--tx2);max-width:240px;font-family:var(--font)}
.voice-end-btn{display:flex;align-items:center;gap:8px;background:rgba(255,68,101,.1);border:1px solid rgba(255,68,101,.3);color:var(--red);border-radius:10px;padding:10px 22px;font-family:var(--head);font-size:.65rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.voice-end-btn svg{width:14px;height:14px}
.voice-end-btn:hover{background:rgba(255,68,101,.2);border-color:var(--red)}

/* ─── ONBOARDING WIZARD ─── */
.onboarding{position:fixed;inset:0;background:rgba(5,12,22,.97);z-index:850;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.ob-card{background:rgba(11,24,40,.98);border:1px solid rgba(198,168,92,.2);border-radius:20px;padding:36px 34px 30px;width:100%;max-width:540px;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:cardIn .4s cubic-bezier(.22,1,.36,1)}
.ob-logo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ob-dots{display:flex;gap:6px;margin-bottom:22px;justify-content:center}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.08);transition:all .3s}
.ob-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(198,168,92,.4);width:22px;border-radius:4px}
.ob-h{font-family:var(--head);font-size:.9rem;font-weight:700;color:var(--tx);margin-bottom:5px;letter-spacing:.5px}
.ob-sub{font-size:.82rem;color:var(--tx2);margin-bottom:16px;line-height:1.5;font-family:var(--font)}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ob-chip{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:var(--tx2);border-radius:20px;padding:6px 14px;font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}
.ob-chip:hover{border-color:rgba(0,191,255,.25);color:var(--tx)}
.ob-chip.selected{background:rgba(198,168,92,.1);border-color:var(--gold);color:var(--gold)}
.ob-next,.ob-finish{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--ac),#0077aa);border:none;border-radius:10px;color:#0B1C2D;font-family:var(--head);font-size:.65rem;font-weight:700;padding:11px 20px;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(0,191,255,.2);letter-spacing:.5px;text-transform:uppercase}
.ob-next svg,.ob-finish svg{width:14px;height:14px}
.ob-next:hover,.ob-finish:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,191,255,.3)}
.ob-back{display:flex;align-items:center;gap:6px;background:none;border:1px solid rgba(255,255,255,.08);color:var(--tx2);border-radius:10px;padding:10px 16px;font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.ob-back svg{width:13px;height:13px}
.ob-back:hover{border-color:var(--gold);color:var(--gold)}
.ob-nav{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.ob-selects{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.ob-select-group label{display:block;font-family:var(--head);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--tx2);margin-bottom:5px}
.ob-select-group select{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.15);color:var(--tx);font-family:var(--font);font-size:.88rem;padding:10px 12px;border-radius:9px;outline:none;cursor:pointer;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.ob-select-group select:focus{border-color:rgba(0,191,255,.35)}
.ob-select-group select option{background:var(--bg2);color:var(--tx)}
.ob-skip{background:none;border:none;color:var(--tx3);font-family:var(--font);font-size:.76rem;font-weight:600;cursor:pointer;margin-top:14px;text-decoration:underline;display:block;width:100%;text-align:center}
.ob-skip:hover{color:var(--tx2)}

/* ─── RATING FORM MODAL ─── */
.rate-overlay{position:fixed;inset:0;background:rgba(5,12,22,.88);backdrop-filter:blur(10px);z-index:700;display:flex;align-items:center;justify-content:center;padding:20px}
.rate-card{background:rgba(11,24,40,.98);border:1px solid rgba(198,168,92,.2);border-radius:18px;padding:32px 34px 28px;width:100%;max-width:440px;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:cardIn .35s ease}
.rate-title{font-family:var(--head);font-size:.85rem;font-weight:900;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.rate-sub{font-size:.82rem;color:var(--tx2);margin-bottom:22px;font-family:var(--font);line-height:1.5}
.rate-stars{display:flex;gap:6px;margin-bottom:18px}
.rate-star{width:36px;height:36px;background:none;border:1px solid rgba(198,168,92,.2);border-radius:8px;color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s}
.rate-star:hover,.rate-star.active{background:rgba(198,168,92,.12);border-color:var(--gold);color:var(--gold);transform:scale(1.08)}
.rate-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.15);border-radius:9px;color:var(--tx);font-family:var(--font);font-size:.88rem;font-weight:500;padding:11px 14px;resize:vertical;outline:none;min-height:90px;margin-bottom:16px;transition:border-color .2s}
.rate-textarea:focus{border-color:rgba(0,191,255,.3)}
.rate-textarea::placeholder{color:var(--tx3)}
.rate-ux-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.rate-ux-item label{display:block;font-family:var(--head);font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tx2);margin-bottom:5px}
.rate-ux-item select{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.15);color:var(--tx);font-family:var(--font);font-size:.82rem;padding:8px 10px;border-radius:8px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.rate-ux-item select:focus{border-color:rgba(0,191,255,.3)}
.rate-ux-item select option{background:var(--bg2)}
.rate-submit{width:100%;padding:12px;background:linear-gradient(135deg,var(--gold),#a88b3a);border:none;border-radius:10px;color:#0B1C2D;font-family:var(--head);font-size:.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .2s;box-shadow:0 4px 18px rgba(198,168,92,.22)}
.rate-submit:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(198,168,92,.32)}
.rate-cancel{width:100%;padding:9px;background:none;border:1px solid rgba(255,255,255,.07);color:var(--tx3);font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;border-radius:9px;margin-top:8px;transition:all .2s}
.rate-cancel:hover{border-color:var(--red);color:var(--red)}
/* Rate button in topbar */
.rate-btn{display:flex;align-items:center;gap:5px;background:rgba(198,168,92,.08);border:1px solid rgba(198,168,92,.22);color:var(--gold);border-radius:7px;padding:4px 10px;font-family:var(--head);font-size:.55rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase}
.rate-btn svg{width:12px;height:12px}
.rate-btn:hover{background:rgba(198,168,92,.14);box-shadow:0 0 12px rgba(198,168,92,.15)}

/* ─── FACE ID BUTTON ─── */
.faceid-btn{display:flex;align-items:center;gap:6px;width:100%;padding:11px;background:rgba(198,168,92,.06);border:1px solid rgba(198,168,92,.18);color:var(--gold);border-radius:10px;font-family:var(--head);font-size:.62rem;font-weight:700;cursor:pointer;transition:all .2s;justify-content:center;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.faceid-btn svg{width:15px;height:15px}
.faceid-btn:hover{background:rgba(198,168,92,.12);border-color:var(--gold)}
.faceid-divider{display:flex;align-items:center;gap:10px;color:var(--tx3);font-size:.72rem;margin-bottom:14px}
.faceid-divider::before,.faceid-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}

/* ─── MOBILE ─── */
@media(max-width:720px){
  .sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translateX(-100%);z-index:350}
  .sidebar.open{transform:translateX(0);box-shadow:6px 0 32px rgba(0,0,0,.7)}
  .menu-btn{display:flex}
  .topbar{padding-left:48px}
  .suggestions{grid-template-columns:1fr 1fr}
  .messages{padding:10px 10px;gap:10px}
  .bubble{font-size:.84rem;padding:10px 12px;max-width:calc(100vw - 70px);overflow-x:auto}
  .bubble pre{max-width:calc(100vw - 100px);font-size:.75rem}
  .bubble pre code{font-size:.75rem}
  .bubble code{word-break:break-all}
  .input-area{padding:7px 10px 5px}
  .auth-card{padding:24px 20px 20px}
  .admin-stats{grid-template-columns:1fr 1fr}
  .admin-panel{padding:18px 14px}
  .ob-card{padding:26px 18px 22px}
  .voice-card{padding:28px 20px}
  .rate-card{padding:24px 20px 20px}
  .rate-ux-row{grid-template-columns:1fr}
  .topbar-right .rate-btn span{display:none}
}
@media(max-width:460px){
  .suggestions{grid-template-columns:1fr}
  .bubble{max-width:calc(100vw - 56px)}
  .bubble pre{max-width:calc(100vw - 82px)}
  .chat-title{font-size:.7rem}
  .welcome h1{font-size:1.7rem}
}

/* ═══════════════════════════════════════════
   v4.0 ADDITIONS
═══════════════════════════════════════════ */

/* Plan badge next to username */
.plan-badge{font-family:var(--head);font-size:.6rem;font-weight:700;letter-spacing:.5px;margin-left:2px;flex-shrink:0}

/* Sidebar navigation tabs */
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:8px 8px 4px;border-bottom:1px solid rgba(198,168,92,.08)}
.nav-tab{display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;background:none;color:var(--tx3);font-family:var(--head);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;cursor:pointer;transition:all .18s;width:100%;text-align:left}
.nav-tab svg{width:13px;height:13px;flex-shrink:0}
.nav-tab:hover{background:rgba(255,255,255,.04);color:var(--tx2)}
.nav-tab.active{background:rgba(198,168,92,.1);color:var(--gold);border:1px solid rgba(198,168,92,.18)}

/* View panels */
.view-panel{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}
.view-panel.hidden{display:none!important}

/* Code Editor */
.code-editor-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}
.code-editor-header{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(198,168,92,.12);background:rgba(10,20,34,.98);flex-shrink:0;flex-wrap:wrap;gap:8px}
.code-editor-title{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.5px;flex-shrink:0}
.code-editor-title svg{width:14px;height:14px}
.code-editor-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.code-lang-select{background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.18);color:var(--tx);font-family:var(--mono);font-size:.75rem;padding:5px 8px;border-radius:7px;outline:none;cursor:pointer}
.code-lang-select option{background:var(--bg2)}
.code-btn{display:flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid;border-radius:7px;font-family:var(--head);font-size:.6rem;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s;white-space:nowrap}
.code-btn.run{background:rgba(57,255,20,.08);border-color:rgba(57,255,20,.25);color:var(--success)}
.code-btn.run:hover{background:rgba(57,255,20,.15)}
.code-btn.copy{background:rgba(0,191,255,.06);border-color:rgba(0,191,255,.2);color:var(--ac)}
.code-btn.copy:hover{background:rgba(0,191,255,.12)}
.code-btn.ai{background:rgba(198,168,92,.08);border-color:rgba(198,168,92,.2);color:var(--gold)}
.code-btn.ai:hover{background:rgba(198,168,92,.15)}
.code-btn.clear{background:rgba(255,68,101,.06);border-color:rgba(255,68,101,.18);color:var(--red)}
.code-btn.clear:hover{background:rgba(255,68,101,.12)}
.code-editor-body{display:flex;flex-direction:column;flex:1;overflow:hidden}
.code-editor-main{display:flex;flex:1;overflow:hidden;min-height:200px}
.code-line-nums{width:40px;background:rgba(5,12,20,.8);color:var(--tx3);font-family:var(--mono);font-size:.78rem;line-height:1.6;padding:14px 8px;text-align:right;border-right:1px solid rgba(198,168,92,.1);user-select:none;overflow:hidden;flex-shrink:0;white-space:pre}
.code-textarea{flex:1;background:#0a1520;color:#9CDCFE;font-family:var(--mono);font-size:.82rem;line-height:1.6;padding:14px 16px;border:none;outline:none;resize:none;overflow-y:auto;tab-size:2;white-space:pre}
.code-textarea::placeholder{color:var(--tx3)}
.code-textarea:focus{background:#0b1a28}
.code-output-panel{border-top:1px solid rgba(198,168,92,.12);background:rgba(5,12,20,.95);flex-shrink:0}
.code-output-header{display:flex;align-items:center;gap:7px;padding:7px 14px;font-family:var(--head);font-size:.62rem;font-weight:700;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.05)}
.code-output-header svg{width:12px;height:12px}
.code-output{font-family:var(--mono);font-size:.78rem;color:var(--success);padding:10px 14px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;line-height:1.55;margin:0}

/* Global Chat */
.global-chat-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;max-width:820px;margin:0 auto;width:100%;padding:0 16px}
.global-chat-header{display:flex;align-items:center;gap:8px;padding:14px 0 10px;font-family:var(--head);font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.5px;border-bottom:1px solid rgba(198,168,92,.12);flex-shrink:0}
.global-chat-header svg{width:14px;height:14px}
.global-chat-messages{flex:1;overflow-y:auto;padding:12px 0;display:flex;flex-direction:column;gap:8px}
.gc-msg{display:flex;flex-direction:column;gap:2px;max-width:80%}
.gc-me{align-self:flex-end;align-items:flex-end}
.gc-meta{display:flex;align-items:center;gap:5px;font-size:.62rem;color:var(--tx3);font-family:var(--font)}
.gc-name{color:var(--ac);font-weight:700}
.gc-me .gc-name{color:var(--gold)}
.gc-badges{font-size:.8rem}
.gc-time{font-family:var(--mono);font-size:.6rem}
.gc-bubble{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:0 10px 10px 10px;padding:8px 12px;font-size:.84rem;color:var(--tx);line-height:1.5;font-family:var(--font);word-break:break-word}
.gc-me .gc-bubble{background:rgba(0,191,255,.07);border-color:rgba(0,191,255,.13);border-radius:10px 0 10px 10px}
.global-chat-input{display:flex;gap:8px;padding:10px 0 12px;flex-shrink:0;border-top:1px solid rgba(198,168,92,.1)}
.global-chat-input input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.18);color:var(--tx);font-family:var(--font);font-size:.88rem;padding:10px 14px;border-radius:10px;outline:none;transition:border-color .2s}
.global-chat-input input:focus{border-color:rgba(0,191,255,.35)}
.global-chat-input input::placeholder{color:var(--tx3)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:3px;background:rgba(198,168,92,.08);border:1px solid rgba(198,168,92,.18);color:var(--gold);border-radius:20px;padding:2px 8px;font-size:.65rem;font-family:var(--font);font-weight:600;white-space:nowrap}

/* Pricing */
.pricing-wrap{flex:1;overflow-y:auto;padding:20px 20px 32px;max-width:1000px;margin:0 auto;width:100%}
.pricing-header{text-align:center;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid rgba(198,168,92,.12)}
.pricing-header h2{font-family:var(--head);font-size:1.4rem;font-weight:900;color:var(--gold);letter-spacing:1px;margin-bottom:6px}
.pricing-header p{font-size:.82rem;color:var(--tx2);font-family:var(--font)}
.pricing-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.pricing-card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px 16px;position:relative;transition:all .25s}
.pricing-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.pricing-card.current{border-color:rgba(198,168,92,.35);background:rgba(198,168,92,.06)}
.pricing-popular{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--ac),#0077aa);color:#0B1C2D;font-family:var(--head);font-size:.55rem;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.5px;white-space:nowrap}
.pricing-badge{font-size:1.8rem;margin-bottom:6px}
.pricing-name{font-family:var(--head);font-size:.82rem;font-weight:700;letter-spacing:.5px;margin-bottom:10px}
.pricing-price{margin-bottom:14px}
.pricing-amount{font-family:var(--head);font-size:1.6rem;font-weight:900;color:var(--tx)}
.pricing-period{font-size:.72rem;color:var(--tx2);font-family:var(--font)}
.pricing-features{list-style:none;margin-bottom:16px;display:flex;flex-direction:column;gap:5px}
.pricing-features li{font-size:.76rem;color:var(--tx2);font-family:var(--font);padding-left:14px;position:relative;line-height:1.4}
.pricing-features li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700;font-size:.72rem}
.pricing-btn{width:100%;padding:9px;border-radius:8px;font-family:var(--head);font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.upgrade-btn{background:transparent;transition:all .2s}
.upgrade-btn:hover{opacity:.8}
.current-btn{background:rgba(198,168,92,.12);border:1px solid rgba(198,168,92,.3);color:var(--gold)}
.free-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--tx3)}
.pricing-footer{text-align:center;font-size:.78rem;color:var(--tx2);font-family:var(--font);display:flex;flex-direction:column;gap:5px}
.pricing-footer a{color:var(--ac)}

/* Info views (contact, legal) */
.info-wrap{flex:1;overflow-y:auto;padding:20px}
.info-card{background:var(--card);border:1px solid rgba(198,168,92,.15);border-radius:16px;padding:28px 26px;max-width:700px;margin:0 auto}
.info-h{font-family:var(--head);font-size:1.1rem;font-weight:900;color:var(--gold);letter-spacing:.5px;margin-bottom:18px}
.info-meta{font-size:.75rem;color:var(--tx3);margin-bottom:18px;font-family:var(--font)}
.info-sub{font-family:var(--head);font-size:.8rem;font-weight:700;color:var(--tx2);letter-spacing:.5px;margin:16px 0 10px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.info-item{display:flex;flex-direction:column;gap:3px}
.info-label{font-family:var(--head);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3)}
.info-val{font-size:.84rem;color:var(--ac);font-family:var(--font)}
.info-divider{height:1px;background:linear-gradient(to right,rgba(198,168,92,.15),transparent);margin:16px 0}
.info-services{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.info-tag{background:rgba(0,191,255,.06);border:1px solid rgba(0,191,255,.16);color:var(--ac);border-radius:20px;padding:4px 11px;font-size:.72rem;font-family:var(--font);font-weight:600}
.wa-contact-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;padding:10px 18px;border-radius:9px;font-family:var(--head);font-size:.65rem;font-weight:700;letter-spacing:.5px;text-decoration:none;transition:all .2s;margin-top:4px}
.wa-contact-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,211,102,.3)}
.legal-section{margin-bottom:16px}
.legal-section h3{font-family:var(--head);font-size:.75rem;font-weight:700;color:var(--gold);letter-spacing:.5px;margin-bottom:6px}
.legal-section p{font-size:.82rem;color:var(--tx2);line-height:1.65;font-family:var(--font)}
.info-link{display:inline-block;margin-top:14px;color:var(--ac);font-family:var(--font);font-size:.8rem}
.info-link:hover{text-decoration:underline}

/* Admin plan select */
.aa-select{background:rgba(255,255,255,.04);border:1px solid rgba(198,168,92,.2);color:var(--gold);font-family:var(--mono);font-size:.64rem;padding:3px 5px;border-radius:5px;cursor:pointer}
.aa-select option{background:var(--bg2)}

/* Mobile adjustments for new views */
@media(max-width:720px){
  .pricing-cards{grid-template-columns:1fr 1fr}
  .info-grid{grid-template-columns:1fr}
  .code-editor-controls{gap:4px}
  .code-btn{padding:4px 8px;font-size:.55rem}
}
@media(max-width:460px){
  .pricing-cards{grid-template-columns:1fr}
  .code-output{max-height:130px}
}

/* ═══════════════════════════════════════
   TARGETED FIXES — v4.1
═══════════════════════════════════════ */

/* ── Sidebar nav: compact 3-col icon grid ── */
.sidebar-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid rgba(198,168,92,.08);
  flex-shrink: 0;
}
.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 1px solid transparent;
  background: none;
  color: var(--tx3);
  font-family: var(--head);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 7px;
  cursor: pointer;
  transition: all .18s;
  min-height: 44px;
}
.nav-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.nav-tab span {
  font-size: .5rem;
  letter-spacing: .04em;
}
.nav-tab:hover {
  background: rgba(255,255,255,.04);
  color: var(--tx2);
  border-color: rgba(255,255,255,.05);
}
.nav-tab.active {
  background: rgba(198,168,92,.1);
  color: var(--gold);
  border-color: rgba(198,168,92,.2);
}

/* ── Remove plan-badge element spacing issues ── */
.plan-badge { display: none; }

/* ── Sidebar footer — tighter, no install button ── */
.sb-foot {
  padding: 8px;
  border-top: 1px solid rgba(198,168,92,.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Trial banner compact ── */
.trial-banner {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .75rem;
}
.trial-banner-top {
  margin-bottom: 4px;
}

/* ── User row compact ── */
.user-row {
  padding: 6px 8px;
}
.user-av {
  width: 26px;
  height: 26px;
  font-size: .78rem;
}
.user-nm {
  font-size: .76rem;
}
.user-plan {
  font-size: .6rem;
}

/* ── DB status — minimal ── */
.db-status {
  padding: 4px 7px;
  font-size: .62rem;
}
.db-status svg {
  width: 10px;
  height: 10px;
}

/* ── Onboarding chips — no emojis, clean pill style ── */
.ob-chip {
  font-size: .75rem;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
}

/* ── Badge display — text initials, not emojis ── */
.badge {
  font-family: var(--head);
  font-size: .55rem;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Pricing badge text (not emoji) ── */
.pricing-badge {
  font-family: var(--head);
  font-size: .7rem;
  font-weight: 900;
  color: currentColor;
  margin-bottom: 4px;
  letter-spacing: .5px;
}

/* ── Plan selector in admin — prevent overflow ── */
.aa-select {
  max-width: 80px;
  font-size: .6rem;
}

/* ── Code buttons — use text not special chars ── */

/* ── Input area: prevent squeeze on narrow screens ── */
.input-box {
  min-height: 46px;
}
.mic-btn, .voice-call-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.send-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* ── View panel: chat takes full height properly ── */
#view-chat {
  height: calc(100dvh - 52px);
  display: flex;
  flex-direction: column;
}
#view-chat .chat-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
#view-chat .input-area {
  flex-shrink: 0;
}

/* ── No install button in sidebar (already removed from HTML) ── */
.install-sb-btn { display: none !important; }

/* ── Remove emoji from pricing popular badge ── */
.pricing-popular {
  font-size: .52rem;
}

/* Mobile: sidebar nav still 3 col, slightly bigger touch targets */
@media(max-width:720px){
  .nav-tab { min-height: 48px; padding: 8px 4px; }
  .nav-tab svg { width: 15px; height: 15px; }
}


/* ─── Code Preview iframe ─── */
.code-preview-frame {
  width: 100%;
  min-height: 200px;
  max-height: 320px;
  border: none;
  border-bottom: 1px solid rgba(198,168,92,.15);
  background: #fff;
  display: block;
}