/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#080c12;--bg2:#0b1018;--panel:#0f1622;--panel2:#131b28;
  --border:#1a2540;--border2:#222f48;
  --text:#edf2fa;--muted:#6b82a4;--muted2:#8fa4c0;
  --accent:#9059d1;--accent2:#7340b8;--accent3:#b07ef0;
  --green:#34d399;--gold:#f5c842;--danger:#f87171;
  --nav-h:62px;--comp-h:96px;--radius:14px;
}

html,body{height:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  overflow:hidden;position:relative;
}

/* ── PARTICLES ── */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}

/* ══════════════════════════════════════
   SITE NAV — same as landing page
══════════════════════════════════════ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;gap:1rem;
  background:rgba(8,12,18,.92);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(144,89,209,.12);
}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);flex-shrink:0}
.nav-logo-img{width:38px;height:38px;object-fit:contain;border-radius:6px}
.nav-logo-text{font-size:1rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.nav-logo-text strong{font-weight:800}

/* Status */
.nav-status-wrap{display:flex;align-items:center;gap:.45rem;flex:1;justify-content:center}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-dot 2.5s ease-in-out infinite;flex-shrink:0}
.nav-status-text{font-size:.75rem;color:var(--muted);white-space:nowrap}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 4px var(--accent)}50%{box-shadow:0 0 14px var(--accent)}}
@media(max-width:600px){.nav-status-wrap{display:none}}

/* Actions */
.nav-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}

/* Quota */
.quota-pill{display:flex;align-items:center;gap:.3rem;background:rgba(144,89,209,.07);border:1px solid rgba(144,89,209,.2);color:var(--accent);font-size:.72rem;font-weight:600;padding:.28rem .65rem;border-radius:20px;white-space:nowrap}

/* Tool buttons */
.nav-tool{
  display:flex;align-items:center;gap:.3rem;
  background:transparent;border:1px solid var(--border);
  color:var(--muted);padding:.38rem .7rem;border-radius:8px;
  cursor:pointer;transition:all .15s;font-family:inherit;font-size:.78rem;font-weight:600;
  white-space:nowrap;text-decoration:none;
}
.nav-tool:hover{border-color:var(--accent);color:var(--accent);background:rgba(144,89,209,.06)}
.nav-tool-accent{color:var(--accent)!important;border-color:rgba(144,89,209,.3)}
.nav-tool-accent:hover{background:rgba(144,89,209,.1)!important}
.nav-tool-label{display:none}
@media(min-width:760px){.nav-tool-label{display:inline}}

/* Sign in / Register buttons */
.nav-signin{color:var(--muted);font-size:.84rem;font-weight:600;text-decoration:none;padding:.38rem .75rem;border-radius:8px;border:1px solid var(--border);transition:all .15s;white-space:nowrap}
.nav-signin:hover{color:var(--text);border-color:var(--muted)}
.nav-register{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent);color:#fff;font-size:.84rem;font-weight:700;text-decoration:none;padding:.42rem 1rem;border-radius:8px;transition:background .15s;box-shadow:0 4px 12px rgba(144,89,209,.3);white-space:nowrap}
.nav-register:hover{background:var(--accent2)}

/* ══════════════════════════════════════
   ACCOUNT DROPDOWN
══════════════════════════════════════ */
.acct-wrap{position:relative}
.acct-btn{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(144,89,209,.06);border:1px solid rgba(144,89,209,.2);
  color:var(--text);padding:.38rem .75rem .38rem .45rem;
  border-radius:8px;cursor:pointer;transition:all .15s;font-family:inherit;
}
.acct-btn:hover{border-color:var(--accent);background:rgba(144,89,209,.1)}
.acct-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:.8rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.acct-info{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.acct-name{font-size:.82rem;font-weight:700}
.acct-tier{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--accent3)}

/* Dropdown */
.acct-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:260px;
  background:var(--panel);border:1px solid var(--border2);border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  overflow:hidden;z-index:200;
  animation:dd-in .12s ease;
}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.acct-dd-header{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.1rem .75rem;
  border-bottom:1px solid var(--border);
  background:rgba(144,89,209,.04);
}
.acct-dd-avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:1rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.acct-dd-name{font-size:.9rem;font-weight:700;margin-bottom:.1rem}
.acct-dd-email{font-size:.75rem;color:var(--muted)}

.acct-dd-plan{padding:.75rem 1.1rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.3rem}
.acct-dd-plan-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.acct-dd-plan-label{font-size:.75rem;color:var(--muted)}
.acct-dd-plan-val{font-size:.78rem;font-weight:600;color:var(--text)}
.acct-dd-plan-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.18rem .6rem;border-radius:4px}

.tier-free{background:rgba(107,130,164,.15);color:var(--muted)}
.tier-basic{background:rgba(96,165,250,.1);color:#60a5fa}
.tier-pro{background:rgba(144,89,209,.12);color:var(--accent3)}
.tier-expert{background:rgba(245,200,66,.1);color:var(--gold)}

.acct-dd-links{display:flex;flex-direction:column;padding:.4rem 0}
.acct-dd-link{
  display:flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;font-size:.84rem;color:var(--muted2);
  text-decoration:none;transition:all .12s;cursor:pointer;font-family:inherit;
}
.acct-dd-link:hover{background:rgba(144,89,209,.06);color:var(--text)}
.acct-dd-upgrade{color:var(--accent3)!important}
.acct-dd-upgrade:hover{background:rgba(144,89,209,.1)!important}
.acct-dd-sep{border-top:1px solid var(--border)}
.acct-dd-logout{
  display:flex;align-items:center;gap:.55rem;
  padding:.65rem 1.1rem;font-size:.84rem;color:var(--danger);
  background:transparent;border:none;cursor:pointer;width:100%;
  transition:background .12s;font-family:inherit;
}
.acct-dd-logout:hover{background:rgba(248,113,113,.06)}

/* ══════════════════════════════════════
   ACCOUNT PANEL (slide-in sidebar)
══════════════════════════════════════ */
.panel-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
}
.account-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:160;
  width:360px;max-width:100vw;
  background:var(--panel);border-left:1px solid var(--border2);
  display:flex;flex-direction:column;
  overflow-y:auto;
  animation:panel-in .2s ease;
}
@keyframes panel-in{from{transform:translateX(30px);opacity:.5}to{transform:none;opacity:1}}

.ap-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.35rem;border-bottom:1px solid var(--border);
  background:rgba(144,89,209,.04);position:sticky;top:0;z-index:1;
}
.ap-title{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.ap-close{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:7px;padding:.35rem;cursor:pointer;transition:all .15s;display:flex}
.ap-close:hover{border-color:var(--accent);color:var(--accent)}

.ap-section{padding:1.1rem 1.35rem;border-bottom:1px solid var(--border)}
.ap-section:last-child{border-bottom:none}

.ap-profile{display:flex;align-items:center;gap:.85rem}
.ap-profile-avatar{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-size:1.2rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ap-profile-name{font-size:.95rem;font-weight:700;margin-bottom:.15rem}
.ap-profile-email{font-size:.78rem;color:var(--muted)}

.ap-card{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:1rem 1.15rem}
.ap-card-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.55rem}
.ap-plan-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.ap-plan-badge{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.22rem .7rem;border-radius:5px}
.ap-plan-manage{font-size:.8rem;color:var(--accent3);text-decoration:none;font-weight:600}
.ap-plan-manage:hover{text-decoration:underline}
.ap-plan-quota{font-size:.8rem;color:var(--muted2);margin-top:.2rem}
.ap-upgrade-btn{
  display:flex;align-items:center;gap:.4rem;justify-content:center;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:.62rem 1rem;border-radius:9px;font:700 .84rem "Inter",sans-serif;
  margin-top:.75rem;transition:background .15s;
  box-shadow:0 4px 12px rgba(144,89,209,.3);
}
.ap-upgrade-btn:hover{background:var(--accent2)}

/* History */
.ap-history-section{flex:1;display:flex;flex-direction:column;gap:.75rem;padding-bottom:0}
.ap-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);display:flex;align-items:center;gap:.45rem}
.ap-history-count{background:rgba(144,89,209,.1);color:var(--accent3);font-size:.65rem;padding:.1rem .45rem;border-radius:10px}
.ap-history-list{display:flex;flex-direction:column;gap:.35rem;max-height:340px;overflow-y:auto}
.ap-history-item{
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:.7rem .9rem;cursor:pointer;transition:border-color .15s;
}
.ap-history-item:hover{border-color:rgba(144,89,209,.35)}
.ap-history-q{font-size:.83rem;font-weight:600;margin-bottom:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-history-meta{font-size:.72rem;color:var(--muted)}
.ap-history-empty{font-size:.84rem;color:var(--muted);text-align:center;padding:1.5rem 0}
.ap-load-more{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:.5rem;font:.75rem "Inter",sans-serif;font-weight:600;
  cursor:pointer;transition:all .15s;margin-top:.5rem;
}
.ap-load-more:hover{border-color:var(--accent);color:var(--accent)}

/* Links section */
.ap-link-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem 0;font-size:.85rem;color:var(--muted2);
  text-decoration:none;border-bottom:1px solid rgba(26,37,64,.5);
  transition:color .15s;background:transparent;border-left:none;border-right:none;border-top:none;
  cursor:pointer;font-family:inherit;width:100%;text-align:left;
}
.ap-link-row:last-child{border-bottom:none}
.ap-link-row:hover{color:var(--text)}
.ap-logout-row{color:var(--danger)!important}
.ap-logout-row:hover{color:#fca5a5!important}

/* ══════════════════════════════════════
   CHAT
══════════════════════════════════════ */
.chat-shell{
  position:fixed;
  top:var(--nav-h);left:0;right:0;
  bottom:var(--comp-h);
  overflow-y:auto;
  display:flex;flex-direction:column;
  z-index:1;
  padding:1.5rem 0 1rem;
}
.chat-thread{
  flex:1;
  max-width:760px;width:100%;margin:0 auto;
  padding:0 1.25rem;
  display:flex;flex-direction:column;
  gap:.75rem;
}

/* Bubbles */
.bubble{
  max-width:88%;padding:.85rem 1.1rem;
  border-radius:14px;font-size:.92rem;line-height:1.65;
  position:relative;animation:bubble-in .2s ease;
  word-break:break-word;
}
@keyframes bubble-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bubble.user{
  align-self:flex-end;
  background:rgba(26,40,64,.85);
  border:1px solid #263a58;
  border-bottom-right-radius:4px;
}
.bubble.bot{
  align-self:flex-start;
  background:rgba(13,22,34,.9);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.bubble .meta{
  display:block;font-size:.7rem;color:var(--muted);
  margin-top:.55rem;padding-top:.45rem;
  border-top:1px solid rgba(144,89,209,.12);
}
.bubble .meta a{color:var(--accent3);text-decoration:none}
.bubble .meta a:hover{text-decoration:underline}
.bubble code{background:rgba(144,89,209,.1);padding:.1em .35em;border-radius:4px;font-size:.87em}

/* Typing indicator */
.typing .typing-dots{display:flex;gap:.35rem;align-items:center;padding:.1rem 0}
.typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;animation:tdot 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.18s}
.typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1.1);opacity:1}}

/* Suggestions */
.suggestions{max-width:760px;width:100%;margin:auto auto 0;padding:0 1.25rem 1.25rem}
.suggestions-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.75rem}
.suggestions-grid{display:flex;flex-wrap:wrap;gap:.45rem}
.suggestion-chip{
  background:rgba(144,89,209,.06);border:1px solid rgba(144,89,209,.15);
  color:var(--muted2);font:500 .8rem "Inter",sans-serif;
  padding:.38rem .85rem;border-radius:20px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:left;
  animation:chip-in .4s ease both;
}
@keyframes chip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.suggestion-chip:nth-child(1){animation-delay:.3s}
.suggestion-chip:nth-child(2){animation-delay:.38s}
.suggestion-chip:nth-child(3){animation-delay:.46s}
.suggestion-chip:nth-child(4){animation-delay:.54s}
.suggestion-chip:hover{background:rgba(144,89,209,.12);border-color:var(--accent);color:var(--text)}

/* Sign-in prompt bubble */
.signin-prompt{max-width:100%!important;background:rgba(144,89,209,.05)!important;border-color:rgba(144,89,209,.2)!important}
.signin-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.signin-icon{width:38px;height:38px;border-radius:10px;background:rgba(144,89,209,.1);border:1px solid rgba(144,89,209,.2);display:flex;align-items:center;justify-content:center;color:var(--accent3);flex-shrink:0}
.signin-body{flex:1;min-width:180px}
.signin-title{font-weight:700;font-size:.92rem;margin-bottom:.25rem}
.signin-sub{font-size:.82rem;color:var(--muted2);margin-bottom:.8rem;line-height:1.55}
.signin-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.signin-btn{padding:.5rem 1.1rem;border-radius:8px;font:.7rem "Inter",sans-serif;font-weight:700;text-decoration:none;transition:all .15s}
.signin-btn.solid{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(144,89,209,.3)}
.signin-btn.solid:hover{background:var(--accent2)}
.signin-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.signin-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Upgrade prompt */
.upgrade-prompt{max-width:100%!important}
.upgrade-inner{display:flex;flex-direction:column;gap:.65rem}
.upgrade-title{font-size:.92rem;font-weight:700}
.upgrade-sub{font-size:.82rem;color:var(--muted2)}
.upgrade-cards{display:flex;gap:.65rem;flex-wrap:wrap}
.upgrade-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;flex:1;min-width:110px;text-align:center}
.upgrade-card.highlight{border-color:var(--accent);background:rgba(144,89,209,.07);position:relative}
.upgrade-card-badge{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent3);background:rgba(144,89,209,.12);padding:.12rem .5rem;border-radius:3px;display:inline-block;margin-bottom:.3rem}
.upgrade-card-name{font-size:.78rem;font-weight:700;margin-bottom:.2rem}
.upgrade-card-price{font-size:1.25rem;font-weight:900;letter-spacing:-.04em;color:var(--text)}
.upgrade-card-price span{font-size:.72rem;font-weight:500;color:var(--muted)}
.upgrade-card-feat{font-size:.72rem;color:var(--muted2);margin:.25rem 0 .65rem}
.upgrade-btn{display:block;background:var(--accent);color:#fff;text-decoration:none;padding:.4rem .5rem;border-radius:7px;font:.7rem "Inter",sans-serif;font-weight:700;transition:background .15s}
.upgrade-btn:hover{background:var(--accent2)}
.upgrade-all{font-size:.8rem;color:var(--accent3);text-decoration:none;font-weight:600}

/* ══════════════════════════════════════
   COMPOSER
══════════════════════════════════════ */
.composer-wrap{
  position:fixed;bottom:0;left:0;right:0;z-index:10;
  background:linear-gradient(to top,rgba(5,8,15,.99) 55%,rgba(5,8,15,.82));
  border-top:1px solid rgba(144,89,209,.13);
  backdrop-filter:blur(24px);
  padding:.9rem 1rem .75rem;
}
.composer-inner{width:100%;max-width:780px;margin:0 auto;}
.composer{
  display:flex;align-items:flex-end;gap:.5rem;
  background:rgba(16,24,40,.9);
  border:1.5px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:.7rem .7rem .7rem 1.15rem;
  transition:border-color .25s,box-shadow .25s;
  position:relative;
}
.composer:focus-within{
  border-color:rgba(144,89,209,.5);
  box-shadow:0 0 0 3px rgba(144,89,209,.12),0 8px 32px rgba(144,89,209,.12);
}
#msg{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font:1rem/1.6 "Inter",sans-serif;
  resize:none;min-height:26px;max-height:160px;
  overflow-y:auto;padding:.05rem 0;
  scrollbar-width:none;
}
#msg::placeholder{color:rgba(148,163,184,.4);font-size:.92rem}
#msg::-webkit-scrollbar{display:none}
.send-btn{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,#9059d1 0%,#7c3aed 100%);
  border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity .15s,transform .12s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(144,89,209,.45);
  position:relative;overflow:hidden;
}
.send-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 60%);
  border-radius:inherit;pointer-events:none;
}
.send-btn:hover{opacity:.9;box-shadow:0 6px 28px rgba(144,89,209,.6);transform:translateY(-1px)}
.send-btn:active{transform:scale(.91);box-shadow:0 2px 10px rgba(144,89,209,.3)}
.send-btn:disabled{opacity:.28;cursor:not-allowed;transform:none;box-shadow:none}
.attach-btn{
  flex-shrink:0;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(148,163,184,.5);cursor:pointer;
  transition:color .15s,background .15s;
}
.attach-btn:hover{color:var(--accent);background:rgba(144,89,209,.1);}
.attach-btn.has-file{color:var(--accent);}
.composer-hint{
  font-size:.68rem;color:rgba(100,116,139,.55);
  text-align:center;margin-top:.5rem;letter-spacing:.01em;
}
.composer-hint a{color:rgba(100,116,139,.55);text-decoration:none;transition:color .15s}
.composer-hint a:hover{color:var(--muted)}

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay[hidden]{display:none!important;}
/* Auth gate perk list */
.auth-gate-perks{display:flex;flex-direction:column;gap:.5rem;margin:.25rem 0 .5rem}
.auth-gate-perk{display:flex;align-items:center;gap:.65rem;font-size:.86rem;color:var(--muted2)}
.perk-icon{color:var(--accent);font-size:.8rem;flex-shrink:0}
.account-panel[hidden]{display:none!important;}
.panel-overlay[hidden]{display:none!important;}
.nav-register[hidden]{display:none!important;}
.nav-signin[hidden]{display:none!important;}
.acct-wrap[hidden]{display:none!important;}
.quota-pill[hidden]{display:none!important;}
.modal-box{
  background:var(--panel);border:1px solid var(--border2);
  border-radius:18px;width:100%;max-width:460px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:modal-in .18s ease;
}
.modal-box-sm{max-width:360px}
@keyframes modal-in{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:flex-start;gap:.85rem;padding:1.35rem 1.5rem 1rem}
.modal-icon{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:rgba(144,89,209,.1);border:1px solid rgba(144,89,209,.2);
  display:flex;align-items:center;justify-content:center;color:var(--accent3);
}
.modal-icon-green{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.2);color:var(--green)}
.modal-icon-warn{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.2);color:var(--danger)}
.modal-title{font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.15rem}
.modal-sub{font-size:.82rem;color:var(--muted2);line-height:1.5}
.modal-close{
  margin-left:auto;background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:7px;padding:.35rem;cursor:pointer;
  transition:all .15s;display:flex;flex-shrink:0;
}
.modal-close:hover{border-color:var(--danger);color:var(--danger)}
.modal-body{padding:0 1.5rem 1rem}
.modal-label{display:block;font-size:.76rem;font-weight:700;color:var(--muted2);margin-bottom:.4rem}
.modal-input{
  width:100%;background:var(--panel2);border:1.5px solid var(--border);
  border-radius:10px;color:var(--text);padding:.72rem 1rem;
  font:1rem "Inter",sans-serif;outline:none;transition:border-color .15s;
}
.modal-input:focus{border-color:rgba(144,89,209,.5)}
.modal-footer{display:flex;gap:.65rem;justify-content:flex-end;padding:.85rem 1.5rem 1.35rem}
.modal-btn{padding:.65rem 1.35rem;border-radius:10px;font:700 .875rem "Inter",sans-serif;cursor:pointer;border:none;transition:all .15s}
.modal-btn.solid{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(144,89,209,.3)}
.modal-btn.solid:hover{background:var(--accent2)}
.modal-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.modal-btn.ghost:hover{border-color:var(--muted)}
.modal-btn.danger{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.25)}
.modal-btn.danger:hover{background:rgba(248,113,113,.2)}
.modal-btn:disabled{opacity:.45;cursor:not-allowed}
.modal-toast{padding:.65rem 1rem;margin:.5rem 1.5rem 0;border-radius:9px;font-size:.84rem}
.modal-toast.success{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);color:var(--green)}
.modal-toast.error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);color:var(--danger)}

/* Upload drop zone */
.upload-drop{
  border:2px dashed var(--border2);border-radius:12px;
  padding:2rem 1.5rem;text-align:center;cursor:pointer;
  transition:border-color .15s;position:relative;
}
.upload-drop:hover,.upload-drop.drag-over{border-color:var(--accent);background:rgba(144,89,209,.04)}
.upload-preview-row{display:flex;align-items:center;gap:.6rem;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem}

/* ══════════════════════════════════════
   MOBILE UTILITIES
══════════════════════════════════════ */
.desktop-only{display:flex}
.mobile-only{display:none}
.danger-link{color:var(--danger)!important}

/* ══════════════════════════════════════
   RESPONSIVE — tablet
══════════════════════════════════════ */
@media(max-width:768px){
  .desktop-only{display:none!important}
  .mobile-only{display:flex!important}

  /* Nav */
  .site-nav{padding:0 .9rem;gap:.5rem;height:56px}
  --nav-h:56px;
  .nav-logo-img{width:32px;height:32px}
  .nav-logo-text{font-size:.9rem}
  .nav-actions{gap:.3rem}

  /* Account button — avatar only on mobile */
  .acct-btn{padding:.32rem .4rem;gap:0}
  .acct-avatar{width:32px;height:32px;font-size:.78rem}

  /* Dropdown full-width on mobile */
  .acct-dropdown{
    position:fixed;top:56px;left:0;right:0;
    width:100%;border-radius:0 0 18px 18px;
    max-height:80vh;overflow-y:auto;
  }

  /* Quota pill compact */
  .quota-pill{font-size:.66rem;padding:.22rem .5rem}

  /* Chat thread */
  .chat-thread{padding:0 .8rem}

  /* Suggestions */
  .suggestions{padding:0 .8rem .9rem}
  .suggestions-grid{gap:.35rem}
  .suggestion-chip{font-size:.75rem;padding:.32rem .7rem}

  /* Composer */
  .composer-wrap{padding:.6rem .75rem .55rem}
  .composer{border-radius:16px;padding:.55rem .55rem .55rem .9rem}
  #msg{font-size:.93rem}
  .send-btn{width:38px;height:38px;border-radius:11px}
  .composer-hint{font-size:.62rem;margin-top:.35rem}

  /* Account panel full width */
  .account-panel{width:100%}

  /* Bubbles */
  .bubble{max-width:92%!important;font-size:.88rem}
  .bubble.user{max-width:85%!important}
}

/* ══════════════════════════════════════
   RESPONSIVE — small phones
══════════════════════════════════════ */
@media(max-width:400px){
  .nav-logo-text{display:none}
  .nav-signin{display:none}
  .nav-register{padding:.35rem .6rem;font-size:.78rem}
  .chat-thread{padding:0 .6rem}
  .suggestions{padding:0 .6rem .8rem}
  .composer-wrap{padding:.5rem .6rem .45rem}
  .send-btn{width:36px;height:36px}
}