/* FleetChat design system — premium dark/light */
:root {
  --bg:#0B0D12; --panel:#0F1219; --surface:#161A23; --surface-2:#1D2330;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.12);
  --text:#E8EAF0; --muted:#9AA3B2; --faint:#626C7C;
  --accent:#5E6AD2; --accent-hi:#7C86E8; --accent-soft:rgba(94,106,210,.16); --accent-glow:rgba(94,106,210,.35);
  --green:#4CB782; --amber:#E9B44C; --red:#E5645C;
  --radius:10px; --radius-sm:8px; --radius-lg:14px;
  --shadow-pop:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35); --shadow-card:0 1px 2px rgba(0,0,0,.30);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --header-h:52px; --code-bg:#0B0E13; --code-text:#C7D0DC; --avatar-ring:rgba(255,255,255,.08);
}
:root[data-theme="light"] {
  --bg:#F6F7F9; --panel:#FFFFFF; --surface:#EEF0F4; --surface-2:#E4E7ED;
  --border:rgba(15,23,42,.08); --border-strong:rgba(15,23,42,.14);
  --text:#1A1D24; --muted:#5B6472; --faint:#8A93A2;
  --accent:#4F5BD5; --accent-hi:#3D48B8; --accent-soft:rgba(79,91,213,.12); --accent-glow:rgba(79,91,213,.25);
  --green:#2E8B63; --amber:#B97F1E; --red:#C94F47;
  --shadow-pop:0 8px 24px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.08); --shadow-card:0 1px 2px rgba(15,23,42,.08);
  --code-bg:#F1F3F6; --code-text:#1F2430; --avatar-ring:rgba(0,0,0,.06);
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; height:100dvh; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden; }
button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
code { font-family:var(--mono); font-size:12px; }
.hidden { display:none !important; } .mobile-only { display:none !important; }
.btn-icon { background:none; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-sm); width:36px; height:36px; font-size:16px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon:hover,.btn-ghost:hover { color:var(--text); border-color:var(--border-strong); }
.btn-primary { border:none; border-radius:var(--radius-sm); background:var(--accent); color:#fff; padding:11px 16px; font-size:14px; font-weight:600; width:100%; }
.btn-primary:hover { background:var(--accent-hi); }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-sm); padding:6px 10px; font-size:14px; }
h1,h2,h3 { letter-spacing:-.01em; }
.msg-time,.run-meta,.cost { font-variant-numeric:tabular-nums; }
.message-list,.sidebar-nav,.run-output { scrollbar-width:thin; scrollbar-color:var(--surface-2) transparent; }
.message-list::-webkit-scrollbar,.sidebar-nav::-webkit-scrollbar,.run-output::-webkit-scrollbar { width:8px; }
.message-list::-webkit-scrollbar-thumb,.sidebar-nav::-webkit-scrollbar-thumb,.run-output::-webkit-scrollbar-thumb { background:var(--surface-2); border-radius:8px; }
.message-list::-webkit-scrollbar-thumb:hover,.sidebar-nav::-webkit-scrollbar-thumb:hover,.run-output::-webkit-scrollbar-thumb:hover { background:var(--faint); }

/* login */
.login { min-height:100%; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background:radial-gradient(1200px 600px at 20% -10%,var(--accent-soft),transparent 60%),var(--bg); }
.login-card { width:100%; max-width:360px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; text-align:center; box-shadow:var(--shadow-pop); }
.login-logo,.brand-mark { background:linear-gradient(135deg,#5E6AD2,#8B5CF6); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
.login-logo { width:64px; height:64px; margin:0 auto 16px; border-radius:var(--radius-lg); font-size:20px; }
.login-card h1 { font-size:22px; margin-bottom:6px; } .login-sub { color:var(--muted); font-size:13px; margin-bottom:20px; }
.login-card input { width:100%; padding:11px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--text); margin-bottom:12px; font-size:16px; }
.login-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-error { color:var(--red); font-size:12px; margin-top:10px; }

/* layout/sidebar */
.app { display:flex; height:100%; height:100dvh; overflow:hidden; position:relative; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
.sidebar { width:272px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; min-height:0; overflow:hidden; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:var(--sp-4); border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-brand .brand-text { flex:1; min-width:0; } .brand-mark { width:34px; height:34px; border-radius:9px; flex-shrink:0; font-size:13px; }
.brand-text { display:flex; flex-direction:column; line-height:1.2; } .brand-text strong { font-size:14px; }
.conn-state { font-size:11px; color:var(--faint); } .conn-state::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin:0 5px 1px 0; }
.conn-state.on { color:var(--green); } .conn-state.off { color:var(--red); }
.sidebar-nav { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidebar-section { padding:var(--sp-3) var(--sp-2); } .section-label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:0 8px 8px; }
.channel-list,.member-list { list-style:none; }
.channel-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--radius-sm); color:var(--muted); cursor:pointer; font-size:var(--fs-md); border:none; background:none; width:100%; text-align:left; }
.channel-item:hover { background:var(--surface); color:var(--text); } .channel-item.active { background:var(--accent-soft); color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); } .channel-item .hash { opacity:.7; }
.member-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--radius-sm); font-size:var(--fs-md); color:var(--muted); min-height:40px; }
.member-item .avatar { position:relative; width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; box-shadow:inset 0 0 0 1px var(--avatar-ring); }
.m-status-dot { position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border:2px solid var(--panel); border-radius:50%; }
.m-status-dot.dot-green { background:var(--green); } .m-status-dot.dot-amber { background:var(--amber); } .m-status-dot.dot-gray { background:var(--faint); }
.member-item:has(.m-status-dot.dot-gray) .avatar { opacity:.4; } .member-item:has(.m-status-dot.dot-green) .m-name { color:var(--text); font-weight:600; }
.member-item .m-name { flex:1; min-width:0; } .member-item .m-spec { display:block; font-size:10.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.member-item > .dot { display:none; } .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .dot-green { background:var(--green); } .dot-amber { background:var(--amber); } .dot-gray { background:var(--faint); }
.sidebar-footer { padding:12px 14px; border-top:1px solid var(--border); font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px; flex-shrink:0; }
.sidebar-footer .theme-toggle { margin-left:auto; padding:5px 8px; line-height:1; }

/* main/messages */
.main,#chat-view,.admin-view { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.channel-header { height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 22px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--panel) 85%,transparent); backdrop-filter:blur(12px); flex-shrink:0; }
.header-left { display:flex; align-items:center; gap:10px; min-width:0; } .channel-header h2 { font-size:16px; font-weight:700; } .channel-purpose { font-size:12px; color:var(--muted); margin-top:2px; }
.message-list { flex:1; overflow-y:auto; padding:20px 22px 12px; display:flex; flex-direction:column; gap:4px; }
.msg { display:flex; gap:12px; padding:10px 10px; border-radius:var(--radius); max-width:880px; width:100%; } .msg:hover { background:rgba(255,255,255,.03); }
.msg .avatar { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; text-transform:uppercase; box-shadow:inset 0 0 0 1px var(--avatar-ring); }
.msg-body { min-width:0; flex:1; } .msg-head { display:flex; align-items:baseline; gap:8px; } .msg-author { font-weight:700; font-size:var(--fs-md); color:var(--text); } .msg-time { font-size:var(--fs-xs); color:var(--faint); }
.msg-text { margin-top:2px; white-space:pre-wrap; word-wrap:break-word; } .msg-text .mention { color:var(--accent-hi); background:var(--accent-soft); padding:0 3px; border-radius:4px; font-weight:600; } .msg.system { color:var(--faint); text-align:center; font-size:var(--fs-sm); justify-content:center; }

/* run cards */
.run-card { margin-top:6px; border:1px solid var(--border); border-left:3px solid var(--muted); border-radius:var(--radius-lg); background:var(--panel); overflow:hidden; max-width:720px; box-shadow:var(--shadow-card); }
.run-card:has(.run-status.queued) { border-left-color:var(--amber); } .run-card:has(.run-status.running) { border-left-color:var(--accent-hi); } .run-card:has(.run-status.succeeded) { border-left-color:var(--green); } .run-card:has(.run-status.failed) { border-left-color:var(--red); }
.run-head { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; font-size:13px; min-width:0; } .run-head:hover { background:var(--surface-2); }
.run-status { padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; } .run-status.queued { background:rgba(233,180,76,.15); color:var(--amber); } .run-status.running { background:var(--accent-soft); color:var(--accent-hi); animation:pulse 2s infinite; } .run-status.succeeded { background:rgba(76,183,130,.15); color:var(--green); } .run-status.failed { background:rgba(229,100,92,.15); color:var(--red); } .run-status.unavailable { background:rgba(154,163,178,.15); color:var(--muted); }
.run-lane { font-weight:700; color:var(--text); flex-shrink:0; } .run-meta { margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .run-chevron { color:var(--faint); font-size:20px; line-height:12px; transition:transform .18s ease; flex-shrink:0; } .run-card.expanded .run-chevron { transform:rotate(90deg); }
.run-output { border-top:1px solid var(--border); background:var(--code-bg); color:var(--code-text); font-family:var(--mono); font-size:12.5px; line-height:1.55; padding:12px 14px; max-height:320px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; } .run-card:has(.run-status.failed) .run-output { border-top-color:rgba(229,100,92,.35); }
.run-output .cursor { animation:blink 1s steps(1) infinite; color:var(--accent); } @keyframes blink { 50%{opacity:0;} } @keyframes pulse { 50%{opacity:.7;} } .run-card.expanded .run-output{display:block;} .run-card:not(.expanded) .run-output{display:none;}

/* composer */
.composer-wrap { padding:10px 22px 14px; background:var(--panel); border-top:1px solid var(--border); position:relative; } .composer { display:flex; align-items:flex-end; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 8px 8px 14px; }
.composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .composer textarea { flex:1; background:none; border:none; color:var(--text); font-family:inherit; font-size:16px; resize:none; max-height:140px; outline:none; line-height:1.45; }
.send-btn { border:none; border-radius:9px; background:linear-gradient(135deg,var(--accent),#8B5CF6); color:#fff; width:40px; height:40px; font-size:15px; flex-shrink:0; } .send-btn:hover { filter:brightness(1.08); } .composer-hint { font-size:11px; color:var(--faint); margin-top:7px; padding-left:4px; }
.mention-pop { position:absolute; bottom:62px; left:30px; width:240px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); overflow:hidden; z-index:20; } .mention-item { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; font-size:13px; } .mention-item:hover,.mention-item.sel { background:var(--accent-soft); } .mention-item .avatar { width:20px; height:20px; border-radius:5px; font-size:10px; }
.empty-state { color:var(--faint); text-align:center; padding:60px 20px; font-size:13px; }

/* admin */
.admin-body { padding:24px; overflow-y:auto; -webkit-overflow-scrolling:touch; } .admin-body h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); } .admin-body h3:first-child { margin-top:0; }
.usage-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .usage-table { width:100%; border-collapse:collapse; font-size:13px; } .usage-table th { position:sticky; top:0; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--border); background:var(--bg); } .usage-table td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--muted); } .usage-table tbody tr:hover { background:var(--surface); } .usage-table td:first-child { color:var(--text); font-weight:600; }
.sub-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; } .sub-card,.sub-form { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); } .sub-card { padding:14px 16px; } .sub-card:hover { border-color:var(--border-strong); } .sub-card .sub-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .sub-card .sub-name { font-weight:700; font-size:14px; } .sub-card .sub-plan { font-size:12px; color:var(--accent); } .sub-card .sub-meta { margin-top:8px; font-size:12px; color:var(--muted); display:grid; gap:3px; } .sub-card .sub-cost { color:var(--text); font-weight:600; } .sub-del { background:none; border:1px solid var(--border); color:var(--faint); border-radius:7px; padding:4px 8px; font-size:11px; } .sub-del:hover { color:var(--red); border-color:var(--red); }
.sub-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding:14px; } .sub-form input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 10px; font-size:13px; min-width:140px; flex:1; } .sub-form input:focus { outline:none; border-color:var(--accent); } .sub-form button { padding:8px 16px; border:none; border-radius:8px; width:auto; }

@media (prefers-reduced-motion: no-preference) { .sidebar,.sidebar-backdrop { transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .24s ease; } .m-status-dot.dot-amber { animation:presence-pulse 2s ease-in-out infinite; } }
@keyframes presence-pulse { 50% { box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent); } }
@media (max-width:820px) {
  .mobile-only { display:inline-flex !important; } .app { height:var(--vvh,100dvh); }
  .sidebar-backdrop { display:block; opacity:0; pointer-events:none; backdrop-filter:blur(3px); } .app.sidebar-open .sidebar-backdrop { opacity:1; pointer-events:auto; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; z-index:50; width:min(320px,88vw); max-width:320px; transform:translateX(-105%); padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); box-shadow:8px 0 32px rgba(0,0,0,.45); } .app.sidebar-open .sidebar { transform:translateX(0); }
  .main { width:100%; min-width:0; } .channel-header { height:var(--header-h); padding:8px 12px; } .channel-header h2 { font-size:var(--fs-lg); } .channel-header .btn-icon,.channel-header .btn-ghost { width:44px; height:44px; } .channel-purpose { display:none; }
  .channel-item,.member-item { padding:10px 8px; min-height:40px; } .message-list { padding:12px 12px 8px; } .msg { padding:10px 4px; gap:10px; }
  .composer-wrap { padding:8px 12px max(12px,env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(0,0,0,.25); } .composer-hint { display:none; } .send-btn { width:44px; height:44px; } .mention-pop { left:12px; right:12px; width:auto; bottom:72px; }
  .run-meta { max-width:40vw; } .run-meta .run-prompt { display:none; } .run-duration { font-size:11.5px; } .admin-body { padding:14px 12px; } .sub-list { grid-template-columns:1fr; } .sub-form input { min-width:100%; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }