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

    /* ── Custom scrollbars ── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
    * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

    :root {
      color-scheme: light;
      /* ── iOS-inspired base palette ── */
      --bg: #f2f2f7;
      --surface: #ffffff;
      --surface2: #e8e8ed;
      --surface3: #dedee3;
      --border: #c6c6c8;
      --border-soft: #e0e0e3;
      --text: #000000;
      --text-muted: #6d6d72;
      --text-faint: #aeaeb2;
      --accent: #007aff;
      --accent-bg: #e8f2ff;
      --green: #34c759;
      --yellow: #ff9500;
      --red: #ff3b30;
      --purple: #af52de;
      --blue: #007aff;
      --amber: #ff9500;
      --sky: #5ac8fa;
      --shadow: 0 1px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
      --shadow-elevated: 0 4px 14px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
      /* ── Semantic color tokens ── */
      --color-bg: var(--surface);
      --color-bg-secondary: var(--bg);
      --color-bg-tertiary: var(--surface2);
      --color-bg-sidebar: var(--surface);
      --color-text: var(--text);
      --color-text-secondary: var(--text-muted);
      --color-text-muted: var(--text-faint);
      --color-text-link: var(--accent);
      --color-border: var(--border);
      --color-border-soft: var(--border-soft);
      --color-accent: var(--accent);
      --color-accent-hover: #0056d6;
      --color-success: var(--green);
      --color-error: var(--red);
      --color-warning: var(--yellow);
      --color-online: var(--green);
      --color-offline: var(--text-faint);
      /* Code / editor */
      --color-code-bg: #1c1c1e;
      --color-code-text: #e5e5ea;
      /* Human avatar */
      --color-human-avatar-bg: #1c1c1e;
      --color-human-avatar-border: #3a3a3c;
      --color-human-avatar-text: #aeaeb2;
      /* Typography */
      --font-sm: 0.75rem;
      --font-base: 0.875rem;
      --font-lg: 1rem;
      --font-xl: 1.25rem;
      --font-weight-semibold: 590;
      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
      /* Topbar height incl. notch inset */
      --top-off: 44px;
      /* iOS design scale tokens — larger, softer radii */
      --r1: 8px; --r2: 10px; --r3: 14px; --r4: 18px; --r5: 24px;
      --radius-sm: var(--r1);
      --radius-md: var(--r2);
      --radius-lg: var(--r3);
      --accent-bg-soft: color-mix(in srgb, var(--accent) 8%, transparent);
    }
    @media (prefers-color-scheme: dark) {
      :root { color-scheme: dark; }
    }
    body.dark, [data-theme="dark"] {
      color-scheme: dark;
      --bg: #000000;
      --surface: #1c1c1e;
      --surface2: #2c2c2e;
      --surface3: #3a3a3c;
      --border: #38383a;
      --border-soft: #2c2c2e;
      --text: #ffffff;
      --text-muted: #98989d;
      --text-faint: #636366;
      --accent: #0a84ff;
      --accent-bg: #1a2a4a;
      --green: #30d158;
      --yellow: #ff9f0a;
      --red: #ff453a;
      --purple: #bf5af2;
      --blue: #0a84ff;
      --amber: #ff9f0a;
      --sky: #64d2ff;
      --shadow: 0 1px 4px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
      --shadow-elevated: 0 4px 14px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
      --color-accent-hover: #409cff;
      --color-code-bg: #000000;
      --color-code-text: #e5e5ea;
      --color-human-avatar-bg: #2c2c2e;
      --color-human-avatar-border: #48484a;
      --color-human-avatar-text: #aeaeb2;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.6);
    }
    html { height: 100%; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg); color: var(--text);
      height: 100vh;
      height: 100dvh;
      height: var(--app-height, 100dvh);
      overflow: hidden;
      display: flex; flex-direction: column; font-size: 14px;
      transition: height 0.3s cubic-bezier(0.33, 0, 0.25, 1);
    }

    /* ── TOPBAR ── */
    .topbar {
      height: 44px;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--border-soft);
      display: flex; align-items: center; padding: 0 10px; gap: 4px; flex-shrink: 0; z-index: 100;
    }
    .topbar-brand {
      font-weight: 900; font-size: 14px; color: var(--text);
      display: flex; align-items: center; gap: 5px;
      padding: 0 4px; flex-shrink: 0;
    }
    .brand-name { color: var(--accent); letter-spacing: 2.5px; font-size: 13px; }
    .topbar-channel {
      font-size: 13px; font-weight: 600; padding: 4px 9px;
      border: none; border-radius: 8px;
      display: flex; align-items: center; gap: 6px; white-space: nowrap;
      background: none;
      color: var(--text);
      letter-spacing: -0.01em;
      cursor: default;
      transition: background 0.15s;
    }
    .topbar-channel:hover { background: var(--surface2); }
    .debate-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
    .debate-dot.active { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
    .ws-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--green, #4caf50); transition: background .3s; }
    .ws-dot.off { background: var(--red, #e74c3c); animation: ws-blink 1s step-end infinite; }
    @keyframes ws-blink { 50% { opacity: .2; } }
    .topbar-spacer { flex: 1; }
    .topbar-controls { display: none; }
    /* Icon-only topbar buttons */
    .tb-icon-btn { padding: 5px 9px; font-size: 16px; letter-spacing: 0; }
    /* Primary buttons: icon + label */
    .tb-label { display: inline; }
    .tb-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      padding: 5px 11px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      font-size: 12px; font-weight: 600;
      cursor: pointer; border-radius: 8px; white-space: nowrap; transition: all 0.15s ease;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: -0.01em;
    }
    .tb-btn:hover { background: var(--surface2); color: var(--text); }
    .tb-btn:active { transform: scale(0.96); }
    .tb-btn.active { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); font-weight: 700; }
    .tb-btn.danger { color: var(--red); }
    .tb-btn.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
    /* AGENT — primary CTA */
    #spawnBtn {
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      padding: 5px 14px;
    }
    #spawnBtn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff; }
    #spawnBtn:active { transform: scale(0.96); }
    /* Separator — vertical in topbar, horizontal block in dropdown */
    .tb-sep { width: 1px; height: 16px; background: var(--border-soft); flex-shrink: 0; margin: 0 3px; }
    /* Label icon-only buttons in ALL dropdown contexts */
    .topbar-controls.mobile-open #statusBtn::after   { content: ' STATUS'; }
    .topbar-controls.mobile-open #errorlogBtn::after { content: ' LOG'; }
    .topbar-controls.mobile-open #restartBtn::after  { content: ' RESTART'; }
    .topbar-controls.mobile-open #darkBtn::after     { content: ' THEME'; }
    .topbar-controls.mobile-open #soundBtn::after    { content: ' SONIDO'; }
    .topbar-controls.mobile-open #cliModeBtn::after  { content: ' MODE'; }
    .topbar-controls.mobile-open .ralph-badge { display: none; }
    /* Dropdown open: common button + separator styles (size/position per breakpoint) */
    .topbar-controls.mobile-open {
      display: flex; flex-direction: column; gap: 0;
    }
    .topbar-controls.mobile-open .tb-btn {
      width: 100%; justify-content: flex-start; text-align: left;
      border-radius: 0; border: none; border-bottom: 1px solid var(--border-soft);
      background: transparent; color: var(--text); font-weight: 500;
    }
    .topbar-controls.mobile-open .tb-btn:hover,
    .topbar-controls.mobile-open .tb-btn:active { background: var(--surface2); }
    .topbar-controls.mobile-open .tb-btn.active { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); }
    .topbar-controls.mobile-open .tb-btn.danger { color: var(--red); }
    .topbar-controls.mobile-open .tb-btn.danger:hover { background: color-mix(in srgb, var(--red) 8%, transparent); }
    .topbar-controls.mobile-open .tb-sep {
      height: 6px; background: var(--surface2);
      border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
      display: block; width: 100%; margin: 0;
    }
    .topbar-controls.mobile-open .tb-sep[data-label] {
      height: auto; padding: 10px 16px 3px;
      font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
      color: var(--text-faint); background: transparent;
      border-top: 1px solid var(--border-soft); border-bottom: none;
    }
    .topbar-controls.mobile-open .tb-sep[data-label]::after { content: attr(data-label); }
    .topbar-controls.mobile-open .tb-sep-danger[data-label] { color: color-mix(in srgb, var(--red) 60%, var(--text-faint)); background: color-mix(in srgb, var(--red) 5%, var(--surface2)); }
    .ralph-badge {
      background: var(--purple); color: white; border-radius: 10px;
      padding: 2px 8px; font-size: 10px; font-weight: 700; display: none;
    }

    /* ── LAYOUT ── */
    .main-layout { display: flex; flex: 1; overflow: hidden; transition: height 0.3s cubic-bezier(0.33, 0, 0.25, 1); }

    /* ── SIDEBAR ── */
    .sidebar {
      width: 380px; min-width: 340px; max-width: 480px;
      background: var(--surface2);
      border-right: 1px solid var(--border-soft);
      display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0;
      padding-top: 4px; padding-bottom: 20px;
    }
    /* Sections separated by spacing only — no hard lines */
    .sidebar-section { border-bottom: none; padding-bottom: 2px; }
    .sidebar-section-header {
      padding: 18px 14px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      color: var(--text-faint); display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; user-select: none; text-transform: uppercase;
      transition: color 0.12s;
    }
    .sidebar-section-header:hover { color: var(--text-muted); }
    .section-add-btn {
      background: transparent; border: none; color: var(--text-faint);
      width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
      font-size: 15px; display: flex; align-items: center; justify-content: center;
      transition: all 0.15s ease; opacity: 0; flex-shrink: 0;
    }
    .sidebar-section-header:hover .section-add-btn,
    .section-add-btn:focus-visible { opacity: 1; }
    .section-add-btn:hover { background: var(--accent); color: white; transform: scale(1.05); opacity: 1; }
    .sidebar-items {
      padding: 2px 6px 4px;
      overflow: hidden;
      max-height: 3000px;
      opacity: 1;
      transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.2s ease,
                  padding 0.2s ease;
    }
    .sidebar-items.sb-collapsed {
      max-height: 0 !important;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    .sidebar-items.sb-no-transition { transition: none !important; }
    .sb-chev {
      font-size: 7px; margin-left: 4px; display: inline-block; opacity: 0.4;
      transition: transform 0.18s ease;
    }

    /* ── CONSUMOS (usage breakdown) ── */
    .usage-empty { font-size: 11px; color: var(--text-faint); padding: 4px 8px; }
    .usage-total {
      display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
      padding: 4px 8px 6px; font-size: 11px; color: var(--text-muted);
      border-bottom: 1px dashed var(--border-soft); margin-bottom: 4px;
    }
    .usage-total b { color: var(--text); font-weight: 700; }
    .usage-prov { margin-bottom: 6px; }
    .usage-prov-head {
      display: flex; align-items: baseline; gap: 6px; padding: 3px 8px;
      font-size: 12px; font-weight: 700; color: var(--text);
    }
    .usage-prov-head .up-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .usage-prov-head .up-cost { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .usage-prov-head .up-cost.free { color: var(--green); }
    .usage-model {
      display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
      padding: 2px 8px 2px 20px; font-size: 10.5px; color: var(--text-muted);
    }
    .usage-model .um-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); }
    .usage-model .um-cost { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .usage-model .um-cost.free { color: var(--green); }
    .usage-model .um-meta { grid-column: 1 / -1; font-size: 9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
    .usage-credit {
      display: flex; align-items: baseline; gap: 5px; padding: 1px 8px 2px 20px;
      font-size: 10px; color: var(--green); font-variant-numeric: tabular-nums;
    }
    .usage-credit.low { color: var(--yellow); }
    .usage-credit.err { color: var(--text-faint); }
    .usage-credit .uc-label { color: var(--text-faint); }
    /* ── COSTES modal ── */
    .costs-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
    .costs-filter { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 110px; }
    .costs-filter label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; }
    .costs-filter select {
      padding: 6px 8px; font-family: inherit; font-size: 12px; border-radius: 3px;
      border: 1px solid var(--border-soft); background: var(--bg); color: var(--text); width: 100%;
    }
    #costsRefreshBtn { flex: 0 0 auto; padding: 6px 12px; }
    .costs-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; margin-bottom: 7px; }
    .costs-section-label .costs-hint { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
    .costs-balances { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .costs-bal {
      flex: 1 1 130px; min-width: 120px; background: var(--surface); border: 1px solid var(--border-soft);
      border-left: 3px solid var(--border); border-radius: 5px; padding: 8px 11px;
    }
    .costs-bal.ok   { border-left-color: var(--green); }
    .costs-bal.low  { border-left-color: var(--yellow); }
    .costs-bal.na   { border-left-color: var(--border-soft); opacity: .75; }
    .costs-bal .cb-head { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text); }
    .costs-bal .cb-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--text); }
    .costs-bal.ok  .cb-val { color: var(--green); }
    .costs-bal.low .cb-val { color: var(--yellow); }
    .costs-bal .cb-sub { font-size: 9.5px; color: var(--text-faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
    .costs-balances-empty { font-size: 11px; color: var(--text-faint); }
    .costs-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .costs-stat {
      flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border-soft);
      border-radius: 5px; padding: 10px 12px;
    }
    .costs-stat .cs-val { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
    .costs-stat .cs-val.cost { color: var(--green); }
    .costs-stat .cs-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; margin-top: 2px; }
    .costs-chart-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 5px; padding: 10px 12px 8px; margin-bottom: 14px; }
    .costs-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
    .costs-chart-head #costsChartTitle { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); font-weight: 700; }
    .costs-chart-head #costsChartMax { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
    .costs-chart { display: flex; align-items: flex-end; justify-content: flex-start; gap: 3px; min-height: 96px; }
    .costs-chart .cc-col { flex: 1 1 0; max-width: 56px; min-width: 8px; display: flex; flex-direction: column; align-items: center; }
    .costs-chart .cc-barwrap { height: 78px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
    .costs-chart .cc-bar { width: 68%; min-width: 5px; background: var(--green); border-radius: 2px 2px 0 0; opacity: .85; transition: opacity .12s; }
    .costs-chart .cc-col:hover .cc-bar { opacity: 1; }
    .costs-chart .cc-xlabel { font-size: 8.5px; color: var(--text-faint); margin-top: 5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; height: 11px; }
    .costs-chart-empty { color: var(--text-faint); font-size: 11px; text-align: center; width: 100%; align-self: center; padding: 30px 0; }
    .costs-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
    .costs-tab {
      padding: 6px 14px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      font-size: 12px; font-weight: 600; cursor: pointer;
      border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface2); color: var(--text-muted);
      transition: all 0.15s; letter-spacing: -0.01em;
    }
    .costs-tab:hover { background: var(--surface); color: var(--text); }
    .costs-tab.active { background: var(--surface); color: var(--accent); border-color: var(--accent); }
    .costs-table { display: flex; flex-direction: column; gap: 1px; }
    .costs-row {
      display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center;
      padding: 7px 10px; background: var(--surface); border-radius: 4px; font-size: 12px;
    }
    .costs-row .cr-name { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .costs-row .cr-cost { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .costs-row .cr-meta { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .costs-empty { color: var(--text-faint); font-size: 12px; padding: 16px; text-align: center; }

    /* ── Automations sidebar items ──────────────────────────────── */
    .auto-sb-empty { font-size: 11px; color: var(--text-faint); padding: 4px 10px 8px; }
    .auto-sb-item {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 8px 5px 12px; cursor: pointer;
      border-left: 3px solid var(--border-soft);
      font-size: 12px; color: var(--text-muted); transition: background .1s;
    }
    .auto-sb-item:hover { background: var(--surface2); color: var(--text); }
    .auto-sb-item.asb-on  { border-left-color: var(--green); }
    .auto-sb-item.asb-err { border-left-color: var(--red); }
    .auto-sb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
    .auto-sb-item.asb-on  .auto-sb-dot { background: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb,var(--green) 20%,transparent); }
    .auto-sb-item.asb-err .auto-sb-dot { background: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 20%, transparent); }
    .auto-sb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .auto-sb-trig { font-size: 11px; opacity: .65; flex-shrink: 0; }
    .auto-sb-tog {
      width: 26px; height: 14px; border-radius: 7px; background: var(--border);
      border: none; cursor: pointer; position: relative; flex-shrink: 0;
      transition: background .15s; padding: 0;
    }
    .auto-sb-tog.on { background: var(--green); }
    .auto-sb-tog::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 10px; height: 10px; border-radius: 50%; background: #fff;
      transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .auto-sb-tog.on::after { left: 14px; }

    /* ── Automations panel ─────────────────────────────────────── */
    #autoModal .modal { max-width: 740px; }
    #autoModal .modal-body { max-height: min(72vh, 680px); overflow-y: auto; scroll-padding-bottom: 70px; }
    /* ─ List head: stats + search ── */
    .auto-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    .auto-list-stats { display: flex; align-items: center; gap: 6px; font-size: 11px; flex: 1; flex-wrap: wrap; }
    .als-ok  { color: var(--green); font-weight: 600; }
    .als-err { color: var(--red); font-weight: 600; }
    .als-off { color: var(--text-faint); }
    .als-sep { color: var(--border); }
    .auto-search {
      width: 170px; background: var(--surface); border: 1px solid var(--border);
      border-radius: 5px; color: var(--text); font-size: 12px; padding: 5px 8px;
      font-family: inherit; outline: none; flex-shrink: 0; transition: border-color .12s;
    }
    .auto-search:focus { border-color: var(--accent); width: 210px; }
    @media (max-width: 500px) { .auto-list-head { flex-direction: column; align-items: stretch; } .auto-search { width: 100% !important; } }
    /* ─ Card ── */
    .auto-list { display: flex; flex-direction: column; gap: 8px; }
    .auto-empty { color: var(--text-faint); font-size: 13px; padding: 24px; text-align: center; }
    .auto-card {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; border-radius: 14px;
      background: var(--surface); border: 1px solid var(--border-soft);
      transition: border-color .15s, box-shadow .15s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .auto-card:hover { border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .auto-card.disabled { opacity: .5; }
    .auto-card.has-error { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 3%, var(--surface)); }
    .auto-status-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
      background: var(--green);
    }
    .auto-card.disabled .auto-status-dot { background: var(--border); }
    .auto-card.has-error .auto-status-dot { background: var(--red); animation: pulse-error 1.5s infinite; }
    @keyframes pulse-error { 0%,100%{opacity:1}50%{opacity:.35} }
    .auto-card-main { flex: 1; min-width: 0; }
    /* name + badges on one row */
    .auto-card-row1 { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
    .auto-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
    .auto-card-desc { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .auto-card-summary { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .auto-card-foot { font-size: 10px; color: var(--text-faint); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .auto-card-next { color: var(--accent); font-weight: 600; }
    .auto-card-error { font-size: 10px; color: var(--red); margin-top: 3px; display: flex; align-items: flex-start; gap: 4px; }
    .auto-hist { display: flex; gap: 2px; align-items: center; }
    .auto-hist-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .auto-hist-dot.ok  { background: var(--green); }
    .auto-hist-dot.err { background: var(--red); }
    .auto-card-count { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 3px; padding: 0 4px; font-size: 9.5px; }
    /* actions — bigger touch targets */
    .auto-card-actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; margin-top: -2px; }
    .auto-toggle {
      position: relative; width: 34px; height: 18px; flex-shrink: 0;
      cursor: pointer; background: var(--border); border-radius: 9px;
      border: none; transition: background .15s;
    }
    .auto-toggle.on { background: var(--green); }
    .auto-toggle::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff; transition: left .15s;
    }
    .auto-toggle.on::after { left: 18px; }
    .auto-icon-btn {
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      font-size: 13px; padding: 6px 6px; min-width: 30px; min-height: 30px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 5px; transition: all .1s;
    }
    .auto-icon-btn:hover { background: var(--surface3,var(--surface)); color: var(--text); }
    .auto-icon-btn.danger:hover { color: var(--red); }
    .auto-run-btn { color: var(--accent) !important; }
    .auto-run-btn.running { opacity: .5; pointer-events: none; }
    /* ── Multi-agent picker (automations) ── */
    .af-agent-picker { display:flex; flex-wrap:wrap; gap:5px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; min-height:40px; }
    .af-agent-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; border:1.5px solid var(--border-soft); background:var(--surface2); color:var(--text-muted); user-select:none; transition:border-color .12s, background .12s, color .12s; }
    .af-agent-chip:hover { border-color:var(--accent); color:var(--text); }
    .af-agent-chip.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--text); }
    .af-agent-chip .ac-em { font-size:13px; line-height:1; }
    .af-swarm-tag { font-size:9.5px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:10px; padding:1px 6px; margin-left:2px; }
    .af-swarm-grp-hdr { display:flex; align-items:center; gap:6px; width:100%; padding:4px 2px 2px; font-size:10px; font-weight:700; letter-spacing:0.04em; color:var(--text-faint); }
    .af-grp-name { flex:1; }
    .af-grp-sel-btn { font-size:9px; font-weight:700; padding:1px 8px; border-radius:8px; border:1px solid var(--border-soft); background:var(--surface2); color:var(--text-muted); cursor:pointer; font-family:inherit; transition:all .12s; flex-shrink:0; }
    .af-grp-sel-btn:hover, .af-grp-sel-btn.on { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
    .af-agent-hint { font-size:10px; color:var(--text-faint); margin-top:4px; }
    /* ── Human avatar ── */
    .msg-avatar.human { background:var(--color-human-avatar-bg) !important; border-color:var(--color-human-avatar-border) !important; color:var(--color-human-avatar-text) !important; }
    /* Weekday picker */
    .wd-picker { display: flex; gap: 4px; flex-wrap: wrap; }
    .wd-btn {
      width: 32px; height: 30px; border-radius: 5px;
      border: 1px solid var(--border); background: none;
      color: var(--text-muted); font-size: 11px; font-weight: 700;
      cursor: pointer; padding: 0; font-family: inherit; transition: all .1s;
    }
    .wd-btn.on { background: var(--accent-bg,rgba(63,185,80,.12)); color: var(--accent,#3fb950); border-color: var(--accent,#3fb950); }
    /* Quick templates */
    .auto-tpl-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); margin-bottom: 8px; }
    .auto-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 6px; margin-bottom: 16px; }
    .auto-tpl-btn {
      display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
      background: var(--surface2); border: 1px dashed var(--border);
      border-radius: 7px; cursor: pointer; text-align: left; font-family: inherit;
      transition: all .12s;
    }
    .auto-tpl-btn:hover { border-color: var(--accent); background: var(--accent-bg,rgba(63,185,80,.07)); }
    .auto-tpl-btn strong { font-size: 12px; color: var(--text); }
    .auto-tpl-btn span { font-size: 10px; color: var(--text-muted); }
    /* Form */
    .auto-form { display: flex; flex-direction: column; gap: 10px; }
    .auto-form-section {
      padding: 14px 16px; background: var(--surface);
      border: 1px solid var(--border-soft); border-radius: 14px;
    }
    .auto-form-section[open] summary .afs-caret { transform: rotate(90deg); }
    .auto-form-section-title {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .6px; color: var(--text-faint); margin-bottom: 10px;
      list-style: none; outline: none; display: flex; align-items: center; gap: 6px;
    }
    .auto-form-section-title::-webkit-details-marker { display: none; }
    .afs-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      background: color-mix(in srgb, var(--accent) 15%, transparent);
      color: var(--accent); font-size: 9px; font-weight: 800;
    }
    .afs-caret { display: inline-block; transition: transform .15s; margin-left: 2px; opacity: .6; }
    /* General row: name always left, toggle always right, even on mobile */
    .auto-general-row { display: flex; gap: 10px; align-items: flex-start; }
    .auto-form-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
    .auto-form-row + .auto-form-row { margin-top: 8px; }
    .auto-form-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
    .auto-form-field.full { flex: 1 1 100%; }
    .auto-form-field.narrow { flex: 0 0 90px; }
    .auto-form-field label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .5px; color: var(--text-faint);
      display: flex; align-items: baseline; gap: 5px;
    }
    .auto-form-field label .lbl-opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
    .auto-form-field input, .auto-form-field select, .auto-form-field textarea {
      background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
      color: var(--text); font-size: 13px; padding: 7px 9px; font-family: inherit;
      outline: none; transition: border-color .12s; width: 100%; box-sizing: border-box;
    }
    .auto-form-field input:focus, .auto-form-field select:focus, .auto-form-field textarea:focus { border-color: var(--accent); }
    .auto-form-field textarea { resize: vertical; min-height: 80px; }
    .auto-form-hint {
      font-size: 11px; color: var(--text-faint); padding: 7px 10px;
      background: var(--surface); border: 1px solid var(--border-soft); border-radius: 5px;
      margin-top: 4px; line-height: 1.5;
    }
    .auto-form-hint code { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-size: 10px; }
    .auto-form-vars { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
    .auto-form-vars code { background: var(--surface2); padding: 1px 5px; border-radius: 3px; }
    .auto-webhook-url {
      font-size: 10px; background: var(--surface); border: 1px solid var(--border-soft);
      border-radius: 5px; padding: 8px 10px; margin-top: 6px; word-break: break-all;
      color: var(--text-muted); font-family: monospace;
    }
    .auto-webhook-url strong { color: var(--text); display: block; margin-bottom: 3px; font-family: inherit; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
    .af-toggle-row { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
    .af-toggle-lbl { font-size: 12px; color: var(--text-muted); }
    .auto-form-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
    /* Multi-action cards */
    .ac-card { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--surface2) 20%, var(--surface)); margin-bottom: 8px; }
    .ac-card-head { display: flex; align-items: center; gap: 6px; }
    .ac-card-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); flex: 1; }
    .ac-card-remove { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 12px; padding: 2px 6px; border-radius: 6px; font-family: inherit; transition: all .12s; }
    .ac-card-remove:hover { color: var(--red, #f85149); background: color-mix(in srgb, var(--red, #f85149) 12%, transparent); }
    .ac-resultado-hint { font-size: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 6px; padding: 4px 8px; }
    .ac-resultado-hint code { background: none; font-size: 10px; color: var(--accent); font-weight: 700; }
    .ac-add-btn { background: none; border: 1px dashed var(--border-soft); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; width: 100%; margin-top: 2px; transition: all .15s; }
    .ac-add-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
    /* Responsive: stack fields at narrow widths (exclude auto-general-row children) */
    @media (max-width: 540px) {
      .auto-form-row { gap: 8px; }
      .auto-form-row > .auto-form-field { flex: 1 1 100% !important; min-width: 100%; }
      .auto-tpl-grid { grid-template-columns: 1fr; }
      .auto-form-btns { justify-content: stretch; }
      .auto-form-btns .btn { flex: 1; text-align: center; }
    }
    .auto-badge {
      font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 700;
      letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
    }
    .auto-badge-sched  { background: var(--accent-bg,#1a3a22); color: var(--accent,#3fb950); }
    .auto-badge-key    { background: rgba(120,80,255,.15); color: #a580ff; }
    .auto-badge-msg    { background: rgba(60,130,200,.15); color: #79c0ff; }
    .auto-badge-ann    { background: rgba(200,150,30,.15); color: #e3b341; }
    .auto-badge-cmd    { background: rgba(121,192,255,.15); color: #79c0ff; }
    .auto-badge-email  { background: rgba(249,115,22,.15); color: #f97316; }
    .auto-badge-http   { background: rgba(100,180,255,.15); color: #60b4ff; }
    .auto-badge-wh     { background: rgba(180,100,255,.15); color: #c084fc; }
    .auto-badge-swarm  { background: rgba(80,200,160,.15); color: #34d399; }
    .auto-badge-start  { background: rgba(100,220,180,.15); color: #34d399; }

    .sidebar-item {
      padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
      display: flex; align-items: center; gap: 8px; position: relative;
      border-left: none; color: var(--text-muted);
      transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
      margin-bottom: 1px;
    }
    .sidebar-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
    .sidebar-item.active {
      background: var(--accent-bg);
      color: var(--accent);
      font-weight: 600;
      box-shadow: inset 2px 0 0 var(--accent);
    }
    .sidebar-item .item-icon { font-size: 13px; opacity: 0.65; flex-shrink: 0; width: 20px; text-align: center; }
    .sidebar-item:hover .item-icon { opacity: 0.9; }
    .sidebar-item.active .item-icon { opacity: 1; }
    .sidebar-item .item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .sidebar-item.active .item-name { font-weight: 600; }
    .item-badge { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }
    .interview-q { margin-bottom:10px; }
    .interview-q-text { font-size:11px; font-weight:600; color:var(--text); margin-bottom:5px; }
    .interview-chips { display:flex; flex-wrap:wrap; gap:5px; }
    .interview-chip { font-size:10px; padding:3px 9px; border-radius:12px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); cursor:pointer; transition:all .15s; user-select:none; }
    .interview-chip:hover { border-color:var(--accent); color:var(--accent); }
    .interview-chip.selected { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
    .badge-debate { background: var(--yellow); color: #000; }
    .badge-project-interview    { background: var(--yellow); color:#000; }
    .badge-project-planning     { background: var(--yellow); color:#000; }
    .badge-project-confirming   { background: var(--yellow); color:#000; }
    .badge-project-building     { background: var(--accent); color:#fff; animation: badge-work 1.6s ease-in-out infinite; }
    .badge-project-setting-up   { background: var(--accent); color:#fff; animation: badge-work 1.6s ease-in-out infinite; }
    .badge-project-cloning      { background: var(--accent); color:#fff; animation: badge-work 1.6s ease-in-out infinite; }
    @keyframes badge-work { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
    @media (prefers-reduced-motion: reduce) { .item-badge { animation: none !important; } }
    .badge-project-cloned       { background: var(--sky);     color:#fff; }
    .badge-project-phase-review { background: var(--sky);     color:#fff; }
    .badge-project-done         { background: var(--green);  color:#fff; }
    .badge-project-running      { background: var(--green);  color:#fff; }
    .badge-project-error        { background: var(--red);    color:#fff; }
    /* Backlog phase cards */
    .proj-backlog-phase { padding:8px 10px; border-radius:6px; margin-bottom:5px; border:1px solid var(--border-soft); background:var(--surface2); }
    .proj-backlog-phase.pbp-active  { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
    .proj-backlog-phase.pbp-done    { border-color:var(--green); opacity:.72; }
    .proj-backlog-phase.pbp-partial { border-color:var(--amber); }
    .proj-backlog-phase.pbp-failed  { border-color:var(--red); background:color-mix(in srgb,var(--red) 5%,transparent); }
    .pbp-header { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
    .pbp-num  { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--accent); color:#fff; font-size:9px; font-weight:800; flex-shrink:0; }
    .pbp-name { font-size:11px; font-weight:700; flex:1; color:var(--text); }
    .pbp-stat { font-size:9px; color:var(--text-faint); flex-shrink:0; }
    .pbp-goal { font-size:10px; color:var(--text-faint); line-height:1.4; margin-bottom:3px; }
    .pbp-tasks { display:flex; flex-direction:column; gap:2px; margin:4px 0 4px; }
    .pbp-task { font-size:11px; display:flex; align-items:flex-start; gap:7px; padding:3px 0; border-radius:4px; line-height:1.35; }
    .pbp-task-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px; }
    .pbp-task-badge { font-size:9px; font-weight:700; letter-spacing:.2px; flex-shrink:0; padding:1px 5px; border-radius:8px; margin-top:1px; min-width:48px; text-align:center; }
    .pbp-task-title { color:var(--text-muted); flex:1; }
    .pbp-task-pending  .pbp-task-dot   { background:var(--red); }
    .pbp-task-pending  .pbp-task-badge { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
    .pbp-task-running  .pbp-task-dot   { background:var(--blue); animation:taskPulse 1s ease-in-out infinite; }
    .pbp-task-running  .pbp-task-badge { background:color-mix(in srgb,var(--blue) 15%,transparent); color:var(--blue); }
    .pbp-task-waiting  .pbp-task-dot   { background:var(--amber); }
    .pbp-task-waiting  .pbp-task-badge { background:color-mix(in srgb,var(--amber) 15%,transparent); color:var(--amber); }
    .pbp-task-done     .pbp-task-dot   { background:var(--green); }
    .pbp-task-done     .pbp-task-badge { background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
    .pbp-task-done     .pbp-task-title { color:var(--text-faint); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--green) 50%,transparent); }
    .pbp-task-failed   .pbp-task-dot   { background:var(--red); }
    .pbp-task-failed   .pbp-task-badge { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
    @keyframes taskPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    .pbp-delivs { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
    .pbp-delivs code { font-size:9px; font-family:monospace; color:var(--text-faint); background:var(--surface3,var(--surface2)); padding:1px 5px; border-radius:4px; border:1px solid var(--border-soft); }
    /* Approved plan section */
    .proj-plan-body { font-size:11px; line-height:1.6; color:var(--text-muted); }
    .proj-plan-body h2,.proj-plan-body h3 { font-size:11px; font-weight:700; color:var(--text); margin:6px 0 3px; }
    .proj-plan-body strong { color:var(--text); }
    .proj-plan-body ul,.proj-plan-body ol { margin:3px 0 3px 14px; padding:0; }
    .proj-plan-body li { margin:2px 0; }
    .proj-plan-body code { background:var(--surface2); border-radius:3px; padding:0 4px; font-size:10px; }
    .proj-plan-body p { margin:3px 0; }
    .badge-unread { background: var(--red); color: white; }
    /* ── Utility classes extracted from common inline styles ── */
    .ui-label { font-size:10px; color:var(--text-faint); }
    .ui-label-sm { font-size:9px; color:var(--text-faint); }
    .ui-label-hd { font-size:10px; font-weight:700; color:var(--text-faint); margin-bottom:6px; letter-spacing:1px; }
    .ui-field-lbl { font-size:11px; font-weight:600; color:var(--text-muted); }
    .ui-desc { font-size:12px; color:var(--text-muted); line-height:1.5; margin:0; }
    .ui-err { color:var(--red); font-size:12px; }
    /* Project sidebar item */
    .proj-sb-item { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 28px 6px 10px; position: relative; }
    .proj-sb-row1 { display: flex; align-items: center; gap: 6px; }
    .proj-sb-type { font-size: 13px; flex-shrink: 0; line-height: 1; }
    .proj-sb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
    .proj-sb-pin  { font-size: 9px; opacity: .7; flex-shrink: 0; }
    .proj-sb-tags { display: flex; gap: 3px; flex-wrap: wrap; }
    .proj-sb-tag  { font-size: 9px; padding: 0 5px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-faint); }
    /* Project panel enhancements */
    .proj-hdr-name-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
    .proj-hdr-name { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .proj-hdr-name-input { font-weight: 700; font-size: 13px; flex: 1; background: var(--surface2); border: 1px solid var(--accent); border-radius: 4px; color: var(--text); padding: 2px 6px; font-family: inherit; outline: none; min-width: 0; }
    .proj-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 13px; padding: 3px 5px; border-radius: 4px; transition: all .12s; flex-shrink: 0; }
    .proj-icon-btn:hover { background: var(--surface2); color: var(--text); }
    .proj-icon-btn.active { color: var(--accent); }

    /* Project panel — redesigned */
    .proj-panel {
      display: none; position: fixed; top: var(--top-off,44px); right: 0;
      width: 420px; max-width: 100vw; bottom: 0;
      background: var(--surface); border-left: 1px solid var(--border-soft);
      z-index: 310; flex-direction: column; overflow: hidden;
      box-shadow: var(--shadow-elevated);
    }
    .proj-panel.open { display: flex; }
    .proj-panel-hdr {
      display: flex; align-items: center; padding: 10px 14px;
      border-bottom: 1px solid var(--border-soft); gap: 6px; flex-shrink: 0;
      background: var(--surface);
    }
    .proj-panel-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
    .proj-close-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 18px; padding: 2px 8px;
      border-radius: 6px; transition: all 0.12s; flex-shrink: 0;
      margin-left: auto;
    }
    .proj-close-btn:hover { background: var(--surface2); color: var(--text); }
    .proj-panel-body {
      flex: 1; overflow-y: auto; padding: 0;
      -webkit-overflow-scrolling: touch;
    }
    .proj-panel-desc { font-size: 11px; color: var(--text-faint); margin: 10px 14px 6px; line-height: 1.45; }
    .proj-stats { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 14px 8px; }
    .proj-stat { font-size: 10px; color: var(--text-faint); display: flex; align-items: center; gap: 3px; }
    .proj-stat strong { color: var(--text-muted); }
    .proj-tags-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 0 14px 8px; }
    .proj-actions-bar { padding: 0 14px 10px; border-bottom: 1px solid var(--border-soft); }
    .proj-banner-text { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.45; }
    .proj-run-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
    .proj-run-input { flex: 1; padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text); font-family: 'SF Mono', monospace; font-size: 12px; border-radius: 8px; outline: none; }
    .proj-run-input:focus { border-color: var(--accent); }
    .proj-run-btn { padding: 7px 14px; border: none; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; white-space: nowrap; transition: all 0.15s; background: var(--surface2); color: var(--text); }
    .proj-run-btn:active { transform: scale(0.96); }
    .proj-run-btn.run-btn-green { background: var(--green); color: #fff; }
    .proj-run-btn.run-btn-blue { background: #0e6fad; color: #fff; }
    .proj-run-btn.run-btn-red { background: var(--red); color: #fff; }
    .proj-run-status { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; display: none; }
    .proj-preview-frame { display: none; width: 100%; height: 280px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; }
    .proj-run-output { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; font-size: 10px; font-family: 'SF Mono', monospace; max-height: 180px; overflow-y: auto; white-space: pre-wrap; display: none; }
    .proj-section { border-bottom: 1px solid var(--border-soft); }
    .proj-section summary {
      padding: 10px 14px; font-size: 11px; font-weight: 600;
      color: var(--text-muted); cursor: pointer; user-select: none;
      display: flex; align-items: center; gap: 6px;
      letter-spacing: 0.02em;
    }
    .proj-section summary:hover { color: var(--text); background: var(--surface2); }
    .proj-section .proj-plan-body { padding: 0 14px 10px; font-size: 11px; line-height: 1.6; color: var(--text-muted); }
    .proj-section .proj-notes { width: 100%; box-sizing: border-box; margin: 0 14px 8px; }
    .proj-section .proj-notes-saved { font-size: 9px; color: var(--green); opacity: 0; transition: opacity 0.3s; margin-left: 14px; }
    .proj-section .proj-notes-saved.show { opacity: 1; }
    .proj-section .proj-files-tree { padding: 4px 14px 10px; font-size: 11px; font-family: monospace; line-height: 1.65; color: var(--text-muted); }
    .proj-build-msgs { font-size: 11px; font-family: monospace; max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 0 14px 10px; }
    .proj-panel-ftr { padding: 10px 14px; border-top: 1px solid var(--border-soft); display: flex; gap: 5px; flex-wrap: wrap; }
    .proj-ftr-btn { padding: 5px 10px; border: 1px solid var(--border-soft); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 6px; white-space: nowrap; transition: all 0.12s; flex: 1; text-align: center; }
    .proj-ftr-btn:hover { background: var(--surface); border-color: var(--border); }
    .proj-ftr-danger { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
    .proj-stats { display: flex; gap: 12px; flex-wrap: wrap; }
    .proj-stat  { font-size: 10px; color: var(--text-faint); display: flex; align-items: center; gap: 3px; }
    .proj-stat strong { color: var(--text-muted); }
    .proj-tags-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .proj-tag {
      font-size: 10px; padding: 2px 8px; border-radius: 10px;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      color: var(--accent); cursor: pointer; transition: all .12s; user-select: none;
      display: flex; align-items: center; gap: 3px;
    }
    .proj-tag:hover { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: var(--red); color: var(--red); }
    .proj-tag-input {
      font-size: 10px; padding: 2px 8px; border-radius: 10px; width: 80px;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      font-family: inherit; outline: none; transition: border-color .12s;
    }
    .proj-tag-input:focus { border-color: var(--accent); }
    .proj-add-tag-btn { font-size: 10px; color: var(--text-faint); background: none; border: 1px dashed var(--border); padding: 2px 8px; border-radius: 10px; cursor: pointer; transition: all .12s; }
    .proj-add-tag-btn:hover { border-color: var(--accent); color: var(--accent); }
    .proj-notes {
      width: 100%; box-sizing: border-box; font-size: 11px; font-family: inherit; resize: vertical;
      background: var(--surface2); border: 1px solid var(--border-soft); border-radius: 5px;
      color: var(--text); padding: 7px 10px; min-height: 72px; outline: none;
      transition: border-color .12s; line-height: 1.55;
    }
    .proj-notes:focus { border-color: var(--accent); }
    .proj-notes-saved { font-size: 9px; color: var(--green); opacity: 0; transition: opacity .3s; }
    .proj-notes-saved.show { opacity: 1; }
    .proj-files-tree { font-size: 11px; font-family: monospace; line-height: 1.65; color: var(--text-muted); }
    .proj-files-dir  { color: var(--text-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 5px; }
    .proj-file-row   { display: flex; align-items: center; gap: 5px; padding: 1px 0; cursor: pointer; }
    .proj-file-row:hover { color: var(--text); }
    .proj-file-ext   { font-size: 9px; padding: 0 4px; border-radius: 3px; font-family: inherit; flex-shrink: 0; }
    .ext-js, .ext-ts, .ext-mjs, .ext-cjs { background: rgba(255,215,0,.15); color: #e3c000; }
    .ext-py   { background: rgba(60,180,100,.15); color: #3cb464; }
    .ext-html { background: rgba(255,120,60,.15); color: #e06030; }
    .ext-css, .ext-scss { background: rgba(60,120,255,.15); color: #5090f0; }
    .ext-json, .ext-yaml, .ext-yml, .ext-toml { background: rgba(180,60,255,.15); color: #b44aee; }
    .ext-md   { background: rgba(100,200,255,.15); color: #4ab4ee; }
    .ext-sh, .ext-bash { background: rgba(255,100,100,.15); color: #ee5050; }
    .ext-go, .ext-rs, .ext-java, .ext-kt { background: rgba(100,220,180,.15); color: #30c098; }
    .badge-research { background: var(--green); color: white; }
    .agent-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .status-online { background: var(--green); }
    .status-thinking { background: var(--yellow); animation: blink 0.8s infinite; }
    .status-queued { background: var(--yellow); animation: blink 0.4s infinite; }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:0.3} }
    /* On desktop the wrapper is transparent (name + model behave as direct
       flex children, inline); on mobile it becomes a vertical stack. */
    .agent-id-text { display: contents; }
    .agent-model-tag {
      font-size: 9px; color: var(--text-faint);
      /* Shrinkable: the agent NAME wins the space fight, the model tag gives way */
      padding: 0; flex: 0 1 auto; min-width: 0;
      max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      background: none; border: none; border-radius: 0;
    }
    .sidebar-item[data-agent-id] .item-name { min-width: 96px; }
    .swarm-group-header {
      display: flex; align-items: center; justify-content: space-between; gap: 6px;
      margin: 4px 6px 1px; padding: 5px 10px; cursor: pointer;
      font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-radius: 8px;
      border: none;
    }
    .swarm-group-header:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
    .swarm-caret { font-size: 9px; transition: transform 0.15s ease; flex: 0 0 auto; }
    .swarm-group-header.collapsed .swarm-caret { transform: rotate(-90deg); }
    .swarm-name { flex: 1 1 auto; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .swarm-count { font-weight: 600; color: var(--text-faint); background: var(--surface2); border-radius: 8px; padding: 0 6px; }
    .sidebar-item.swarm-member { padding-left: 16px; }
    /* Online / offline AI chooser shown in the Swarm and New Project modals */
    .ai-mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    /* Swarm quick templates */
    .swarm-quick-tpl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; max-height: 260px; overflow-y: auto; }
    .swarm-tpl-btn {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 10px 6px; background: var(--surface2); border: 1px solid var(--border-soft);
      border-radius: 10px; cursor: pointer; text-align: center; font-family: inherit;
      transition: all 0.12s;
    }
    .swarm-tpl-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
    .swarm-tpl-icon { font-size: 20px; }
    .swarm-tpl-name { font-size: 11px; font-weight: 600; color: var(--text); }
    .swarm-tpl-agents { font-size: 9px; color: var(--text-faint); }
    @media (max-width: 768px) { .swarm-quick-tpl { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 480px) { .swarm-quick-tpl { grid-template-columns: repeat(2, 1fr); } }
    .ai-mode-opt {
      background: var(--surface2); border: 1px solid var(--border); color: var(--text);
      padding: 8px 10px; border-radius: 6px; cursor: pointer; text-align: left;
      display: flex; flex-direction: column; gap: 2px; transition: border-color .15s;
      font-family: inherit;
    }
    .ai-mode-opt:hover { border-color: var(--accent); }
    .ai-mode-opt.selected { border-color: var(--accent); }
    .ai-mode-opt .ai-mode-title { font-weight: 600; font-size: 12px; }
    .ai-mode-opt.selected .ai-mode-title { color: var(--accent); }
    .ai-mode-opt .ai-mode-desc { font-size: 9px; color: var(--text-faint); line-height: 1.3; }
    .item-delete-btn {
      background: none; border: none; color: var(--text-faint); cursor: pointer;
      font-size: 11px; opacity: 0; padding: 2px; margin-left: auto;
    }
    .sidebar-item:hover .item-delete-btn,
    .tree-item:hover .item-delete-btn,
    .swarm-group-header:hover .item-delete-btn { opacity: 1; }
    .item-delete-btn:hover { color: var(--red); }
    .swarm-group-header .item-delete-btn { margin-left: 0; }
    .swarm-add-btn {
      background: none; border: none; color: var(--accent); cursor: pointer;
      font-size: 11px; opacity: 0; padding: 2px; flex: 0 0 auto; line-height: 1;
    }
    .swarm-group-header:hover .swarm-add-btn { opacity: 1; }
    .swarm-add-btn:hover { color: var(--text); }
    .item-edit-btn {
      background: none; border: none; color: var(--text-faint); cursor: pointer;
      font-size: 11px; opacity: 0; padding: 2px; margin-left: auto;
    }
    .sidebar-item:hover .item-edit-btn { opacity: 1; }
    .item-edit-btn:hover { color: var(--accent); }

    /* ── CHAT ── */
    .chat-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); min-width: 0; transition: flex-basis 0.3s cubic-bezier(0.33, 0, 0.25, 1); will-change: auto; }
    .chat-header {
      height: 46px; border-bottom: 1px solid var(--border-soft);
      display: flex; align-items: center; padding: 0 20px; gap: 6px; flex-shrink: 0;
      background: var(--bg);
    }
    .chat-title {
      font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--text);
    }
    .chat-suffix {
      font-size: 11px; color: var(--text-faint); font-weight: 500;
      padding: 2px 6px; border-radius: 6px;
      background: color-mix(in srgb, var(--surface2) 70%, transparent);
    }
    .chat-suffix:empty { display: none; }
    .chat-header-spacer { flex: 1; }
    .channel-ctrl-btn {
      background: none; border: none; color: var(--text-faint);
      padding: 5px 11px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px;
      transition: all 0.15s ease;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: -0.01em;
    }
    .channel-ctrl-btn:hover { background: var(--surface2); color: var(--text); }
    .channel-ctrl-btn:active { transform: scale(0.96); }
    /* GROUND active: accent tint */
    .channel-ctrl-btn.active {
      background: color-mix(in srgb, var(--yellow) 14%, transparent);
      color: var(--yellow); font-weight: 700;
    }
    /* STOP: danger semantics on hover */
    #stopBtn:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }

    /* ── MESSAGES ── */
    .messages-area {
      flex: 1; overflow-y: auto; padding: 20px 20px 12px;
      display: flex; flex-direction: column; gap: 2px; background: var(--bg);
      scroll-behavior: smooth;
    }
    /* ── Message animations ───────────────────────────────────────────── */
    @keyframes msgIn {
      from { opacity: 0; transform: translateY(6px) scale(0.99); }
      to   { opacity: 1; transform: none; }
    }
    .msg-group { margin: 0 auto 20px; max-width: 820px; width: 100%; }
    .msg-group.animate { animation: msgIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
    @media (hover: hover) {
      .msg-group {
        transition: background 0.12s;
        border-radius: 12px;
        padding: 2px 4px;
        margin-left: -4px; margin-right: -4px;
      }
      .msg-group:hover { background: color-mix(in srgb, var(--text) 2%, transparent); }
    }

    /* ── Message layout ───────────────────────────────────────────────── */
    .msg-row { display: flex; gap: 12px; padding: 2px 0; position: relative; }

    /* Date separator */
    .msg-date-sep {
      display: flex; align-items: center; gap: 12px;
      font-size: 11px; color: var(--text-faint); font-weight: 600;
      padding: 16px 4px 8px; user-select: none;
      letter-spacing: 0.05em; text-transform: uppercase;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    }
    .msg-date-sep::before, .msg-date-sep::after {
      content: ''; flex: 1; height: 1px;
      background: var(--border-soft);
    }
    .msg-date-sep:first-child { padding-top: 4px; }

    /* Human messages: right-aligned bubble */
    .msg-row.human-row { flex-direction: row-reverse; }
    .msg-row.human-row .msg-body { align-items: flex-end; display: flex; flex-direction: column; }
    .msg-row.human-row .msg-header { flex-direction: row-reverse; }
    .msg-row.human-row .msg-text {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 20px 20px 5px 20px;
      padding: 11px 18px;
      max-width: 78%;
      box-shadow: 0 2px 8px rgba(0,122,255,0.22), 0 1px 2px rgba(0,0,0,0.06);
      font-size: 15px;
    }
    .msg-row.human-row .msg-actions { flex-direction: row-reverse; }
    .msg-row.human-row .msg-sender { color: rgba(255,255,255,0.85); }
    .msg-row.human-row .msg-time { color: rgba(255,255,255,0.55); }

    /* ── Avatars ─────────────────────────────────────────────────────── */
    .msg-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 16px; flex-shrink: 0; align-self: flex-start;
      border: none;
      background: color-mix(in srgb, var(--accent) 14%, var(--surface));
      color: var(--accent);
      box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
      transition: transform 0.18s ease;
    }
    .msg-avatar.system { background: var(--surface2); color: var(--text-faint); box-shadow: none; }

    /* ── Message body ────────────────────────────────────────────────── */
    .msg-body { flex: 1; min-width: 0; }
    .msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
    .msg-sender { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
    .msg-sender.system { color: var(--text-muted); font-weight: 500; }
    .msg-time {
      font-size: 10px; color: var(--text-faint);
      opacity: 0; transition: opacity 0.15s;
    }
    .msg-row:hover .msg-time,
    .msg-row:focus-within .msg-time { opacity: 1; }
    .msg-depth { font-size: 9px; padding: 1px 5px; border-radius: 8px; background: var(--surface2); color: var(--text-faint); }
    .msg-text {
      font-size: 15px;
      line-height: 1.55;
      word-break: break-word;
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .msg-text.system-text { color: var(--text-muted); font-style: italic; font-size: 13px; border-left: 2px solid var(--border-soft); padding-left: 10px; margin-left: 2px; }
    .msg-text.deleted { color: var(--text-faint); font-style: italic; }

    /* Delivery status indicator */
    .msg-status {
      display: inline-flex; align-items: center; margin: 2px 0 0 4px;
      color: var(--text-faint); opacity: 0.6; flex-shrink: 0;
    }
    .msg-status.pending { color: var(--yellow); animation: statusPulse 1.5s ease-in-out infinite; }
    @keyframes statusPulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }

    /* Hover timestamp */
    .msg-hover-ts {
      font-size: 9px; color: var(--text-faint); opacity: 0;
      transition: opacity 0.15s; margin-left: 6px; white-space: nowrap;
    }
    .msg-row:hover .msg-hover-ts { opacity: 0.6; }

    /* ── Agent message card ──────────────────────────────────────────── */
    .msg-row:not(.human-row) .msg-text:not(.system-text):not(.deleted) {
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: 4px 18px 18px 18px;
      padding: 13px 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--border-soft) 80%, transparent);
      line-height: 1.6;
    }
    body.dark .msg-row:not(.human-row) .msg-text:not(.system-text):not(.deleted),
    [data-theme="dark"] .msg-row:not(.human-row) .msg-text:not(.system-text):not(.deleted) {
      background: var(--surface2);
      border-color: var(--border);
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    /* ── hr inside messages ──────────────────────────────────────────── */
    .msg-text hr {
      border: none;
      border-top: 1px solid var(--border-soft);
      margin: 10px 0;
      opacity: 0.7;
    }

    /* ── Reasoning (foldable chain-of-thought) ───────────────────────── */
    .think-block {
      margin: 0 0 8px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--accent) 5%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
      overflow: hidden;
    }
    .think-summary {
      cursor: pointer; list-style: none; user-select: none;
      font-size: 12px; color: var(--text-muted); padding: 7px 12px;
      display: flex; align-items: center; gap: 6px;
      border-radius: 10px; transition: background .15s, color .15s;
      font-weight: 500;
    }
    .think-summary::-webkit-details-marker { display: none; }
    .think-summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
    .think-block[open] .think-summary::before { transform: rotate(90deg); }
    .think-summary:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .think-body {
      font-size: 13px; line-height: 1.55; color: var(--text-muted);
      padding: 0 12px 10px; opacity: .9;
    }
    .think-body p { margin: 4px 0; }
    .thinking-indicator { color: var(--text-faint); font-size: 13px; font-style: italic; display: inline-flex; gap: 5px; align-items: center; }
    .thinking-indicator .td { animation: thinkPulse 1.2s infinite; }
    .thinking-indicator .td:nth-child(2) { animation-delay: .2s; }
    .thinking-indicator .td:nth-child(3) { animation-delay: .4s; }
    @keyframes thinkPulse { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }

    /* ── Markdown ────────────────────────────────────────────────────── */
    .msg-text h1,.msg-text h2,.msg-text h3 {
      margin: 14px 0 5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
    }
    .msg-text h1 { font-size: 1.18em; }
    .msg-text h2 { font-size: 1.08em; }
    .msg-text h3 { font-size: 1em; color: var(--text-muted); }
    .msg-text h1:first-child,.msg-text h2:first-child,.msg-text h3:first-child { margin-top: 2px; }
    .msg-text strong { font-weight: 700; }
    .msg-text em { font-style: italic; }
    .msg-text del { opacity: 0.55; text-decoration: line-through; }
    .msg-text code {
      background: color-mix(in srgb, var(--accent) 7%, var(--surface2));
      border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border-soft));
      padding: 1px 6px; border-radius: 5px;
      font-size: 0.85em; font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
      color: color-mix(in srgb, var(--accent) 65%, var(--text));
    }
    .msg-row.human-row .msg-text code {
      background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); color: #fff;
    }
    .msg-text ul,.msg-text ol { margin: 6px 0 6px 24px; }
    .msg-text li { margin: 4px 0; line-height: 1.55; }
    .msg-text a {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
      transition: border-color 0.12s, color 0.12s;
    }
    .msg-text a:hover {
      color: var(--color-accent-hover, var(--accent));
      border-bottom-color: var(--accent);
    }
    /* Action links (👁 abrir / ⬇ descargar en entregas) render as pill buttons */
    .msg-text a.link-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 12px; margin: 2px 4px 2px 0;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: 999px;
      font-size: 12.5px; font-weight: 600; text-decoration: none;
    }
    .msg-text a.link-btn:hover {
      background: color-mix(in srgb, var(--accent) 20%, transparent);
      border-color: var(--accent);
    }
    .empty-channel-hint {
      padding: 15vh 24px 0; text-align: center;
      color: var(--text-faint); font-size: 15px; line-height: 1.9;
    }
    .empty-channel-hint span { font-size: 12.5px; }
    .msg-text table {
      border-collapse: collapse; margin: 10px 0; font-size: 13.5px;
      min-width: 100%; display: block; overflow-x: auto;
    }
    /* min-width per cell: without it, narrow viewports squeeze columns to one
       character per line instead of letting the table scroll horizontally */
    .msg-text th,.msg-text td { border: 1px solid var(--border-soft); padding: 7px 12px; min-width: 84px; }
    .msg-text th { background: var(--surface2); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
    .msg-text tr:nth-child(even) td { background: color-mix(in srgb, var(--surface2) 40%, transparent); }
    .msg-text blockquote {
      border-left: 3px solid var(--accent); padding: 2px 0 2px 14px;
      color: var(--text-muted); margin: 8px 0; font-style: italic;
    }

    /* ── Code blocks with copy button ───────────────────────────────── */
    .msg-text .code-block-wrap { position: relative; margin: 8px 0; }
    .msg-text .code-block-wrap pre {
      margin: 0; padding: 14px 16px; overflow-x: auto;
      font-size: 13px; line-height: 1.6;
      border-radius: 12px; border: 1px solid var(--code-border, #30363d);
    }
    .msg-text .code-lang-tag {
      position: absolute; top: 6px; left: 12px;
      font-size: 10px; color: var(--code-meta, #8b949e); font-weight: 600; pointer-events: none;
    }
    .msg-text .code-copy-btn {
      position: absolute; top: 5px; right: 8px;
      background: var(--code-btn-bg, #30363d); border: 1px solid var(--code-btn-border, #484f58); color: var(--code-btn-text, #c9d1d9);
      border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer;
      opacity: 0; transition: opacity 0.15s;
    }
    .msg-text .code-block-wrap:hover .code-copy-btn { opacity: 1; }
    @media (hover: none) { .msg-text .code-copy-btn { opacity: 1; } }
    .msg-text .code-copy-btn.copied { background: var(--code-copied-bg,#1a4731); border-color: var(--code-copied-border,#2ea043); color: var(--code-copied-text,#3fb950); }
    /* Light mode code overrides */
    :root { --code-border:#d0d7de; --code-meta:#57606a; --code-btn-bg:#e6edf3; --code-btn-border:#d0d7de; --code-btn-text:#24292f; --code-copied-bg:#dafbe1; --code-copied-border:#2da44e; --code-copied-text:#1a7f37; }
    body.dark, [data-theme="dark"] { --code-border:#30363d; --code-meta:#8b949e; --code-btn-bg:#30363d; --code-btn-border:#484f58; --code-btn-text:#c9d1d9; --code-copied-bg:#1a4731; --code-copied-border:#2ea043; --code-copied-text:#3fb950; }

    .mention { background: var(--accent-bg); color: var(--accent); border-radius: 3px; padding: 0 3px; font-weight: 600; }
    .stream-cursor::after { content: '▋'; animation: blink 0.7s infinite; color: var(--accent); }
    .msg-actions { display: none; gap: 4px; margin-top: 4px; }
    .msg-row:hover .msg-actions,
    .msg-row:focus-within .msg-actions { display: flex; }
    @media (hover: none) {
      .msg-actions { display: none; }
      .msg-row.touch-sel .msg-actions { display: flex; }
    }
    .msg-action-btn {
      background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-muted);
      padding: 4px 10px; font-size: 11px; cursor: pointer; border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: all 0.12s;
      display: inline-flex; align-items: center; gap: 4px;
      font-weight: 500;
    }
    .msg-action-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
    .msg-action-btn.del:hover { background: var(--red); color: white; border-color: var(--red); }
    .msg-action-btn.feedback-btn.active { background: var(--green); color: white; border-color: var(--green); pointer-events: none; }
    .msg-action-btn.feedback-btn[data-fb="bad"].active { background: var(--red); color: white; border-color: var(--red); }
    .reply-hint { font-size: 11px; color: var(--accent); cursor: pointer; margin-top: 3px; display: inline-block; }
    .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .reaction-pill { font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; cursor: default; }
    .reply-hint:hover { text-decoration: underline; }

    /* New-messages-above badge */
    #newMsgBadge { display:none; position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; border:none; border-radius:20px; padding:8px 20px; font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; font-size:13px; font-weight:600; cursor:pointer; z-index:50; box-shadow: 0 4px 14px rgba(0,0,0,0.18); white-space:nowrap; transition: all 0.15s; letter-spacing: -0.01em; }
    #newMsgBadge:hover { opacity:0.9; transform:translateX(-50%) scale(1.03); }
    /* Load-more button at top of message list */
    .load-more-btn { text-align:center; padding:10px; font-size:12px; color:var(--accent); cursor:pointer; border-bottom:1px solid var(--border-soft); margin-bottom:4px; font-weight: 600; }
    .slash-list {
      position: absolute; bottom: 100%; left: 0; background: var(--surface); border: 1px solid var(--border-soft);
      border-radius: 14px; list-style: none; padding: 6px; max-height: 220px; overflow-y: auto;
      z-index: 500; box-shadow: var(--shadow-elevated); min-width: 240px;
    }
    .slash-list li { padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 10px; display: flex; gap: 8px; transition: background 0.12s; }
    .slash-list li:hover { background: var(--surface2); }
    .slash-cmd { font-weight: 600; }
    .slash-desc { color: var(--text-faint); font-size: 11px; align-self: center; }

    /* ── INPUT ── */
    .input-area {
      border-top: 1px solid var(--border-soft);
      padding: 8px 12px max(10px, env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--bg) 90%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      display: flex; flex-direction: column; gap: 5px;
      flex-shrink: 0;
      transition: padding-bottom 0.3s cubic-bezier(0.33, 0, 0.25, 1), transform 0.3s cubic-bezier(0.33, 0, 0.25, 1);
      will-change: padding-bottom;
    }
    .file-chips-row {
      display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px;
    }
    .file-chips-row:empty { display: none; }
    .input-row {
      display: flex; align-items: flex-end; gap: 0; position: relative;
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: 26px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
      padding: 4px 4px 4px 4px;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .input-row:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    }
    .msg-input {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--text);
      padding: 9px 8px 9px 2px;
      font-size: 15px;
      resize: none;
      outline: none;
      border-radius: 0;
      line-height: 1.4;
      min-height: 38px;
      max-height: 140px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      box-shadow: none;
    }
    .msg-input:focus { border-color: transparent; box-shadow: none; }
    .send-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      width: 36px;
      height: 36px;
      min-width: 36px;
      padding: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      cursor: pointer;
      border-radius: 50%;
      flex-shrink: 0;
      align-self: flex-end;
      margin-bottom: 0;
      transition: all 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .send-btn:hover { opacity: 0.88; transform: scale(1.05); }
    .send-btn:active { transform: scale(0.93); opacity: 0.8; }
    .input-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .file-btn {
      background: none; border: none; color: var(--text-faint); cursor: pointer;
      font-size: 14px; padding: 0;
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; align-self: flex-end;
      transition: background 0.15s, color 0.15s;
    }
    .file-btn:hover { background: var(--surface2); color: var(--accent); }
    .file-chip {
      background: var(--surface2); border: 1px solid var(--border-soft); border-radius: 12px;
      padding: 2px 8px; font-size: 11px; display: inline-flex; align-items: center; gap: 5px;
    }
    .file-chip-close { cursor: pointer; color: var(--text-faint); }
    .file-chip-close:hover { color: var(--red); }
    .img-preview-thumb { height:48px; width:48px; object-fit:cover; border-radius:6px; border:1px solid var(--border-soft); }
    .img-chip { display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border-soft); border-radius:8px; padding:3px 8px; }
    .msg-image { max-width:320px; max-height:240px; border-radius:8px; border:1px solid var(--border-soft); cursor:pointer; display:block; margin:4px 0; object-fit:contain; }
    .msg-image:hover { opacity:0.9; }
    #imgLightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; }
    #imgLightbox.open { display:flex; }
    #imgLightbox img { max-width:90vw; max-height:90vh; border-radius:8px; object-fit:contain; }
    #imgLightboxClose { position:absolute; top:16px; right:20px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:20px; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
    #imgLightboxClose:hover { background:rgba(255,255,255,0.3); }

    /* ── THREAD PANEL ── */
    .thread-panel {
      width: 300px; background: var(--bg); border-left: 1px solid var(--border-soft);
      display: none; flex-direction: column; flex-shrink: 0;
    }
    .thread-panel.open { display: flex; }
    .thread-panel-header {
      height: 44px; border-bottom: 1px solid var(--border-soft);
      display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 13px; gap: 8px;
      letter-spacing: -0.01em;
    }
    .panel-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; margin-left: auto; }
    .panel-close:hover { color: var(--text); }
    .thread-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; scroll-padding-bottom: 60px; }
    .thread-input-area { border-top: 1px solid var(--border-soft); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .thread-textarea { width: 100%; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); padding: 6px 8px; font-family: inherit; font-size: 12px; resize: none; border-radius: 4px; outline: none; }
    .thread-textarea:focus { border-color: var(--accent); }
    .thread-reply-btn { background: var(--text); color: var(--bg); border: none; padding: 5px 12px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 3px; align-self: flex-end; }

    /* ── WORKSPACE PANEL ── */
    .workspace-panel {
      width: 360px; background: var(--surface); border-left: 1px solid var(--border-soft);
      display: none; flex-direction: column; flex-shrink: 0; overflow: hidden;
      box-shadow: var(--shadow-elevated);
    }
    .workspace-panel.open { display: flex; }
    .workspace-panel-header {
      height: 44px; border-bottom: 1px solid var(--border-soft);
      display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; gap: 8px; background: var(--surface); flex-shrink: 0;
    }
    .workspace-load-row { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; }
    .workspace-path-input { flex: 1; background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text); padding: 7px 10px; font-family: inherit; font-size: 12px; border-radius: 8px; outline: none; }
    .workspace-path-input:focus { border-color: var(--accent); }
    .workspace-load-btn { background: var(--text); color: var(--bg); border: none; padding: 6px 12px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; white-space: nowrap; transition: all 0.15s; }
    .workspace-load-btn:active { transform: scale(0.96); }
    .workspace-tabs { display: flex; border-bottom: 1px solid var(--border-soft); background: var(--surface); flex-shrink: 0; }
    .workspace-tab { padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
    .workspace-tab.active { color: var(--accent); border-color: var(--accent); }
    .workspace-tab:hover { color: var(--text); }
    .workspace-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
    .workspace-pane { display: none; flex: 1; overflow: auto; scroll-padding-bottom: 60px; }
    .workspace-pane.active { display: flex; flex-direction: column; }
    .file-tree { padding: 6px; }
    .tree-item { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap; }
    .tree-item:hover { background: var(--surface2); }
    .tree-item.selected { background: var(--accent-bg); color: var(--accent); }
    .tree-item .tree-icon { font-size: 11px; flex-shrink: 0; color: var(--text-faint); }
    .tree-item.dir > .tree-icon { color: var(--yellow); }
    .item-dl-btn { opacity: 0; transition: opacity .12s; }
    .tree-item:hover .item-dl-btn { opacity: 0.7; }
    .item-dl-btn:hover { opacity: 1 !important; }
    .tree-mtime { font-size: 9px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; opacity: 0.75; padding-right: 2px; }
    .ws-check-wrap { display: none; align-items: center; margin-right: 2px; flex-shrink: 0; }
    #pane-files.select-mode .ws-check-wrap { display: inline-flex; }
    .ws-cb { width: 11px; height: 11px; cursor: pointer; accent-color: var(--accent); }
    .ws-bulk-bar { display: none; padding: 4px 8px; background: var(--surface2); border-bottom: 1px solid var(--border); align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; }
    .ws-bulk-bar.visible { display: flex; }
    .ws-bulk-delete-btn { background: var(--red,#e53e3e); color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
    #wsSelectBtn.active { background: var(--accent) !important; color: #fff !important; }
    .ws-file-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 600; cursor: pointer; color: var(--accent,#7c6af7); vertical-align: middle; margin-left: 4px; line-height: 1.4; white-space: nowrap; font-family: inherit; }
    .ws-file-chip:hover { background: var(--accent,#7c6af7); color: #fff; border-color: var(--accent,#7c6af7); }

    /* Touch devices: always show tree item buttons */
    @media (hover: none) {
      .tree-item .item-delete-btn,
      .tree-item .item-dl-btn { opacity: 0.5; }
    }
    .tree-children { padding-left: 14px; }
    .file-viewer-header { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--bg); }
    .file-viewer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
    .file-save-btn { background: var(--green); color: white; border: none; padding: 3px 8px; font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer; border-radius: 3px; }
    .file-editor { width: 100%; min-height: 100%; background: var(--color-code-bg); color: var(--color-code-text); border: none; padding: 10px 12px; font-family: inherit; font-size: 11px; line-height: 1.6; resize: none; outline: none; }
    .no-file-msg { padding: 20px; color: var(--text-faint); font-size: 12px; text-align: center; }
    .git-pane { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
    .git-btn { background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text); padding: 5px 10px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 3px; text-align: left; }
    .git-btn:hover { border-color: var(--accent); color: var(--accent); }
    .git-output { background: var(--color-code-bg); color: var(--color-code-text); padding: 8px 10px; font-size: 10px; line-height: 1.5; border-radius: 4px; white-space: pre-wrap; word-break: break-all; min-height: 60px; max-height: 200px; overflow-y: auto; }
    .git-commit-input { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); padding: 5px 8px; font-family: inherit; font-size: 11px; border-radius: 3px; outline: none; width: 100%; }
    .git-commit-input:focus { border-color: var(--accent); }

    /* ── MODALS ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1000; align-items: center; justify-content: center;
      padding: 20px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: top 0.3s cubic-bezier(0.33,0,0.25,1), height 0.3s cubic-bezier(0.33,0,0.25,1);
    }
    .modal-overlay.open { display: flex; animation: overlayIn 0.2s ease; }
    @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
    .modal {
      background: var(--surface); border: 1px solid var(--border-soft);
      width: 100%; max-width: 520px; max-height: 90vh;
      display: flex; flex-direction: column;
      box-shadow: var(--shadow-elevated); border-radius: 20px; overflow: hidden;
      animation: modalIn 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: max-height 0.3s cubic-bezier(0.33,0,0.25,1);
    }
    @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
    .modal-header {
      padding: 18px 20px 16px; border-bottom: 1px solid var(--border-soft);
      font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
      color: var(--text);
    }
    .modal-header i { color: var(--accent); font-size: 15px; }
    .modal-close {
      background: none; border: none; cursor: pointer; color: var(--text-faint);
      font-size: 14px; margin-left: auto; width: 30px; height: 30px;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
    }
    .modal-close:hover { background: var(--surface2); color: var(--text); }
    .modal-body {
      padding: 20px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 16px;
      scroll-padding-bottom: 24px;
      -webkit-overflow-scrolling: touch;
    }
    /* All scrollable containers that hold form inputs */
    #interviewPanel, #swarmDesignPanel, #projectPanel, .workspace-content,
    #autoModal .modal-body, .thread-messages, .workspace-pane {
      scroll-padding-bottom: 80px;
      -webkit-overflow-scrolling: touch;
    }
    .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-shrink: 0; }
    kbd {
      display: inline-block; padding: 1px 6px; font-family: monospace; font-size: 11px;
      background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
      min-width: 22px; text-align: center; margin-right: 4px;
    }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
      color: var(--text-faint); text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
    }
    .form-input,.form-select,.form-textarea {
      background: color-mix(in srgb, var(--surface2) 50%, var(--surface));
      border: 1px solid var(--border-soft); color: var(--text);
      padding: 9px 12px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      font-size: 14px; border-radius: 10px; outline: none; width: 100%;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .form-input:focus,.form-select:focus,.form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
    /* Style the dropdown options explicitly — otherwise the native popup renders
       light text on the OS's light background in dark mode (invisible options). */
    .form-select option, select.provider-key-input option, select.quick-switcher-input option { background: var(--surface); color: var(--text); }
    /* Custom select — works in embedded webviews (e.g. VSCode's browser) where the
       native <select> popup won't open on click. The real <select> stays in the DOM
       (hidden) as the source of truth, so .value keeps working everywhere. */
    .cs-wrap { position: relative; width: 100%; }
    .cs-wrap > select.cs-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
    .cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
    .cs-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cs-trigger::after { content: '▾'; color: var(--text-muted); flex-shrink: 0; }
    .cs-wrap.open .cs-trigger::after { content: '▴'; }
    .cs-panel { display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 3px; z-index: 1100; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
    .cs-wrap.open .cs-panel { display: block; }
    .cs-item { padding: 7px 10px; font-size: 12px; cursor: pointer; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cs-item:hover { background: var(--surface2); }
    .cs-item.sel { background: var(--accent-bg); color: var(--accent); }
    .cs-item.disabled { color: var(--text-faint); cursor: default; }
    .form-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
    .form-notes-hint { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
    .agent-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
    .agent-type-grid { max-height: 260px; overflow-y: auto; }
    .agent-type-group-label {
      grid-column: 1 / -1; font-size: 9px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-faint);
      padding: 8px 2px 3px; border-bottom: 1px solid var(--border-soft); margin-bottom: 1px;
    }
    .agent-type-card {
      border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 6px;
      cursor: pointer; text-align: center; transition: all 0.15s;
      background: color-mix(in srgb, var(--surface2) 30%, var(--surface));
    }
    .agent-type-card:hover {
      border-color: var(--accent); background: var(--accent-bg);
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.07);
    }
    .agent-type-card.selected {
      border-color: var(--accent); background: var(--accent); color: #fff;
      box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
    }
    .agent-type-card.selected .type-name { color: #fff; }
    .agent-type-card.selected .type-desc { color: rgba(255,255,255,0.7); }
    .type-icon { font-size: 20px; margin-bottom: 4px; }
    .type-name { font-size: 10px; font-weight: 700; }
    .type-desc { font-size: 9px; color: var(--text-faint); margin-top: 2px; }
    .channel-checks { display: flex; flex-wrap: wrap; gap: 6px; }
    .channel-check-label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--border-soft); padding: 4px 10px; border-radius: 14px; transition: all 0.15s; }
    .channel-check-label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
    .channel-check-label input { display: none; }
    .provider-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .provider-pill { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; background: var(--surface); }
    .provider-pill:hover { border-color: var(--accent); background: var(--accent-bg); }
    .provider-pill.selected { border-color: var(--accent); background: var(--accent); color: #fff; }
    .provider-pill.unavailable { opacity: 0.4; }
    .provider-dot { width: 6px; height: 6px; border-radius: 50%; }
    .provider-dot.ok { background: var(--green); }
    .provider-dot.nope { background: var(--text-faint); }
    .provider-section { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; padding: 10px 2px 0; }
    .provider-config-card { border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--surface2) 25%, var(--surface)); }
    .provider-config-card.card-accent { border-color: var(--accent); }
    .provider-config-card.card-vision { border-color: #a78bfa; }
    .provider-config-card.card-email { border-color: #f97316; }
    .provider-config-header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
    /* MCP server row header: let the name/badges block shrink and the controls
       (query · ↻ · ✕) wrap to a second line on narrow screens instead of being
       clipped off the right edge. */
    .mcp-toggle { flex-wrap: wrap; row-gap: 6px; }
    .mcp-toggle > span:first-child { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
    .mcp-toggle > span:last-child { flex-shrink: 0; }
    .provider-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
    .provider-status.ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
    .provider-status.nope { background: var(--surface2); color: var(--text-faint); border: 1px solid var(--border-soft); }
    .provider-key-row { display: flex; gap: 6px; }
    .provider-key-input { flex: 1; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text); padding: 7px 10px; font-family: inherit; font-size: 12px; border-radius: 8px; outline: none; transition: border-color 0.15s; }
    .provider-key-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
    .provider-save-btn { background: var(--accent); color: white; border: none; padding: 7px 14px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 8px; white-space: nowrap; transition: opacity 0.15s; }
    .provider-save-btn:hover { opacity: 0.85; }
    .provider-models-hint { font-size: 11px; color: var(--text-faint); line-height: 1.6; }
    #usageResetBtn { background: none; border: 1px solid var(--border-soft); color: var(--text-muted); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
    #usageResetBtn:hover { border-color: var(--accent); color: var(--accent); }
    #applyModelBtn { background: var(--green, #10b981); color: #fff; font-weight: 700; }
    #applyVisionBtn { background: #7c3aed; color: #fff; }
    #smtpSaveBtn { background: #f97316; color: #fff; }
    #smtpTestBtn { background: var(--surface2); color: var(--text); border: 1px solid var(--border-soft); }

    /* ── Overflow safety net ──────────────────────────────────────────────
       Flex children with intrinsic content (selects, inputs, long unbreakable
       strings like model-ids/URLs/keys) default to min-width:auto and refuse
       to shrink, shoving adjacent controls off the row/card edge on narrow
       screens — the LLM-provider "descuadre" class of bug. Make such controls
       shrinkable everywhere inside modals & side panels, let key/control rows
       wrap, and let long token strings break instead of overflowing. */
    .modal select, .modal input, .modal textarea,
    .thread-panel input, .thread-panel select, .thread-panel textarea,
    .workspace-panel input, .workspace-panel select,
    #projectPanel input, #projectPanel select,
    .provider-key-input, .quick-switcher-input { min-width: 0; }
    .provider-key-row { flex-wrap: wrap; }
    /* .modal-body is a flex column that scrolls. A <textarea> defaults to
       overflow:auto, so as a flex item its automatic min-height is 0 (not its
       content) — when the modal's content overflows, flex-shrink squashes the
       textarea to ~1 line and its rows="N" is ignored (e.g. the New Project
       description field rendering tiny). Keep children at natural size and let
       the body scroll instead. */
    .modal-body > * { flex-shrink: 0; }
    .provider-models-hint, .modal-body p { overflow-wrap: anywhere; }
    .modal-body code, .provider-models-hint code,
    .provider-config-header { overflow-wrap: anywhere; word-break: break-word; }

    .btn {
      padding: 8px 18px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
      font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 12px;
      border: none; background: none; color: var(--text-muted);
      transition: all 0.15s ease; letter-spacing: -0.01em;
    }
    .btn:hover { background: var(--surface2); color: var(--text); }
    .btn:active { transform: scale(0.97); }
    .btn-primary { background: var(--accent); color: #fff; font-weight: 700; padding: 9px 22px; }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; }
    .btn-danger { color: var(--red); }
    .btn-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
    /* Small action buttons inside form labels (Generate, .md, workspace) */
    .btn-sm {
      font-size: 10px !important; padding: 2px 8px !important;
      border-radius: 6px !important; border: 1px solid var(--border-soft) !important;
      background: var(--surface2) !important; color: var(--text-muted) !important;
      font-weight: 600;
    }
    .btn-sm:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-bg) !important; }
    .graph-modal { max-width: 820px; }
    canvas#agentGraph { display: block; width: 100%; height: 300px; }
    .graph-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; }
    .error-log-item { font-size: 11px; padding: 8px 10px; background: var(--surface); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; margin-bottom: 4px; }
    .quick-switcher-input { width: 100%; background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text); padding: 12px 16px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; font-size: 15px; border-radius: 12px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; }
    .quick-switcher-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
    .quick-result { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .quick-result:hover, .quick-result.selected { background: var(--surface2); }
    .toast { position: fixed; bottom: 30px; right: 20px; background: var(--text); color: var(--bg); padding: 10px 20px; border-radius: 14px; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(12px); transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: 9999; pointer-events: none; max-width: 320px; box-shadow: var(--shadow-elevated); letter-spacing: -0.01em; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { background: var(--green); color: white; }
    .toast.error { background: var(--red); color: white; }
    .thinking-overlay { position: fixed; bottom: 80px; left: 392px; background: var(--surface); color: var(--text); padding: 8px 16px; border-radius: 16px; font-size: 12px; font-weight: 600; z-index: 500; display: none; white-space: nowrap; box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); letter-spacing: -0.01em; }
    /* Agent progress bar — shows Thinking → Writing → (hidden when done) */
    .agent-progress { display: none; align-items: center; gap: 10px; padding: 6px 16px; background: var(--surface); border-top: 1px solid var(--border-soft); flex-shrink: 0; }
    .agent-progress.active { display: flex; }
    .agent-progress-label { font-size: 11px; font-weight: 700; white-space: nowrap; }
    .agent-progress-track { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; position: relative; }
    .agent-progress-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; }
    /* Indeterminate (thinking): a chunk slides across, we don't know how long the LLM will take. */
    .agent-progress.thinking .agent-progress-label { color: var(--yellow); }
    .agent-progress.thinking .agent-progress-fill { width: 35%; background: var(--yellow); animation: ap-slide 1.1s ease-in-out infinite; }
    /* Writing: green, also sliding (tokens streaming in). */
    .agent-progress.writing .agent-progress-label { color: var(--green); }
    .agent-progress.writing .agent-progress-fill { width: 45%; background: var(--green); animation: ap-slide 0.9s linear infinite; }
    /* Tools: blue, sliding while tools execute */
    .agent-progress.tools .agent-progress-label { color: var(--accent); }
    .agent-progress.tools .agent-progress-fill { width: 40%; background: var(--accent); animation: ap-slide 0.8s linear infinite; }
    @keyframes ap-slide { 0% { left: -45%; } 100% { left: 100%; } }

    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 40%, transparent); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-faint) 60%, transparent); }

    /* ── PWA INSTALL BUTTON ── */
    #installBtn {
      background: color-mix(in srgb, var(--green) 12%, var(--surface2));
      border-color: color-mix(in srgb, var(--green) 40%, transparent);
      color: var(--green);
      animation: installPulse 2.5s ease-in-out 3;
    }
    #installBtn:hover { background: var(--green); color: #fff; border-color: var(--green); }
    @keyframes installPulse {
      0%,100% { box-shadow: none; }
      50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
    }

    /* ── STANDALONE / PWA MODE ── */
    @media (display-mode: standalone) {
      /* Extra drag region at very top on desktop PWA (window-controls-overlay) */
      .topbar { -webkit-app-region: drag; app-region: drag; }
      .topbar button, .topbar a, .topbar input { -webkit-app-region: no-drag; app-region: no-drag; }
    }

    /* ── OFFLINE BANNER ── */
    #offlineBanner {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
      background: var(--yellow); color: #000;
      text-align: center; padding: 7px 12px;
      font-size: 12px; font-weight: 700;
      border-bottom: 1px solid color-mix(in srgb, var(--yellow) 60%, #000);
      display: none;
    }
    body.offline #offlineBanner { display: block; }

    /* Hamburger button + sidebar overlay: hidden on desktop, shown on mobile */
    .mobile-only { display: none; }
    .sidebar-overlay { display: none; }
    /* ═══════════════════════════════════════════════════════════
       MOBILE — phones in BOTH orientations.
       A phone in landscape is wider than 768px, so width alone misses it.
       We match: narrow width (portrait/tablet)  OR  short height + phone-ish
       width (landscape phone). A wide low desktop window is excluded.
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
      /* --top-off: topbar + Dynamic Island / notch inset */
      :root { --top-off: calc(44px + env(safe-area-inset-top)); }

      /* iOS auto-zooms any focused field with font-size < 16px. Force 16px on
         ALL inputs so focusing never triggers a zoom (login, interview, etc.). */
      input, textarea, select { font-size: 16px !important; }

      .mobile-only { display: inline-flex; }

      /* ── Topbar ── */
      .topbar {
        padding: 0 6px; gap: 4px;
        height: var(--top-off); padding-top: env(safe-area-inset-top);
      }
      .topbar-brand { font-size: 12px; letter-spacing: 1px; }
      .brand-name { display: none; } /* show only ⚡ on mobile */
      .topbar-channel { font-size: 11px; padding: 2px 6px; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .topbar-spacer { flex: 1; }

      /* ── ⋯ dropdown: full-width sheet on phone ── */
      .topbar-controls.mobile-open {
        position: fixed; top: var(--top-off); right: 0; left: 0; z-index: 350;
        background: var(--surface); border-bottom: 2px solid var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        max-height: calc(75vh - var(--top-off)); overflow-y: auto;
        border-radius: 0;
      }
      .topbar-controls.mobile-open .tb-btn { padding: 12px 18px; font-size: 13px; }
      /* Hide tb-label text from primary buttons on small screens (icon only in topbar) */
      .tb-label { display: none; }
      .tb-btn { padding: 6px 8px; flex-shrink: 0; }

      /* ── Sidebar: slides in over the chat ── */
      .sidebar {
        position: fixed; top: var(--top-off); left: 0; bottom: 0;
        width: 260px; max-width: 85%;
        transform: translateX(-100%); transition: transform 0.22s ease; z-index: 300;
        box-shadow: 2px 0 20px rgba(0,0,0,0.4);
        /* Last items must clear the home indicator */
        padding-bottom: env(safe-area-inset-bottom);
      }
      .sidebar.open { transform: translateX(0); }
      .sidebar-overlay {
        display: block; position: fixed; top: var(--top-off); left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.55); z-index: 250;
        opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
      }
      .sidebar-overlay.show { opacity: 1; pointer-events: auto; }

      /* ── All side panels: fullscreen on phone ── */
      .workspace-panel,
      .thread-panel.open,
      .proj-panel.open {
        position: fixed !important;
        top: var(--top-off) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; max-width: 100% !important;
        z-index: 320 !important;
      }
      .proj-panel-body {
        padding-bottom: env(safe-area-inset-bottom);
      }
      /* Thread panel reply area clears the home indicator */
      .thread-input-area {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }

      /* Workspace load row: path input on its own line, the buttons grouped
         below — avoids a lone "+ FILE" wrapping awkwardly. */
      .workspace-load-row .workspace-path-input { flex: 1 1 100%; }
      .workspace-load-btn { padding: 7px 12px; }

      /* ── Modals ── */
      .modal { max-width: 96vw; margin: 0 6px; }
      .modal-body { max-height: 58vh; }

      /* ── Messages ── */
      .messages-area { padding: 8px 0 4px; }
      .msg-text { font-size: 15px; line-height: 1.55; }
      .msg-group { max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 14px; padding: 2px 12px; }
      .msg-row.human-row .msg-text { max-width: 84%; padding: 10px 16px; }
      .msg-row:not(.human-row) .msg-text:not(.system-text):not(.deleted) {
        padding: 10px 14px; border-radius: 4px 16px 16px 16px;
      }
      /* Smaller avatar on mobile to give more reading width */
      .msg-avatar { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
      .msg-row { gap: 10px; }
      /* Touch-selected message gets a subtle highlight */
      .msg-row.touch-sel { background: color-mix(in srgb, var(--accent) 4%, transparent); border-radius: 12px; }

      /* ── Input area: thumb-friendly ── */
      .input-area {
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
        gap: 5px;
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
      }
      .file-btn { width: 40px; height: 40px; font-size: 17px; }
      .msg-input { font-size: 16px; min-height: 44px; padding: 11px 8px 11px 2px; line-height: 1.35; }
      .send-btn { width: 40px; height: 40px; min-width: 40px; font-size: 15px; }

      /* ── Touch targets — sidebar items ── */
      /* Base: taller rows for thumb tapping */
      .sidebar-item { padding-top: 10px; padding-bottom: 10px; }
      /* Section headers: more breathing room */
      .sidebar-section-header { padding-top: 18px; padding-bottom: 8px; }
      /* Section add btn: visible always + 44px tap area on touch */
      .section-add-btn {
        width: 44px; height: 44px; border-radius: 22px; font-size: 18px;
        opacity: 0.7;
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        border-color: color-mix(in srgb, var(--accent) 20%, transparent);
        color: var(--accent);
      }
      /* Delete affordance: visible + 44px tap area */
      .item-delete-btn { opacity: 0.45; padding: 15px 10px; font-size: 13px; }
      .item-edit-btn   { opacity: 0.35; padding: 15px 10px; font-size: 12px; }

      /* ── Agent rows: two-line layout (name + model subtitle) ── */
      /* Right padding leaves room for the two absolute-positioned buttons */
      .sidebar-item[data-agent-id] { padding-right: 80px; padding-top: 10px; padding-bottom: 10px; }
      .sidebar-item[data-agent-id] .agent-id-text {
        display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 2px;
      }
      .sidebar-item[data-agent-id] .item-name { line-height: 1.3; font-size: 13px; }
      /* Model subtitle: plain text, no box/border, dimmed */
      .sidebar-item[data-agent-id] .agent-model-tag {
        background: none; border: none; padding: 0;
        font-size: 10px; line-height: 1.2; color: var(--text-faint);
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      /* Absolute-positioned action buttons — generous tap areas */
      .sidebar-item[data-agent-id] .item-delete-btn {
        position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        padding: 15px 10px; font-size: 14px; opacity: 0.45;
      }
      .sidebar-item[data-agent-id] .item-edit-btn {
        position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
        padding: 15px 10px; font-size: 13px; opacity: 0.35;
      }

      /* ── Swarm group headers: more tappable ── */
      .swarm-group-header { padding: 10px 14px; }
      .swarm-add-btn  { opacity: 0.5; padding: 8px 6px; font-size: 13px; }
      .swarm-group-header .item-delete-btn { opacity: 0.4; padding: 8px 6px; font-size: 13px; }

      /* ── Interview form ── */
      #interviewPanel { max-height: 45vh; }
      .interview-chip { padding: 5px 11px; font-size: 11px; }
    }

    /* ═══════════════════════════════════════════════════════════
       LANDSCAPE on phone (short screen ≤ 500px, phone-ish width ≤ 950px).
       Key problem: 44px topbar eats 11% of a 390px-tall screen.
       Fix: shrink topbar to 36px, narrow sidebar, tighten messages.
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 950px) and (max-height: 500px) {
      :root { --top-off: calc(36px + env(safe-area-inset-top)); }

      .topbar {
        height: var(--top-off); padding-top: env(safe-area-inset-top);
        padding: env(safe-area-inset-top) 6px 0;
      }
      .topbar-brand { display: none; }          /* reclaim space */
      .topbar-channel { max-width: 44vw; }

      /* Sidebar narrower so more chat fits side-by-side */
      .sidebar { width: 200px; max-width: 55%; }

      /* Compact input for landscape */
      .send-btn { width: 34px; height: 34px; min-width: 34px; font-size: 13px; }
      .file-btn { width: 34px; height: 34px; font-size: 15px; }
      .msg-input { font-size: 14px; min-height: 36px; }

      /* Tighter messages to show more content */
      .msg-group { padding: 3px 8px; }
      .msg-text { font-size: 12px; line-height: 1.4; }
      .msg-header { font-size: 10px; }

      /* Interview panel compact */
      #interviewPanel { max-height: 55vh; }

      /* ⋯ dropdown: compact in landscape — keep full-width rows but smaller */
      .topbar-controls.mobile-open .tb-btn { font-size: 11px; padding: 9px 14px; }
    }

    /* ── RESPONSIVE ADDITIONS ──────────────────────────────────────────────── */

    /* --top-off default lives in the top :root block (before the media queries)
       so the safe-area-aware overrides above are not clobbered. */

    /* Env-var add form — responsive grid definition */
    .env-var-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-top: 10px; align-items: end; }

    /* ═══════════════════════════════════════════════════════════
       TABLET  769px – 1024px
       iPad portrait / small landscape. Safe-area aware topbar,
       icon-only primary buttons, panels float over chat.
       ═══════════════════════════════════════════════════════════ */
    @media (min-width: 769px) and (max-width: 1024px) {
      /* ── Safe area: iOS clock / notch never overlaps the topbar ── */
      :root { --top-off: calc(44px + env(safe-area-inset-top)); }
      .topbar {
        height: var(--top-off);
        padding-top: env(safe-area-inset-top);
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }

      /* ── Topbar: icon-only buttons save horizontal space ── */
      .tb-label { display: none; }
      .tb-btn { padding: 6px 10px; }

      /* ── Channel pill: cap width so it never crowds the buttons ── */
      .topbar-channel { max-width: 30vw; }

      /* ── ⋯ dropdown: right-side panel anchored to safe topbar ── */
      .topbar-controls.mobile-open {
        position: fixed; top: var(--top-off); right: 0; left: auto; z-index: 350;
        width: 240px;
        background: var(--surface); border: 1px solid var(--border); border-top: none;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        max-height: 70vh; overflow-y: auto;
      }
      .topbar-controls.mobile-open .tb-btn { padding: 10px 16px; font-size: 12px; }

      /* ── Sidebar ── */
      .sidebar {
        width: 200px; min-width: 160px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }
      .agent-model-tag { max-width: 48px; }

      /* ── Workspace panel: float over chat ── */
      .workspace-panel.open {
        position: fixed !important;
        top: var(--top-off) !important; right: 0 !important;
        bottom: 0 !important; left: auto !important;
        width: 380px !important; max-width: 90vw !important;
        z-index: 310 !important; box-shadow: -4px 0 20px rgba(0,0,0,.3);
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }
      /* ── Thread panel: float over chat ── */
      .thread-panel.open {
        position: fixed !important;
        top: var(--top-off) !important; right: 0 !important;
        bottom: 0 !important; left: auto !important;
        width: 320px !important; max-width: 90vw !important;
        z-index: 310 !important; box-shadow: -4px 0 20px rgba(0,0,0,.3);
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }
      /* ── Project panel: full-width overlay ── */
      .proj-panel.open {
        top: var(--top-off) !important; left: 0 !important;
        width: 100% !important; max-width: 100% !important;
      }

      /* ── Thinking overlay: account for narrower sidebar ── */
      .thinking-overlay { left: 212px; }

      /* ── Chat header: touch-friendly ── */
      .chat-header { padding: 0 10px; gap: 6px; }
      .channel-ctrl-btn { padding: 4px 8px; font-size: 10px; min-height: 36px; }

      /* ── Input area: home indicator clearance ── */
      .input-area { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

      /* ── Modals ── */
      .modal { max-width: 88vw; }
      .modal-body { max-height: 72vh; }
      .modal-overlay { padding: 10px; }

      /* ── Sidebar overlay backdrop (used by portrait sub-range) ── */
      .sidebar-overlay {
        position: fixed; top: var(--top-off); left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); z-index: 250;
        opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
      }
      .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
    }

    /* ═══════════════════════════════════════════════════════════
       PORTRAIT TABLET  769px – 900px
       iPad Air/mini portrait. Sidebar becomes a slide-in overlay
       so the chat panel gets the full screen width.
       ═══════════════════════════════════════════════════════════ */
    @media (min-width: 769px) and (max-width: 900px) {
      /* Sidebar: fixed overlay, slides in from left */
      .sidebar {
        position: fixed; top: var(--top-off); left: 0; bottom: 0;
        width: 260px; max-width: 80%;
        transform: translateX(-100%); transition: transform 0.22s ease; z-index: 300;
        box-shadow: 2px 0 20px rgba(0,0,0,0.4);
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }
      .sidebar.open { transform: translateX(0); }

      /* Overlay backdrop is now active */
      .sidebar-overlay { display: block; }

      /* Thinking overlay: full width (no sidebar in flow) */
      .thinking-overlay { left: 12px; right: auto; }

      /* Workspace panel: full width on narrow tablet */
      .workspace-panel.open { width: min(420px, 100vw) !important; }

      /* Slightly looser modal on this width */
      .modal { max-width: 94vw; }
      .modal-body { max-height: 68vh; }
    }

    /* ═══════════════════════════════════════════════════════════
       DESKTOP  ≥1025px
       Unified ⋯ dropdown (compact panel) + collapsible sidebar.
       ═══════════════════════════════════════════════════════════ */
    @media (min-width: 1025px) {
      /* Safe area for iPad Pro landscape as PWA */
      :root { --top-off: calc(44px + env(safe-area-inset-top)); }
      .topbar {
        height: var(--top-off);
        padding-top: env(safe-area-inset-top);
        padding-left:  max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }

      /* tb-label shows on desktop (primary buttons show icon + text) */
      .tb-label { display: inline; }
      /* ⋯ dropdown: compact rounded panel, top-right corner */
      .topbar-controls.mobile-open {
        position: fixed; top: var(--top-off); right: 8px; left: auto; z-index: 350;
        width: 230px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 12px; padding: 4px 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.28);
        max-height: calc(90vh - 52px); overflow-y: auto;
      }
      .topbar-controls.mobile-open .tb-btn { padding: 11px 16px; font-size: 13px; }
      /* Sidebar: smooth collapse toggle */
      #sidebar { transition: width 0.22s ease, min-width 0.22s ease; }
      #sidebar.sidebar-collapsed {
        width: 0 !important; min-width: 0 !important;
        overflow: hidden !important; border-right: none !important;
      }
      body.sidebar-collapsed .thinking-overlay { left: 12px; }
    }

    /* ═══════════════════════════════════════════════════════════
       MOBILE additions (≤768px) — supplement the block above
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Project type selector: 3-col on phone (inline was 4) */
      #projectTypeSelector { grid-template-columns: repeat(3, 1fr) !important; }
      /* Template picker: 2-col on phone (inline was 3) */
      #projectTemplates    { grid-template-columns: repeat(2, 1fr) !important; }
      /* Env-var form: stack vertically on phone */
      .env-var-form { grid-template-columns: 1fr !important; }
      .env-var-form .btn { width: 100%; }
      /* Thinking overlay: left edge (no sidebar taking space) */
      .thinking-overlay { left: 12px; right: auto; }
      /* Chat header on phone: conventional layout — channel name on the left,
         compact action buttons on the right. The topbar channel pill is hidden
         so the name shows once here, and the heavy surface band / 2px border is
         replaced by a single thin divider. */
      .topbar-channel { display: none; }
      .chat-header { height: 44px; min-height: 44px; padding: 0 10px; gap: 6px; flex-wrap: nowrap; border-bottom: 1px solid var(--border-soft); }
      .chat-title { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
      .chat-suffix, .chat-header-spacer { display: none; }
      .chat-header .channel-ctrl-btn {
        flex: 0 0 auto; min-height: 30px; padding: 3px 8px; font-size: 10px;
        display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
      }
      .chat-header .channel-ctrl-btn:first-of-type { margin-left: auto; }
      /* Modal overlay: less padding so modals get full width */
      .modal-overlay { padding: 8px; }
      /* Modal footer: wrap buttons */
      .modal-footer { flex-wrap: wrap; gap: 6px; }
      /* Repo branch/token fields: stack on phone */
      .repo-fields-grid { display: flex !important; flex-direction: column !important; gap: 8px !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       TINY PHONES  ≤480px
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      /* 2-col grids */
      #projectTypeSelector { grid-template-columns: repeat(2, 1fr) !important; }
      #projectTemplates    { grid-template-columns: repeat(2, 1fr) !important; }
      .agent-type-grid     { grid-template-columns: repeat(2, 1fr) !important; }
      /* Compact modal body */
      .modal-body { max-height: 50vh; }
      /* Modal overlay: minimal padding to maximize space */
      .modal-overlay { padding: 4px; }
      /* Provider pills: smaller */
      .provider-pill { font-size: 10px; padding: 3px 6px; }
      /* Footer buttons: stretch to fill row */
      .modal-footer .btn { flex: 1 1 auto; min-width: 60px; text-align: center; justify-content: center; }
      /* Topbar channel: tighter */
      .topbar-channel { max-width: 30vw; }
      /* Input area: more compact */
      .send-btn { width: 36px; height: 36px; min-width: 36px; }
      /* Sub-header: icon-only for all 4 ctrl buttons */
      .chat-header { gap: 4px; padding: 0 8px; }
      #stopBtn, #groundBtn, #memoryBtn, #searchBtn {
        width: 30px; height: 30px; border-radius: 8px;
        font-size: 0 !important; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
      }
      #stopBtn::before   { content: '■'; font-size: 13px; }
      #groundBtn::before { content: '🌍'; font-size: 15px; }
      #memoryBtn::before { content: '🧠'; font-size: 15px; }
      #searchBtn::before { content: '🔍'; font-size: 15px; }
      /* Sidebar section headers more compact */
      .sidebar-section-header { font-size: 10px; padding: 12px 12px 3px; }
      /* Messages: slightly tighter */
      .msg-group { margin-bottom: 12px; }
      .msg-text { font-size: 14px; }
    }

    @media (max-width: 360px) {
      .messages-area { padding: 6px 0; }
      .msg-group { padding: 3px 10px; }
      .msg-text { font-size: 12px; line-height: 1.45; }
      .msg-avatar { width: 26px; height: 26px; font-size: 10px; }
      .msg-row { gap: 6px; }
      .msg-row.human-row .msg-text { max-width: 92%; }
      .input-area { padding: 6px 8px max(8px, env(safe-area-inset-bottom)) 8px; gap: 4px; }
      .send-btn { width: 34px; height: 34px; min-width: 34px; font-size: 13px; }
      .file-btn { width: 34px; height: 34px; font-size: 14px; }
      .chat-header { padding: 0 6px; gap: 3px; }
    }

    /* ── Accessibility ── */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }
    .sidebar-item:focus-visible {
      outline-offset: -2px;
    }

    /* Skip-to-content link (visible on focus for keyboard users) */
    .skip-link {
      position: absolute; top: -100px; left: 8px; z-index: 9999;
      background: var(--accent); color: #fff; padding: 8px 16px;
      border-radius: 0 0 6px 6px; font-size: 12px; font-weight: 700;
      text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    /* Send button disabled state */
    .send-btn:disabled {
      opacity: 0.45; cursor: not-allowed;
      background: var(--text-faint); border-color: var(--text-faint); color: var(--bg);
    }

    /* Toast safe-area for mobile keyboard */
    .toast {
      bottom: max(20px, calc(80px + env(safe-area-inset-bottom)));
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ── Print styles ── */
    @media print {
      .topbar, .sidebar, .sidebar-overlay, .input-area, .agent-progress,
      .chat-header, .thread-panel, .workspace-panel, #projectPanel,
      .modal-overlay, #offlineBanner, #loginGate { display: none !important; }
      .chat-area { position: static; height: auto; overflow: visible; }
      .messages-area { overflow: visible; }
      body { font-size: 12px; background: #fff; color: #000; }
    }

/* ════ CLI MODE STYLES (extracted from app.js) ════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

#cliOverlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: #0a0e14;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px; line-height: 1.6; color: #cdd9e5;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
#cliOverlay.open { display: flex; }

/* ════ HEADER ════════════════════════════════════════════════ */
#cliHeader {
  height: calc(40px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  flex-shrink: 0; overflow: hidden;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  display: flex; align-items: center; gap: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));
  user-select: none;
}
.cli-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; cursor: pointer; transition: filter .1s; }
.cli-dot:hover { filter: brightness(1.3); }
.cli-dot-r { background: #ff5f57; box-shadow: 0 0 0 1px #bf4942 inset; }
.cli-dot-y { background: #febc2e; box-shadow: 0 0 0 1px #c9972a inset; }
.cli-dot-g { background: #28c840; box-shadow: 0 0 0 1px #20a034 inset; }
#cliTitle {
  flex: 1; text-align: center; font-size: 11px; font-weight: 500;
  color: #7d8590; letter-spacing: .6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#cliCloseBtn {
  flex-shrink: 0;
  background: none; border: 1px solid transparent; color: #3d444d;
  cursor: pointer; font-size: 11px; padding: 3px 8px; border-radius: 4px;
  font-family: inherit; letter-spacing: .5px; transition: all .12s;
}
#cliCloseBtn:hover { border-color: #21262d; color: #7d8590; background: #111820; }
#cliBackBtn {
  flex-shrink: 0;
  background: #3fb95022; border: 1px solid #3fb95066; color: #3fb950;
  cursor: pointer; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  font-family: inherit; letter-spacing: .3px; transition: all .12s; white-space: nowrap;
}
#cliBackBtn:hover { background: #3fb95044; border-color: #3fb950; }
@media (max-width: 480px) {
  #cliCloseBtn { display: none; }
  #cliBackBtn { font-size: 11px; padding: 3px 8px; }
}

/* ════ BANNER ════════════════════════════════════════════════ */
#cliBanner {
  flex-shrink: 0; padding: 10px 20px 9px;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  display: flex; align-items: center; gap: 0;
}
#cliBannerLeft {
  display: flex; align-items: baseline; gap: 8px; flex: 1;
}
.cli-logo-text {
  font-size: 13px; font-weight: 700; color: #3fb950;
  letter-spacing: 4px; text-shadow: 0 0 12px rgba(63,185,80,.4);
}
.cli-logo-ver { font-size: 10px; color: #3d444d; font-weight: 400; }
.cli-logo-sep { color: #3d444d; margin: 0 6px; }
#cliBannerInfo { font-size: 10px; color: #7d8590; }
.cli-banner-mode {
  font-size: 10px; color: #3d444d;
  border: 1px solid #21262d; border-radius: 3px;
  padding: 1px 6px; margin-left: 8px;
  letter-spacing: .5px;
}

/* ════ OUTPUT ════════════════════════════════════════════════ */
#cliOutput {
  flex: 1; overflow-y: auto; padding: 16px 0 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Fade top edge to indicate scrollable history */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28px);
  mask-image: linear-gradient(to bottom, transparent 0, black 28px);
}
#cliOutput::-webkit-scrollbar { width: 4px; }
#cliOutput::-webkit-scrollbar-track { background: transparent; }
#cliOutput::-webkit-scrollbar-thumb { background: #3d444d; border-radius: 2px; }
#cliOutput::-webkit-scrollbar-thumb:hover { background: #7d8590; }

/* ════ MESSAGES ══════════════════════════════════════════════ */
.cli-msg {
  padding: 0 20px;
  animation: cli-fadein .15s ease;
}
.cli-msg + .cli-msg { margin-top: 2px; }
/* Extra gap when sender changes */
.cli-msg.cli-new-turn { margin-top: 14px; }

@keyframes cli-fadein {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ── Meta line (sender + time) ── */
.cli-msg-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
}
.cli-msg-prefix { font-size: 12px; width: 12px; flex-shrink: 0; }
.cli-msg-sender { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.cli-msg-time   { font-size: 10px; color: #3d444d; margin-left: 4px; }

/* ── Body ── */
.cli-msg-inner {
  margin-left: 20px; /* aligns under sender name */
}
.cli-msg-body {
  white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.6;
}

/* ── AGENT block ── */
.cli-type-agent .cli-msg-prefix { color: #3fb950; }
.cli-type-agent .cli-msg-sender { color: #3fb950; }
.cli-type-agent .cli-msg-body   { color: #cdd9e5; }
.cli-type-agent .cli-msg-inner {
  border-left: 2px solid #3fb95044;
  padding-left: 10px; margin-left: 6px;
  border-radius: 0 0 0 2px;
}
.cli-type-agent.cli-new-turn .cli-msg-inner {
  border-left-color: #3fb95088;
}

/* ── HUMAN block ── */
.cli-type-human .cli-msg-prefix { color: #79c0ff; }
.cli-type-human .cli-msg-sender { color: #79c0ff; }
.cli-type-human .cli-msg-body   { color: #e6edf3; font-weight: 500; }
.cli-type-human .cli-msg-inner  { margin-left: 20px; }

/* ── SYSTEM block ── */
.cli-type-system {
  padding: 6px 20px;
}
.cli-type-system .cli-msg-meta  { display: none; }
.cli-type-system .cli-msg-inner { margin-left: 0; }
.cli-type-system .cli-msg-body  {
  color: #7d8590; font-size: 11px; font-style: italic;
  padding: 4px 10px; border-left: 2px solid #3d444d;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to right, #111820, transparent);
}

/* ── Streaming cursor ── */
.cli-cursor::after {
  content: '▋'; color: #3fb950; margin-left: 1px;
  animation: cli-blink .8s step-end infinite;
}
@keyframes cli-blink { 50% { opacity: 0; } }

/* ── Code blocks ── */
.cli-msg-body .cli-code-block {
  margin: 8px 0; border-radius: 6px; overflow: hidden;
  border: 1px solid #21262d;
  background: #0d1117;
}
.cli-code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px; background: #111820;
  border-bottom: 1px solid #21262d;
  font-size: 10px; color: #7d8590; letter-spacing: .3px;
}
.cli-code-lang { color: #56d4dd; font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
.cli-code-body {
  padding: 10px 14px; overflow-x: auto; font-size: 12px;
  line-height: 1.55; color: #cdd9e5;
}
.cli-code-body::-webkit-scrollbar { height: 3px; }
.cli-code-body::-webkit-scrollbar-thumb { background: #3d444d; border-radius: 1px; }

/* ── Inline code ── */
.cli-msg-body code:not(.cli-code-body) {
  background: #111820; border: 1px solid #21262d;
  border-radius: 3px; padding: 1px 5px; font-size: 12px; color: #56d4dd;
}

/* ── Bold / italic in responses ── */
.cli-msg-body strong { color: #e3b341; font-weight: 600; }
.cli-msg-body em     { color: #d2a8ff; font-style: italic; }
.cli-msg-body .cli-h  { color: #56d4dd; font-weight: 700; display: block; margin: 4px 0 2px; }

/* ════ CHANNEL BAR ═══════════════════════════════════════════ */
#cliChannelBar {
  flex-shrink: 0;
  padding: 0 max(16px, env(safe-area-inset-left, 16px));
  border-top: 1px solid #21262d;
  background: #0d1117;
  display: flex; gap: 2px; overflow-x: auto; align-items: center;
  min-height: 36px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#cliChannelBar::-webkit-scrollbar { display: none; }

.cli-ch-pill {
  font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer;
  background: none; border: none; color: #7d8590;
  font-family: inherit; white-space: nowrap;
  transition: color .1s, background .1s;
  display: flex; align-items: center; gap: 3px;
}
.cli-ch-pill:hover { color: #e6edf3; background: #111820; }
.cli-ch-pill.active {
  color: #3fb950; background: #1a3a22;
  font-weight: 700; border-left: 2px solid #3fb950;
}
.cli-ch-sigil { font-size: 10px; opacity: .6; }

/* ════ INPUT AREA ════════════════════════════════════════════ */
#cliInputArea {
  flex-shrink: 0;
  background: #0d1117;
  border-top: 1px solid #21262d;
  /* Green glow on top edge */
  box-shadow: 0 -1px 0 0 #3fb95020;
  padding: 10px max(16px, env(safe-area-inset-right, 16px)) max(12px, env(safe-area-inset-bottom, 12px)) max(16px, env(safe-area-inset-left, 16px));
}
#cliPromptLine {
  display: flex; align-items: flex-start; gap: 10px;
}
#cliPromptLabel {
  flex-shrink: 0; padding-top: 2px; user-select: none;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.cli-prompt-ch  { color: #7d8590; font-weight: 400; }
.cli-prompt-gt  { color: #3fb950; font-size: 14px; }
#cliInput {
  flex: 1; background: none; border: none; outline: none;
  color: #e6edf3; font-family: inherit; font-size: 13px;
  caret-color: #3fb950; resize: none; line-height: 1.6;
  min-height: 22px; max-height: 120px; overflow-y: auto;
  padding-top: 1px;
}
#cliInput::placeholder { color: #3d444d; }

#cliInputHint {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid #1c2128;
  font-size: 10px; color: #3d444d;
}
#cliInputHint kbd {
  background: #111820; border: 1px solid #21262d;
  border-bottom-width: 2px; border-radius: 3px;
  padding: 0 5px; font-family: inherit; font-size: 10px;
  color: #7d8590;
}

/* ════ TOPBAR CLI BUTTON ════════════════════════════════════ */
/* Highlight when CLI is open */
#cliModeBtn.cli-active { background: #0d1117 !important; color: #3fb950 !important; border-color: #3fb95088 !important; }

/* ════ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 700px) {
  #cliOverlay  { font-size: 12px; }
  #cliBanner   { padding: 6px 14px; }
  #cliOutput   { padding: 10px 0 4px; }
  .cli-msg     { padding: 0 14px; }
  .cli-type-system { padding: 4px 14px; }
  #cliChannelBar   { padding: 0 10px; min-height: 34px; }
  /* Preserve safe-area-inset-bottom on mobile (home indicator) */
  #cliInputArea    { padding: 8px 14px max(10px, env(safe-area-inset-bottom, 10px)) 14px; }
  #cliInput::placeholder { font-size: 12px; }
}
/* Phone breakpoint: hide banner, tighten everything */
@media (max-width: 480px) {
  #cliBanner   { display: none; }
  .cli-new-turn { margin-top: 8px; }
  .cli-msg     { padding: 0 12px; }
  .cli-type-system { padding: 4px 12px; }
  .cli-msg-meta { gap: 6px; margin-bottom: 2px; }
  .cli-msg-sender { font-size: 10px; }
  .cli-msg-body { font-size: 12px; }
  #cliChannelBar { padding: 0 8px; min-height: 32px; gap: 1px; }
  .cli-ch-pill { padding: 3px 8px; font-size: 10px; }
  #cliInputArea  { padding: 6px 12px max(10px, env(safe-area-inset-bottom, 10px)) 12px; }
  #cliInput { font-size: 16px; }
  #cliPromptLabel { font-size: 11px; }
  #cliPromptLine { gap: 8px; }
}
@media (max-width: 400px) {
  #cliInputHint { display: none; }
  #cliOutput   { padding: 8px 0 2px; }
}