[hidden]{display:none!important}

:root{
  --bg:#0b111b;
  --surface:#0d1522;
  --surface-2:#111927;
  --surface-3:#172132;
  --surface-hover:#1b2739;
  --border:#263247;
  --border-strong:#334155;
  --text:#f8fafc;
  --text-soft:#cbd5e1;
  --text-muted:#94a3b8;
  --text-faint:#7f8ea3;
  --accent:#0ea5e9;
  --accent-hover:#0284c7;
  --accent-soft:#0d3b54;
  --accent-text:#7dd3fc;
  --success:#86efac;
  --bot:#7dd3fc;
  --human:#fde68a;
  --pill-bg:#1e293b;
  --message-in:#172132;
  --message-out:#0d3b54;
  --message-system:#16283a;
  --meta:#cbd5e1;
  --input:#0d1522;
  --disabled:#64748b;
  --shadow:0 14px 36px rgba(0,0,0,.22);
  --focus:0 0 0 3px rgba(14,165,233,.28);
}

html[data-theme="light"]{
  --bg:#f3f6fa;
  --surface:#f8fafc;
  --surface-2:#ffffff;
  --surface-3:#eef3f8;
  --surface-hover:#e6edf5;
  --border:#d7e0ea;
  --border-strong:#c2cfdd;
  --text:#172033;
  --text-soft:#334155;
  --text-muted:#5d6d82;
  --text-faint:#6b7b8f;
  --accent:#0284c7;
  --accent-hover:#0369a1;
  --accent-soft:#dff3ff;
  --accent-text:#0369a1;
  --success:#16794a;
  --bot:#0369a1;
  --human:#8a5a00;
  --pill-bg:#e8eef5;
  --message-in:#ffffff;
  --message-out:#dff3ff;
  --message-system:#e8f3fb;
  --meta:#52657b;
  --input:#ffffff;
  --disabled:#8391a2;
  --shadow:0 14px 36px rgba(51,65,85,.12);
  --focus:0 0 0 3px rgba(2,132,199,.2);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background-color .16s ease,color .16s ease;
}
button,input,textarea{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}

.brand{font-weight:900;font-size:24px;letter-spacing:-.03em}
.brand strong{color:var(--accent)}
.muted{color:var(--text-muted)}
.small{font-size:13px}
.tiny{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-text);font-weight:800}

.btn{
  border:0;
  border-radius:10px;
  padding:11px 14px;
  font-weight:800;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s ease;
}
.btn:not(:disabled):active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;opacity:.48}
.primary{background:var(--accent);color:#fff}
.primary:not(:disabled):hover{background:var(--accent-hover)}
.secondary{background:var(--pill-bg);color:var(--text);border:1px solid var(--border-strong)}
.secondary:not(:disabled):hover{background:var(--surface-hover)}
.ghost{background:transparent;color:var(--text-soft);border:1px solid var(--border)}
.ghost:not(:disabled):hover{background:var(--surface-3)}
.full{width:100%}
.button-link{display:block;text-align:center;text-decoration:none}

.auth-shell,.center-card{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card,.center-card{
  max-width:460px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:22px;
  padding:32px;
  box-shadow:var(--shadow);
}
.stack{display:grid;gap:13px}
.stack label{display:grid;gap:6px;color:var(--text-soft);font-weight:650}
.stack input,.search-wrap input,.composer textarea{
  width:100%;
  background:var(--input);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:12px;
}
.stack input::placeholder,.search-wrap input::placeholder,.composer textarea::placeholder{color:var(--text-faint)}
.helper{min-height:18px;color:var(--accent-text)}
.legal-mini{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:11px;line-height:1.4}
.legal-mini a{color:var(--text-muted);text-decoration:none;font-weight:700}
.legal-mini a:hover{color:var(--accent-text);text-decoration:underline}

.app-shell{height:100vh;display:grid;grid-template-columns:240px 360px 1fr;background:var(--bg)}
.sidebar,.inbox-column{border-right:1px solid var(--border)}
.sidebar{
  padding:18px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sidebar-head,.org-block{display:grid;gap:8px}
.sidebar-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.theme-toggle{
  min-width:78px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-soft);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.theme-toggle:hover{background:var(--surface-3);border-color:var(--border-strong);color:var(--text)}
.theme-icon{font-size:16px;line-height:1}
.org-block{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.nav{display:grid;gap:5px}
.nav-item{
  display:flex;
  justify-content:space-between;
  background:transparent;
  color:var(--text-soft);
  border:0;
  padding:10px;
  border-radius:9px;
  cursor:pointer;
}
.nav-item.active,.nav-item:hover{background:var(--surface-3);color:var(--text)}
.sidebar-foot{margin-top:auto;display:grid;gap:7px}
.sidebar-legal{justify-content:center;padding-top:4px}

.pill{
  display:inline-flex;
  width:max-content;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:800;
  background:var(--pill-bg);
  border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
}
.official{color:var(--success)}
.bot{color:var(--bot)}
.human{color:var(--human)}

.inbox-column{background:var(--surface);display:flex;flex-direction:column}
.column-head,.conversation-head{padding:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.column-head h2,.conversation-head h2{margin:0}
.sync-dot{font-size:12px;color:var(--text-muted);font-weight:700}
.search-wrap{padding:0 12px 12px}
.conversation-list,.messages{overflow:auto}
.conversation-item{padding:13px;border-radius:11px;cursor:pointer;border:1px solid transparent}
.conversation-item:hover,.conversation-item.active{background:var(--surface-3)}
.conversation-item.active{border-color:var(--border)}
.conversation-item .top{display:flex;justify-content:space-between;gap:8px}
.conversation-item h4{margin:0}
.preview,time{font-size:11px;color:var(--text-muted)}
.preview{margin:3px 0 6px;line-height:1.35}

.conversation-column{min-width:0;background:var(--bg)}
.empty-state{height:100%;display:grid;place-content:center;text-align:center;color:var(--text-faint)}
.conversation-view{height:100%;display:grid;grid-template-rows:auto auto 1fr auto}
.conversation-head{background:var(--bg)}
.lead-strip{display:grid;grid-template-columns:1fr 1fr 2fr;border-block:1px solid var(--border)}
.lead-strip div{padding:10px 14px;background:var(--surface-2)}
.lead-strip span{display:block;font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:2px}
.lead-strip strong{font-size:13px;color:var(--text)}

.messages{padding:20px;display:flex;flex-direction:column;gap:9px;scrollbar-color:var(--border-strong) transparent}
.message{
  max-width:72%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--message-in);
  color:var(--text);
  line-height:1.42;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.message.outbound{align-self:flex-end;background:var(--message-out)}
.message.system{align-self:center;background:var(--message-system)}
.message .meta{
  display:block;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
  color:var(--meta);
  margin-top:6px;
  letter-spacing:.01em;
}

.composer{
  padding:12px;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  background:var(--bg);
}
.composer textarea{min-height:52px;resize:vertical}
.composer.disabled textarea{background:color-mix(in srgb,var(--input) 75%,var(--bg));color:var(--disabled)}
.composer p{grid-column:1/-1;margin:0;font-size:11px;line-height:1.4;color:var(--text-muted);font-weight:600}
.row{display:flex}.gap{gap:8px}

.toast{
  position:fixed;
  right:18px;
  top:18px;
  background:var(--surface-3);
  color:var(--text);
  border:1px solid var(--border);
  padding:10px 13px;
  border-radius:10px;
  box-shadow:var(--shadow);
  z-index:10;
}

@media(max-width:900px){
  .app-shell{grid-template-columns:200px 300px 1fr}
  .theme-label{display:none}
  .theme-toggle{min-width:36px;width:36px;padding:0}
}