/* ============================================================
   CortexHive — Premium AI Workforce OS
   Design System: investor-deck brand parity — near-black canvas, glass
   surfaces, blue accent (#6E8BFF), Hanken Grotesk / Spline Sans Mono type.
   Retheme 2026-07-05 to match the CortexHive investor deck. The
   --brand-color override knob is preserved so a tenant can recolour the accent.
   ============================================================ */

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

:root {
  /* surfaces — translucent glass over the deck's near-black void */
  --bg:         #0A0B0F;                 /* deck bg */
  --bg-deep:    #0E1016;                 /* deck bg-soft */
  --panel:      #13161F;                 /* deck surface */
  --panel-2:    #191D28;                 /* deck surface-2 */
  --panel-3:    rgba(232,234,240,0.08);  /* deck line-light on glass */
  --border:     rgba(110,139,255,0.16);  /* deck line (blue) */
  --border-md:  rgba(232,234,240,0.08);  /* deck line-light */
  /* text */
  --text:       #EAECF3;                 /* deck ink */
  --text-dim:   #C4C8D4;                 /* deck ink-dim */
  --text-muted: #8A90A2;                 /* deck muted */
  /* accent — deck blue; tenant brandColor still overrides via --brand-color */
  --accent:     var(--brand-color, #6E8BFF);
  --accent-dim: #4A63C8;                 /* deck blue-deep */
  --accent-lo:  rgba(110,139,255,0.1);   /* deck blue glow */
  --accent-glow:rgba(110,139,255,0.2);   /* deck blue glow-strong */
  --accent-border: rgba(110,139,255,0.2);
  /* status */
  --purple:     #A78BFA;                 /* deck violet */
  --green:      #7BE0B0;                 /* deck green */
  --red:        #FF8A9B;                 /* deck red */
  --yellow:     #f0c040;
  --blue:       #8FA6FF;                 /* deck blue-bright */
  /* type */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;
  /* geometry / motion (MC parity) */
  --blur:       blur(20px);
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --shadow:     0 2px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --transition: 0.2s cubic-bezier(0.22,1,0.36,1);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* MC-style ambient depth: faint blue/violet radials behind the glass so
   translucent surfaces have something to tint against (matches Mission Control). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(110,139,255,0.06), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(139,122,255,0.05), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(110,139,255,0.04), transparent 60%);
}

/* Read-text legibility floor + tabular figures for live numbers (MC a11y sweep). */
.cost-value, .crm-pipeline-total strong, .section-count, .crm-column-count,
.task-column-count, .agents-count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Visible keyboard focus everywhere (we set outline:none in several inputs). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

/* ── Login Screen ────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1000;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#login-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }

.login-card {
  width: min(380px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: 48px 40px 44px;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(124,92,255,0.06);
}

.login-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 36px;
}
.login-logo-mark {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
  letter-spacing: -0.5px;
}
.login-logo-text {
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text);
}

.login-tagline {
  font-size: 13px; color: var(--text-muted); margin-bottom: 32px;
}

.field-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 8px;
}

.field-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px; font-family: inherit;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lo);
}

/* Password show/hide eye toggle (PW-EYE-TOGGLE-V1, 2026-07-06) */
.field-pw-wrap { position: relative; }
.field-pw-wrap .field-input { padding-right: 42px; }
.pw-toggle-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.pw-toggle-btn:hover { color: var(--text); background: var(--accent-lo); }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle-btn svg { width: 18px; height: 18px; }

.btn-primary {
  width: 100%; margin-top: 20px;
  background: var(--accent);
  border: none; border-radius: var(--radius-sm);
  color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  padding: 11px 20px;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.login-error {
  margin-top: 12px; font-size: 13px;
  color: var(--red); text-align: center;
  min-height: 20px;
}
.login-success {
  margin-top: 12px; font-size: 13px;
  color: var(--green); text-align: center;
  line-height: 1.5;
}
.login-help-text {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin: -20px 0 24px;
}
.login-links-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.login-links-row .login-help-link { margin-top: 0; }

/* Forgot/reset password screens reuse .login-card + #login-screen's fixed-center
   layout — apply the same positioning to their wrappers. */
#forgot-password-screen, #reset-password-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1000;
}

/* ── Beta terms clickwrap (BETA-CLICKWRAP-V1) ─────────────── */
.beta-terms-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1001;
  padding: 16px;
}
.beta-terms-card {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(124,92,255,0.06);
}
.beta-terms-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.beta-terms-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--accent);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  margin-top: 2px;
}
.beta-terms-title {
  font-size: 19px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text); margin: 0 0 6px;
}
.beta-terms-sub {
  font-size: 13px; color: var(--text-muted); margin: 0;
}
.beta-terms-scroll-wrap { position: relative; flex: 1; min-height: 120px; }
.beta-terms-scroll {
  height: 100%; max-height: 340px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding: 6px 16px 16px;
  font-size: 13px; line-height: 1.55; color: var(--text);
}
.beta-terms-scroll p { margin: 0 0 12px; }
.beta-terms-scroll a { color: var(--accent); }
.beta-terms-clause {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.beta-terms-clause:last-of-type { border-bottom: none; }
.beta-terms-clause h3 {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 0 0 4px; letter-spacing: -0.1px;
}
.beta-terms-clause p { color: var(--text-dim); margin: 0; }
.beta-terms-num {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-lo); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.beta-terms-entity { color: var(--text-muted); font-size: 12px; padding-top: 12px; }
/* Fade mask hints there's more to read below the fold; JS hides it near the
   bottom of the scroll box (same signal that ungates the checkbox). */
.beta-terms-fade {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.beta-terms-fade.hidden { opacity: 0; }
.beta-terms-scroll-hint {
  font-size: 11px; color: var(--text-muted); text-align: center;
  margin-top: 8px; transition: opacity 0.2s ease;
}
.beta-terms-scroll-hint.hidden { opacity: 0; visibility: hidden; }
.beta-terms-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px;
  font-size: 13px; color: var(--text); line-height: 1.45;
  cursor: pointer;
}
.beta-terms-check input {
  margin-top: 2px; flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.beta-terms-check input:disabled { cursor: not-allowed; opacity: 0.5; }
.beta-terms-name-label {
  display: block; margin-top: 12px; font-size: 12px; color: var(--text-muted);
}
.beta-terms-screen .field-input:disabled { cursor: not-allowed; opacity: 0.5; }
#beta-terms-name { margin-top: 6px; }
.beta-terms-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  font-size: 11px; color: var(--text-muted);
}
.beta-terms-footer a { color: var(--text-muted); }
.beta-terms-footer a:hover { color: var(--accent); }

/* ── Onboarding wizard (ONBOARDING-WIZARD-V1) ───────────────── */
.onboarding-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1002;
  padding: 16px;
}
.onboarding-card {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(124,92,255,0.06);
}
.onboarding-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.onboarding-dots { display: flex; gap: 6px; }
.onboarding-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-md);
  transition: background .2s;
}
.onboarding-dot.active { background: var(--accent); }
.onboarding-dot.done { background: var(--text-muted); }
.onboarding-skip {
  font-size: 12px; color: var(--text-muted); text-decoration: none;
}
.onboarding-skip:hover { color: var(--text); text-decoration: underline; }
.onboarding-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text); margin: 0 0 8px; text-align: center;
}
.onboarding-sub {
  font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0 0 18px;
}
.onboarding-sub-tight { margin-bottom: 10px; }
.onboarding-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 16px; }
.onboarding-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px;
}
.onboarding-actions-solo { justify-content: flex-end; }
.onboarding-secondary {
  font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.onboarding-secondary:hover { color: var(--text); text-decoration: underline; }

.onboarding-orb {
  width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), transparent 70%), var(--bg);
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px var(--accent-lo, rgba(110,139,255,0.25));
  position: relative;
  overflow: hidden;
}
.onboarding-orb span {
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  filter: blur(10px);
  animation: onboarding-pulse 2.4s ease-in-out infinite;
}
@keyframes onboarding-pulse {
  0%, 100% { transform: scale(0.85); opacity: .35; }
  50%      { transform: scale(1.05); opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-orb span { animation: none; }
}

.onboarding-campus {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-height: 260px; overflow-y: auto; margin-bottom: 4px;
}
.onboarding-agent-card {
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  background: var(--bg); padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.onboarding-agent-card.recommended { border-color: var(--accent); background: var(--accent-lo, rgba(110,139,255,0.08)); }
.onboarding-agent-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-lo, rgba(110,139,255,0.15));
  border-radius: 999px; padding: 2px 6px; margin-left: 6px; vertical-align: middle;
}
.onboarding-agent-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-lo, rgba(110,139,255,0.15)); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.onboarding-agent-meta { min-width: 0; }
.onboarding-agent-name { font-size: 13px; font-weight: 600; color: var(--text); }
.onboarding-agent-role {
  font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.onboarding-video {
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  background: var(--bg); aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.onboarding-video-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px;
}
.onboarding-video-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 16px;
}
.onboarding-list {
  margin: 0 0 4px; padding-left: 18px;
  font-size: 13px; color: var(--text); line-height: 1.6;
}
.intake-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 12px;
}
.intake-field {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
}
.intake-field-full { margin-top: 12px; }
.intake-textarea { min-height: 78px; resize: vertical; line-height: 1.4; }
.intake-section {
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 11px 12px;
  margin-top: 10px;
}
.intake-label {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.intake-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.intake-options label {
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.intake-options input { accent-color: var(--accent); }
.intake-result {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-lo, rgba(110,139,255,0.12));
  margin-top: 14px;
  padding: 12px;
}
.intake-result-head {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 10px;
}
.intake-result-head span { color: var(--text-muted); font-size: 12px; }
.intake-result-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.intake-result h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 12px;
}
.intake-pill {
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 8px 9px;
  margin-bottom: 7px;
}
.intake-pill b {
  display: block;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 3px;
}
.intake-pill small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.intake-architect {
  border-top: 1px solid var(--border-md);
  padding-top: 10px;
  margin-top: 10px;
  color: var(--text);
  font-size: 12px;
}
.intake-architect p { margin: 4px 0 0; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 620px) {
  .intake-grid,
  .intake-options,
  .intake-result-grid { grid-template-columns: 1fr; }
}

/* ── App Shell ───────────────────────────────────────────── */
#app-shell {
  display: flex; flex-direction: column; height: 100%;
  opacity: 0; transition: opacity 0.4s ease;
}
#app-shell.visible { opacity: 1; }

/* ── Top Bar ─────────────────────────────────────────────── */
.topbar {
  height: 56px; flex-shrink: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  /* Flex siblings (.tabnav etc.) honor z-index even when static and would
     otherwise paint over the account dropdown that overflows below the bar. */
  position: relative; z-index: 20;
}

.topbar-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.topbar-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
}
.topbar-wordmark {
  font-size: 16px; font-weight: 700; letter-spacing: -0.4px;
}

.topbar-divider {
  width: 1px; height: 20px;
  background: var(--border-md); flex-shrink: 0;
}

.topbar-meta { display: flex; flex-direction: column; gap: 1px; }
.topbar-operator { font-size: 13px; font-weight: 500; }
.topbar-company { font-size: 11px; color: var(--text-muted); }

.topbar-spacer { flex: 1; }

.health-indicator {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-muted);
}
.health-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted);
  transition: background var(--transition);
}
.health-dot.ok { background: var(--green); }
.health-dot.error { background: var(--red); }

/* Account menu (DATA-PORTABILITY-V1) */
.acct-wrap { position: relative; margin-left: 14px; flex-shrink: 0; }
.acct-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border-md); border-radius: 8px;
  color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] {
  border-color: var(--accent); color: var(--text); background: var(--panel-2);
}
.acct-menu {
  position: absolute; top: 38px; right: 0; min-width: 184px; z-index: 60;
  background: #0c0c14; border: 1px solid var(--border-md); border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 2px;
}
.acct-menu[hidden] { display: none; }
.acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; background: transparent; border: 0; border-radius: 7px;
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .12s;
}
.acct-item:hover { background: var(--panel-2); }
.acct-item:disabled { opacity: .55; cursor: default; }
a.acct-item { text-decoration: none; box-sizing: border-box; }
.acct-item-ic { font-size: 14px; width: 16px; text-align: center; color: var(--text-dim); }
.acct-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ── Tab Navigation ──────────────────────────────────────── */
.tabnav {
  height: 44px; flex-shrink: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-end;
  padding: 0 24px; gap: 4px;
}

.tabnav-btn {
  position: relative;
  background: none; border: none;
  color: var(--text-muted); font-family: inherit;
  font-size: 13px; font-weight: 500;
  padding: 8px 14px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition), background var(--transition);
}
.tabnav-btn:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.tabnav-btn.active {
  color: var(--text);
}
.tabnav-btn.active::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* ── Tab Content ─────────────────────────────────────────── */
.tab-content { flex: 1; overflow: hidden; position: relative; }

.tab-pane {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 28px 24px;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tab-pane.active {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ── Section Headers ─────────────────────────────────────── */
.section-header {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
}
.section-count {
  font-size: 11px; color: var(--text-muted);
  background: var(--panel-2); border-radius: 10px;
  padding: 1px 7px;
}

.section-gap { margin-bottom: 32px; }

/* ── Agent Fleet Grid ────────────────────────────────────── */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.agent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.agent-card:hover {
  border-color: var(--border-md);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.agent-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}

.agent-avatar {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--accent-lo);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}

.agent-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 4px; flex-shrink: 0;
  background: var(--text-muted);
  transition: background var(--transition);
}
.agent-status-dot.idle   { background: rgba(255,255,255,0.20); }
.agent-status-dot.running {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(62,207,142,0.20);
  animation: pulse 1.8s ease-in-out infinite;
}
.agent-status-dot.error  { background: var(--red); }

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(62,207,142,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(62,207,142,0.08); }
}

.agent-name {
  font-size: 14px; font-weight: 600; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-role {
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-model {
  margin-top: 12px;
  font-size: 11px; color: var(--text-muted);
  background: var(--panel-2);
  border-radius: 4px; padding: 3px 8px;
  display: inline-block;
  border: 1px solid var(--border);
  font-family: 'SF Mono', ui-monospace, monospace;
}

/* ── Cost Strip ──────────────────────────────────────────── */
.cost-strip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}

.cost-item { display: flex; flex-direction: column; gap: 2px; }
.cost-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cost-value { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.cost-value.accent { color: var(--accent); }

.cost-sep {
  width: 1px; height: 36px; background: var(--border);
}

.cost-note {
  font-size: 12px; color: var(--text-muted);
  flex: 1; min-width: 160px;
  line-height: 1.6;
}

/* ── Tasks Board ─────────────────────────────────────────── */
.tasks-add-row {
  display: flex; gap: 10px; margin-bottom: 20px;
}
.tasks-add-row .field-input { flex: 1; }

.task-select {
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: inherit;
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
}
.task-select:focus { border-color: var(--accent); }

.btn-secondary {
  background: var(--panel-2); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit;
  padding: 8px 16px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.btn-secondary:hover { background: var(--panel-3); border-color: rgba(255,255,255,0.16); }

.tasks-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.task-column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-column-header {
  padding: 12px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.task-column-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.task-column-label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.task-column-count {
  margin-left: auto;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg); border-radius: 10px; padding: 1px 7px;
}

.task-list { padding: 10px; display: flex; flex-direction: column; gap: 7px; min-height: 60px; }

.task-card {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.task-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-lo);
}
.task-card-title { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.task-card-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.task-card-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-md); }

.task-card-progress {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 10px; color: var(--text-muted);
}
.task-card-progress-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg); overflow: hidden;
}
.task-card-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; }

.task-card-subtasks {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.task-subtask-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: default;
}
.task-subtask-checkbox {
  width: 13px; height: 13px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--accent);
}
.task-subtask-text { flex: 1; word-break: break-word; }
.task-subtask-text.done { color: var(--text-muted); text-decoration: line-through; }
.task-subtask-delete {
  flex-shrink: 0; width: 16px; height: 16px; line-height: 16px;
  text-align: center; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px; border-radius: 50%;
  opacity: 0; transition: opacity var(--transition);
}
.task-subtask-row:hover .task-subtask-delete { opacity: 1; }
.task-subtask-delete:hover { color: var(--danger, #e5484d); background: var(--bg); }

.task-subtask-add {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.task-subtask-add-input {
  flex: 1; font-size: 12px; padding: 4px 7px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text);
}
.task-subtask-add-input:focus { outline: none; border-color: var(--accent); }
.task-subtask-add-btn {
  font-size: 11px; padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--panel-3);
  color: var(--text-dim); cursor: pointer;
}
.task-subtask-add-btn:hover { border-color: var(--accent); color: var(--text); }

.task-empty {
  padding: 16px 10px;
  font-size: 12px; color: var(--text-muted);
  text-align: center; font-style: italic;
}

/* ── CRM Kanban ──────────────────────────────────────────── */
.crm-header-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.crm-pipeline-total {
  margin-left: auto;
  font-size: 13px; color: var(--text-muted);
}
.crm-pipeline-total strong { color: var(--accent); font-weight: 700; }

.crm-add-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: none; /* toggled by JS */
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.crm-add-form.open { display: flex; }
.crm-add-form .field-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }

.crm-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  min-width: 0;
}

.crm-column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 200px;
}
.crm-column-header {
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.crm-column-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); }
.crm-column-count {
  margin-left: auto; font-size: 11px; color: var(--text-muted);
  background: var(--bg); border-radius: 10px; padding: 1px 6px;
}

.crm-card-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.crm-card {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  transition: border-color var(--transition);
}
.crm-card:hover { border-color: var(--border-md); }
.crm-card-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.crm-card-company { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.crm-card-value { font-size: 12px; color: var(--green); font-weight: 600; margin-bottom: 8px; }
.crm-card-notes { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }

.crm-stage-select {
  width: 100%;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim); font-size: 11px; font-family: inherit;
  padding: 5px 8px;
  outline: none; cursor: pointer;
}
.crm-stage-select:focus { border-color: var(--accent); }

.crm-empty {
  padding: 16px 8px;
  font-size: 11px; color: var(--text-muted);
  text-align: center; font-style: italic;
}

/* Stage dot colors */
.stage-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.stage-new        .stage-dot { background: var(--text-muted); }
.stage-contacted  .stage-dot { background: #4fa8ff; }
.stage-proposal   .stage-dot { background: var(--yellow); }
.stage-won        .stage-dot { background: var(--green); }
.stage-lost       .stage-dot { background: var(--red); }

/* ── Agent Chat ──────────────────────────────────────────── */
.chat-layout {
  display: flex; gap: 16px; height: calc(100vh - 56px - 44px - 56px);
  min-height: 400px;
}

.agent-list-panel {
  width: 220px; flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.agent-list-panel-header {
  padding: 12px 16px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.agent-list-items { flex: 1; overflow-y: auto; padding: 8px; }

.agent-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.agent-list-item:hover { background: var(--panel-2); }
.agent-list-item.selected { background: var(--accent-lo); }

.agent-list-avatar {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--accent);
}
.agent-list-item.selected .agent-list-avatar {
  background: var(--accent-lo);
}

.agent-list-info { min-width: 0; }
.agent-list-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-list-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-panel {
  flex: 1; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.chat-panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.chat-agent-name { font-size: 15px; font-weight: 600; }
.chat-agent-model { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', ui-monospace, monospace; }
.chat-panel-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; color: var(--text-muted);
}
.chat-panel-empty-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: 0.5;
}

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}

.chat-msg { display: flex; gap: 12px; max-width: 760px; }
.chat-msg.user { flex-direction: row-reverse; align-self: flex-end; }
.chat-msg.assistant { align-self: flex-start; }

.chat-msg-avatar {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.chat-msg.user .chat-msg-avatar {
  background: var(--accent); color: #fff;
}
.chat-msg.assistant .chat-msg-avatar {
  background: var(--panel-2); color: var(--accent);
}

.chat-msg-bubble {
  border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.6; max-width: 540px;
}
.chat-msg.user .chat-msg-bubble {
  background: var(--accent); color: #fff;
  border-radius: 10px 10px 2px 10px;
}
.chat-msg.assistant .chat-msg-bubble {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px;
  color: var(--text);
}
.chat-msg.assistant.demo-mode .chat-msg-bubble {
  background: var(--panel-3);
  border-color: var(--yellow);
  color: var(--text-dim);
  font-style: italic;
}
.chat-msg.assistant.error-mode .chat-msg-bubble {
  border-color: var(--red); color: var(--text-dim);
}
/* Queued (pending) user message — waiting its turn */
.chat-msg.queued { opacity: 0.6; }
.chat-msg.queued .chat-msg-bubble {
  background: transparent;
  border: 1px dashed var(--accent-border, rgba(110,139,255,0.4));
  color: var(--text);
  position: relative; padding-right: 30px;
}
.chat-msg.queued .who { font-style: italic; }
.queued-cancel {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1; padding: 0;
}
.queued-cancel:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.chat-msg-ts {
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
  text-align: right;
}
.chat-msg.assistant .chat-msg-ts { text-align: left; }

.chat-input-row {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-shrink: 0;
}
.chat-input {
  flex: 1;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; font-family: inherit;
  padding: 10px 14px; outline: none; resize: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 42px; max-height: 120px;
}
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lo);
}

.btn-send {
  background: var(--accent); border: none;
  border-radius: var(--radius-sm);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 18px; cursor: pointer; flex-shrink: 0; align-self: flex-end;
  transition: opacity var(--transition);
}
.btn-send:hover { opacity: 0.88; }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Skeleton / Loading ──────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 14px; }
.skeleton-block { height: 80px; }

/* ── Generic badges ──────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px;
}
.badge-idle { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.badge-running { background: rgba(62,207,142,0.12); color: var(--green); }
.badge-error { background: rgba(255,102,102,0.12); color: var(--red); }

/* ── Utility ─────────────────────────────────────────────── */
.loading-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border-md);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .tasks-board { grid-template-columns: 1fr; }
  .crm-board { grid-template-columns: repeat(2, 1fr); }
  .chat-layout { flex-direction: column; height: auto; }
  .agent-list-panel { width: 100%; max-height: 180px; }
}

@media (max-width: 640px) {
  .tab-pane { padding: 20px 16px; }
  .topbar { padding: 0 16px; }
  .tabnav { padding: 0 16px; }
  .crm-board { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   MISSION CONTROL PARITY LAYER (2026-06-11)
   Final overrides that make the MVP read as the same product as
   JARVIS-MISSION CONTROL: glass blur on surfaces, Hanken Grotesk display
   type with blue glow on the logo, Spline Sans Mono micro-labels, and
   MC status hues. Kept as a trailing layer so the structural rules
   above stay intact and low-risk.
   ════════════════════════════════════════════════════════════ */

/* — Glass surfaces: blur whatever scrolls behind, like MC cards/rails — */
.topbar, .tabnav, .login-card,
.agent-card, .cost-strip, .task-column, .crm-column, .crm-add-form,
.agent-list-panel, .chat-panel {
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* — Top bar / tab rail: MC translucent chrome — */
.topbar  { background: rgba(255,255,255,0.02); }
.tabnav  { background: rgba(255,255,255,0.015); }

/* — Logo: display lockup (Hanken Grotesk, letterspaced, blue glow) — */
.topbar-mark, .login-logo-mark {
  background: var(--accent);
  box-shadow: 0 0 24px rgba(110,139,255,0.35);
  font-family: var(--font-display);
}

/* — CortexHive brand mark (real bee logo) inside any logo box — */
.brand-mark-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}
.login-logo-mark:has(.brand-mark-img),
.topbar-mark:has(.brand-mark-img),
.beta-terms-mark:has(.brand-mark-img) {
  background: transparent;
  box-shadow: 0 0 22px rgba(252,169,19,0.28);
  padding: 0;
  overflow: hidden;
}
.topbar-wordmark, .login-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
}
.wordmark-accent {
  color: var(--accent);
  text-shadow: 0 0 25px rgba(110,139,255,0.3);
}
.login-tagline { font-family: var(--font-mono); letter-spacing: 0.5px; }

/* — Section + column eyebrows: MC display caps — */
.section-title, .agent-list-panel-header,
.crm-column-label, .task-column-label, .cost-label, .field-label {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
}

/* — Micro-labels that should read as machine output: Spline Sans Mono — */
.agent-model, .chat-agent-model, .agent-list-role, .agent-role,
.health-indicator, .topbar-company, .cost-note, .chat-msg-ts {
  font-family: var(--font-mono);
}
.agent-model, .chat-agent-model {
  background: rgba(110,139,255,0.06);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* — Numeric hero values: MC display weight — */
.cost-value, .agent-name, .chat-agent-name {
  font-family: var(--font-display);
}

/* — Accent surfaces get the MC glow on hover/active — */
.btn-primary, .btn-send {
  box-shadow: 0 0 0 1px rgba(110,139,255,0.25), 0 4px 24px rgba(110,139,255,0.12);
}
.tabnav-btn.active::after { box-shadow: 0 0 12px rgba(110,139,255,0.6); }
.agent-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px rgba(110,139,255,0.12), 0 8px 32px rgba(0,0,0,0.5);
}

/* — Status pulse / badges → MC hues — */
.agent-status-dot.running {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.20);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,0.20); }
  50%     { box-shadow: 0 0 0 6px rgba(52,211,153,0.08); }
}
.badge-running { background: rgba(52,211,153,0.12); color: var(--green); }
.badge-error   { background: rgba(240,112,112,0.12); color: var(--red); }

/* — Login glow -> blue (was violet) — */
.login-card { box-shadow: var(--shadow-lg), 0 0 80px rgba(110,139,255,0.07); }

/* — Skeletons readable against the void — */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .agent-status-dot.running { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   AGENT-CHAT-V2 — ROSTER DECK (2026-06-11 master-chief)
   Three-pane daily-driver chat: agent rail · named conversations
   · streaming transcript. Ported from
   JARVIS-MISSION CONTROL/agent-chat-redesign-mockup.html and
   adapted to the Momentum/MC glass design tokens above.
   ════════════════════════════════════════════════════════════ */

/* — Bridge banner (under the topbar, above tabs) — */
.bridge-banner {
  flex-shrink: 0;
  padding: 7px 24px;
  background: rgba(240,192,64,0.10);
  border-bottom: 1px solid rgba(240,192,64,0.35);
  color: var(--yellow);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* — Chat tab goes full-bleed: the hub owns its own scroll — */
#tab-chat { padding: 14px 18px; overflow: hidden; }

.chat-hub {
  height: 100%;
  display: grid;
  grid-template-columns: 248px 300px minmax(0, 1fr);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.hub-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.hub-rail    { border-right: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.hub-threads { border-right: 1px solid var(--border); background: rgba(255,255,255,0.008); }
.hub-conv    { position: relative; }

/* back buttons exist for the mobile back-stack; hidden on desktop */
.hub-back-btn {
  display: none;
  background: transparent; border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-family: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.hub-back-btn:hover { color: var(--text); border-color: var(--accent-border); }

/* ── PANE A: agent rail ─────────────────────────────────── */
.hub-rail-top { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.agent-filter {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px; font-family: inherit;
  padding: 7px 10px;
  outline: none;
  transition: border-color var(--transition);
}
.agent-filter::placeholder { color: var(--text-muted); }
.agent-filter:focus { border-color: var(--accent); }

/* Rail view-mode toggle: Companies (grouped) ↔ Recent (recency-sorted) */
.rail-mode-toggle {
  display: flex; gap: 2px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); padding: 2px;
}
.rail-mode-btn {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  padding: 5px 8px; border-radius: calc(var(--radius-sm) - 2px);
  transition: background var(--transition), color var(--transition);
}
.rail-mode-btn:hover { color: var(--text); }
.rail-mode-btn.active { background: var(--accent-lo); color: var(--accent); }

/* Recent view rows (flat, cross-agent, newest first) */
.recent-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; margin: 2px 0; border: 0; cursor: pointer; text-align: left;
  background: transparent; color: var(--text); font-family: inherit;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.recent-row:hover { background: var(--panel-2); }
.recent-row.active { background: var(--accent-lo); }
.recent-row .av {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border-md);
  font-size: 11px; font-weight: 700; color: var(--text);
}
.recent-row.active .av { border-color: var(--accent); }
.recent-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.recent-top { display: flex; align-items: baseline; gap: 6px; }
.recent-agent {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-row.active .recent-agent { color: var(--accent); }
.recent-time {
  font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-mono);
}
.recent-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-unread {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04181c;
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.recent-divider {
  display: flex; align-items: center; gap: 8px; padding: 10px 9px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.recent-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Unread roll-up on a collapsed group header — keeps activity visible when rows are hidden.
   Only shown while collapsed; expanded groups already show per-agent badges. */
.rail-grp-hd .grp-unread {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04181c;
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.rail-grp:not(.collapsed) .rail-grp-hd .grp-unread { display: none; }
/* Global activity signal on the Recent tab. */
.rail-mode-btn .rail-mode-unread {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04181c;
  font-size: 9px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.rail-mode-btn.active .rail-mode-unread { background: #04181c; color: var(--accent); }

.hub-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 14px; }

.rail-grp { margin-top: 6px; }
.rail-grp-hdr-row { display: flex; align-items: center; position: relative; }
.rail-grp-hd {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 6px 5px; color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.rail-grp-hd .chev { transition: transform 0.12s ease; font-size: 9px; }
.rail-grp.collapsed .chev { transform: rotate(-90deg); }
.rail-grp.collapsed .rail-grp-body { display: none; }
.rail-grp-hd .cnt { margin-left: auto; font-weight: 500; letter-spacing: 0; font-family: var(--font-mono); }

/* Division color dot button */
.div-color-dot-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; cursor: pointer; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s ease;
  background: transparent; border: none; padding: 0;
  border-radius: 50%;
}
.rail-grp-hdr-row:hover .div-color-dot-btn { opacity: 1; }
.div-color-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted);
  border: 1.5px solid rgba(255,255,255,0.15);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  pointer-events: none;
}
.div-color-dot-btn:hover .div-color-dot { transform: scale(1.35); }

/* Division color picker popover */
.div-color-picker {
  position: fixed; z-index: 2000;
  background: var(--panel-1, #111);
  border: 1px solid var(--border-md, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 8px;
  flex-wrap: wrap;
  gap: 6px;
  width: 156px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
}
.dcp-opt {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
  flex-shrink: 0; padding: 0;
}
.dcp-opt:hover { transform: scale(1.22); }
.dcp-opt.active { border-color: rgba(255,255,255,0.75); box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.dcp-none {
  background: var(--panel-2, #1a1a1a) !important;
  border: 1.5px solid var(--border-md, rgba(255,255,255,0.1));
  color: var(--text-muted, #666);
  font-size: 16px; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.dcp-none:hover { color: var(--text, #fff); }

/* Drag handle */
.drag-handle {
  font-size: 11px; color: var(--text-muted); opacity: 0;
  transition: opacity 0.12s ease; flex-shrink: 0;
  cursor: grab; padding: 0 1px; margin-left: -2px;
  user-select: none;
}
.agent-row:hover .drag-handle { opacity: 0.55; }
.agent-row.dragging .drag-handle { opacity: 0.8; cursor: grabbing; }

/* Drag states */
.agent-row.dragging { opacity: 0.35; }
.agent-row.drag-over-top {
  box-shadow: inset 0 2px 0 var(--accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.agent-row.drag-over-bottom {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.rail-grp-hdr-row.drag-over-div {
  background: var(--accent-lo);
  border-radius: var(--radius-sm);
}

/* Group drag grip — faintly visible always so touch can find it */
.grp-drag-grip {
  font-size: 11px; color: var(--text-muted); opacity: 0.22;
  transition: opacity 0.12s ease; flex-shrink: 0;
  cursor: grab; padding: 6px 4px 6px 3px;
  user-select: none; touch-action: none;
}
.rail-grp-hdr-row:hover .grp-drag-grip { opacity: 0.5; }
.grp-drag-grip:active { cursor: grabbing; }

/* Group drag-over indicators */
.rail-grp.grp-drag-over-top    { box-shadow: 0 -2px 0 var(--accent); }
.rail-grp.grp-drag-over-bottom { box-shadow: 0  2px 0 var(--accent); }
.rail-grp.dragging { opacity: 0.35; }

/* Inline color badge in the group header */
.rail-grp-hd .div-color-dot { margin-right: 1px; }
.rail-grp-hd .grp-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Group options (⋯) button — always visible, touch-friendly */
.grp-menu-btn {
  margin-left: auto; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); opacity: 0.4;
  font-size: 16px; line-height: 1; font-weight: 700;
  padding: 4px 8px; border-radius: var(--radius-sm);
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.rail-grp-hd { flex: 0 1 auto; }
.rail-grp-hdr-row:hover .grp-menu-btn,
.grp-menu-btn:focus-visible { opacity: 1; }
.grp-menu-btn:hover { background: var(--panel-2); color: var(--text); opacity: 1; }
.rail-grp-hd .cnt { margin-left: 6px; }

/* Empty (custom) group drop hint */
.rail-grp-empty {
  font-size: 11px; color: var(--text-muted); opacity: 0.6;
  padding: 7px 10px 9px; font-style: italic;
  border: 1px dashed var(--border-md); border-radius: var(--radius-sm);
  margin: 2px 4px 4px; text-align: center;
}

/* Group options popover */
.grp-menu {
  position: fixed; z-index: 2100; min-width: 178px;
  background: var(--panel-1, #111);
  border: 1px solid var(--border-md, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
}
.grp-menu-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 8px 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.grp-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 6px;
}
.grp-menu-item:hover { background: var(--panel-2); }
.grp-menu-item.danger { color: #f87171; }
.grp-menu-item.danger:hover { background: rgba(248,113,113,0.12); }
.grp-menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.grp-menu-input {
  width: 100%; box-sizing: border-box; margin: 2px 0 8px;
  background: var(--panel-2); border: 1px solid var(--border-md); border-radius: 7px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; outline: none;
}
.grp-menu-input:focus { border-color: var(--accent); }
.grp-menu-actions { display: flex; gap: 6px; justify-content: flex-end; }
.grp-menu-save, .grp-menu-cancel {
  border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 12px; border-radius: 7px;
}
.grp-menu-save { background: var(--accent); color: #001016; }
.grp-menu-cancel { background: var(--panel-2); color: var(--text-muted); }
.grp-menu-cancel:hover { color: var(--text); }

/* Archived section */
.rail-arch { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 6px; }
.rail-arch-hd {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: none; cursor: pointer; color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 6px 5px; opacity: 0.7;
}
.rail-arch-hd .chev { transition: transform 0.12s ease; font-size: 9px; }
.rail-arch.collapsed .chev { transform: rotate(-90deg); }
.rail-arch.collapsed .rail-arch-body { display: none; }
.rail-arch-hd .cnt { margin-left: auto; font-family: var(--font-mono); }
.arch-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; margin: 1px 4px; border-radius: var(--radius-sm);
}
.arch-row:hover { background: var(--panel-2); }
.arch-nm { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-restore {
  background: transparent; border: 1px solid var(--border-md); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 11px;
  padding: 3px 9px; flex-shrink: 0;
}
.arch-restore:hover { color: var(--accent); border-color: var(--accent); }

/* New group button */
.rail-newgrp {
  display: block; width: calc(100% - 16px); margin: 12px 8px 8px;
  background: transparent; border: 1px dashed var(--border-md); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; padding: 9px 10px;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.rail-newgrp:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-lo); }

.agent-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 6px 8px; margin: 1px 0; position: relative;
  transition: background var(--transition);
  font-family: inherit; color: inherit;
}
.agent-row:hover { background: var(--panel-2); }
.agent-row.sel { background: var(--accent-lo); }
.agent-row.sel .agent-nm { color: var(--accent); }
.agent-row .av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent); background: var(--panel-2);
  border: 1.5px solid var(--border-md);
}
.agent-row.sel .av { border-color: var(--accent); }
.agent-row .agent-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agent-row .agent-nm { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-row .agent-sub { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── PANE B: conversation list ──────────────────────────── */
.hub-threads-top { padding: 10px 14px 0; flex-shrink: 0; }
.hub-id-block { padding: 14px 16px 13px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hub-id-head { display: flex; align-items: center; gap: 11px; }
.hub-id-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  color: var(--accent); background: var(--panel-2); border: 2px solid var(--accent);
}
.hub-id-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; font-family: var(--font-display); }
.hub-id-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.hub-id-model {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  background: rgba(110,139,255,0.06); border: 1px solid var(--accent-border); border-radius: 6px;
  padding: 4px 9px; font-size: 11px; color: var(--accent);
  font-family: var(--font-mono);
}

.hub-newthread-wrap { padding: 11px 14px 9px; flex-shrink: 0; }
.new-thread-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.new-thread-btn:hover { background: var(--accent-lo); }
.new-thread-btn .plus { font-size: 14px; line-height: 1; }

.nt-composer { padding: 0 14px 6px; }
.nt-composer .nt-row { display: flex; gap: 7px; margin-top: 9px; }
.nt-composer .nt-row button { flex: 1; }
.nt-composer .nt-create { border-color: var(--accent-border); color: var(--accent); }
.nt-composer .field-label { margin-top: 4px; }

.hub-thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 16px; }
.thread-row {
  display: flex; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; color: inherit; font-family: inherit;
  border-radius: var(--radius-sm); padding: 9px; position: relative; margin: 1px 0;
  transition: background var(--transition);
}
.thread-row:hover { background: var(--panel-2); }
.thread-row.active { background: var(--accent-lo); }
.thread-row.active .t-title { color: var(--accent); }
.thread-row .t-body { flex: 1; min-width: 0; }
.thread-row .t-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-row .t-preview { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-row .t-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono); }
.thread-empty { padding: 18px 12px; font-size: 12px; color: var(--text-muted); text-align: center; font-style: italic; }

/* ── PANE C: conversation ───────────────────────────────── */
.chat-active { display: flex; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
#chat-active[hidden] { display: none; }
.chat-header-avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.chat-header-text { min-width: 0; flex: 1; }
.chat-title-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.chat-title-sep { color: var(--text-muted); }
.chat-thread-title { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chat-header-actions .chat-voice-btn { width: 32px; min-width: 32px; height: 32px; font-size: 13px; }

.chat-state-line {
  min-height: 16px; padding: 0 20px 4px;
  font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
  flex-shrink: 0;
}

/* streaming cursor at the end of a live bubble */
.stream-cursor {
  display: inline-block; width: 7px; height: 14px; margin-left: 2px;
  background: var(--accent); border-radius: 1px; vertical-align: text-bottom;
  animation: cursor-blink 1s steps(2, start) infinite;
}
@keyframes cursor-blink { to { visibility: hidden; } }

/* message meta (model · duration) under assistant bubbles */
.chat-msg-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; font-family: var(--font-mono); }

/* ── Markdown inside assistant bubbles ──────────────────── */
.chat-msg-bubble.md { overflow-wrap: break-word; }
.chat-msg-bubble.md > :first-child { margin-top: 0; }
.chat-msg-bubble.md > :last-child { margin-bottom: 0; }
.chat-msg-bubble.md p { margin: 8px 0; }
.chat-msg-bubble.md h1, .chat-msg-bubble.md h2, .chat-msg-bubble.md h3, .chat-msg-bubble.md h4 {
  margin: 14px 0 6px; font-family: var(--font-display); line-height: 1.3;
}
.chat-msg-bubble.md h1 { font-size: 17px; }
.chat-msg-bubble.md h2 { font-size: 15px; }
.chat-msg-bubble.md h3 { font-size: 14px; }
.chat-msg-bubble.md h4 { font-size: 13px; color: var(--text-dim); }
.chat-msg-bubble.md ul, .chat-msg-bubble.md ol { margin: 8px 0; padding-left: 22px; }
.chat-msg-bubble.md li { margin: 3px 0; }
.chat-msg-bubble.md code {
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.chat-msg-bubble.md pre {
  margin: 10px 0; padding: 12px 14px; overflow-x: auto;
  background: rgba(0,0,0,0.5); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.chat-msg-bubble.md pre code { background: transparent; border: none; padding: 0; font-size: 12px; line-height: 1.55; }
.chat-msg-bubble.md a { color: var(--accent); text-decoration: none; }
.chat-msg-bubble.md a:hover { text-decoration: underline; }
.chat-msg-bubble.md blockquote {
  margin: 10px 0; padding: 4px 14px;
  border-left: 2px solid var(--accent-border); color: var(--text-dim);
}
.chat-msg-bubble.md table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; display: block; overflow-x: auto; }
.chat-msg-bubble.md th, .chat-msg-bubble.md td { border: 1px solid var(--border-md); padding: 5px 10px; }
.chat-msg-bubble.md th { background: var(--panel-2); font-weight: 600; }
.chat-msg-bubble.md hr { border: none; border-top: 1px solid var(--border-md); margin: 12px 0; }
.chat-msg-bubble.md img { max-width: 100%; border-radius: 6px; }

/* assistant bubbles can take more width than the old 540px */
.chat-msg.assistant .chat-msg-bubble { max-width: 640px; }

/* ── FILE-ATTACH-V1: composer tray + in-message attachments ── */
.attach-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px 2px; }
.attach-tray[hidden] { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px;
  background: var(--panel-2); border: 1px solid var(--border-md); border-radius: 9px;
  padding: 5px 8px; font-size: 12px; color: var(--text-dim);
}
.attach-chip.uploading { opacity: 0.6; }
.attach-chip.error { border-color: rgba(240,112,112,0.5); color: #f07070; }
.attach-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; display: block; }
.attach-chip .attach-ic { font-size: 15px; }
.attach-chip .attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .attach-x {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.attach-chip .attach-x:hover { color: #f07070; }

.msg-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-att { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: inherit; max-width: 260px; }
.msg-att.img img { max-width: 220px; max-height: 220px; border-radius: 9px; display: block; }
.msg-att.file {
  background: var(--panel-2); border: 1px solid var(--border-md); border-radius: 9px;
  padding: 7px 11px; font-size: 12.5px; color: var(--text-dim);
}
.msg-att.file:hover { border-color: var(--accent); color: var(--text); }
.msg-att-ic { font-size: 15px; }
.msg-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-att-size { color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; }

/* ── Mobile back-stack (≤900px): one pane at a time ─────── */
@media (max-width: 900px) {
  #tab-chat { padding: 8px; }
  .chat-hub { display: flex; }
  .chat-hub .hub-pane { display: none; flex: 1; min-width: 0; }
  .chat-hub.mobile-view-agents  .hub-rail    { display: flex; border-right: none; }
  .chat-hub.mobile-view-threads .hub-threads { display: flex; border-right: none; }
  .chat-hub.mobile-view-chat    .hub-conv    { display: flex; }
  .hub-back-btn { display: inline-flex; align-items: center; }
  .conv-back { flex-shrink: 0; padding: 6px 9px; }
  .chat-panel-header { padding: 10px 12px; gap: 9px; }
  .chat-messages { padding: 14px 12px; gap: 12px; }
  .chat-msg { max-width: 100%; }
  .chat-msg.assistant .chat-msg-bubble { max-width: calc(100vw - 110px); }
  .chat-msg.user .chat-msg-bubble { max-width: calc(100vw - 110px); }
  .chat-state-line { padding: 0 12px 4px; }
  .bridge-banner { padding: 6px 12px; font-size: 11px; }
}

/* very narrow phones (375–390px): tighten chrome further */
@media (max-width: 480px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar-meta { display: none; }
  .tabnav { padding: 0 8px; }
  .tabnav-btn { padding: 8px 10px 10px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   AGENT-CHAT V2.1 (2026-06-11 master-chief) — impeccable pass
   Chat-only mode · SVG icon vocabulary · per-conversation model
   + thinking controls · unified composer · / command menu ·
   thinking indicator · stop affordance · mockup-style bubbles.
   ════════════════════════════════════════════════════════════ */

/* — chat-only deployment: the demo tabs disappear, chat owns the surface — */
body.chat-only .tabnav { display: none; }
body.chat-only #tab-mission, body.chat-only #tab-crm { display: none !important; }

/* — shared icon button (replaces emoji buttons) — */
.icon-btn {
  width: 34px; min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { color: var(--text); border-color: var(--accent-border); }
.icon-btn.on { color: var(--accent); border-color: var(--accent-border); background: var(--accent-lo); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* — chip selects (model · thinking), mockup .model-sel vocabulary — */
.chip-select {
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-family: var(--font-mono); font-size: 11px;
  padding: 7px 8px; height: 34px; cursor: pointer; outline: none; max-width: 150px;
  transition: border-color var(--transition), color var(--transition);
}
.chip-select:hover { color: var(--text); border-color: var(--accent-border); }
.chip-select:focus { border-color: var(--accent); }
.chip-select.set { color: var(--accent); border-color: var(--accent-border); background: rgba(110,139,255,0.05); }

/* — message bubbles v2: who-label, no per-message avatars, quiet meta — */
.chat-msg { display: flex; flex-direction: column; max-width: 720px; }
.chat-msg.user { flex-direction: column; align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { flex-direction: column; align-self: flex-start; align-items: flex-start; }
.chat-msg .who {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 4px 3px; font-family: var(--font-display);
}
.chat-msg.user .chat-msg-bubble {
  background: var(--accent-lo); border: 1px solid var(--accent-border);
  color: #eafbff; border-radius: 13px 13px 5px 13px; white-space: pre-wrap;
}
.chat-msg.assistant .chat-msg-bubble {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 13px 13px 13px 5px; max-width: 640px;
}
.chat-msg.assistant.error-mode .chat-msg-bubble { border-color: rgba(240,112,112,0.5); color: var(--text-dim); }
.chat-msg-meta { margin: 4px 6px 0; }
.chat-msg-meta .stopped { color: var(--yellow); }

/* — thinking indicator (live state, with elapsed time) — */
.thinking-row { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; }
.thinking-row .dots { display: inline-flex; gap: 4px; }
.thinking-row .dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: think-blink 1.2s ease-in-out infinite;
}
.thinking-row .dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-row .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.thinking-row .elapsed { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
@media (prefers-reduced-motion: reduce) {
  .thinking-row .dots span { animation: none; opacity: 0.7; }
  .stream-cursor { animation: none; }
}

/* — footer: state line + composer + command menu — */
.chat-foot { position: relative; flex-shrink: 0; padding: 0 20px 16px; }
.chat-state-line { min-height: 16px; padding: 0 4px 5px; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

.composer {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: 13px; padding: 6px 7px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lo); }
.composer .chat-input {
  flex: 1; background: transparent; border: none; box-shadow: none;
  min-height: 34px; max-height: 120px; padding: 7px 6px; resize: none;
}
.composer .chat-input:focus { border: none; box-shadow: none; }
.composer .icon-btn { border-color: transparent; }
.composer .icon-btn:hover { border-color: var(--border-md); }

.send-btn {
  width: 34px; min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: 9px; color: #04181c; cursor: pointer;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.send-btn svg { width: 15px; height: 15px; }
.send-btn:hover { opacity: 0.85; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn.stop { background: transparent; color: var(--accent); border-color: var(--accent-border); }
.send-btn.stop:hover { background: var(--accent-lo); opacity: 1; }

/* — / command menu — */
.cmd-menu {
  position: absolute; left: 20px; right: 20px; bottom: calc(100% - 14px);
  background: var(--bg-deep); border: 1px solid var(--border-md);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto; z-index: 30;
}
.cmd-row {
  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; color: inherit; font-family: inherit;
  border-radius: 8px; padding: 8px 10px;
}
.cmd-row .cmd-name { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.cmd-row .cmd-args { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cmd-row .cmd-desc { font-size: 12px; color: var(--text-dim); margin-left: auto; text-align: right; }
.cmd-row:hover, .cmd-row.sel { background: var(--accent-lo); }
.cmd-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* — PWA-V1: installed-app (standalone) chrome — draw under the iOS status
   bar / notch without content colliding with it — */
@media (display-mode: standalone) {
  .topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(56px + env(safe-area-inset-top, 0px));
  }
  .bridge-banner { padding-left: max(24px, env(safe-area-inset-left, 0px)); }
}

/* — INBOX-RAIL (V2.2): unread badges — */
.unread-badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04181c;
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.thread-row .t-unread {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; align-self: center; margin-left: 4px;
}

/* Streaming indicators (concurrent conversations) */
.thread-row .t-streaming {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow, rgba(110,139,255,0.45));
  animation: stream-pulse 1.1s ease-in-out infinite;
}
.agent-row.streaming .av {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 8px var(--accent-glow, rgba(110,139,255,0.4));
  animation: stream-pulse 1.4s ease-in-out infinite;
}
@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-row .t-streaming, .agent-row.streaming .av { animation: none; }
}

/* — V2.1 responsive refinements — */
@media (max-width: 900px) {
  .chat-foot { padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cmd-menu { left: 12px; right: 12px; }
  .chat-msg { max-width: 100%; }
  .chat-msg.user .chat-msg-bubble, .chat-msg.assistant .chat-msg-bubble { max-width: calc(100vw - 70px); }
  .chat-panel-header { flex-wrap: wrap; row-gap: 8px; }
  .chat-header-actions { margin-left: auto; }
}
@media (max-width: 480px) {
  .chat-header-actions .icon-btn { display: none; } /* rename/delete live in /commands on phones */
  /* header becomes two rows: identity, then full-width controls */
  .chat-panel-header { padding: 8px 10px; row-gap: 6px; }
  .chat-header-avatar { display: none; } /* the who-labels carry identity in-transcript */
  .chat-header-text { flex: 1 1 auto; min-width: 0; }
  #chat-agent-model { display: none; }  /* redundant: the model chip says it */
  .chat-agent-name { white-space: nowrap; }
  .chat-header-actions { flex: 1 1 100%; order: 10; }
  .chat-header-actions .chip-select { flex: 1; max-width: none; height: 32px; }
}

/* ════════════════════════════════════════════════════════════
   PWA-V1.1 (2026-06-12, post-review fixes) — notch + home-indicator
   clearance at every width and orientation. env() resolves to 0 where
   there is no inset, so max() degrades to the existing constants.
   Tiered to preserve the per-breakpoint horizontal rhythm above.
   ════════════════════════════════════════════════════════════ */
.topbar {
  padding-left:  max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.tabnav {
  padding-left:  max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#tab-chat {
  padding-left:  max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}
.chat-foot {
  padding-left:   max(20px, env(safe-area-inset-left, 0px));
  padding-right:  max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
  #tab-chat {
    padding-left:  max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  .chat-foot {
    padding-left:   max(12px, env(safe-area-inset-left, 0px));
    padding-right:  max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 640px) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .tabnav { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 480px) {
  .topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .tabnav { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
}
#login-screen { padding: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }

/* STREAM-VISIBILITY-V1 (2026-06-17 master-chief): Cowork-style live activity panel —
   the agent's thinking + tool calls, shown above the answer bubble while it works. */
.chat-activity {
  max-width: 540px; margin: 2px 0 6px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-activity-think {
  font-size: 12px; line-height: 1.5;
  color: var(--text-muted); font-style: italic;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 6px; padding: 8px 10px;
  white-space: pre-wrap; overflow-wrap: break-word;
  max-height: 180px; overflow-y: auto;
}
.chat-activity-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.tool-chip {
  font-size: 11px; line-height: 1; padding: 5px 9px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text-muted);
  white-space: nowrap;
}
.tool-chip.run { border-color: var(--accent); color: var(--text); }
.tool-chip.ok  { opacity: 0.7; }
.tool-chip.err { border-color: var(--red); color: var(--red); }

/* STREAM-VISIBILITY-V3 (2026-06-15 momentum-engineer): durable, collapsed record of
   what the agent did (thinking + tools), kept on the finished message so it no longer
   vanishes the instant the answer lands. */
.chat-activity-saved {
  max-width: 540px; margin: 2px 0 6px 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel);
}
.chat-activity-saved > summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: 6px 10px; font-size: 11px; color: var(--text-muted);
}
.chat-activity-saved > summary::-webkit-details-marker { display: none; }
.chat-activity-saved > summary::before { content: '▸ '; }
.chat-activity-saved[open] > summary { color: var(--text); }
.chat-activity-saved[open] > summary::before { content: '▾ '; }
.chat-activity-saved .chat-activity-tools { padding: 0 10px 8px; }
.chat-activity-saved .chat-activity-think {
  margin: 0 10px 8px; font-size: 12px; line-height: 1.5;
  color: var(--text-muted); font-style: italic;
  border-left: 2px solid var(--accent); padding: 4px 0 4px 10px;
  white-space: pre-wrap; overflow-wrap: break-word;
  max-height: 220px; overflow-y: auto;
}

/* ── API Key Modal ───────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 28px 24px;
  width: min(440px, calc(100vw - 32px)); position: relative;
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; padding: 4px 6px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-title { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--text); }
.modal-desc { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.modal-desc a { color: var(--accent); }
.apikey-current {
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
  padding: 6px 10px; background: var(--bg); border-radius: 6px;
  font-family: monospace;
}
.apikey-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 14px; font-family: monospace;
  margin-bottom: 16px;
}
.apikey-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.modal-actions { display: flex; gap: 10px; }
.btn-danger {
  padding: 9px 18px; border-radius: 8px; border: 1px solid #f66;
  background: transparent; color: #f66; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.btn-danger:hover { background: #f66; color: #fff; }
.apikey-msg {
  margin: 12px 0 0; font-size: 13px;
  padding: 8px 12px; border-radius: 6px;
}
.apikey-msg.ok  { background: rgba(0,200,100,.12); color: #0c8; }
.apikey-msg.err { background: rgba(255,80,80,.12);  color: #f55; }
.apikey-explainer { margin-bottom: 14px; }
.apikey-step-list { margin-bottom: 16px; }
.apikey-provider-note { margin-top: 12px; font-size: 11px; color: var(--text-muted); }

/* ── API-key wizard/explainer (API-KEY-WIZARD-V1, 2026-07-06) ───────────
   Shared between the onboarding step-1 key screen and the Settings API-key
   modal — plain-language "what is this" + step-by-step provider instructions. */
.onboarding-explainer {
  margin: 4px 0 16px;
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  background: var(--bg); padding: 10px 14px;
}
.onboarding-explainer summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent);
  list-style: none;
}
.onboarding-explainer summary::-webkit-details-marker { display: none; }
.onboarding-explainer summary::before { content: '+ '; }
.onboarding-explainer[open] summary::before { content: '- '; }
.onboarding-explainer p {
  margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.5;
}
.onboarding-provider-steps {
  border: 1px solid var(--border-md); border-radius: var(--radius-sm);
  background: var(--bg); padding: 14px 16px; margin-bottom: 16px;
}
.onboarding-provider-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-lo);
  border-radius: 4px; padding: 3px 8px; margin-bottom: 10px;
}
.onboarding-step-list {
  margin: 0; padding-left: 18px;
  font-size: 12px; color: var(--text); line-height: 1.7;
}
.onboarding-step-list code {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); background: var(--accent-lo);
  padding: 1px 4px; border-radius: 3px;
}
.onboarding-provider-note {
  margin: 10px 0 0; font-size: 11px; color: var(--text-muted);
}
/* Live key-validation states (shared onboarding + settings) */
.onboarding-note.verifying { color: var(--accent); }
.onboarding-note.verified  { color: var(--green); }
.onboarding-note.warn      { color: var(--yellow); }

/* ════════════════════════════════════════════════════════════
   WORKFLOWS-UI-V1 (2026-07-03 Builder B) — Agentic Workflow Engine
   All classes namespaced .wf-* ; appended section, nothing above modified.
   ════════════════════════════════════════════════════════════ */

.wf-root { max-width: 1080px; margin: 0 auto; }

/* header row (shared by all wf views) */
.wf-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.wf-head-title { display: flex; align-items: baseline; gap: 10px; }
.wf-head-spacer { flex: 1; }
.wf-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 13px;
  padding: 6px 10px 6px 0; transition: color var(--transition);
}
.wf-back:hover { color: var(--accent); }

/* list grid + cards (same feel as .agent-card) */
.wf-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wf-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--transition), background var(--transition);
}
.wf-card:hover { border-color: var(--border-md); background: var(--panel-2); }
.wf-card-top { display: flex; align-items: center; gap: 8px; }
.wf-card-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-card-desc {
  font-size: 12px; color: var(--text-dim); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wf-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.wf-meta-sep { opacity: 0.5; }
.wf-card-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* small action buttons */
.wf-act {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: 12px;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.wf-act:hover { color: var(--text); border-color: var(--border-md); background: var(--panel-3); }
.wf-act:disabled { opacity: 0.35; cursor: not-allowed; }
.wf-act.primary { color: var(--accent); border-color: var(--accent-border); }
.wf-act.primary:hover { background: var(--accent-lo); }
.wf-act.danger { color: #f66; }
.wf-act.danger:hover { border-color: rgba(255,102,102,0.4); background: rgba(255,80,80,0.08); }
.wf-move { padding: 5px 9px; }

/* status badges */
.wf-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 9px;
  background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border);
}
.wf-badge.ok  { color: #0c8; background: rgba(0,200,100,0.1);  border-color: rgba(0,200,100,0.25); }
.wf-badge.err { color: #f66; background: rgba(255,80,80,0.1);  border-color: rgba(255,80,80,0.25); }
.wf-badge.run { color: var(--accent); background: var(--accent-lo); border-color: var(--accent-border); }
.wf-badge.dim { opacity: 0.7; }

/* empty / not-available states */
.wf-empty {
  text-align: center; padding: 56px 24px;
  border: 1px dashed var(--border-md); border-radius: var(--radius, 12px);
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wf-empty-icon { font-size: 26px; opacity: 0.6; }
.wf-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.wf-empty-sub { font-size: 13px; color: var(--text-dim); max-width: 440px; line-height: 1.5; }
.wf-empty-actions { display: flex; gap: 10px; margin-top: 8px; }

/* builder / run panes */
.wf-pane {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); padding: 20px;
  max-width: 860px;
}
.wf-gap-top { margin-top: 16px; }
.wf-desc-input, .wf-prompt { resize: vertical; font-family: inherit; }
.wf-sub-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.wf-sub-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.wf-sub-hint { font-size: 11px; color: var(--text-muted); opacity: 0.8; }
.wf-add-btn { margin-top: 8px; font-size: 12px; padding: 7px 14px; }

/* inputs editor rows */
.wf-inputs-box { display: flex; flex-direction: column; gap: 8px; }
.wf-input-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf-input-row .field-input { margin: 0; }
.wf-cell-key { flex: 0 0 130px; font-family: monospace; font-size: 12px; }
.wf-cell-label { flex: 1; min-width: 140px; }
.wf-cell-type { flex: 0 0 110px; }
.wf-req-wrap {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.wf-req-wrap input { accent-color: var(--accent); }
.wf-cell-x { flex: 0 0 auto; padding: 5px 9px; }

/* step editor cards */
.wf-steps-box { display: flex; flex-direction: column; gap: 10px; }
.wf-step-card {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.wf-step-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.wf-step-top .field-input { margin: 0; }
.wf-step-num {
  flex: 0 0 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-lo); border-radius: 6px;
}
.wf-step-name { flex: 2; min-width: 150px; }
.wf-step-role { flex: 1; min-width: 150px; }
.wf-prompt-wrap { display: flex; flex-direction: column; gap: 6px; }
.wf-prompt { width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.5; }
.wf-helper-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-helper-row .field-input { margin: 0; width: auto; }
.wf-var-select { max-width: 260px; font-size: 12px; padding: 6px 8px; }
.wf-out-select, .wf-fmt-select { font-size: 12px; padding: 6px 8px; }
.wf-char-count { font-size: 11px; color: var(--text-muted); }
.wf-helper-spacer { flex: 1; }

/* save / run bars */
.wf-save-bar, .wf-run-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.wf-error-line { flex: 1; min-width: 0; font-size: 12px; color: #f66; }
.wf-error-line:empty { display: none; }

/* run view */
.wf-run-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.5; }
.wf-run-form { display: flex; flex-direction: column; gap: 12px; }
.wf-run-field .field-input { margin: 0; }
.wf-progress { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.wf-progress:empty { display: none; }
.wf-progress-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }

.wf-step-row {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
}
.wf-step-row.run { border-color: var(--accent-border); }
.wf-step-row.err { border-color: rgba(255,80,80,0.3); }
.wf-step-row-main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13px;
}
.wf-step-row-main.expandable { cursor: pointer; }
.wf-step-row-main.expandable:hover { background: var(--panel-2); }
.wf-step-row-num { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.wf-step-row-name { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-step-row-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.wf-step-row.ok  .wf-step-row-status { color: #0c8; }
.wf-step-row.err .wf-step-row-status { color: #f66; }
.wf-step-row.run .wf-step-row-status { color: var(--accent); }
.wf-step-row-tok { font-size: 10px; color: var(--text-muted); }
.wf-step-row-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.wf-step-ic { width: 18px; text-align: center; font-size: 12px; flex: 0 0 18px; }
.wf-step-ic.ok { color: #0c8; }
.wf-step-ic.err { color: #f66; }
.wf-step-ic.dim { color: var(--text-muted); }

.wf-spinner {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%;
  border: 2px solid var(--accent-lo); border-top-color: var(--accent);
  animation: wf-spin 0.8s linear infinite;
}
@keyframes wf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wf-spinner { animation-duration: 2s; } }

/* step output — untrusted content shown as plain text */
.wf-output {
  margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  font-size: 12px; line-height: 1.55; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wf-output.small { max-height: 140px; font-size: 11px; }

.wf-artifact-link {
  align-self: flex-start; font-size: 12px; color: var(--accent);
  text-decoration: none; border: 1px solid var(--accent-border);
  border-radius: 7px; padding: 5px 12px; background: transparent;
  cursor: pointer; font-family: inherit;
  transition: background var(--transition);
}
.wf-artifact-link:hover { background: var(--accent-lo); }

/* past runs */
.wf-pastruns { display: flex; flex-direction: column; gap: 6px; }
.wf-pastrun-row {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; font-family: inherit; text-align: left;
  color: var(--text-dim); font-size: 12px;
  transition: border-color var(--transition), background var(--transition);
}
.wf-pastrun-row:hover { border-color: var(--border-md); background: var(--panel-2); }
.wf-pastrun-time { color: var(--text-dim); }
.wf-pastrun-id { color: var(--text-muted); font-family: monospace; font-size: 10px; margin-left: auto; }

/* modals (reuses .modal-backdrop/.modal-box) */
.wf-modal-box { max-width: 560px; width: calc(100% - 32px); max-height: 84vh; overflow-y: auto; }
.wf-modal-body { display: flex; flex-direction: column; gap: 8px; }
.wf-file-input { font-size: 13px; color: var(--text-dim); margin: 6px 0; }
.wf-import-preview { display: flex; flex-direction: column; gap: 6px; }
.wf-import-preview:empty { display: none; }
.wf-import-line { font-size: 12px; color: var(--text-dim); }
.wf-import-step { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.wf-report-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.wf-report-warn-title { font-size: 13px; font-weight: 600; color: #f5a623; }
.wf-report-list {
  margin: 4px 0; padding-left: 20px; font-size: 12px; color: var(--text-dim);
  max-height: 220px; overflow-y: auto;
}
.wf-report-list li { margin-bottom: 4px; word-break: break-word; }

/* ── RECIPE-MENU-V1 (2026-07-05) — agent detail modal (what it is + skills) ── */
.agent-card { cursor: pointer; }
.agent-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-detail-modal { width: min(480px, calc(100vw - 32px)); }
.agent-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.agent-detail-avatar { width: 46px; height: 46px; font-size: 16px; flex: 0 0 auto; }
.agent-detail-role { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.agent-detail-section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin: 16px 0 8px;
}
.agent-detail-skills { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.agent-detail-scope {
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}

/* ── RECIPE-MENU-V1 (2026-07-05) — pre-saved recipe library, .recipe-* ── */
.recipe-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.recipe-chip {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); font-family: inherit; font-size: 12px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.recipe-chip:hover { color: var(--text); border-color: var(--border-md); }
.recipe-chip.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-lo); }
.recipe-grid { margin-top: 4px; }
.recipe-card { position: relative; }
.recipe-agent-tag {
  align-self: flex-start; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent); background: var(--accent-lo);
  border: 1px solid var(--accent-border); border-radius: 9px; padding: 2px 8px;
}

/* chat-only deployments hide the workflows surface like the other demo tabs */
body.chat-only #tab-workflows { display: none !important; }

@media (max-width: 640px) {
  .wf-pane { padding: 14px; }
  .wf-cell-key { flex-basis: 100px; }
  .wf-grid { grid-template-columns: 1fr; }
}