* { box-sizing: border-box; }
    /* Screen-reader-only / visually hidden (a11y labels, dialog titles) */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    :root {
      --bg: #f8f9fc;
      --bg-warm: #fafbfd;
      --bg-alt: #f1f3f9;
      --surface: #ffffff;
      --surface-rgb: 255, 255, 255;
      --surface-hover: #f1f3f9;
      --surface-elevated: #ffffff;
      --border: #e9edef;
      --border-strong: rgba(134,150,160,.2);
      --text: #0f172a;
      --text-soft: #334155;
      --muted: #64748b;
      --muted-soft: #94a3b8;
      --text-muted: #64748b;
      /* Radius scale (mobile-first, softer UI) */
      --radius-xs: 4px;
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-full: 9999px;
      /* Button shape tiers: CTA = pill, utility/row = medium */
      --btn-radius-cta: var(--radius-full);
      --btn-radius-utility: var(--radius-sm);
      --brand: #14B8A6;
      --brand-rgb: 20, 184, 166;
      --brand-hover: #0D9488;
      /* Medium accent: slightly stronger for nav tabs + pills */
      --brand-soft: rgba(20, 184, 166, 0.18);
      --brand-gradient: linear-gradient(135deg, #14B8A6 0%, #0ea5e9 100%);
      --glass-bg: rgba(255, 255, 255, 0.78);
      --glass-border: rgba(255, 255, 255, 0.45);
      --nav-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 253, 250, 0.85) 100%);
      /* Shared floating chrome (topbar, mobile nav, composer) */
      --chrome-blur: 12px;
      --chrome-saturate: 165%;
      --shadow-float: 0 16px 40px rgba(15, 23, 42, 0.1), 0 6px 16px rgba(20, 184, 166, 0.06);
      /* Chat surface: pure white in light (merges with browser status / URL bar); chrome neutral, brand on user bubble + CTAs */
      --chat-panel-bg: #ffffff;
      --chat-canvas-bg: #ffffff;
      --chat-canvas-veil: none;
      --chat-topbar-surface: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
      --chat-topbar-border: rgba(15, 23, 42, 0.08);
      --chat-composer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.94) 100%);
      --chat-composer-border: rgba(15, 23, 42, 0.1);
      --chat-composer-shadow: 0 10px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
      --user-bubble-fg: #ffffff;
      --chat-pill-idle-bg: #ffffff;
      --chat-pill-idle-border: rgba(15, 23, 42, 0.12);
      --chat-pill-idle-fg: #334155;
      --chat-pill-hover-bg: #f8fafc;
      --chat-pill-active-bg: rgba(20, 184, 166, 0.12);
      --chat-pill-active-border: rgba(20, 184, 166, 0.55);
      --chat-pill-active-fg: #0d9488;
      --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
      --success: #10b981;
      --success-soft: #d1fae5;
      --warning: #f59e0b;
      --warning-soft: #fef3c7;
      --error: #ef4444;
      --error-soft: #fee2e2;
      --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
      --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
      --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
      --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
      --shadow-xl: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);
      --transition: 0.2s var(--ease-out);
      --font: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", -apple-system, BlinkMacSystemFont, sans-serif;
      --accent: #14B8A6;
      /* Fluid type scale (rem = html font-size) */
      --text-xs: clamp(0.65rem, 1.2vw, 0.75rem);
      --text-sm: clamp(0.78rem, 1.4vw, 0.875rem);
      --text-base: clamp(0.875rem, 1.6vw, 1rem);
      --text-lg: clamp(1rem, 2vw, 1.125rem);
      --text-xl: clamp(1.1rem, 2.5vw, 1.25rem);
      --text-2xl: clamp(1.25rem, 3vw, 1.5rem);
      --text-3xl: clamp(1.5rem, 4vw, 1.875rem);
      /* Spacing (4px grid) */
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      /* WhatsApp-inspired */
      --wa-teal: #075E54;
      --wa-teal-dark: #054d44;
      /* User: warm brand teal; Assistant: neutral card (cool slate) */
      --wa-light-green: linear-gradient(150deg, #14b8a6 0%, #0ea5b8 100%);
      --wa-incoming: #ffffff;
      --wa-incoming-border: rgba(15, 23, 42, 0.1);
      --wa-incoming-fg: #0f172a;
      --wa-chat-bg: #efeae2;
      --wa-footer-text: rgba(17, 27, 33, 0.45);
      --surface-active: rgba(20, 184, 166, 0.08);
      --overlay-bg: rgba(0, 0, 0, 0.3);
      --bg-secondary: var(--surface-hover);
      --touch-min: 44px;
      /* Cloudia (Team Builder) — brand-aligned (teal / cyan), same family as + FAB (--brand-gradient) */
      --cloudia-avatar-plate: #2dd4bf;
      --cloudia-avatar-plate-inner: rgba(255, 255, 255, 0.2);
      --cloudia-avatar-border: rgba(var(--brand-rgb), 0.28);
      --cloudia-avatar-accent-ring: rgba(14, 165, 233, 0.28);
      --cloudia-card-bg: linear-gradient(165deg, rgba(var(--brand-rgb), 0.14) 0%, rgba(14, 165, 233, 0.08) 55%, var(--surface) 100%);
      --cloudia-card-bg-solid: var(--surface);
      --cloudia-card-border: rgba(var(--brand-rgb), 0.32);
      --cloudia-meta-strong: #475569;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .repo-card.loading {
      opacity: 0.85;
      pointer-events: none;
      position: relative;
      overflow: hidden;
    }
    @keyframes ui-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .repo-card.loading::before {
      content: "";
      position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(var(--surface-rgb), 0.55) 50%,
        transparent 60%
      );
      background-size: 200% 100%;
      animation: ui-shimmer 1.1s var(--ease-out) infinite;
    }
    .repo-card.loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      margin: -12px 0 0 -12px;
      border: 3px solid var(--text);
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      z-index: 10;
    }
    /* Dark mode variables */
    [data-theme="dark"] {
      --bg: #111b21;
      --nav-glass-bg: linear-gradient(180deg, rgba(32, 44, 51, 0.96) 0%, rgba(20, 32, 38, 0.92) 100%);
      --chat-panel-bg: linear-gradient(180deg, #0f1a20 0%, #0b141a 100%);
      --chat-canvas-bg: transparent;
      --chat-canvas-veil: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0) 60%);
      --chat-topbar-surface: linear-gradient(180deg, rgba(20, 32, 38, 0.96) 0%, rgba(15, 28, 36, 0.92) 100%);
      --chat-topbar-border: rgba(255, 255, 255, 0.06);
      --chat-composer-bg: linear-gradient(180deg, rgba(30, 41, 49, 0.94) 0%, rgba(22, 32, 38, 0.92) 100%);
      --chat-composer-border: rgba(255, 255, 255, 0.08);
      --chat-composer-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
      --user-bubble-fg: #ffffff;
      --chat-pill-idle-bg: rgba(30, 41, 49, 0.85);
      --chat-pill-idle-border: rgba(255, 255, 255, 0.1);
      --chat-pill-idle-fg: #cbd5e1;
      --chat-pill-hover-bg: rgba(42, 57, 66, 0.95);
      --chat-pill-active-bg: rgba(20, 184, 166, 0.2);
      --chat-pill-active-border: rgba(20, 184, 166, 0.55);
      --chat-pill-active-fg: #5eead4;
      --bg-warm: #1f2c33;
      --bg-alt: #1f2c33;
      --surface: #202C33;
      --surface-rgb: 32, 44, 51;
      --brand-rgb: 20, 184, 166;
      --surface-hover: #2a3942;
      --surface-elevated: #111b21;
      --border: rgba(134,150,160,.15);
      --border-strong: rgba(134,150,160,.28);
      --text: #f8fafc;
      --text-soft: #cbd5e1;
      --muted: #94a3b8;
      --muted-soft: #64748b;
      --text-muted: #94a3b8;
      --brand: #14B8A6;
      --brand-hover: #0D9488;
      --brand-soft: rgba(20, 184, 166, 0.24);
      --success: #34d399;
      --success-soft: rgba(52,211,153,.15);
      --warning: #fbbf24;
      --warning-soft: rgba(251,191,36,.15);
      --error: #f87171;
      --error-soft: rgba(248,113,113,.15);
      --accent: #14B8A6;
      --wa-teal: #1f2c33;
      --wa-teal-dark: #111b21;
      --wa-light-green: linear-gradient(150deg, #14b8a6 0%, #0d9488 100%);
      --wa-incoming: #1c2730;
      --wa-incoming-border: rgba(255, 255, 255, 0.07);
      --wa-incoming-fg: #e2e8f0;
      --wa-chat-bg: #0B141A;
      --wa-footer-text: rgba(233, 237, 239, 0.55);
      --surface-active: rgba(20, 184, 166, 0.15);
      --overlay-bg: rgba(0, 0, 0, 0.5);
      --bg-secondary: var(--surface-hover);
      --glass-bg: rgba(32, 44, 51, 0.88);
      --glass-border: rgba(255, 255, 255, 0.08);
      --cloudia-avatar-plate: #134e4a;
      --cloudia-avatar-plate-inner: rgba(45, 212, 191, 0.18);
      --cloudia-avatar-border: rgba(var(--brand-rgb), 0.35);
      --cloudia-avatar-accent-ring: rgba(14, 165, 233, 0.22);
      --cloudia-card-bg: linear-gradient(165deg, rgba(var(--brand-rgb), 0.18) 0%, rgba(14, 165, 233, 0.1) 50%, rgba(32, 44, 51, 0.98) 100%);
      --cloudia-card-bg-solid: rgba(32, 44, 51, 0.98);
      --cloudia-card-border: rgba(var(--brand-rgb), 0.38);
      --cloudia-meta-strong: #cbd5e1;
      --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
      --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
      --shadow: 0 4px 6px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.12);
      --shadow-lg: 0 10px 15px rgba(0,0,0,.25), 0 4px 6px rgba(0,0,0,.15);
      --shadow-xl: 0 20px 25px rgba(0,0,0,.3), 0 10px 10px rgba(0,0,0,.15);
    }
    /* Scrollbar: light mode (default) */
    html {
      scrollbar-color: rgba(160,160,160,0.5) transparent;
      font-size: clamp(14px, 1.5vw, 16px);
      scroll-behavior: smooth;
    }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(160,160,160,0.5); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(140,140,140,0.7); }
    /* Scrollbar: dark mode */
    [data-theme="dark"] {
      scrollbar-color: rgba(148,163,184,0.4) transparent;
    }
    [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4); border-radius: 3px; }
    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.6); }
    [data-theme="dark"] .notif-card.unread {
      background: rgba(20, 184, 166, 0.24);
    }
    /* Theme polish: transition surfaces only (avoids animating every property on the page) */
    html { color-scheme: light dark; }
    body, #dashboard, .sidebar, .auth-panel, .auth-tabs button, .tab, .msg-body,
    .chat-inputbar, .chat-inputbar textarea, input, button, .app-topbar {
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      body, #dashboard, .sidebar, .auth-panel, .auth-tabs button, .tab, .msg-body,
      .chat-inputbar, .chat-inputbar textarea, input, button, .app-topbar {
        transition-duration: 0.01ms !important;
      }
      .task-strip-status-dot,
      .task-step-icon--running {
        animation: none !important;
      }
      .tab-notif-dot.visible {
        animation: none !important;
      }
      /* Backdrop blur is GPU-heavy; drop it when users prefer reduced motion */
      .app-topbar,
      .auth-panel,
      .mobile-nav,
      .more-sheet-backdrop,
      #pin-modal-overlay,
      .attach-modal,
      .schedule-modal-backdrop,
      .whats-new-modal-backdrop,
      .thread-search-wrap,
      #panel-chat .chat-input-row,
      #panel-chat .chat-input-meta .model-pill,
      #panel-chat > .app-topbar.emp-topbar-chat--mobile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::before,
      #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::after {
        opacity: 0.25;
      }
      .repo-card.loading::before {
        animation: none !important;
      }
      .thinking-dots span,
      .thread-update-dot,
      .files-empty-state .empty-state-svg,
      .browser-pip-loading-spinner,
      .pipelines-skeleton-row,
      .emp-duty-run-ribbon--running,
      .emp-duty-scratch-dot,
      .schedule-task-scratch-dot,
      .duty-scratch-dot-thread {
        animation: none !important;
      }
    }
    /* No backdrop-filter support: solid surfaces (avoids expensive fallback compositing) */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .app-topbar,
      .auth-panel,
      .mobile-nav,
      .more-sheet-backdrop,
      #pin-modal-overlay,
      .attach-modal,
      .schedule-modal-backdrop,
      .whats-new-modal-backdrop,
      .thread-search-wrap,
      #panel-chat .chat-input-row,
      #panel-chat .chat-input-meta .model-pill,
      #panel-chat > .app-topbar.emp-topbar-chat--mobile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .app-topbar { background: rgba(var(--surface-rgb), 0.97); }
      .auth-panel { background: var(--surface); }
      .mobile-nav { background: var(--surface); }
      .thread-search-wrap { background: var(--surface); }
    }
    /* Mobile chat glass: near-solid surfaces when blur is unavailable (keeps legibility) */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      @media (max-width: 768px), (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) and (hover: none) {
        .mobile-nav {
          background: var(--surface) !important;
        }
        [data-theme="dark"] .mobile-nav {
          background: var(--surface) !important;
        }
        #panel-chat .chat-input-row {
          background: var(--surface) !important;
        }
        [data-theme="dark"] #panel-chat .chat-input-row {
          background: var(--surface) !important;
        }
        #panel-chat .chat-input-meta .model-pill {
          background: var(--chat-pill-idle-bg) !important;
          border-color: var(--border) !important;
        }
        #panel-chat > .app-topbar.emp-topbar-chat--mobile {
          background: var(--chat-topbar-surface) !important;
        }
        #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::before,
        #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::after {
          opacity: 0.2;
        }
      }
    }
    html, body { font-family: var(--font); margin: 0; padding: 0; background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; line-height: 1.45; }
    .auth-wrap {
      min-height: 100vh; min-height: 100dvh;
      background:
        radial-gradient(ellipse 120% 80% at 20% 0%, rgba(20, 184, 166, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 100% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
        linear-gradient(160deg, var(--bg-warm) 0%, #CCFBF1 45%, #F0FDFA 100%);
      display: flex; align-items: center; justify-content: center;
      padding: max(var(--space-6), env(safe-area-inset-top, 0px)) max(var(--space-6), env(safe-area-inset-right, 0px)) max(var(--space-6), env(safe-area-inset-bottom, 0px)) max(var(--space-6), env(safe-area-inset-left, 0px));
    }
    .auth-panel {
      width: 100%; max-width: 420px; padding: var(--space-10) var(--space-8);
      background: var(--glass-bg); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
      border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
    }
    .auth-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 2rem; }
    .auth-brand img {
      height: 48px; width: 48px; border-radius: var(--radius-full); object-fit: cover;
      border: 2px solid rgba(var(--brand-rgb), 0.35);
      box-shadow: 0 4px 14px rgba(var(--brand-rgb), 0.25);
    }
    .brand-text { font-family: var(--font); letter-spacing: -0.01em; font-size: var(--text-2xl); line-height: 1.2; }
    .brand-name { font-weight: 700; color: #0F172A; }
    .brand-ai { font-weight: 700; color: #14B8A6; font-size: 1em; }
    [data-theme="dark"] .brand-name { color: #F1F5F9; }
    .auth-brand .brand-text { font-size: 1.5rem; }
    .auth-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; background: var(--surface-hover); padding: 6px; border-radius: var(--radius-lg); position: relative; }
    .auth-tabs button {
      flex: 1; padding: 0.75rem 1rem; background: transparent; color: var(--muted); border: none; border-radius: var(--radius);
      cursor: pointer; font-size: var(--text-sm); font-weight: 600; transition: color var(--transition), background var(--transition), transform 0.15s var(--ease-out);
      position: relative;
    }
    .auth-tabs button:hover { color: var(--text); }
    .auth-tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
    .auth-tabs button.active::after {
      content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 42%; max-width: 4.5rem;
      height: 3px; border-radius: var(--radius-full); background: var(--brand-gradient); pointer-events: none;
    }
    .auth-form { display: none; }
    .auth-form.active { display: block; }
    .auth-form .field { margin-bottom: 1.1rem; }
    .auth-form label { display: block; font-size: var(--text-sm); color: var(--text-soft); margin-bottom: var(--space-2); font-weight: 600; }
    .auth-form input[type=email], .auth-form input[type=password] {
      width: 100%; min-height: var(--touch-min); padding: 0 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius-full);
      background: var(--surface); color: var(--text); font-size: var(--text-base);
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); box-shadow: var(--shadow-xs);
    }
    .auth-form input:focus {
      outline: none; background: var(--surface); border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
    }
    .auth-form .auth-submit {
      width: 100%; min-height: 48px; padding: 0.95rem; background: var(--brand-gradient); color: white; border: none;
      border-radius: var(--radius-full); cursor: pointer; font-weight: 700; margin-top: 0.5rem; font-size: var(--text-base);
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .auth-form .auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow); }
    .auth-form .auth-submit:active { filter: brightness(0.96); transform: translateY(0); }
    .auth-form .auth-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .auth-google-block { margin-bottom: 0.25rem; display: none; }
    .auth-google-block.visible { display: block; }
    .auth-google-btn {
      width: 100%; min-height: 48px; padding: 0.85rem 1rem; background: var(--surface); color: var(--text);
      border: 1.5px solid var(--border); border-radius: var(--radius-full); cursor: pointer; font-weight: 600;
      font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      transition: background var(--transition), border-color var(--transition), transform 0.15s var(--ease-out);
      box-shadow: var(--shadow-xs);
    }
    .auth-google-btn:hover { background: var(--surface-hover); border-color: var(--muted); transform: translateY(-1px); }
    .auth-google-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .auth-or-divider {
      display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0.25rem; color: var(--muted); font-size: 0.75rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .auth-or-divider::before, .auth-or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
    .consent-row { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 1rem; font-size: 0.875rem; color: var(--muted); }
    .consent-row input { margin-top: 0.2rem; }
    .consent-row a { color: var(--brand); text-decoration: none; }
    .consent-row a:hover { text-decoration: underline; }
    .auth-error { color: var(--error); font-size: 0.875rem; margin-bottom: 0.5rem; }
    .auth-form a.forgot-link { font-size: 0.875rem; color: var(--brand); text-decoration: none; display: inline-block; margin-bottom: 0.5rem; }
    .auth-form a.forgot-link:hover { text-decoration: underline; }
    /* Flex column so trial banner + app shell share one viewport (no 100dvh + banner overflow). */
    #dashboard {
      display: none;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
      box-sizing: border-box;
    }
    #trial-soft-push-banner {
      flex: 0 0 auto;
      box-sizing: border-box;
      width: 100%;
      padding: 0.55rem max(1rem, env(safe-area-inset-right)) 0.55rem max(1rem, env(safe-area-inset-left));
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem 0.75rem;
      flex-wrap: wrap;
      z-index: 15;
    }
    #trial-soft-push-banner .trial-soft-push-copy {
      flex: 1;
      min-width: min(100%, 220px);
      font-size: 0.875rem;
      margin: 0;
      line-height: 1.5;
      color: var(--text);
    }
    #trial-soft-push-banner .trial-soft-push-copy a {
      color: var(--brand);
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }
    #trial-soft-push-banner .trial-soft-push-copy a:hover {
      text-decoration: underline;
    }
    #trial-soft-push-banner #trial-soft-push-dismiss {
      flex-shrink: 0;
      min-height: var(--touch-min, 44px);
      padding: 0.35rem 0.75rem;
    }
    /* Plan & billing: trial callout + plan picker (IDs/hooks preserved for checkout JS) */
    .plan-billing-header h3 {
      margin: 0 0 0.5rem;
    }
    .plan-billing-current {
      margin: 0 0 0.35rem;
    }
    .plan-status-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.55rem;
      border-radius: var(--radius-sm);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-left: 0.45rem;
      vertical-align: middle;
      background: var(--surface-hover);
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .plan-status-badge[data-plan="growth"],
    .plan-status-badge[data-plan="pro"],
    .plan-status-badge[data-plan="max"] {
      background: var(--brand-soft);
      color: var(--brand);
      border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    }
    .plan-billing-trust {
      margin: 0 0 0.85rem;
      font-size: 0.8rem;
    }
    #plan-billing-trial-info.plan-billing-trial-callout {
      display: none;
      margin: 0 0 1rem;
      padding: 0.75rem 2.85rem 0.75rem 0.85rem;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--brand-soft);
      font-size: 0.875rem;
      line-height: 1.55;
      position: relative;
    }
    #plan-billing-trial-info.plan-billing-trial-callout.is-visible {
      display: block;
    }
    #plan-billing-trial-info .plan-billing-trial-text {
      margin: 0;
      max-width: 62ch;
    }
    #plan-billing-trial-info .plan-billing-trial-dismiss {
      position: absolute;
      top: 0.35rem;
      right: 0.35rem;
      min-height: var(--touch-min, 44px);
      padding: 0.25rem 0.55rem;
      font-size: 0.78rem;
    }
    .plan-cards-grid {
      display: flex;
      flex-direction: row;
      gap: 0.75rem;
      margin-top: 0.15rem;
      padding: 0.25rem 0 0.75rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: max(0px, env(safe-area-inset-left, 0px));
      scrollbar-width: none;
    }
    .plan-cards-grid::-webkit-scrollbar {
      display: none;
    }
    .plan-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1rem 0.9rem 0.9rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      position: relative;
      background: var(--surface);
      flex: 0 0 min(85vw, 320px);
      min-width: 260px;
      scroll-snap-align: start;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .plan-card:hover {
      border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
    [data-theme="dark"] .plan-card:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
    }
    .plan-card--recommended {
      border-color: var(--brand);
      border-top: 3px solid var(--brand);
      box-shadow: 0 0 0 1px var(--brand);
    }
    .plan-card .plan-badge {
      position: absolute;
      top: -0.5rem;
      right: 0.6rem;
      background: var(--brand);
      color: #fff;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 0.18rem 0.45rem;
      border-radius: 4px;
      text-transform: uppercase;
    }
    .plan-card .plan-tier {
      font-weight: 700;
      font-size: 0.95rem;
      margin: 0;
    }
    .plan-card .plan-price {
      font-size: 1.2rem;
      font-weight: 800;
      margin: 0;
    }
    .plan-price-period {
      font-size: 0.65em;
      font-weight: 600;
    }
    .plan-card .plan-card-note {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin: 0;
    }
    .plan-card ul.plan-card-features {
      margin: 0.2rem 0 0.35rem;
      padding-left: 1.1rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .plan-card .btn {
      margin-top: auto;
      width: 100%;
      justify-content: center;
      min-height: var(--touch-min, 44px);
      border-radius: var(--btn-radius-utility);
    }
    .plan-billing-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.65rem;
      align-items: center;
      margin-top: 0.65rem;
    }
    .plan-billing-actions .btn,
    .plan-billing-actions a.btn-ghost {
      border-radius: var(--btn-radius-utility);
    }
    .plan-billing-footnote {
      margin-top: 0.5rem;
      font-size: 0.8rem;
    }
    #stripe-checkout-confirm-modal .attach-modal-content,
    #post-verify-trial-welcome-modal .attach-modal-content {
      max-width: 440px;
      max-height: min(90dvh, 720px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #stripe-checkout-confirm-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
      justify-content: flex-end;
    }
    #post-verify-trial-welcome-modal .trial-welcome-lead {
      margin: 0 0 0.75rem;
    }
    #post-verify-trial-welcome-modal .trial-welcome-hint {
      margin: 0 0 1rem;
      font-size: 0.82rem;
    }
    #post-verify-trial-welcome-modal .trial-welcome-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    @media (max-width: 480px) {
      #plan-billing-trial-info.plan-billing-trial-callout {
        padding: 0.75rem 0.8rem 3.35rem;
      }
      #plan-billing-trial-info .plan-billing-trial-dismiss {
        top: auto;
        bottom: 0.35rem;
        right: 0.5rem;
      }
    }
    @media (min-width: 720px) {
      .plan-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        padding: 0.15rem 0 0;
        scroll-snap-type: none;
      }
      .plan-card {
        flex: unset;
        min-width: 0;
        scroll-snap-align: none;
      }
    }
    #dashboard .app-wrap {
      display: flex;
      flex-direction: row;
      flex: 1 1 0%;
      min-height: 0;
      overflow: hidden;
      background: var(--bg);
    }
    .sidebar {
      width: min(288px, 100%); flex-shrink: 0; background: var(--surface); display: flex; flex-direction: column;
      align-self: stretch;
      min-height: 0;
      height: auto;
      position: sticky; top: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      transition: width 0.3s var(--ease-out); z-index: 10; border-right: 1px solid var(--border);
    }
    .sidebar.collapsed { width: 72px; }
    .sidebar.collapsed .sidebar-brand span,
    .sidebar.collapsed .sidebar-section,
    .sidebar.collapsed .sidebar-site-links,
    .sidebar.collapsed .tab span:not(.tab-icon),
    .sidebar.collapsed .sidebar-usage,
    .sidebar.collapsed .account-meta,
    .sidebar.collapsed .account-email { display: none; }
    .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 1rem; }
    .sidebar.collapsed .sidebar-brand img { height: 36px; width: 36px; border-radius: 10px; }
    .sidebar.collapsed .sidebar-nav { padding: 0.5rem; align-items: center; }
    .sidebar.collapsed .tab { justify-content: center; padding: 0.625rem; border-radius: 12px; width: 44px; height: 44px; }
    .sidebar.collapsed .tab.active { background: var(--brand-soft); }
    .sidebar.collapsed .tab-icon { width: 20px; height: 20px; }
    .sidebar.collapsed .sidebar-nav-divider { width: 24px; margin: 0.35rem auto; opacity: 0.65; }
    .sidebar.collapsed .sidebar-chrome-actions .topbar-icon-btn {
      width: 44px;
      height: 44px;
    }
    .sidebar.collapsed .sidebar-account { justify-content: center; padding: 0.75rem 0.5rem; }
    .sidebar.collapsed .account-avatar { width: 36px; height: 36px; }
    .sidebar-expanded-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .sidebar.collapsed .sidebar-expanded-content { display: none; }
    .sidebar-collapse-btn { position: absolute; right: -12px; top: 24px; width: 24px; height: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: 25; transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); opacity: 0; pointer-events: none; }
    .sidebar:hover .sidebar-collapse-btn, .sidebar.collapsed .sidebar-collapse-btn { opacity: 1; pointer-events: auto; }
    .sidebar-collapse-btn:hover { background: var(--brand); border-color: var(--brand); color: white; }
    .sidebar-collapse-btn svg { width: 12px; height: 12px; transition: transform 0.3s ease; }
    .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
    .sidebar-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1rem; font-size: 1.125rem; font-weight: 700; color: var(--text); text-decoration: none; transition: opacity 0.15s ease; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
    .sidebar-brand .brand-text { font-family: var(--font); letter-spacing: -0.01em; font-size: 1.125rem; font-weight: inherit; line-height: 1.2; }
    .sidebar-brand:hover { opacity: 0.75; }
    .sidebar-brand img {
      height: 32px; width: 32px; object-fit: cover; border-radius: var(--radius-full);
      box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.2); border: 2px solid rgba(var(--brand-rgb), 0.2);
    }
    .sidebar-section { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 1.5rem 1rem 0.5rem; }
    .sidebar-site-links { padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.75rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
    .sidebar-site-links a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
    .sidebar-site-links a:hover { color: var(--brand); }
    .sidebar-nav { padding: 0.5rem; display: flex; flex-direction: column; gap: 2px; }
    .sidebar-nav-divider {
      height: 1px; margin: 0.45rem 0.75rem; flex-shrink: 0; border: none;
      background: var(--border);
    }
    /* Desktop-only quick actions (notif / usage / pin); hidden on mobile */
    .sidebar-chrome-actions {
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.65rem 0.55rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .sidebar.collapsed .sidebar-chrome-actions {
      flex-direction: column;
      padding: 0.35rem 0.4rem 0.5rem;
      align-items: center;
    }
    .sidebar.collapsed .sidebar-chrome-actions .sidebar-usage-wrap { display: none; }
    .sidebar-usage-wrap { position: relative; margin-left: 0; }
    .usage-popover-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 499;
      background: rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .usage-popover-backdrop.open { display: block; }
    #sidebar-usage-dropdown.usage-dropdown--sidebar-portal {
      position: fixed !important;
      right: auto !important;
      z-index: 500 !important;
      min-width: 300px;
      max-width: min(380px, calc(100vw - 2rem));
      padding: 1rem 1.1rem;
      box-shadow:
        0 16px 48px rgba(15, 23, 42, 0.18),
        0 4px 16px rgba(15, 23, 42, 0.1);
    }
    #sidebar-usage-dropdown.open {
      position: fixed !important;
      right: auto !important;
      z-index: 500 !important;
    }
    #sidebar-usage-badge.usage-pill-tappable { cursor: pointer; }
    #sidebar-usage-badge.usage-pill-tappable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    @media (min-width: 769px) {
      #sidebar-usage-badge.usage-pill {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 0.42rem 0.55rem;
        border-radius: 10px;
        background: var(--surface-hover);
        border: 1px solid var(--border);
        font-weight: 600;
        letter-spacing: -0.01em;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      }
      [data-theme="dark"] #sidebar-usage-badge.usage-pill {
        background: rgba(var(--surface-rgb), 0.55);
        border-color: rgba(255,255,255,0.1);
      }
    }
    /* Mobile "More" bottom sheet (secondary nav: Team, Workflows, Settings, Account) */
    .more-sheet-backdrop {
      display: none; position: fixed; inset: 0; z-index: 210;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      opacity: 0; transition: opacity 0.2s var(--ease-out); pointer-events: none;
    }
    [data-theme="dark"] .more-sheet-backdrop { background: rgba(0, 0, 0, 0.55); }
    .more-sheet-backdrop--open {
      display: block; opacity: 1; pointer-events: auto;
    }
    .more-sheet {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 211;
      max-height: min(50vh, 420px);
      background: var(--surface);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      border: 1px solid var(--border); border-bottom: none;
      box-shadow: var(--shadow-xl);
      transform: translateY(105%);
      transition: transform 0.28s var(--ease-out);
      padding-bottom: env(safe-area-inset-bottom, 0);
      touch-action: pan-y;
    }
    .more-sheet--open { transform: translateY(0); }
    .more-sheet-handle {
      width: 40px; height: 5px; border-radius: 999px; background: var(--border-strong);
      margin: 0.65rem auto 0.25rem; flex-shrink: 0;
    }
    .more-sheet-title {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--muted); padding: 0.35rem 1.1rem 0.5rem;
    }
    .more-sheet-nav { display: flex; flex-direction: column; padding: 0 0 0.35rem; }
    .more-sheet-item {
      display: flex; align-items: center; gap: 0.75rem;
      width: 100%; text-align: left;
      padding: 0.88rem 1.1rem; font-size: 0.9375rem; font-weight: 500;
      border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text);
      cursor: pointer; transition: background 0.15s ease; font-family: inherit;
    }
    .more-sheet-item:first-of-type { border-top: none; }
    .more-sheet-item:hover, .more-sheet-item:focus-visible { background: var(--surface-hover); }
    .more-sheet-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    .more-sheet-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--muted); display: flex; align-items: center; justify-content: center; }
    .more-sheet-icon svg { width: 22px; height: 22px; }
    @media (min-width: 769px) {
      .more-sheet, .more-sheet-backdrop { display: none !important; visibility: hidden !important; pointer-events: none !important; }
    }
    /* Author .tab / .more-sheet-item display rules override the HTML hidden="" UA style — force hidden tabs/items offscreen */
    .tab[hidden],
    .more-sheet-item[hidden] {
      display: none !important;
    }
    /* Canonical .btn / .btn-secondary / .btn-action use display:inline-flex — same [hidden] override (mobile settings Back to list, etc.). */
    .btn[hidden],
    .btn-secondary[hidden],
    .btn-action[hidden],
    button.btn-secondary[hidden] {
      display: none !important;
    }
    .tab { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.875rem; border: none; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; font-size: var(--text-sm); font-weight: 500; text-align: left; transition: background var(--transition), color var(--transition), transform 0.15s var(--ease-out); position: relative; }
    .tab:hover { color: var(--text); background: var(--surface-hover); }
    .tab.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; box-shadow: var(--shadow-xs); }
    .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .tab-icon { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .tab-icon svg { width: 100%; height: 100%; }
    /* Session-active dot sits on the icon (like #notif-bell-dot) so tabs stay centered when narrow/collapsed */
    .tab-session-indicator {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 2px var(--surface);
      display: none;
      pointer-events: none;
    }
    .sidebar-usage { margin: 0 0.65rem 0.65rem; padding: 0.65rem 0.75rem; background: var(--bg); border-radius: 10px; border: 1px solid var(--border); }
    .usage-section { margin-bottom: 0.75rem; }
    .usage-section:last-child { margin-bottom: 0; }
    .usage-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--text); margin-bottom: 0.375rem; }
    .usage-row .usage-label { font-weight: 500; color: var(--muted); }
    .usage-row .usage-val { font-size: 0.75rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
    .usage-bar-wrap { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
    .usage-bar { height: 100%; border-radius: 99px; width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .sidebar-account { padding: 0.5rem 0.65rem; border-top: 1px solid var(--border); margin-top: auto; background: var(--surface); }
    .sidebar-account-entry {
      display: flex; align-items: center; gap: 0.65rem; width: 100%;
      padding: 0.45rem 0.5rem; border: none; border-radius: 12px; background: transparent;
      cursor: pointer; font-family: inherit; text-align: left; color: inherit;
      transition: background 0.15s ease;
    }
    .sidebar-account-entry:hover { background: var(--surface-hover); }
    .sidebar-account-entry:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .account-avatar {
      width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); color: #fff;
      display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; flex-shrink: 0;
      box-shadow: var(--shadow-xs);
    }
    .account-email { font-size: 0.8125rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; }
    .app-main {
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      background: var(--bg);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      -webkit-overflow-scrolling: touch;
    }
    .panel { display: none; flex: 1; flex-direction: column; min-height: 0; background: var(--surface); border-radius: 0; margin: 0; box-shadow: none; border: none; overflow: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    /* Chat: tinted shell so stream + padding read as one layer (desktop + mobile) */
    #panel-chat.active { background: var(--chat-panel-bg, var(--surface)); }
    .panel.active { display: flex; }
    @media (prefers-reduced-motion: no-preference) {
      .panel.active { animation: dashboard-panel-in 0.22s var(--ease-out) both; }
    }
    /* Mobile embed: instant panel swap — animation felt sluggish on tab switches. */
    @media (max-width: 768px) {
      html.cloudaxis-embed .panel.active { animation: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .panel.active { animation: none !important; }
      .team-hero-flow-step { animation: none !important; }
    }
    @keyframes dashboard-panel-in {
      from { opacity: 0.92; }
      to { opacity: 1; }
    }
    .app-topbar {
      background: var(--glass-bg); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
      border-bottom: 1px solid var(--border); padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 1rem 0.42rem 1rem;
      display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex-shrink: 0; position: sticky; top: 0; z-index: 50;
    }
    .app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .whats-new-header-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-soft);
      text-decoration: none;
      padding: 0.35rem 0.7rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      white-space: nowrap;
    }
    .whats-new-header-btn:hover { background: var(--surface-hover); color: var(--text); }
    .whats-new-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--error); flex-shrink: 0; }
    .whats-new-header-btn.whats-new-unseen .whats-new-dot { display: block; }
    /* What's New slide-over (in-app changelog) */
    .whats-new-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: stretch; justify-content: flex-end; pointer-events: none; }
    .whats-new-modal[hidden] { display: none !important; }
    .whats-new-modal.is-open { pointer-events: auto; }
    .whats-new-modal-backdrop {
      position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      opacity: 0; transition: opacity 0.22s var(--ease-out);
    }
    .whats-new-modal.is-open .whats-new-modal-backdrop { opacity: 1; }
    .whats-new-modal-panel {
      position: relative; z-index: 1; width: min(100vw, 420px); max-width: 100%;
      height: 100%; max-height: 100dvh; background: var(--surface);
      border-left: 1px solid var(--border); box-shadow: -12px 0 48px rgba(0, 0, 0, 0.12);
      display: flex; flex-direction: column; min-height: 0;
      transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .whats-new-modal.is-open .whats-new-modal-panel { transform: translateX(0); }
    .whats-new-modal-handle {
      display: none; width: 36px; height: 4px; border-radius: 99px; background: var(--border);
      margin: 0.5rem auto 0; flex-shrink: 0;
    }
    .whats-new-modal-header {
      flex-shrink: 0; display: flex; align-items: center; gap: 0.65rem;
      padding: 1rem 1rem 0.85rem; border-bottom: 1px solid var(--border);
    }
    .whats-new-modal-header-text { flex: 1; min-width: 0; }
    .whats-new-modal-header-text h2 {
      margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
    }
    .whats-new-modal-sub { margin: 0.2rem 0 0; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
    .whats-new-modal-count {
      font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 0.2rem 0.5rem; border-radius: 8px; background: var(--surface-hover); color: var(--text-soft);
      flex-shrink: 0;
    }
    .whats-new-modal-close {
      flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-family: inherit;
    }
    .whats-new-modal-close:hover { background: var(--surface-hover); }
    .whats-new-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1rem 1.5rem; -webkit-overflow-scrolling: touch; }
    .whats-new-modal-loading, .whats-new-modal-error { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0; }
    .whats-new-modal-retry {
      margin-top: 0.75rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
      padding: 0.45rem 1rem; border-radius: 10px; border: 1px solid var(--border);
      background: var(--surface-hover); color: var(--text);
    }
    .whats-new-modal-retry:hover { filter: brightness(1.02); }
    .whats-new-modal-day { margin-bottom: 1.75rem; }
    .whats-new-modal-day:last-child { margin-bottom: 0; }
    .whats-new-modal-day-head {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
      margin-bottom: 0.35rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
    }
    .whats-new-modal-date { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text); }
    .whats-new-modal-time { font-size: 0.75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
    .whats-new-modal-release { margin: 0 0 0.65rem; font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
    .whats-new-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
    .whats-new-modal-item { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--text-soft); }
    .whats-new-modal-badge {
      flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      padding: 0.18rem 0.4rem; border-radius: 5px; margin-top: 0.12rem;
    }
    .whats-new-modal-badge.new { background: rgba(20, 184, 166, 0.15); color: #0d9488; }
    .whats-new-modal-badge.improved { background: rgba(16, 185, 129, 0.15); color: #059669; }
    .whats-new-modal-badge.fixed { background: rgba(245, 158, 11, 0.18); color: #d97706; }
    .whats-new-modal-badge.security { background: rgba(99, 102, 241, 0.18); color: #4f46e5; }
    @media (max-width: 640px) {
      .whats-new-modal { align-items: flex-end; justify-content: center; }
      .whats-new-modal-panel {
        width: 100%; height: auto; max-height: min(88dvh, 640px); border-left: none;
        border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
        transform: translateY(100%); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
      }
      .whats-new-modal.is-open .whats-new-modal-panel { transform: translateY(0); }
      .whats-new-modal-handle { display: block; }
    }
    [data-theme="dark"] .app-topbar { background: var(--glass-bg); }
    /* Chat topbar: neutral glass + bottom hairline (no cyan tint) */
    #panel-chat > .app-topbar {
      background: var(--chat-topbar-surface);
      border-radius: var(--radius-lg);
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
      border-bottom: 1px solid var(--chat-topbar-border);
    }
    [data-theme="dark"] #panel-chat > .app-topbar {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      border-bottom: 1px solid var(--chat-topbar-border);
    }
    .app-topbar-title { font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #panel-settings .app-topbar { align-items: flex-start; }
    #panel-settings .app-topbar-title-stack { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.1rem; }
    #panel-settings .settings-topbar-subtitle { font-size: 0.72rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
    /* flex (not inline-flex) so nested #emp-topbar-info can grow to full remaining width on mobile */
    .app-topbar-title-group { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1; }
    /* Chat top bar: shrink between drawer + actions (employee profile + long subtitles must not widen the column). */
    #panel-chat > .app-topbar .app-topbar-title-group {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    /* Specialist header: parent overflow:hidden + nested ellipsis collapses the name to ~1 char + "…".
       Allow overflow once #emp-topbar-info is shown (aria-hidden toggled in updateTopBarForThread). */
    #panel-chat > .app-topbar .app-topbar-title-group:has(#emp-topbar-info[aria-hidden='false']) {
      overflow: visible;
    }
    .chat-topbar-notif-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
      box-shadow: 0 0 0 2px var(--surface); flex-shrink: 0;
      display: none; pointer-events: none;
    }
    .chat-topbar-notif-dot.visible { display: block; animation: notifPop 0.3s ease; }
    .usage-pill { font-size: .75rem; font-weight: 500; color: var(--muted); background: var(--surface-hover); padding: .35rem 0.75rem; border-radius: 99px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
    .chat-topbar-usage-wrap { position: relative; margin-left: 0; }
    /* Icon buttons (chat topbar on mobile, sidebar chrome on desktop) */
    .topbar-icon-btn {
      position: relative; width: 32px; height: 32px; flex-shrink: 0;
      border: none; background: transparent; color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px; cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .topbar-icon-btn:hover {
      background: var(--surface-hover);
      color: var(--text);
    }
    .topbar-help-btn {
      position: relative;
      z-index: 5;
    }
    /** First session: pulse topbar Help until first open — respects reduced motion */
    @keyframes helpPulseRing {
      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #14b8a6) 50%, transparent); }
      70% { box-shadow: 0 0 0 8px transparent; }
      100% { box-shadow: 0 0 0 0 transparent; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .topbar-help-btn.help-pulse {
        border-radius: 8px;
        animation: helpPulseRing 1.8s ease-out 3;
      }
    }

    /** First-run carousel: live stream unavailable — retry affordance */
    .onb-demo-fallback {
      margin-top: 0.65rem;
      padding: 0.55rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface-hover);
      text-align: center;
      font-size: 0.8rem;
      line-height: 1.4;
      color: var(--text-soft);
    }

    /** Hire modal focus chips — minimal tap-friendly */
    .hire-focus-chips-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem;
    }
    button.hire-focus-chip {
      min-height: 40px;
      padding: 0.28rem 0.65rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.76rem;
      line-height: 1.35;
      cursor: pointer;
      text-align: left;
      max-width: 100%;
    }
    button.hire-focus-chip:hover {
      background: var(--surface-hover);
      border-color: var(--brand);
      color: var(--text);
    }

    /** Mobile WhatsApp onboarding sheet — primary wa.me deep link */
    .onb-wa-mobile-sheet-wrap {
      position: fixed;
      inset: 0;
      z-index: 12010;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
      pointer-events: auto;
    }
    .onb-wa-mobile-sheet-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.42);
      border: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      display: block;
    }
    .onb-wa-mobile-sheet-panel {
      position: relative;
      width: min(560px, 100%);
      padding: 1rem 1.1rem 1.35rem;
      border-radius: 16px 16px 0 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-bottom: none;
      box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.12);
    }
    .onb-wa-mobile-sheet-panel h4 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
    }
    .onb-wa-mobile-sheet-actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }
    .onb-wa-mobile-sheet-actions .btn-primary {
      min-height: 48px;
    }
    .topbar-icon-badge {
      position: absolute; top: 1px; right: 1px;
      font-size: 0.6rem; font-weight: 700;
      background: var(--brand); color: #fff;
      border-radius: 99px; min-width: 14px; height: 14px;
      padding: 0 3px; line-height: 14px; text-align: center;
      display: none;
    }
    .usage-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 260px;
      max-width: min(320px, calc(100vw - 2rem));
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
      z-index: 120;
      padding: 0.65rem 0.85rem;
      max-height: 70vh;
      overflow-y: auto;
    }
    .usage-dropdown.open { display: block; animation: popover-in 0.15s ease; }
    .usage-dropdown .usage-section { margin-bottom: 0.55rem; }
    .usage-dropdown .usage-section:last-child { margin-bottom: 0; }
    .usage-dropdown-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.35rem; }
    #usage-badge.usage-pill-tappable { cursor: pointer; }
    #usage-badge.usage-pill-tappable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    /* Earn check-in surfacing: small "+N" dot on the credits pill (brand color,
       not alert-red — it reads reward, not warning) + one-tap claim row. */
    .earn-dot {
      position: absolute;
      top: -5px;
      right: -4px;
      font-size: 0.58rem;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      background: var(--brand);
      border-radius: 99px;
      padding: 2px 5px;
      pointer-events: none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .earn-claim-row { margin-top: 0.45rem; }
    .earn-claim-row[hidden] { display: none; }
    .earn-claim-inner { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .earn-claim-btn {
      font-size: 0.75rem;
      font-weight: 600;
      color: #fff;
      background: var(--brand);
      border: none;
      border-radius: 99px;
      padding: 0.3rem 0.7rem;
      cursor: pointer;
      min-height: 28px;
    }
    .earn-claim-btn:hover { filter: brightness(1.06); }
    .earn-claim-btn:disabled { opacity: 0.6; cursor: default; }
    .earn-claim-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .earn-claim-streak { font-size: 0.72rem; color: var(--muted); }
    .earn-claim-done { font-size: 0.75rem; color: var(--success); }
    .earn-more-link {
      display: block;
      margin-top: 0.3rem;
      padding: 0;
      background: none;
      border: none;
      font-size: 0.72rem;
      color: var(--muted);
      cursor: pointer;
      text-align: left;
    }
    .earn-more-link:hover { color: var(--brand); text-decoration: underline; }
    @media (pointer: coarse) {
      .earn-claim-btn { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.85rem; }
      .earn-more-link { min-height: 34px; }
    }

    /* ── Canonical button system (dashboard-wide) ───────────────────────────
       Use: .btn + .btn-primary | .btn-secondary | .btn-tertiary | .btn-danger (+ .btn-sm / .btn-icon).
       Legacy aliases: button.primary / .primary, .btn-action, .btn-connect keep prior class names working. */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      min-height: var(--touch-min);
      padding: 0.65rem clamp(0.8rem, 2vw, 1.15rem);
      border-radius: var(--btn-radius-cta);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
      touch-action: manipulation;
      border: 1px solid transparent;
      box-sizing: border-box;
      transition: background var(--transition), border-color var(--transition), color var(--transition),
        filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-xs);
    }
    .btn:disabled,
    .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
    .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    .btn-primary {
      background: var(--brand-gradient);
      color: #fff;
      border-color: transparent;
      font-weight: 700;
      box-shadow: var(--shadow-sm);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
        filter: brightness(1.06);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
      }
    }
    .btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
      filter: brightness(0.95);
      transform: translateY(0);
    }

    /* Single source for .btn-secondary (with or without .btn) */
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--touch-min);
      padding: 0.65rem 1.2rem;
      border-radius: var(--btn-radius-cta);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 600;
      cursor: pointer;
      box-sizing: border-box;
      transition: background var(--transition), border-color var(--transition), color var(--transition),
        filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-xs);
      background: var(--surface-hover);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
      background: var(--surface);
      border-color: var(--brand);
      color: var(--brand);
      transform: translateY(-1px);
    }
    .btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
      filter: brightness(0.97);
      transform: translateY(0) scale(0.98);
    }
    .btn-secondary.danger:hover:not(:disabled):not([aria-disabled="true"]) {
      border-color: var(--error);
      color: var(--error);
    }

    .btn-tertiary {
      background: transparent;
      color: var(--muted);
      border-color: var(--border);
      box-shadow: none;
    }
    .btn-tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
      background: var(--surface-hover);
      color: var(--text);
      border-color: var(--border-strong);
    }

    .btn-ghost,
    a.btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--muted);
      border: 1px solid var(--border);
      background: transparent;
      text-decoration: none;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .btn-ghost:hover {
      background: var(--surface-hover);
      color: var(--text);
      border-color: var(--border-strong);
    }
    .btn-ghost:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    .btn-danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--touch-min);
      padding: 0.65rem 1rem;
      border-radius: var(--btn-radius-utility);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
      box-sizing: border-box;
      transition: background var(--transition), border-color var(--transition), color var(--transition),
        filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      background: var(--surface);
      color: var(--error);
      border: 1px solid rgba(239, 68, 68, 0.35);
      box-shadow: var(--shadow-xs);
    }
    .btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
      background: var(--error-soft);
      border-color: var(--error);
    }
    .btn-danger:focus-visible {
      outline: 2px solid var(--error);
      outline-offset: 2px;
    }

    .btn-sm {
      min-height: 36px;
      padding: 0.35rem 0.75rem;
      font-size: 0.8125rem;
      border-radius: var(--radius-sm);
    }
    @media (max-width: 768px) {
      .btn-sm.btn-sm-touch { min-height: var(--touch-min); }
      .schedule-foot-btn {
        min-height: 40px;
        padding: 0.45rem 0.75rem;
      }
      .schedule-modal-close {
        width: 44px;
        height: 44px;
      }
    }

    /* Perceived feedback for async actions */
    .btn[aria-busy="true"] {
      pointer-events: none;
      opacity: 0.85;
      cursor: wait;
    }
    .btn-icon {
      min-width: var(--touch-min);
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    /* Legacy: bare .primary — previously had no global baseline */
    button.primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--touch-min);
      padding: 0.65rem clamp(0.85rem, 2vw, 1.2rem);
      border-radius: var(--radius-full);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      border: none;
      background: var(--brand-gradient);
      color: #fff;
      box-shadow: var(--shadow-sm);
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
    }
    button.primary:hover:not(:disabled) {
      filter: brightness(1.06);
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    button.primary:active:not(:disabled) {
      filter: brightness(0.95);
      transform: translateY(0);
    }
    button.primary:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    .btn-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--touch-min); padding: 0.65rem clamp(0.8rem, 2vw, 1.15rem); border-radius: var(--btn-radius-utility);
      border: 1px solid var(--border); background: var(--surface-hover); color: var(--text); cursor: pointer;
      touch-action: manipulation;
      font-size: var(--text-sm); font-weight: 600; transition: background var(--transition), border-color var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-xs);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-action:hover { background: var(--surface); border-color: var(--border-strong); transform: translateY(-1px); }
    }
    .btn-action:active { filter: brightness(0.97); transform: translateY(0) scale(0.98); }
    .btn-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    /* Compound: canonical + legacy */
    .btn.btn-action { box-shadow: var(--shadow-xs); }
    /* Compact utility actions (notifications, message rows, schedule webhooks) */
    .btn-action.btn-action-sm {
      min-height: 36px;
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
    }
    .notif-panel-header .btn-action.btn-action-sm {
      font-size: 0.8rem;
      padding: 0.35rem 0.6rem;
    }
    .msg-share-location-btn.btn-action {
      margin-top: 0.35rem;
    }
    .msg-share-location-btn.btn-action.btn-action-sm {
      font-size: 0.8rem;
      padding: 0.25rem 0.6rem;
    }
    .schedule-webhook-toggle.btn-action {
      margin-top: 0.35rem;
      font-size: 0.78rem;
    }
    .emp-duty-history-close.btn-action {
      margin-top: 0.35rem;
    }
    .settings-account-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.5rem;
    }
    .settings-account-actions .btn-secondary,
    .settings-account-actions .btn-disconnect {
      margin: 0;
    }
    #saved-login-save-btn,
    #user-vpn-domain-add-btn,
    #referral-copy-code-btn,
    #referral-copy-btn {
      margin: 0;
    }
    #notion-connect-actions .btn-connect,
    #notion-connect-actions .btn-disconnect {
      margin: 0;
    }
    #emp-duties-add-btn {
      margin-top: 0.65rem;
    }
    .delete-account-btn--danger {
      margin-top: 0.5rem;
    }
    .pinned-memory-item__actions {
      flex-shrink: 0;
      display: flex;
      gap: 0.35rem;
      align-items: center;
    }
    .notif-card-meta--error {
      color: var(--error);
    }
    .chat-panel { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: transparent; }
    .thread-new-btn { display: none; }
    .thread-avatar {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: var(--surface-hover);
      color: var(--brand); font-size: 0.82rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      border: none;
      margin-top: 0.15rem;
    }
    /* Per-chat tint from first letter (inline gradient + border on .thread-avatar--letter) */
    .thread-avatar.thread-avatar--letter {
      text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .thread-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-right: 3rem; /* room for absolute .thread-item-actions (44px touch target) */ }
    .thread-item-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem; }
    .thread-item-header-row .thread-time { margin: 0; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
    .thread-panel-inner { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
    /* Chat + thread split (replaces inline flex styles on #thread-panel / #thread-list) */
    .chat-layout--split {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }
    .thread-panel--sidebar {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-alt);
      min-width: 0;
    }
    .thread-list--main {
      flex: 1;
      overflow-y: auto;
      padding: 0.3rem 0;
      padding-bottom: 4.5rem;
    }
    .chat-main-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }
    .thread-search-wrap { padding: 0.58rem 0.72rem; flex-shrink: 0; border-bottom: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .thread-search-input {
      width: 100%; padding: 0.45rem 0.65rem 0.45rem 2rem; border-radius: var(--radius); border: 1px solid var(--border);
      background: var(--surface-hover); color: var(--text); font-size: 0.875rem;
      box-shadow: none;
    }
    .thread-search-input:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
    /* Hook for JS autofill sweep (thread + team search must not receive login email). */
    @keyframes cloudybot-autofill-guard {
      from { opacity: 1; }
      to { opacity: 1; }
    }
    #thread-search-input:-webkit-autofill,
    #team-search:-webkit-autofill,
    #files-search-input:-webkit-autofill {
      animation-name: cloudybot-autofill-guard;
      animation-duration: 0.01s;
    }
    /* iOS Safari / Chrome on iOS: auto-zoom on focus when computed font-size < 16px (fluid html root can dip below 16px on narrow widths). */
    /* Use 900px so phone landscape (e.g. 736×414) is covered, not only narrow portrait. */
    /* .channel-input covers scheduled-task modal (#schedule-task-modal), settings cards (memory/VPN/retention/model), and any other form using that class. */
    @media (max-width: 900px) {
      .thread-search-input,
      .files-search-input,
      .chat-inputbar textarea#chat-input,
      .chat-inputbar input:not([type="file"]),
      .auth-form input[type=email],
      .auth-form input[type=password],
      .channel-input,
      .pairing-input,
      textarea.editor-fallback,
      /* CodeMirror 6: editable surface is contenteditable, not a textarea — same 16px rule applies */
      .editor-container .cm-content {
        font-size: 16px;
      }
    }
    .thread-search-wrap { position: relative; }
    .thread-search-wrap::before {
      content: ""; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px;
      opacity: 0.45; background: no-repeat center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    }
    .thread-new-fab {
      position: absolute; bottom: 1rem; right: 1rem; z-index: 5;
      width: 48px; height: 48px; border-radius: var(--btn-radius-cta); border: none; cursor: pointer;
      background: var(--brand-gradient); color: #fff;
      box-shadow: var(--shadow-sm);
      display: flex; align-items: center; justify-content: center;
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
    }
    .thread-new-fab:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow); }
    .thread-new-fab:active { filter: brightness(0.95); transform: translateY(0); }
    .thread-new-fab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .thread-new-fab svg { width: 22px; height: 22px; }
    .thread-item { display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.8rem 0.62rem; cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; margin: 0.24rem 0.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
    .thread-item:hover { background: var(--surface-hover); border-color: var(--border-strong); }
    /* Active row: must contrast with thread-panel (--bg-alt), which equals --surface-hover in light mode */
    .thread-item.thread-active { background: var(--brand-soft) !important; border-color: rgba(var(--brand-rgb), 0.35); box-shadow: none; }
    .thread-item.thread-active:hover { background: var(--brand-soft) !important; }
    .thread-title { font-size: var(--text-lg); font-weight: 500; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding-right: 0; line-height: 1.28; flex: 1; min-width: 0; }
    .thread-title.thread-title--unread { font-weight: 600; }
    .thread-preview { font-size: 0.81rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Specialist sidebar: allow 2-line clamp; full text in title tooltip (buildEmpItemSidebarDetailHtml). */
    .thread-preview.thread-preview--emp-sidebar {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      line-height: 1.35;
    }
    .thread-time.thread-time--emp-never { color: var(--muted-soft); font-style: italic; }
    /* Specialist rows: meta lines left-aligned like conversation preview (avoids “centered” drift) */
    .emp-item .thread-meta-row { justify-content: flex-start; align-items: baseline; }
    .thread-cloudia-dock .emp-item .thread-meta-row { justify-content: flex-start; }
    .thread-item-actions { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2; }
    /* Always show menu control — opacity:0 + hover only hid it on touch and looked like a bug */
    .thread-menu-btn {
      width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); padding: 0; border: none; border-radius: var(--radius);
      background: transparent; color: var(--text-muted); cursor: pointer;
      line-height: 0; display: flex; align-items: center; justify-content: center;
      opacity: 0.88; transition: opacity 0.15s, background 0.15s, color 0.15s;
    }
    .thread-menu-btn svg { display: block; flex-shrink: 0; }
    .thread-item:hover .thread-menu-btn { opacity: 1; color: var(--text); }
    .thread-menu-btn:hover { background: var(--surface-hover); color: var(--text); opacity: 1; }
    .thread-menu-btn:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 2px; color: var(--text); }
    .thread-menu-dropdown { position: absolute; right: 0; top: 100%; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 100; min-width: 120px; overflow: hidden; }
    /* Escapes #thread-list overflow clipping (scrollable sidebar) — positioned from JS */
    .thread-menu-dropdown.thread-menu-dropdown--fixed {
      position: fixed !important;
      right: unset;
      top: unset;
      margin-top: 0 !important;
      z-index: 10000 !important;
      max-height: min(70vh, 320px);
      overflow-x: hidden;
      overflow-y: auto;
    }
    .thread-menu-dropdown button { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; color: var(--text); font-size: 0.8125rem; text-align: left; cursor: pointer; transition: background 0.12s; }
    .thread-menu-dropdown button:hover { background: var(--surface-hover); }
    .thread-menu-dropdown button.danger:hover { background: var(--error-soft); color: var(--error); }
    .thread-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
    .thread-meta-row { display: flex; justify-content: flex-end; align-items: center; margin-top: 0.12rem; min-height: 0.75rem; }
    .thread-time.thread-time--subtle { font-size: 0.66rem; color: var(--muted-soft); letter-spacing: 0.01em; margin: 0; }
    .thread-item-top { display: none; }
    .thread-unread-badge { flex-shrink: 0; min-width: 1.1rem; height: 1.1rem; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 0.62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
    .thread-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-flex; flex-shrink: 0; }
    .emp-activity-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.125rem;
      height: 1.125rem;
      padding: 0 0.3rem;
      border-radius: 999px;
      background: var(--brand);
      color: #fff;
      font-size: 0.625rem;
      font-weight: 700;
      line-height: 1;
      flex-shrink: 0;
    }
    .emp-topbar-activity-badge { margin-left: 0.25rem; }
    .team-board-activity-badge { margin-left: auto; }
    .team-board-chip-activity-badge { margin-left: 0.35rem; }
    #emp-activity-strip.emp-activity-strip {
      display: none;
      width: 100%;
      align-items: center;
      gap: 0.5rem;
      padding: 0.55rem 1rem;
      border: none;
      border-bottom: 1px solid rgba(var(--brand-rgb), 0.2);
      background: rgba(var(--brand-rgb), 0.08);
      color: inherit;
      cursor: pointer;
      text-align: left;
    }
    #emp-activity-strip.emp-activity-strip:not([hidden]) { display: flex; }
    #emp-activity-strip.emp-activity-strip:hover { background: rgba(var(--brand-rgb), 0.14); }
    #emp-activity-strip.emp-activity-strip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    .emp-activity-strip-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
      flex-shrink: 0;
    }
    .emp-activity-strip-chevron { color: var(--brand); font-weight: 700; flex-shrink: 0; margin-left: auto; }
    .emp-activity-link {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      margin-top: 0.15rem;
      padding: 0;
      border: none;
      background: none;
      color: var(--brand);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
    }
    .emp-activity-link:hover { text-decoration: underline; }
    .team-board-activity-link {
      margin-left: 0.35rem;
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--brand);
      white-space: nowrap;
    }
    .thread-preview-unread { font-weight: 500; color: var(--text-soft) !important; }
    /* Subtle canvas — same neutral base as the rest of the app; soft top veil for depth */
    .chat-log-wrap { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 1.05rem 1.1rem 1.45rem; display: flex; flex-direction: column; min-height: 0; min-width: 0; background-color: var(--chat-canvas-bg); background-image: var(--chat-canvas-veil); }
    [data-theme="dark"] .chat-log-wrap { background-color: var(--chat-canvas-bg); background-image: var(--chat-canvas-veil); }
    .chat-welcome { display: none; width: 100%; padding: 1rem 1rem 1.25rem; text-align: center; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 0; }
    .chat-welcome.visible { display: flex; margin-top: auto; }
    /* General empty chat only — starters + collapsed More (Cloudia lives in More + Cloudia thread) */
    .chat-welcome--minimal {
      gap: 0.45rem;
      padding: 0.55rem 0.6rem 0.7rem;
      max-width: 28rem;
      margin-inline: auto;
      align-items: stretch;
      text-align: left;
    }
    .chat-welcome-greeting {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--text);
      line-height: 1.25;
      width: 100%;
    }
    .welcome-starters-wrap {
      width: 100%;
    }
    .chat-welcome--minimal .welcome-starters-grid--compact {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      width: 100%;
    }
    .chat-welcome--minimal .welcome-start-chip {
      width: 100%;
      min-height: 2.4rem;
      padding: 0.45rem 0.58rem;
      border-radius: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .chat-welcome--minimal .welcome-start-chip:hover {
      border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
      background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
      transform: translateY(-1px);
    }
    .chat-welcome--minimal .welcome-explore-more {
      margin-top: 0.15rem;
    }
    /* Empty chat: don't let #chat-log (flex:1) steal vertical space — keeps welcome above input without scrolling */
    .chat-log-wrap:has(#chat-welcome.visible) .chat-log:empty {
      flex: 0 0 0 !important;
      min-height: 0 !important;
      overflow: hidden;
      padding: 0;
    }
    .chat-welcome-title { font-size: clamp(1.15rem, 2.8vw, 1.45rem); font-weight: 800; color: var(--text); margin: 0 0 0.35rem; letter-spacing: -0.03em; }
    .chat-welcome-sub { font-size: 0.875rem; color: var(--muted); margin: 0 auto 0.75rem; max-width: 26rem; line-height: 1.45; }
    .chat-welcome-prompts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
    .chat-welcome-prompts button { padding: .65rem 1.1rem; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .9rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; box-shadow: none; }
    .chat-welcome-prompts button:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
    .chat-welcome-prompts button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .onboarding-card { background: var(--surface-hover); border-radius: 16px; padding: 1.25rem; margin: 0 auto 1.5rem; text-align: left; max-width: 480px; border: 1px solid var(--border); }
    .onboarding-header { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; }
    .onboarding-tools { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
    .onboarding-tool { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
    .onboarding-icon { font-size: 1.2rem; }
    .onboarding-name { font-weight: 600; color: var(--text); min-width: 70px; }
    .onboarding-hint { color: var(--muted); font-size: 0.85rem; }
    .onboarding-channels { font-size: 0.85rem; }
    .onboarding-channels a { color: var(--brand); text-decoration: none; }
    .onboarding-channels a:hover { text-decoration: underline; }
    .first-session-checklist {
      width: 100%;
      max-width: 22rem;
      margin: 0 auto 0.65rem;
      padding: 0.65rem 0.85rem;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface-hover);
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .first-session-checklist--compact {
      max-width: 100%;
      margin: 0 0 0.45rem;
      padding: 0.45rem 0.65rem;
      border-radius: 12px;
    }
    .first-session-checklist__title {
      margin: 0 0 0.4rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
    }
    .first-session-checklist__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .first-session-checklist__item {
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
      font-size: 0.8rem;
      line-height: 1.35;
      color: var(--text-soft);
    }
    .first-session-checklist__item--done { color: var(--text); }
    .first-session-checklist__mark {
      flex-shrink: 0;
      width: 1.1rem;
      text-align: center;
      font-weight: 700;
      color: var(--muted);
    }
    .first-session-checklist__item--done .first-session-checklist__mark { color: var(--brand); }
    .welcome-showcase { width: 100%; max-width: 460px; margin: 0 auto; text-align: center; padding: 0; border: none; background: transparent; box-shadow: none; }

    /* Welcome — tiered layout: prominent starters, compact packs, “More” for checklist & hires */
    .chat-welcome--tiered {
      gap: 0.95rem;
      align-items: stretch;
      max-width: 34rem;
      margin-inline: auto;
    }
    .chat-welcome--compact {
      gap: 0.55rem;
      padding: 0.55rem 0.65rem 0.75rem;
      max-width: 30rem;
    }
    .chat-welcome--compact .chat-welcome-title {
      font-size: clamp(1rem, 2.4vw, 1.2rem);
      margin-bottom: 0.2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, var(--text) 0%, color-mix(in srgb, var(--brand) 55%, var(--text)) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .chat-welcome--compact .chat-welcome-sub {
      font-size: 0.8rem;
      margin-bottom: 0.35rem;
      max-width: 22rem;
      line-height: 1.35;
    }
    .chat-welcome--compact .chat-welcome-tier--primary,
    .chat-welcome--compact .chat-welcome-tier--secondary {
      padding: 0.62rem 0.58rem;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      box-shadow: 0 10px 28px -22px rgba(15, 23, 42, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .chat-welcome--compact .chat-welcome-tier__title--compact {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 0.4rem;
      text-align: left;
    }
    .chat-welcome--compact .welcome-starters-grid--compact {
      gap: 0.38rem;
      margin-bottom: 0;
    }
    .chat-welcome--compact .welcome-start-chip {
      min-height: 2.35rem;
      padding: 0.42rem 0.58rem;
      border-radius: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .chat-welcome--compact .welcome-start-chip:hover {
      border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
      background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface));
      transform: translateY(-1px);
    }
    .welcome-cloudia-card--compact {
      gap: 0.5rem;
    }
    .welcome-cloudia-card--compact .welcome-cloudia-card__cta {
      min-height: 2.15rem;
      font-size: 0.82rem;
      margin-top: 0;
    }
    .welcome-intro-lede--more-only {
      display: none !important;
    }
    .chat-welcome-tier { width: 100%; }
    .chat-welcome-tier--primary {
      padding: 0.9rem 0.72rem;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background: var(--surface-hover);
      box-sizing: border-box;
    }
    .chat-welcome-tier__title {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      text-align: center;
      line-height: 1.22;
    }
    .welcome-section-kicker--tight {
      margin-top: 0.1rem;
      margin-bottom: 0.5rem;
    }
    .welcome-section-kicker--soft { letter-spacing: 0.09em; }
    .welcome-showcase--primary { max-width: 100%; margin-top: 0.1rem; }
    .welcome-starters-grid--hero {
      gap: 0.52rem;
      margin-bottom: 0.35rem;
      max-width: 100%;
    }
    .chat-welcome-tier--primary .welcome-start-chip {
      min-height: 2.82rem;
      padding: 0.52rem 0.62rem;
      border-width: 1.5px;
      border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
      background: var(--surface);
    }
    .chat-welcome-tier--primary .welcome-start-chip:hover {
      border-color: var(--brand);
      background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
    }
    .chat-welcome-tier--primary .welcome-start-chip__label { font-size: 0.8rem; }
    .chat-welcome-tier__hint {
      margin: 0.5rem auto 0;
      max-width: 22rem;
      font-size: 0.8rem;
      line-height: 1.38;
      text-align: center;
    }
    .chat-welcome-tier--secondary .welcome-pack-strip-hint { opacity: 0.95; }
    .chat-welcome-tier--cloudia {
      border-color: var(--cloudia-card-border, rgba(var(--brand-rgb), 0.32));
      background: var(--cloudia-card-bg, var(--surface-hover));
    }
    .welcome-cloudia-card {
      width: 100%;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      position: relative;
      z-index: 1;
    }
    .welcome-cloudia-card__head {
      display: flex;
      align-items: center;
      gap: 0.55rem;
    }
    .welcome-specialist-emoji--cloudia {
      font-size: 1.35rem;
      line-height: 1;
      flex-shrink: 0;
    }
    .welcome-cloudia-card__titles {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
    }
    .welcome-cloudia-card__name {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .welcome-cloudia-card__tagline {
      font-size: 0.76rem;
      line-height: 1.35;
      margin: 0;
    }
    .welcome-cloudia-card__intro {
      margin: 0;
      font-size: 0.84rem;
      line-height: 1.45;
      color: var(--text-soft);
      text-align: left;
    }
    .welcome-cloudia-chips {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .welcome-cloudia-chip {
      width: 100%;
      text-align: left;
      justify-content: flex-start;
    }
    .welcome-cloudia-chip .welcome-start-chip__label {
      white-space: normal;
      text-align: left;
    }
    .welcome-cloudia-card__cta {
      width: 100%;
      min-height: 2.35rem;
      margin-top: 0.1rem;
      border-radius: 11px;
      font-weight: 600;
      box-shadow: 0 10px 24px -14px rgba(var(--brand-rgb), 0.55);
    }
    .welcome-cloudia-chip {
      border-radius: 11px !important;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .welcome-cloudia-chip:hover {
      transform: translateY(-1px);
    }
    .starter-pack-strip--welcome {
      gap: 0.5rem;
      padding-top: 0.15rem;
    }
    .starter-pack-strip--welcome .starter-pack-mini {
      min-width: min(172px, 78vw);
      padding: 0.48rem 0.52rem;
      flex-shrink: 0;
    }
    .starter-pack-strip--welcome .starter-pack-mini .onboarding-pack-trigger {
      min-height: 40px;
      font-size: 0.8rem;
      margin-top: 0.4rem;
    }
    .welcome-explore-more {
      width: 100%;
      margin-top: 0.15rem;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background: var(--surface);
      padding: 0 0 0.5rem;
      box-sizing: border-box;
    }
    .welcome-explore-more__summary {
      list-style: none;
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-soft);
      padding: 0.65rem 0.72rem;
      text-align: left;
      user-select: none;
    }
    .welcome-explore-more__summary::-webkit-details-marker,
    .welcome-explore-more__summary::marker { display: none; }
    .welcome-explore-more__summary::before {
      content: '▸ ';
      font-size: 0.72rem;
      color: var(--muted);
      display: inline-block;
      transition: transform 0.15s ease;
    }
    .welcome-explore-more[open] .welcome-explore-more__summary::before {
      transform: rotate(90deg);
    }
    .welcome-explore-more__body {
      padding: 0 0.65rem 0.45rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    #welcome-explore-more-details.welcome-explore-more .welcome-proven-panel { margin-left: auto; margin-right: auto; }
    .welcome-divider--explore { margin-top: 0; padding-top: 0.55rem; }
    .welcome-callouts--explore { justify-content: center; margin: 0.15rem 0 0; }
    #welcome-explore-more-details .welcome-callouts.welcome-callouts--explore { margin-top: 0; }

    .welcome-section-kicker { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.45rem; text-align: center; }
    .welcome-starters-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
      width: 100%;
      max-width: 420px;
      margin: 0 auto 0.85rem;
    }
    .welcome-start-chip {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      min-height: 2.5rem;
      padding: 0.45rem 0.55rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      text-align: left;
      font: inherit;
      color: inherit;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .welcome-start-chip:hover { border-color: var(--brand); background: var(--surface-hover); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
    .welcome-start-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .welcome-start-chip__emoji { font-size: 1.05rem; line-height: 1; flex-shrink: 0; width: 1.75rem; text-align: center; }
    .welcome-start-chip__label { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.25; }
    .welcome-proven-panel { margin: 0.45rem auto 0.55rem; padding: 0.65rem 0.55rem 0.75rem; max-width: 28rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-hover); text-align: center; }
    .welcome-proven-panel .welcome-section-kicker { margin-bottom: 0.35rem; }
    .welcome-proven-grid { margin-top: 0.25rem; }
    .welcome-divider { margin: 0.35rem 0 0.5rem; padding-top: 0.65rem; border-top: 1px solid var(--border); text-align: center; }
    .welcome-divider__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
    .welcome-specialist-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.5rem; max-width: 100%; }
    .welcome-specialist-item { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 58px; cursor: pointer; padding: 0.3rem 0.35rem; border-radius: 10px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; transition: border-color 0.15s, background 0.15s; }
    .welcome-specialist-item:hover { border-color: var(--border); background: var(--surface-hover); }
    .welcome-specialist-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .welcome-specialist-emoji { font-size: 1.2rem; line-height: 1; }
    /* Cloudia strip icon — same inline mascot as sidebar (not construction emoji) */
    .welcome-specialist-emoji--cloudia {
      font-size: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-sizing: border-box;
      overflow: hidden;
      background:
        radial-gradient(120% 100% at 50% 12%, var(--cloudia-avatar-plate-inner) 0%, transparent 55%),
        var(--cloudia-avatar-plate);
      border: 1px solid var(--cloudia-avatar-border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring),
        0 1px 4px rgba(var(--brand-rgb), 0.08);
    }
    .welcome-specialist-emoji--cloudia .emp-cloudia-mascot {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
    }
    .welcome-specialist-name { font-size: 0.72rem; font-weight: 700; color: var(--text); }
    .welcome-specialist-role { font-size: 0.62rem; color: var(--muted); text-align: center; max-width: 88px; line-height: 1.2; }
    .welcome-specialist-item--highlight {
      border-color: var(--brand-soft, rgba(99, 102, 241, 0.25));
      background: var(--brand-soft, rgba(99, 102, 241, 0.07));
    }
    .welcome-specialist-item--highlight .welcome-specialist-name { color: var(--brand); }
    .team-hero-wrap { text-align: center; max-width: 26rem; margin: 0 auto; padding: 0.5rem 0.25rem 1rem; }
    .team-hero-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
    .team-hero-sub { font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; margin: 0 0 1rem; }
    .team-hero-flow { display: flex; align-items: center; gap: 0; justify-content: center; margin: 1.25rem 0; flex-wrap: wrap; }
    .team-hero-flow-step {
      display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
      padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--surface);
      border: 1px solid var(--border); min-width: 72px; position: relative;
      animation: flowStepEntry 0.4s ease both;
    }
    .team-hero-flow-step:nth-child(2) { animation-delay: 0.15s; }
    .team-hero-flow-step:nth-child(4) { animation-delay: 0.3s; }
    .team-hero-flow-arrow {
      width: 28px; height: 2px; background: var(--brand); position: relative; flex-shrink: 0; margin: 0 2px;
    }
    .team-hero-flow-arrow::after {
      content: ''; position: absolute; right: -1px; top: -3px;
      border: solid var(--brand); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg);
    }
    @keyframes flowStepEntry {
      from { opacity: 0; transform: translateX(-8px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .team-hero-proof { font-size: 0.82rem; color: var(--muted); font-style: italic; margin: 0.75rem 0 1rem; line-height: 1.45; }
    .team-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; }
    .team-hero-body {
      overflow: hidden;
      transition: max-height 0.3s ease, opacity 0.3s ease;
    }
    .team-hero-body--open {
      max-height: 420px;
      opacity: 1;
    }
    .team-hero-body--closed {
      max-height: 0;
      opacity: 0;
      pointer-events: none;
    }
    .team-hero-expand-hint {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 0.78rem;
      color: var(--brand);
      cursor: pointer;
      margin: 0 0 0.75rem;
      text-decoration: underline;
      background: none;
      border: none;
      padding: 0;
      font: inherit;
    }
    .team-hero-collapse {
      display: block;
      margin: 0 auto 0.5rem;
      font-size: 0.72rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      font: inherit;
    }
    .hire-modal-how-wrap { margin: 0 0 0.65rem; padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-hover); flex-shrink: 0; }
    .hire-modal-how-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.5rem; }
    .hire-modal-how-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .hire-modal-how-step { flex: 1; min-width: 88px; text-align: center; padding: 0.4rem 0.35rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 0.7rem; color: var(--text-soft); line-height: 1.35; }
    .hire-modal-how-step strong { display: block; font-size: 0.76rem; color: var(--text); margin-bottom: 0.12rem; }
    .hire-modal-how-foot { margin: 0.45rem 0 0; font-size: 0.76rem; line-height: 1.4; }
    .hire-modal-how-dismiss { margin-top: 0.45rem; font-size: 0.72rem; color: var(--brand); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
    .hire-modal-how-collapsed { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.45rem; flex-shrink: 0; }
    .hire-modal-plan-hint {
      font-size: 0.82rem; color: var(--text-soft); background: var(--surface-hover);
      border: 1px solid var(--border); border-left: 3px solid var(--brand);
      border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0 0 0.75rem;
      flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    }
    .link-btn {
      background: none; border: none; padding: 0; color: var(--brand);
      font: inherit; font-size: inherit; cursor: pointer; text-decoration: underline;
      white-space: nowrap;
    }
    .pipeline-recipe-suggest-cta {
      text-align: center; font-size: 0.82rem; color: var(--muted);
      margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
    }
    #recipe-deploy-modal .recipe-deploy-modal-content { max-width: 420px; width: 92%; }
    .recipe-deploy-steps { margin: 0.75rem 0; padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-hover); font-size: 0.85rem; line-height: 1.5; max-height: 220px; overflow-y: auto; }
    .recipe-deploy-step-line { margin: 0.2rem 0; }
    .recipe-deploy-chain { color: var(--muted); text-align: center; margin: 0.15rem 0; font-size: 1rem; }
    .workflow-plan-deploy-card { margin-top: 0.75rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-hover); }
    .workflow-plan-deploy-card .workflow-plan-deploy-title { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--text); }
    .workflow-plan-deploy-card .workflow-plan-step-lines { margin: 0.35rem 0 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
    .workflow-plan-deploy-card .workflow-plan-step-lines li { margin: 0.2rem 0 0; }
    .workflow-plan-deploy-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; align-items: center; }
    .workflow-plan-deploy-card .workflow-plan-deploy-hint { margin: 0.45rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.35; }
    .recipe-deploy-step-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.35rem 0; font-size: 0.85rem; cursor: pointer; }
    .recipe-deploy-step-check input { margin-top: 0.2rem; flex-shrink: 0; }
    .pipeline-recipe-empty { max-width: 900px; margin: 0 auto; padding: 0.5rem 0.25rem 1.25rem; }
    .pipeline-recipe-empty-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); letter-spacing: -0.02em; }
    .pipeline-recipe-empty-sub { font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; margin: 0 0 1rem; }
    .pipeline-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
    .pipeline-recipe-grid--compact { margin-top: 0.5rem; }
    .pipeline-recipe-card { border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1rem; background: var(--surface); display: flex; flex-direction: column; gap: 0.5rem; }
    .pipeline-recipe-card--locked { opacity: 0.72; }
    .pipeline-recipe-card-head { display: flex; gap: 0.65rem; align-items: flex-start; }
    .pipeline-recipe-icon { font-size: 1.5rem; line-height: 1; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-hover); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pipeline-recipe-title { font-weight: 700; font-size: 0.92rem; color: var(--text); }
    .pipeline-recipe-pitch { font-size: 0.78rem; color: var(--text-soft); line-height: 1.4; margin-top: 0.15rem; }
    .pipeline-recipe-v-flow { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--text); margin: 0.25rem 0; }
    .pipeline-recipe-v-node { padding: 0.25rem 0.5rem; border-radius: 8px; background: var(--surface-hover); border: 1px solid var(--border); }
    .pipeline-recipe-v-arrow { color: var(--brand); font-size: 0.85rem; line-height: 1; }
    .pipeline-recipe-cadence { font-size: 0.72rem; color: var(--muted); }
    .pipeline-recipe-lock { font-size: 0.72rem; margin-top: 0.15rem; }
    .pipeline-recipe-deploy-btn { align-self: flex-start; margin-top: 0.25rem; }
    .pipeline-recipe-arch-hint { font-size: 0.82rem; color: var(--text-soft); line-height: 1.45; margin: 0.5rem 0 0; }
    .pipelines-recipe-add-details { max-width: 900px; margin: 1rem auto 0; border-top: 1px solid var(--border); padding-top: 0.75rem; }
    .pipelines-recipe-add-summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--brand); list-style: none; }
    .pipelines-recipe-add-summary::-webkit-details-marker { display: none; }
    .pipelines-recipe-add-body { margin-top: 0.65rem; }
    .chat-model-select { display: none; }
    .usage-section { margin-bottom: 0.5rem; }
    .chat-log { flex: 1; min-height: 0; min-width: 0; padding: 0 .25rem; }
    .msg { margin-bottom: 1.1rem; display: flex; flex-direction: column; align-items: flex-start; max-width: 65%; }
    .msg.user { align-items: flex-end; margin-left: auto; margin-right: 0.5rem; color: inherit; }
    .msg.assistant { margin-left: 0.5rem; color: inherit; }
    .msg.user .msg-body {
      background: var(--wa-light-green);
      color: var(--user-bubble-fg, #ffffff);
      padding: 0.5rem 0.75rem 0.4rem 0.85rem;
      border-radius: 7.5px 7.5px 0 7.5px;
      border: 1px solid transparent;
      box-shadow: 0 4px 14px rgba(20, 184, 166, 0.22), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
      position: relative;
    }
    [data-theme="dark"] .msg.user .msg-body { color: var(--user-bubble-fg, #ffffff); border-color: transparent; }
    .msg.assistant .msg-body {
      background: var(--wa-incoming);
      color: var(--wa-incoming-fg, var(--text));
      padding: 0.55rem 0.9rem 0.45rem 0.8rem;
      border-radius: 7.5px 7.5px 7.5px 0;
      border: 1px solid var(--wa-incoming-border);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(15, 23, 42, 0.05);
      position: relative;
    }
    [data-theme="dark"] .msg.assistant .msg-body {
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    .msg-bubble-footer {
      display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;
      margin-top: 0.2rem; padding-top: 0.15rem;
      font-size: 0.6875rem; line-height: 1; color: var(--wa-footer-text);
    }
    .msg-bubble-footer--assistant { justify-content: flex-end; }
    .msg-time-inline { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .wa-typing-bubble {
      display: inline-block; padding: 0.65rem 1rem; border-radius: 7.5px 7.5px 7.5px 0;
      background: var(--wa-incoming);
      border: 1px solid var(--wa-incoming-border);
      color: var(--wa-incoming-fg, var(--text));
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(15, 23, 42, 0.05);
    }
    [data-theme="dark"] .wa-typing-bubble { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.3); }
    .msg.system-notice { max-width: 100%; font-size: .8125rem; color: var(--warning); background: var(--warning-soft); padding: 0.75rem 1.25rem; border-radius: 12px; margin-bottom: 0.5rem; box-shadow: 0 2px 8px rgba(251,191,36,0.15); }
    .msg.system-recovery { max-width: 100%; font-size: .8125rem; color: #16a34a; background: #dcfce7; padding: 0.75rem 1.25rem; border-radius: 12px; margin-bottom: 0.5rem; box-shadow: 0 2px 8px rgba(22,163,74,0.12); }
    [data-theme="dark"] .msg.system-recovery { color: var(--success); background: var(--success-soft); box-shadow: 0 2px 8px rgba(52,211,153,0.12); }
    .msg-cron-trigger { width: 100%; text-align: center; font-size: 0.72rem; color: var(--muted); margin: 0.75rem 0; display: flex; align-items: center; gap: 0.5rem; }
    .msg-cron-trigger::before, .msg-cron-trigger::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    [data-theme="dark"] .msg-cron-trigger { color: var(--text-muted); }
    .chat-media-wrap { margin: 0.15rem 0 0.25rem; max-width: min(100%, 480px); }
    .chat-inline-media { display: block; max-width: 100%; height: auto; border-radius: 8px; }
    .chat-inline-media--clickable { cursor: pointer; }
    .chat-inline-audio { display: block; width: 100%; max-width: 22rem; margin: 0.35rem 0; }
    .file-preview-panel {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      padding: 1.25rem 1rem; height: 100%; overflow: auto; box-sizing: border-box;
    }
    .file-preview-panel .preview-label { font-size: 0.85rem; color: var(--muted, #888); margin-bottom: 0.75rem; text-align: center; word-break: break-all; max-width: 100%; }
    .file-preview-panel .file-preview-img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; cursor: pointer; border-radius: 8px; }
    .file-preview-panel .file-preview-video { max-width: 100%; max-height: calc(100vh - 8rem); border-radius: 8px; }
    .file-preview-panel .file-preview-audio { width: 100%; max-width: 32rem; margin-top: 0.5rem; }
    /* CSV / TSV spreadsheet preview (Excel-like) */
    .file-preview-panel.file-preview-panel--csv {
      align-items: stretch;
      justify-content: flex-start;
      padding: 0.75rem 0.85rem 1rem;
      gap: 0.5rem;
      --csv-cell-fg: #212121;
      --csv-sheet-bg: #ffffff;
      --csv-grid-border: #d4d4d4;
      --csv-axis-bg: #f2f2f2;
      --csv-axis-fg: #444444;
      --csv-corner-bg: #f2f2f2;
      --csv-row-num-bg: #f2f2f2;
      --csv-col-header-bg: #f2f2f2;
      --csv-col-header-fg: #333333;
      --csv-col-header-border: #d4d4d4;
      --csv-row-odd: #ffffff;
      --csv-row-even: #fafafa;
      --csv-row-hover: #fff8e6;
      --csv-table-header-bg: #e2efda;
      --csv-table-header-fg: #1a4d2e;
    }
    .csv-preview-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.35rem 0.75rem;
      flex-shrink: 0;
      padding: 0 0.15rem;
    }
    .csv-preview-toolbar__name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text, #111);
      word-break: break-all;
    }
    .csv-preview-toolbar__meta {
      font-size: 0.75rem;
      color: var(--muted, #888);
    }
    .csv-spreadsheet-scroll {
      flex: 1;
      min-height: 0;
      overflow: auto;
      width: 100%;
      border: 1px solid var(--csv-grid-border);
      border-radius: 6px;
      background: var(--csv-sheet-bg);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
      color-scheme: light;
    }
    .csv-spreadsheet {
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.78rem;
      line-height: 1.35;
      min-width: 100%;
      table-layout: auto;
    }
    .csv-spreadsheet th,
    .csv-spreadsheet td {
      border-right: 1px solid var(--csv-grid-border);
      border-bottom: 1px solid var(--csv-grid-border);
      padding: 0.28rem 0.45rem;
      vertical-align: top;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: anywhere;
      min-width: 4.5rem;
      max-width: 18rem;
      color: var(--csv-cell-fg);
    }
    .csv-spreadsheet th.csv-corner,
    .csv-spreadsheet th.csv-col-letter,
    .csv-spreadsheet th.csv-row-num {
      position: sticky;
      background: var(--csv-axis-bg);
      color: var(--csv-axis-fg);
      font-weight: 600;
      text-align: center;
      z-index: 2;
      user-select: none;
      white-space: nowrap;
      min-width: 2.25rem;
      max-width: none;
      padding: 0.22rem 0.35rem;
    }
    .csv-spreadsheet th.csv-col-letter {
      top: 0;
      z-index: 3;
      background: var(--csv-col-header-bg);
      color: var(--csv-col-header-fg);
      font-size: 0.72rem;
      letter-spacing: 0.02em;
      border-bottom: 1px solid var(--csv-col-header-border);
    }
    .csv-spreadsheet th.csv-corner {
      left: 0;
      top: 0;
      z-index: 4;
      min-width: 2.5rem;
      background: var(--csv-corner-bg);
      border-right: 1px solid var(--csv-grid-border);
    }
    .csv-spreadsheet th.csv-row-num {
      left: 0;
      z-index: 2;
      min-width: 2.5rem;
      max-width: 2.5rem;
      background: var(--csv-row-num-bg);
      color: var(--csv-axis-fg);
      font-size: 0.72rem;
    }
    .csv-spreadsheet tbody tr:nth-child(odd) td {
      background: var(--csv-row-odd);
    }
    .csv-spreadsheet tbody tr:nth-child(even) td {
      background: var(--csv-row-even);
    }
    .csv-spreadsheet tbody tr.csv-header-row td {
      background: var(--csv-table-header-bg) !important;
      color: var(--csv-table-header-fg) !important;
      font-weight: 600;
      border-bottom: 1px solid #a9d18e;
    }
    .csv-spreadsheet tbody tr:hover td {
      background: var(--csv-row-hover) !important;
      color: var(--csv-cell-fg) !important;
    }
    .csv-spreadsheet td {
      color: var(--csv-cell-fg);
    }
    .csv-spreadsheet-empty {
      padding: 2rem 1rem;
      text-align: center;
      color: var(--muted, #888);
      font-size: 0.9rem;
    }
    [data-theme="dark"] .csv-spreadsheet-scroll {
      --csv-cell-fg: #e8ecf4;
      --csv-sheet-bg: #1a2228;
      --csv-grid-border: #3d4a54;
      --csv-axis-bg: #2a3942;
      --csv-axis-fg: #aebac1;
      --csv-corner-bg: #253038;
      --csv-row-num-bg: #2a3942;
      --csv-col-header-bg: #2a3942;
      --csv-col-header-fg: #c5cdd8;
      --csv-col-header-border: #3d4a54;
      --csv-row-odd: #1a2228;
      --csv-row-even: #1f2a32;
      --csv-row-hover: #2a3540;
      --csv-table-header-bg: #1e3a2f;
      --csv-table-header-fg: #a8e6c1;
      color-scheme: dark;
    }
    /* Word (.docx) document preview */
    .file-preview-panel.file-preview-panel--word {
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      gap: 0;
      background: var(--word-chrome-bg, #525659);
    }
    .word-preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-shrink: 0;
      padding: 0.45rem 0.85rem;
      background: var(--word-toolbar-bg, #2b579a);
      color: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    .word-preview-toolbar__name {
      font-size: 0.8rem;
      font-weight: 600;
      word-break: break-all;
      opacity: 0.95;
    }
    .word-preview-toolbar__badge {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.15rem 0.45rem;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.18);
      flex-shrink: 0;
    }
    .word-doc-scroll {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: 1.25rem 1rem 2rem;
      background: var(--word-chrome-bg, #525659);
    }
    .word-doc-sheet {
      display: flex;
      justify-content: center;
    }
    .word-doc-page {
      width: 100%;
      max-width: 816px;
      min-height: 1056px;
      padding: 96px 72px;
      box-sizing: border-box;
      background: #fff;
      color: #000;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
      font-family: Calibri, 'Segoe UI', Candara, Arial, sans-serif;
      font-size: 11pt;
      line-height: 1.15;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .word-doc-page .word-p { margin: 0 0 8pt; }
    .word-doc-page .word-style-Title { font-size: 28pt; font-weight: 300; color: #2e74b5; margin-bottom: 12pt; }
    .word-doc-page .word-style-Subtitle { font-size: 14pt; color: #5a5a5a; margin-bottom: 10pt; }
    .word-doc-page .word-style-Heading1 { font-size: 16pt; color: #2f5496; font-weight: 300; margin: 12pt 0 6pt; }
    .word-doc-page .word-style-Heading2 { font-size: 13pt; color: #2f5496; font-weight: 400; margin: 10pt 0 4pt; }
    .word-doc-page .word-style-Heading3 { font-size: 12pt; color: #1f3763; font-weight: 600; margin: 8pt 0 4pt; }
    .word-doc-page .word-style-Heading4 { font-size: 11pt; color: #2f5496; font-style: italic; margin: 8pt 0 4pt; }
    .word-doc-page .word-style-Heading5 { font-size: 11pt; color: #2f5496; margin: 6pt 0 2pt; }
    .word-doc-page .word-style-Heading6 { font-size: 11pt; color: #1f3763; font-style: italic; margin: 6pt 0 2pt; }
    .word-doc-page .word-list-item {
      margin-left: 0.35in;
      text-indent: -0.25in;
      padding-left: 0.25in;
      list-style: disc;
    }
    .word-doc-page .word-list-lvl-1 { margin-left: 0.6in; }
    .word-doc-page .word-list-lvl-2 { margin-left: 0.85in; }
    .word-doc-page .word-hyperlink { color: #0563c1; text-decoration: underline; }
    .word-doc-page .word-table {
      width: 100%;
      border-collapse: collapse;
      margin: 8pt 0 12pt;
      font-size: 10pt;
    }
    .word-doc-page .word-table th,
    .word-doc-page .word-table td {
      border: 1px solid #bfbfbf;
      padding: 4pt 6pt;
      vertical-align: top;
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .word-doc-page .word-table th {
      background: #f2f2f2;
      font-weight: 600;
    }
    .word-doc-page .word-doc-img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 6pt 0;
    }
    .word-doc-error {
      max-width: 480px;
      margin: 2rem auto;
      padding: 1.25rem;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 8px;
      font-size: 0.9rem;
      line-height: 1.45;
    }
    [data-theme="dark"] .file-preview-panel.file-preview-panel--word {
      --word-chrome-bg: #3b3a39;
      --word-toolbar-bg: #185abd;
    }
    [data-theme="dark"] .word-doc-page {
      background: #1e1e1e;
      color: #e8e8e8;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    }
    [data-theme="dark"] .word-doc-page .word-style-Heading1,
    [data-theme="dark"] .word-doc-page .word-style-Heading2 { color: #8faadc; }
    [data-theme="dark"] .word-doc-page .word-table th { background: #2d2d2d; }
    [data-theme="dark"] .word-doc-page .word-table th,
    [data-theme="dark"] .word-doc-page .word-table td { border-color: #555; }
    .preview-error, .preview-error-wrap { color: var(--muted, #888); font-style: italic; font-size: 0.9rem; text-align: center; }
    .preview-error-wrap a { color: var(--accent, #4a9eff); }
    dialog.media-lightbox, #media-lightbox.media-lightbox {
      max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; padding: 0; border: none;
      background: rgba(0,0,0,0.88); z-index: 10050; cursor: zoom-out;
    }
    dialog.media-lightbox::backdrop, #media-lightbox.media-lightbox::backdrop { background: rgba(0,0,0,0.6); }
    .media-lightbox img { display: block; max-width: 95vw; max-height: 95vh; margin: auto; object-fit: contain; padding: 2vh 2vw; cursor: zoom-out; }
    .chat-attach-chip.video-chip .chip-media-icon,
    .chat-attach-chip.audio-chip .chip-media-icon {
      display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
      color: var(--muted, #888);
    }
    .msg .role.wa-role { font-weight: 600; font-size: 0.6rem; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase; opacity: 0.7; }
    .msg .msg-source { font-size: .65rem; font-weight: 500; color: var(--muted-soft); margin-left: 0.35rem; }
    .msg .msg-body { line-height: 1.55; word-break: break-word; position: relative; }
    .msg.assistant .msg-body { padding-right: 2.25rem; padding-bottom: 0.25rem; }
    .msg-copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: var(--surface-hover); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; }
    .msg.assistant:hover .msg-copy-btn { opacity: 1; }
    @media (hover: none) {
      .msg-copy-btn:not(.copied) { pointer-events: none; }
    }
    .msg-copy-btn:hover { background: var(--brand-soft); color: var(--brand); }
    .msg-copy-btn.copied { color: var(--success); opacity: 1; }
    /* ── Pinned messages: hover pin button on bubbles ── */
    .msg-pin-btn { position: absolute; top: 0.5rem; right: 2.6rem; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: var(--surface-hover); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; }
    .msg-pin-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .msg-pin-btn:not(.pinned) svg { fill: none; }
    .msg-pin-btn:not(.pinned) svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .msg-pin-btn.pinned svg path { fill: currentColor; stroke: none; }
    .pin-strip-icon svg { fill: none; }
    .pin-strip-icon svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .msg:hover .msg-pin-btn { opacity: 1; }
    /* Touch devices: no :hover — show pin buttons always at reduced opacity so they're reachable */
    @media (hover: none) { .msg-pin-btn { opacity: 0.5; } .msg-pin-btn.pinned { opacity: 1; } }
    .msg-pin-btn:hover { background: var(--brand-soft); color: var(--brand); }
    .msg-pin-btn.pinned { color: var(--brand); opacity: 1; }
    [data-theme="dark"] .msg-pin-btn { background: var(--surface-hover); }
    /* User messages have no copy button — pin button sits at top-right directly */
    .msg.user .msg-pin-btn { right: 0.5rem; top: 0.5rem; }
    /* ── Pin strip ── */
    /* <button> UA styles often add a light top/left “outset” border — strip them so dark mode has no white hairline above the bar */
    #pin-strip {
      display: flex; align-items: center; gap: 0.65rem; width: 100%;
      padding: 0.65rem 1.15rem; background: var(--brand-soft); cursor: pointer; flex-shrink: 0;
      transition: background var(--transition), box-shadow var(--transition); min-height: 48px; user-select: none;
      border: none; border-bottom: 1px solid rgba(var(--brand-rgb), 0.15); border-radius: 0;
      -webkit-appearance: none; appearance: none; color: inherit; font: inherit; text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    [data-theme="dark"] #pin-strip { box-shadow: none; border-bottom-color: rgba(var(--brand-rgb), 0.25); }
    #pin-strip:hover { background: rgba(var(--brand-rgb), 0.14); }
    #pin-strip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
    .pin-strip-icon { color: var(--brand); flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .pin-strip-icon > svg { width: 18px; height: 18px; }
    .pin-strip-text { font-size: var(--text-sm); font-weight: 500; color: var(--text-soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pin-strip-count { font-size: var(--text-xs); font-weight: 700; color: var(--brand); background: var(--surface); padding: 0.2rem 0.55rem; border-radius: var(--radius-full); flex-shrink: 0; border: 1px solid rgba(var(--brand-rgb), 0.2); }

    /* --- Task execution strip (active multi-step tracker) + optional Stop (video notes) --- */
    .task-strip-wrap {
      display: none;
      flex-direction: row;
      align-items: stretch;
      width: 100%;
      gap: 0;
      border-bottom: 1px solid var(--border);
      background: var(--bg-alt);
    }
    .task-strip-stop {
      flex-shrink: 0;
      margin: 0;
      padding: 0 0.85rem;
      border: none;
      border-left: 1px solid var(--border);
      background: rgba(var(--brand-rgb), 0.12);
      color: var(--brand);
      font-size: 0.78rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }
    .task-strip-stop:hover {
      background: rgba(var(--brand-rgb), 0.2);
    }
    .task-strip-stop:disabled {
      opacity: 0.55;
      cursor: default;
    }
    #task-strip {
      display: none;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      flex: 1;
      min-width: 0;
      width: auto;
      margin: 0;
      box-sizing: border-box;
      border: none;
      border-bottom: none;
      border-radius: 0;
      padding: 0.45rem 0.65rem 0.45rem 1rem;
      padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
      background: var(--bg-alt);
      font-size: 0.8125rem;
      font-family: inherit;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      min-height: 44px;
    }
    #task-strip.task-strip--visible { display: flex; }
    #task-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    #task-strip:active { background: var(--surface-hover); }
    .task-strip-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      animation: task-pulse 1.2s ease-in-out infinite;
    }
    .task-strip-mid {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      flex: 1;
      min-width: 0;
    }
    .task-strip-toprow {
      display: flex;
      align-items: baseline;
      gap: 0.35rem 0.5rem;
      min-width: 0;
    }
    .task-strip-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
    .task-strip-progress { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .task-strip-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; width: 100%; }
    .task-strip-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.35s ease; min-width: 0; }
    .task-strip-next { font-size: 0.75rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .task-strip-more { font-size: 0.72rem; color: var(--muted); }
    .task-strip-chevron {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      pointer-events: none;
    }
    .task-strip-chevron svg { width: 22px; height: 22px; }

    /* --- Task progress drawer (in-chat bottom sheet) --- */
    #task-drawer {
      position: absolute;
      inset: 0;
      z-index: 200;
      pointer-events: none;
      visibility: hidden;
    }
    #task-drawer.open {
      pointer-events: auto;
      visibility: visible;
    }
    #task-drawer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.38);
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    #task-drawer.open #task-drawer-backdrop { opacity: 1; }
    .task-drawer-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      max-height: min(80vh, 560px);
      background: var(--surface, var(--bg));
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.28s ease;
      z-index: 1;
    }
    #task-drawer.open .task-drawer-sheet { transform: translateY(0); }
    /* Desktop sheet layout from 769px up — matches thread panel / mobile split at 768px */
    @media (min-width: 769px) {
      .task-drawer-sheet {
        left: auto;
        right: 0;
        width: min(380px, 100%);
        max-height: min(80vh, 520px);
        border-radius: 16px 16px 0 0;
      }
    }
    .task-drawer-handle {
      width: 40px;
      height: 5px;
      border-radius: 3px;
      background: var(--border);
      margin: 10px auto 4px;
      flex-shrink: 0;
    }
    .task-drawer-topbar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0 0.35rem 0 1rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .task-drawer-title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--text);
      flex: 1;
      min-width: 0;
    }
    .task-drawer-icon-btn,
    .task-drawer-close,
    #task-drawer-refresh {
      min-height: 44px;
      min-width: 44px;
      padding: 0;
      border: none;
      border-radius: var(--radius, 8px);
      background: transparent;
      color: var(--text);
      font-size: 1.25rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .task-drawer-icon-btn svg,
    .task-drawer-close svg,
    #task-drawer-refresh svg {
      display: block;
      flex-shrink: 0;
    }
    .task-drawer-close:active,
    #task-drawer-refresh:active,
    .task-drawer-icon-btn:active { background: var(--surface-hover); }
    #task-drawer-refresh { font-size: 0; }
    .task-drawer-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0.65rem 1rem;
      padding-bottom: max(1rem, env(safe-area-inset-bottom, 12px));
      -webkit-overflow-scrolling: touch;
    }

    /* --- Task cards (drawer + shared) --- */
    .task-section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.75rem 0 0.35rem; }
    .task-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
    .task-card {
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius, 10px);
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
      scroll-margin-top: 0.5rem;
    }
    .task-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
    .task-card-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .task-card-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 6px; background: var(--surface-hover); }
    .task-badge--running { color: var(--accent); }
    .task-badge--pending { color: var(--muted); }
    .task-badge--completed { color: var(--success); }
    .task-badge--failed { color: var(--error); }
    .task-badge--cancelled { color: var(--muted); }
    .task-card-pct { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8rem; margin-left: auto; }
    .task-card-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 0.45rem 0; }
    .task-card-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.35s ease; min-width: 0; }
    .task-steps-list { list-style: none; margin: 0; padding: 0; }
    .task-step {
      display: flex;
      gap: 0.5rem;
      padding: 0.35rem 0;
      min-height: 44px;
      align-items: flex-start;
      border-bottom: 1px solid var(--border);
    }
    .task-step:last-child { border-bottom: none; }
    .task-step > div { flex: 1; min-width: 0; }
    .task-step-icon { width: 1.35rem; flex-shrink: 0; text-align: center; line-height: 1.4; }
    .task-step-icon--running { animation: task-pulse 1.2s ease-in-out infinite; }
    @keyframes task-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
    .task-step-title { font-weight: 500; flex: 1; min-width: 0; }
    .task-step-summary { font-size: 0.75rem; color: var(--text-soft); width: 100%; flex-basis: 100%; margin-left: 1.85rem; margin-top: -0.15rem; }
    .task-card-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.35rem; }
    .task-empty-state { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: 0.9rem; }
    @media (max-width: 600px) {
      .task-card { border-radius: 0; border-left: none; border-right: none; margin-left: -0.25rem; margin-right: -0.25rem; }
    }
    /* ── Pin modal overlay ── */
    #pin-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.48); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 2000; align-items: flex-end; justify-content: center; }
    #pin-modal-overlay.open { display: flex; animation: popover-in 0.18s ease; }
    #pin-modal { background: var(--surface); border-radius: 20px 20px 0 0; width: 100%; max-width: 640px; max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -8px 40px rgba(0,0,0,0.18); }
    @media (min-height: 600px) { #pin-modal { max-height: 75vh; } }
    .pin-modal-header { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .pin-modal-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); flex: 1; }
    .pin-modal-close {
      width: 44px; height: 44px; min-width: 44px; min-height: 44px;
      border: none; border-radius: 50%; background: var(--surface-hover); color: var(--muted);
      cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background 0.15s;
    }
    .pin-modal-close:hover { background: var(--error-soft, #fee2e2); color: var(--error, #ef4444); }
    .pin-modal-body { flex: 1; overflow-y: auto; padding: 0.75rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
    .pin-modal-empty { text-align: center; color: var(--muted); font-size: 0.875rem; padding: 2rem 1rem; }
    .pin-card { background: var(--surface-hover); border-radius: 12px; padding: 0.75rem 1rem; position: relative; border: 1px solid var(--border); }
    .pin-card-role { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.3rem; }
    .pin-card-role.role-assistant { color: var(--brand); }
    .pin-card-label { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); margin-bottom: 0.25rem; }
    .pin-card-content { font-size: 0.875rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; }
    .pin-card-content.collapsed { max-height: 4.5em; overflow: hidden; }
    .pin-card-expand { font-size: 0.75rem; color: var(--brand); border: none; background: none; cursor: pointer; padding: 0.2rem 0; margin-top: 0.2rem; }
    .pin-card-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; justify-content: flex-end; }
    .pin-card-delete { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
    .pin-card-delete:hover { background: var(--error-soft, #fee2e2); color: var(--error, #ef4444); border-color: var(--error, #ef4444); }
    .pin-modal-footer { padding: 0.75rem 1.25rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)); border-top: 1px solid var(--border); flex-shrink: 0; }
    .msg-body code { background: var(--surface-hover); padding: 0.15em 0.4em; border-radius: 6px; font-size: 0.9em; }
    .msg-body pre { background: var(--surface-hover); padding: 1rem; border-radius: 10px; overflow-x: auto; margin: 0.5rem 0; }
    .msg-body pre code { background: none; padding: 0; }
    .msg-body a { color: var(--brand); text-decoration: none; }
    .msg-body a:hover { text-decoration: underline; }
    .msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6 {
      margin: 0.85rem 0 0.4rem;
      line-height: 1.3;
      font-weight: 700;
      color: var(--text);
    }
    .msg-body h1 { font-size: 1.25rem; }
    .msg-body h2 { font-size: 1.12rem; }
    .msg-body h3 { font-size: 1.02rem; }
    .msg-body h4, .msg-body h5, .msg-body h6 { font-size: 0.95rem; }
    .msg-body h1:first-child, .msg-body h2:first-child, .msg-body h3:first-child { margin-top: 0; }
    .msg-body p { margin: 0.45rem 0; line-height: 1.55; }
    .msg-body p:first-child { margin-top: 0; }
    .msg-body p:last-child { margin-bottom: 0; }
    .msg-body ul, .msg-body ol { margin: 0.45rem 0 0.55rem 1.15rem; padding: 0; line-height: 1.5; }
    .msg-body li { margin: 0.2rem 0; }
    .msg-body blockquote {
      margin: 0.55rem 0;
      padding: 0.45rem 0.75rem;
      border-left: 3px solid var(--brand);
      background: var(--surface-hover);
      border-radius: 0 8px 8px 0;
      color: var(--text-soft);
    }
    .msg-body blockquote p { margin: 0.25rem 0; }
    .msg-body hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0.75rem 0;
    }
    .msg-body del { opacity: 0.75; }
    .msg-body table {
      width: 100%;
      border-collapse: collapse;
      margin: 0.55rem 0;
      font-size: 0.9em;
      display: block;
      overflow-x: auto;
    }
    .msg-body th, .msg-body td {
      border: 1px solid var(--border);
      padding: 0.4rem 0.55rem;
      text-align: left;
      vertical-align: top;
    }
    .msg-body th {
      background: var(--surface-hover);
      font-weight: 600;
      color: var(--text);
    }
    .msg-body tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
    .chat-inputbar {
      display: flex; flex-direction: column; gap: var(--space-2); padding: 0.55rem var(--space-4) var(--space-3);
      background: var(--surface); position: relative; border-top: 1px solid var(--border);
      min-height: 52px;
    }
    .chat-input-row {
      display: flex; align-items: flex-end; gap: 0.35rem; padding: 0.38rem 0.56rem;
      background: var(--surface-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
      border: 1.5px solid var(--border); transition: border-color var(--transition), box-shadow var(--transition); width: 100%;
    }
    .chat-input-meta {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      padding: 0 0.2rem;
      width: 100%;
      min-height: 1.9rem;
    }
    .chat-input-meta::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 18px;
      pointer-events: none;
      display: none;
      background: linear-gradient(to right, rgba(var(--surface-rgb), 0), rgba(var(--surface-rgb), 0.92));
      border-radius: 0 99px 99px 0;
    }
    .chat-hooks { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.35rem 0; font-size: 0.75rem; color: var(--muted); }
    .chat-hooks a { color: var(--brand); text-decoration: none; }
    .chat-hooks a:hover { text-decoration: underline; }
    .chat-hooks .chat-hooks-sep { color: var(--border); }
    /* Model pill button */
    .model-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-hover); color: var(--muted); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), transform 0.15s var(--ease-out); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; user-select: none; }
    .chat-input-meta .model-pill { flex: 0 0 auto; min-height: 30px; }
    .model-pill:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
    .model-pill[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
    .model-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    #fast-mode-btn[aria-pressed="true"] {
      background: var(--brand) !important;
      color: #fff !important;
      border-color: var(--brand) !important;
    }
    #fast-mode-btn[aria-pressed="true"] svg { opacity: 1; color: #fff; }
    .model-pill svg { flex-shrink: 0; opacity: 0.6; }
    /* Chat utility strip: coherent accent tier (Ask / thinking / model) */
    #panel-chat .chat-input-meta .model-pill {
      background: var(--chat-pill-idle-bg);
      border: 1px solid var(--chat-pill-idle-border);
      color: var(--chat-pill-idle-fg);
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
      transition: background var(--transition), border-color var(--transition),
        color var(--transition), box-shadow var(--transition), transform 0.15s var(--ease-out);
    }
    #panel-chat .chat-input-meta .model-pill svg {
      opacity: 0.82;
    }
    #panel-chat .chat-input-meta .model-pill:hover {
      background: var(--chat-pill-hover-bg);
      border-color: var(--chat-pill-active-border);
      color: var(--chat-pill-active-fg);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }
    [data-theme="dark"] #panel-chat .chat-input-meta .model-pill:hover {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
    #panel-chat .chat-input-meta .model-pill[aria-pressed="true"] {
      background: var(--chat-pill-active-bg);
      border-color: var(--chat-pill-active-border);
      color: var(--chat-pill-active-fg);
      box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.1);
    }
    [data-theme="dark"] #panel-chat .chat-input-meta .model-pill[aria-pressed="true"] {
      box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12), 0 1px 4px rgba(0, 0, 0, 0.4);
    }
    [data-theme="dark"] #panel-chat .chat-input-meta .model-pill {
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 4px rgba(0, 0, 0, 0.45);
    }
    #panel-chat .chat-input-row {
      background: var(--chat-composer-bg);
      backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
      -webkit-backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
      border: 1px solid var(--chat-composer-border);
      box-shadow: var(--chat-composer-shadow);
    }
    [data-theme="dark"] #panel-chat .chat-input-row {
      background: var(--chat-composer-bg);
      border-color: var(--chat-composer-border);
      box-shadow: var(--chat-composer-shadow);
    }
    #panel-chat .chat-input-row:focus-within {
      border-color: var(--brand);
      box-shadow: var(--chat-composer-shadow);
    }
    /* Model popover */
    .model-popover {
      position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 240px; max-width: 320px; width: min(320px, calc(100vw - 16px));
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08); z-index: 300; overflow: hidden; display: none;
    }
    .model-popover.open { display: block; animation: popover-in 0.15s ease; }
    .model-popover.closing { animation: popover-out 0.12s ease forwards; }
    @keyframes popover-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
    @keyframes popover-out { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(4px); } }
    .model-popover-header { padding: 0.5rem 0.85rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); border-bottom: 1px solid var(--border); }
    .model-popover-list { max-height: 260px; overflow-y: auto; padding: 0.3rem 0; }
    .model-popover-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.85rem; font-size: 0.8625rem; color: var(--text); cursor: pointer; transition: background 0.12s; gap: 0.5rem; }
    .model-popover-item:hover { background: var(--surface-hover); }
    .model-popover-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
    .model-popover-item .model-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .model-popover-item .model-badge { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 99px; background: var(--warning-soft); color: var(--warning); white-space: nowrap; flex-shrink: 0; }
    .model-popover-item--locked,
    .thinking-popover-item--locked { opacity: 0.55; cursor: not-allowed; }
    .model-popover-item--locked:hover,
    .thinking-popover-item--locked:hover { background: transparent; }
    .model-popover-group { padding: 0.35rem 0.85rem 0.1rem; font-size: 0.68rem; font-weight: 700; color: var(--muted-soft); text-transform: uppercase; letter-spacing: 0.06em; }
    .thinking-lock-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 99px; background: var(--muted-soft); color: var(--surface); white-space: nowrap; flex-shrink: 0; }
    #chat-attached-chips { flex: 0 0 auto; }
    .chat-input-row:focus-within { border-color: var(--brand); box-shadow: none; }
    .chat-inputbar textarea#chat-input,
    .chat-inputbar input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0.65rem 0.75rem; border: none; border-radius: 0; background: transparent; color: var(--text); font-size: var(--text-base); transition: color var(--transition); font-family: inherit; }
    .chat-inputbar textarea#chat-input { resize: none; max-height: 120px; overflow-y: auto; line-height: 1.45; min-height: 2.75rem; box-sizing: border-box; }
    @supports (field-sizing: content) {
      .chat-inputbar textarea#chat-input {
        field-sizing: content;
        height: auto;
      }
    }
    .chat-inputbar textarea#chat-input:focus,
    .chat-inputbar input:focus { outline: none; }
    .chat-inputbar textarea#chat-input:focus-visible,
    .chat-inputbar input:focus-visible { outline: none; }
    .chat-inputbar button#chat-send {
      width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); padding: 0; flex-shrink: 0;
      background: var(--brand-gradient); color: white; border: none; border-radius: var(--btn-radius-cta); cursor: pointer;
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-sm);
      display: flex; align-items: center; justify-content: center;
    }
    .chat-inputbar button#chat-send:hover { filter: brightness(1.06); transform: scale(1.03); box-shadow: var(--shadow); }
    .chat-inputbar button#chat-send:disabled { background: var(--muted-soft); cursor: not-allowed; opacity: .8; filter: none; }
    .chat-inputbar button#chat-send:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    /* Same slot as #chat-send: swap visibility while a chat request is in flight */
    /* Stop = interrupt (distinct from Send submit) */
    .chat-inputbar button#chat-stop {
      width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); padding: 0; flex-shrink: 0;
      background: var(--surface);
      color: var(--error, #dc2626);
      border: 2px solid rgba(220, 38, 38, 0.45);
      border-radius: var(--btn-radius-cta); cursor: pointer;
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition), background var(--transition);
      box-shadow: var(--shadow-sm);
      display: none; align-items: center; justify-content: center;
    }
    [data-theme="dark"] .chat-inputbar button#chat-stop {
      background: rgba(30, 41, 59, 0.9);
      color: #f87171;
      border-color: rgba(248, 113, 113, 0.4);
    }
    .chat-inputbar button#chat-stop:hover { filter: brightness(1.04); transform: scale(1.02); box-shadow: var(--shadow); background: var(--error-soft, #fee2e2); }
    [data-theme="dark"] .chat-inputbar button#chat-stop:hover { background: rgba(127, 29, 29, 0.35); }
    .chat-inputbar button#chat-stop:focus-visible { outline: 2px solid var(--error, #ef4444); outline-offset: 2px; }
    .chat-attach-btn {
      display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min);
      padding: 0; border: 1px solid transparent; border-radius: var(--btn-radius-utility); background: transparent; color: var(--muted); cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s var(--ease-out); flex-shrink: 0;
    }
    .chat-attach-btn:hover { background: var(--surface-hover); color: var(--brand); }
    .chat-attach-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    /* Composer: attach is secondary — avoid brand “primary” hover next to Send */
    .chat-input-row .chat-attach-btn {
      border-color: var(--border);
      background: var(--surface);
      color: var(--text-muted);
    }
    .chat-input-row .chat-attach-btn:hover {
      background: var(--surface-hover);
      color: var(--text);
      border-color: var(--border-strong);
    }
    .error { color: var(--error); padding: 0.85rem 1.25rem 0.85rem 2.65rem; background: var(--error-soft); border-radius: 14px; margin: 0.5rem 0; font-size: .875rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; box-shadow: 0 2px 8px rgba(239,68,68,0.1); position: relative; }
    .error::before {
      content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ef4444' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .success { color: var(--success); padding: 0.85rem 1.25rem; background: var(--success-soft); border-radius: 14px; margin: 0.5rem 0; font-size: .875rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 2px 8px rgba(16,185,129,0.1); }
    .error-retry {
      margin-left: auto;
      padding: .5rem 1rem;
      font-size: .8125rem;
      font-weight: 600;
      background: var(--error-soft);
      color: var(--error);
      border: 1px solid rgba(239, 68, 68, 0.25);
      border-radius: var(--btn-radius-utility);
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s var(--ease-out);
    }
    .error-retry:hover {
      background: var(--error);
      color: #fff;
      border-color: var(--error);
    }
    .error-retry:focus-visible {
      outline: 2px solid var(--error);
      outline-offset: 2px;
    }
    .browser-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0.6rem; background: transparent; }
    .browser-toolbar { display: flex; gap: 0.45rem; align-items: center; margin-bottom: 0.65rem; flex-wrap: wrap; }
    .btn-connect {
      min-height: var(--touch-min); padding: 0.65rem 1.2rem; border-radius: var(--radius-full); cursor: pointer;
      font-size: var(--text-sm); font-weight: 700; background: var(--brand-gradient); color: white; border: none;
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .btn-connect:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow); }
    .btn-connect:active { filter: brightness(0.95); transform: translateY(0); }
    .btn-connect:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    /* .btn-secondary: single definition in canonical button block above */
    /* Repos panel */
    .repos-gh-banner { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:12px; background:var(--surface-hover); border:1px solid var(--border); }
    .repos-gh-banner.warn { border-color:#f59e0b; background:rgba(245,158,11,.08); }
    .repos-gh-banner.expired { border-color:var(--error); background:var(--error-soft); }
    .repos-gh-banner a, .repos-gh-banner button { color: var(--brand); background:none; border:none; cursor:pointer; font-size:13px; text-decoration:underline; padding:0; }
    #workspace-repos.workspace-repos-connecting .workspace-repos-toolbar-actions { pointer-events: none; opacity: 0.55; }
    .repos-list { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
    .repos-empty-state { text-align: center; padding: 2rem 1.25rem; color: var(--muted); }
    .repos-empty-icon { display: none; }
    .repos-empty-state p { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
    .repo-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s; }
    .repo-card:hover { border-color: var(--brand); }
    .repo-card.clone-error { border-color: #e57373; }
    .repo-clone-progress { display:flex; flex-direction:column; gap:4px; margin-top:2px; }
    .repo-clone-progress-bar { height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
    .repo-clone-progress-fill { height:100%; background:var(--brand); border-radius:999px; transition:width .3s ease; }
    .repo-clone-progress-label { font-size:12px; color:var(--muted); }
    .repo-card-header { display:flex; align-items:center; gap:8px; }
    .repo-card-name { font-weight:600; font-size:14px; color:var(--text); }
    .repo-card-url { font-size:12px; color:var(--muted); }
    .repo-card-meta { font-size:12px; color:var(--muted); }
    .repo-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
    .repos-usage-footer { font-size:12px; color:var(--muted); padding:12px 0 4px; text-align:center; }
    .repo-cloned-badge { font-size:11px; padding:2px 7px; border-radius:6px; background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.2); margin-left:auto; }
    .btn-disconnect {
      min-height: var(--touch-min); padding: 0.65rem 1.2rem; border-radius: var(--btn-radius-utility); cursor: pointer;
      font-size: var(--text-sm); font-weight: 600; background: var(--surface); color: var(--text-soft);
      border: 1px solid var(--border); transition: all var(--transition); box-shadow: var(--shadow-xs);
    }
    .btn-disconnect:hover { background: var(--error-soft); color: var(--error); border-color: rgba(239,68,68,0.32); }
    .btn-disconnect:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .btn-fullscreen {
      min-height: var(--touch-min); padding: 0.65rem 1.2rem; border-radius: var(--btn-radius-utility); cursor: pointer;
      font-size: var(--text-sm); font-weight: 600; background: var(--surface); color: var(--text); border: 1px solid var(--border);
      transition: all var(--transition); box-shadow: var(--shadow-xs);
    }
    .btn-fullscreen:hover { background: var(--surface-hover); border-color: var(--border-strong); }
    .btn-fullscreen:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .iframe-container { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: var(--surface-hover); position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
    .iframe-container iframe { width: 100%; height: 100%; min-height: 0; border: none; flex: 1; }
    .iframe-container:fullscreen, .iframe-container:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 0; background: #1a1a1a; display: flex; flex-direction: column; }
    .iframe-container:fullscreen iframe, .iframe-container:-webkit-full-screen iframe { flex: 1; min-height: 0; }
    .browser-fullscreen-exit { position: absolute; top: 1rem; right: 1rem; z-index: 10; padding: 0.5rem 1rem; border-radius: 10px; background: rgba(0,0,0,.7); color: #fff; border: 1px solid rgba(255,255,255,.2); cursor: pointer; font-size: .875rem; display: none; }
    .browser-fullscreen-exit:hover { background: rgba(0,0,0,.85); }
    .iframe-container:fullscreen .browser-fullscreen-exit, .iframe-container:-webkit-full-screen .browser-fullscreen-exit { display: block; }
    .browser-placeholder-actions {
      align-items: center;
    }
    .browser-placeholder-actions .btn.browser-placeholder-upgrade {
      text-decoration: none;
      justify-content: center;
    }
    .iframe-placeholder { padding: 1.9rem 1.1rem; text-align: center; color: var(--muted); }
    .empty-state-svg { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; color: var(--muted); opacity: 0.88; }
    .empty-state-svg svg { display: block; width: 100%; height: 100%; }
    .iframe-placeholder .placeholder-icon { display: none; }
    .iframe-placeholder-hint { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
    .files-panel { padding: 0.6rem 0.75rem 0.85rem; background: transparent; min-height: 0; flex: 1; display: flex; flex-direction: column; }
    .files-placeholder { color: var(--muted); padding: 1.75rem 1.25rem; text-align: center; border-radius: 16px; background: var(--surface-hover); box-shadow: inset 0 2px 8px rgba(0,0,0,0.04); }
    .files-empty-state { text-align: center; padding: 1.65rem 1rem; color: var(--muted); max-width: 22rem; margin: 0 auto; }
    .files-empty-icon { display: none; }
    .files-empty-state p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-soft); }
    .files-empty-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.25rem; }
    .files-empty-cta .ws-btn { min-height: 44px; }
    @media (prefers-reduced-motion: no-preference) {
      .files-empty-state .empty-state-svg { animation: wsEmptyFloat 4s ease-in-out infinite; }
    }
    @keyframes wsEmptyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    .files-toolbar { margin-bottom: 0.65rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
    .files-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; width: 100%; }
    /* Drawer mode: stack toolbar rows so upload/actions stay reachable on narrow panel */
    @media (max-width: 768px) {
      .workspace-file-tree.tree-drawer-mode .files-toolbar {
        flex-shrink: 0;
        flex-direction: column;
        align-items: stretch;
        max-height: none;
        overflow: visible;
        margin-bottom: 0.5rem;
      }
      .workspace-file-tree.tree-drawer-mode .files-toolbar-row {
        flex-direction: column;
        align-items: stretch;
      }
    }
    .workspace-files-intro {
      display: none;
      margin-bottom: 0.75rem;
      padding: 0.75rem 0.85rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--brand-soft);
      font-size: 0.8125rem;
      line-height: 1.45;
      color: var(--text);
    }
    .workspace-files-intro:not([hidden]) { display: block; }
    .workspace-file-tree.tree-drawer-mode .workspace-files-intro { display: none !important; }
    @media (min-width: 769px) {
      .workspace-files-intro { display: none !important; }
    }
    .workspace-files-intro-text { margin: 0; }
    .workspace-files-intro-dismiss {
      margin-top: 0.55rem;
      padding: 0.4rem 0.85rem;
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--brand);
      font-weight: 600;
      font-size: 0.78rem;
      font-family: inherit;
      cursor: pointer;
    }
    .workspace-files-intro-dismiss:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .files-search-wrap { flex: 1; min-width: 0; }
    .files-search-input {
      width: 100%; min-width: 0; padding: 0.45rem 0.65rem 0.45rem 2rem; border-radius: 10px;
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
      font-size: 0.8125rem; font-family: inherit;
    }
    .files-search-input:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
    .files-search-wrap { position: relative; }
    .files-search-wrap::before {
      content: ""; position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
      width: 0.9rem; height: 0.9rem; opacity: 0.45;
      background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") center/contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") center/contain no-repeat;
      color: var(--muted);
      pointer-events: none;
    }
    .ws-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
      padding: 0.4rem 0.75rem; min-height: 40px; border-radius: var(--btn-radius-utility); font-size: 0.78rem; font-weight: 600;
      font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface);
      color: var(--text); transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .ws-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
    .ws-btn-primary {
      border: none; background: var(--brand);
      color: #fff; box-shadow: none;
    }
    .ws-btn-primary:hover { filter: brightness(1.05); color: #fff; }
    .ws-btn.danger-outline { border-color: var(--error-soft); color: var(--error); }
    .ws-btn.danger-outline:hover { background: var(--error-soft); }
    .ws-btn-icon-only { padding: 0.4rem; min-width: 40px; }
    .ws-new-folder-text { display: none; }
    @media (min-width: 641px) {
      .ws-new-folder-text { display: inline; }
      .ws-btn-icon-only#files-new-folder-btn { min-width: auto; padding: 0.4rem 0.75rem; }
    }
    @media (max-width: 640px) {
      .workspace-usage-pill-desktop { display: none !important; }
    }
    .ws-btn .ws-btn-chevron { font-size: 0.65rem; opacity: 0.7; margin-left: 0.1rem; }
    .workspace-upload-wrap { position: relative; }
    .workspace-upload-menu {
      display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
      min-width: 11rem; padding: 0.35rem; border-radius: 12px; border: 1px solid var(--border);
      background: var(--surface); box-shadow: var(--shadow-lg);
    }
    .workspace-upload-menu.open { display: block; }
    .workspace-upload-menu label,
    .workspace-upload-menu button {
      display: flex; align-items: center; width: 100%; padding: 0.55rem 0.75rem; border: none; background: none;
      border-radius: 8px; font-size: 0.8125rem; color: var(--text); cursor: pointer; font-family: inherit; text-align: left;
    }
    .workspace-upload-menu label:hover, .workspace-upload-menu button:hover { background: var(--surface-hover); }
    /* Breadcrumb bar */
    .files-breadcrumb {
      display: flex; align-items: center; gap: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
      background: var(--surface-hover); border-radius: 12px; padding: 0.45rem 0.65rem; margin-bottom: 0.65rem;
      font-size: 0.8125rem; scrollbar-width: thin;
    }
    .files-breadcrumb-sep { color: var(--muted); margin: 0 0.2rem; user-select: none; flex-shrink: 0; }
    .files-breadcrumb-item {
      color: var(--muted); background: none; border: none; cursor: pointer; padding: 0.25rem 0.4rem; border-radius: 8px;
      font-size: 0.8125rem; transition: background 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 0.3rem;
    }
    .files-breadcrumb-item:hover { background: var(--surface); color: var(--brand); }
    .files-breadcrumb-item.current { color: var(--text); font-weight: 600; cursor: default; pointer-events: none; }
    .files-breadcrumb-home svg { width: 1rem; height: 1rem; display: block; color: var(--muted); }
    .files-breadcrumb-item.current .files-breadcrumb-home svg { color: var(--brand); }
    .files-toolbar-more-wrap { position: relative; display: none; flex-shrink: 0; }
    .files-toolbar-more-menu {
      display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
      min-width: 11rem; padding: 0.35rem; border-radius: 12px; border: 1px solid var(--border);
      background: var(--surface); box-shadow: var(--shadow-lg);
    }
    .files-toolbar-more-menu.open { display: block; }
    .files-toolbar-more-item {
      display: flex; width: 100%; padding: 0.55rem 0.75rem; border: none; background: none;
      border-radius: 8px; font-size: 0.8125rem; color: var(--text); cursor: pointer; font-family: inherit; text-align: left;
    }
    .files-toolbar-more-item:hover { background: var(--surface-hover); }
    .files-toolbar-more-item--danger { color: var(--error); }
    .files-toolbar-more-item--danger:hover { background: var(--error-soft); }
    .browser-topbar-control { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
    .browser-topbar-control-icon { display: none; flex-shrink: 0; align-items: center; justify-content: center; }
    .browser-topbar-control-label { display: inline; }
    /* File list */
    .files-list { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .file-type-icon {
      flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
      border-radius: 10px; background: var(--surface-hover); color: var(--brand);
    }
    .file-type-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
    .folder-row .file-type-icon { color: var(--warning); }
    .file-row {
      display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0.15rem 0.55rem;
      align-items: center; padding: 0.65rem 0.7rem; background: var(--surface);
      border-radius: 12px; border: 1px solid var(--border); font-size: 0.875rem;
      transition: background 0.15s, border-color 0.15s; cursor: default;
    }
    .file-row:hover { border-color: var(--border-strong); background: var(--surface-hover); }
    .file-row.folder-row { cursor: pointer; }
    .file-row.folder-row:hover { background: var(--surface-active); border-color: var(--brand-soft); }
    .file-type-icon { grid-row: 1 / span 2; align-self: center; }
    .file-row-info { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
    .file-row-name {
      font-weight: 600; color: var(--text); font-size: 0.875rem; line-height: 1.3;
      word-break: break-word; overflow-wrap: anywhere;
    }
    @media (min-width: 641px) {
      .file-row-name {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal;
      }
    }
    .file-row-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--muted); }
    .file-row-meta-line .sep { opacity: 0.5; }
    .file-row-menu-btn {
      grid-column: 3; grid-row: 1 / span 2; align-self: center;
      width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px; background: transparent;
      color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background 0.15s, color 0.15s;
    }
    .file-row-menu-btn:hover { background: var(--surface-hover); color: var(--text); }
    .file-row-menu-btn:focus-visible { background: var(--surface-hover); color: var(--text); outline: 2px solid var(--brand); outline-offset: 2px; }
    .file-row-menu-btn svg { width: 1.25rem; height: 1.25rem; }
    .file-row.file-row-clickable { cursor: pointer; }
    .file-row.file-row-clickable:hover { background: var(--surface-active); }
    /* Context menu (desktop) — z above workspace file drawer (12000) when used */
    .file-context-menu {
      position: fixed; z-index: 12120; min-width: 11.5rem; padding: 0.35rem; border-radius: 12px;
      border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg);
    }
    .file-context-menu button {
      display: flex; align-items: center; width: 100%; padding: 0.55rem 0.75rem; border: none; background: none;
      border-radius: 8px; font-size: 0.8125rem; color: var(--text); cursor: pointer; font-family: inherit; text-align: left;
    }
    .file-context-menu button:hover { background: var(--surface-hover); }
    .file-context-menu button.danger { color: var(--error); }
    .file-context-menu button.danger:hover { background: var(--error-soft); }
    .file-context-menu hr { border: none; border-top: 1px solid var(--border); margin: 0.25rem 0; }
    /* Bottom sheet (mobile) — above workspace file drawer so ⋮ works inside drawer */
    .file-action-sheet-backdrop {
      display: none; position: fixed; inset: 0; z-index: 12100; background: var(--overlay-bg);
      opacity: 0; transition: opacity 0.2s ease;
    }
    .file-action-sheet-backdrop.open { display: block; opacity: 1; }
    .file-action-sheet {
      display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12110;
      max-height: 60vh; border-radius: 16px 16px 0 0; background: var(--surface);
      border: 1px solid var(--border); border-bottom: none; box-shadow: var(--shadow-lg);
      padding: 0.5rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0));
      transform: translateY(100%); transition: transform 0.25s ease;
    }
    .file-action-sheet.open { display: block; transform: translateY(0); }
    .file-action-sheet-handle {
      width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0.35rem auto 0.75rem;
    }
    .file-action-sheet-title { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding: 0 1rem 0.5rem; word-break: break-all; }
    .file-action-sheet button {
      display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 1rem; border: none; background: none;
      font-size: 0.9375rem; color: var(--text); cursor: pointer; font-family: inherit; text-align: left;
    }
    .file-action-sheet button:hover { background: var(--surface-hover); }
    .file-action-sheet button.danger { color: var(--error); }
    /* Usage footer */
    .files-usage-footer { margin-top: auto; padding-top: 0.75rem; flex-shrink: 0; }
    .files-usage-footer-inner { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.35rem; line-height: 1.35; }
    .files-usage-bar { height: 6px; border-radius: 99px; background: var(--surface-hover); overflow: hidden; }
    .files-usage-bar-fill { height: 100%; border-radius: 99px; transition: width 0.25s ease, background 0.25s; }
    .files-usage-bar-fill.ok { background: var(--brand); }
    .files-usage-bar-fill.warn { background: var(--warning); }
    .files-usage-bar-fill.crit { background: var(--error); }
    .chat-autocomplete { position: absolute; bottom: 100%; left: 0; right: 0; max-height: 180px; overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); margin-bottom: 0.35rem; z-index: 50; }
    .chat-autocomplete-item { padding: 0.6rem 1rem; font-size: 0.875rem; cursor: pointer; border-bottom: 1px solid var(--border); }
    .chat-autocomplete-item:last-child { border-bottom: none; }
    .chat-autocomplete-item:hover, .chat-autocomplete-item.selected { background: var(--surface-hover); }
    .chat-attached-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .chat-attach-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--surface-hover); border-radius: 99px; font-size: 0.78rem; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    .chat-output-files { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
    .chat-output-files-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }
    .chat-output-files-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
    .chat-output-file-chip {
      display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem;
      background: var(--surface-hover); border: 1px solid var(--border); border-radius: 99px;
      font-size: 0.78rem; color: var(--text); cursor: pointer; font-family: inherit;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .chat-output-file-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
    .chat-output-files-more {
      border: none; background: transparent; color: var(--brand); font-size: 0.78rem; font-weight: 600;
      cursor: pointer; padding: 0.25rem 0.35rem; font-family: inherit;
    }
    .chat-output-files-more:hover { text-decoration: underline; }

    .chat-attach-chip button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.2rem; font-size: 0.9rem; transition: color 0.15s; }
    .chat-attach-chip button:hover { color: var(--error); }
    .attach-modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; }
    /* Above mobile thread drawer (panel z-index 12110) so hire & settings are usable */
    #new-item-dialog.attach-modal,
    #hire-picker-modal.attach-modal,
    #recipe-deploy-modal.attach-modal,
    #employee-settings-modal.attach-modal,
    #cron-history-modal.attach-modal {
      z-index: 280;
    }
    #hire-picker-modal.attach-modal {
      align-items: center;
      justify-content: center;
      padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
      overflow: hidden;
    }
    .attach-modal-content { background: var(--surface); padding: 1.75rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); border: 1px solid var(--border); max-width: 380px; width: 90%; }
    .attach-modal-upload-btn {
      display: flex; align-items: center; justify-content: center; width: 100%;
      padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; border-radius: 12px;
      border: 1px dashed var(--border); background: var(--surface-hover); color: var(--text);
      font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit;
      transition: background 0.15s, border-color 0.15s;
    }
    .attach-modal-upload-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
    .attach-modal-upload-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .chat-attach-chip.image-chip { padding: 0.25rem 0.5rem 0.25rem 0.25rem; gap: 0.35rem; }
    .chat-attach-chip .chip-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; display: block; flex-shrink: 0; }
    .chip-uploading { opacity: 0.6; font-style: italic; }
    .attach-modal-content h4 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; color: var(--text); }
    .attach-modal-list {
      max-height: 220px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      margin-bottom: 1rem;
    }
    .attach-modal-item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
    .attach-modal-item:last-child { border-bottom: none; }
    .settings-panel { padding: var(--space-6); max-width: none; background: transparent; flex: 1; overflow-y: auto; min-height: 0; }
    #panel-settings .settings-panel {
      --s-px: 16px;
      --s-gap: 12px;
      --s-row-py: 13px;
      --s-card-p: 16px;
      --s-text-xs: 11px;
      --s-text-sm: 13px;
      --s-text-base: 14px;
      --s-text-md: 15px;
      --s-line: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      --s-radius-block: 14px;
      --s-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
      padding: 0 max(var(--s-px), env(safe-area-inset-left, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(var(--s-px), env(safe-area-inset-right, 0px));
      overflow-x: hidden;
    }
    .settings-content { display: flex; flex-direction: column; gap: var(--space-4); }
    #panel-settings .settings-content {
      gap: var(--s-gap);
      min-width: 0;
    }
    .settings-card {
      background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-4);
      border: 1px solid var(--border); box-shadow: var(--shadow-sm);
      transition: border-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .settings-card:last-child { margin-bottom: 0; }
    .settings-card:hover { box-shadow: var(--shadow-sm); transform: none; }
    #panel-settings .settings-card {
      padding: var(--s-card-p);
      margin-bottom: var(--s-gap);
      border-radius: var(--s-radius-block);
      border: var(--s-line);
      box-shadow: none;
    }
    #panel-settings .settings-card:last-child { margin-bottom: 0; }
    #panel-settings .settings-card:hover {
      transform: none;
      box-shadow: none;
      border-color: color-mix(in srgb, var(--border) 92%, var(--brand));
    }
    #plan-billing-card.settings-card:hover,
    #plan-billing-card:hover {
      box-shadow: none;
      transform: none;
    }
    #panel-settings .settings-card.settings-card-featured {
      border: 2px solid var(--brand-soft);
    }
    #panel-settings .settings-card-danger {
      box-shadow: var(--shadow-xs);
    }
    #panel-settings .settings-card-danger:hover {
      box-shadow: var(--shadow-xs);
    }
    .settings-card h3 { margin: 0 0 1rem 0; font-size: var(--text-lg); font-weight: 700; color: var(--text); letter-spacing: -0.025em; }
    .stat { font-size: .9375rem; color: var(--muted); margin: 0.35rem 0; }
    .stat strong { color: var(--text); }
    .channel-card { padding: 1.5rem; background: var(--surface-hover); border-radius: 16px; margin-bottom: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 2px rgba(0,0,0,0.02); }
    .channel-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
    .channel-icon { font-size: 1.25rem; }
    .channel-badge { font-size: .75rem; font-weight: 600; margin-left: 0.5rem; padding: 0.25rem 0.6rem; border-radius: 99px; }
    .channel-badge.connected { background: var(--success-soft); color: var(--success); }
    .channel-badge.disconnected { background: var(--border); color: var(--muted); }
    .channel-hint { font-size: .8125rem; color: var(--muted); margin: 0 0 0.5rem 0; }

    .social-accounts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 0.65rem;
      margin-top: 0.75rem;
    }

    /* Summary list + detail pane (compact settings home + focused editors) */
    #panel-settings .settings-wide-canvas {
      display: block;
    }
    #panel-settings .settings-inpage-nav {
      display: none;
    }
    #panel-settings .settings-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--s-gap, 12px);
      align-items: start;
      min-width: 0;
    }
    @media (min-width: 900px) {
      #panel-settings .settings-split {
        grid-template-columns: 1fr;
        gap: 0;
        min-width: 0;
      }
      #panel-settings .settings-summary-list {
        display: none;
      }
      #panel-settings .settings-summary-row__chev {
        display: none;
      }
      #panel-settings .settings-detail-placeholder {
        display: none;
      }
      #panel-settings .settings-detail-pane {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
        min-height: 0;
      }
      #panel-settings .settings-detail-pane .settings-editor-panel {
        scroll-margin-top: 6rem;
      }
      #panel-settings .settings-detail-pane .settings-editor-panel:not([hidden]) + .settings-editor-panel:not([hidden]) {
        margin-top: 1.35rem;
      }
      #panel-settings .settings-detail-pane .settings-editor-panel .settings-card:last-child {
        margin-bottom: 0;
      }
      #panel-settings .plan-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
        overflow: visible;
        padding: 0;
      }
      #panel-settings .usage-grid-settings {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
      #panel-settings .settings-connect-add-card {
        margin-top: 1rem;
      }
      #panel-settings .settings-connect-add-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }
      #panel-settings .settings-connect-add-text {
        flex: 1;
        min-width: 0;
      }
    }
    /* Settings narrow layout (max-width: 899px): keep in sync with SETTINGS_LAYOUT_MOBILE_MAX_PX in dashboard.html */
    @media (max-width: 899px) {
      .settings-social-picker-modal.attach-modal {
        align-items: flex-end;
        padding: 0;
      }
      .settings-social-picker-modal .settings-social-picker-content.attach-modal-content {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
        max-height: min(88vh, 640px);
        overflow-y: auto;
        padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
      }
    }
    @media (min-width: 900px) {
      .settings-social-picker-modal .settings-social-picker-content.attach-modal-content {
        max-width: 600px;
        max-height: min(85vh, 640px);
        overflow-y: auto;
      }
      #panel-settings .settings-inpage-nav {
        display: none !important;
      }
      #panel-settings .settings-wide-canvas {
        display: block !important;
      }
      #panel-settings .settings-summary-list {
        display: flex !important;
      }
      #panel-settings .settings-summary-row__chev {
        display: inline-block !important;
        align-self: center;
      }
      #panel-settings .settings-summary-row {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.35rem;
        min-height: 56px;
        padding: 0.55rem 0.85rem;
      }
      #panel-settings .settings-summary-row__main {
        flex: 1 1 auto;
        min-width: 0;
      }
      #panel-settings .settings-summary-row__hint {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
      }
      #panel-settings .settings-summary-row__value {
        max-width: 100%;
        flex: 1 1 100%;
        text-align: left;
        white-space: normal;
        word-break: break-word;
      }
      #panel-settings .settings-connect-add-card {
        display: block !important;
        margin-top: 0.75rem;
      }
      #panel-settings .settings-connect-add-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
      }
      #panel-settings .settings-connect-add-inner .btn-connect {
        width: 100%;
      }
      #panel-settings .settings-detail-pane:not(.settings-pane-editor-open) {
        min-height: 0;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        border: none;
        background: transparent;
      }
      #panel-settings .settings-detail-pane:not(.settings-pane-editor-open) .settings-detail-placeholder {
        display: none !important;
      }
      #panel-settings .settings-detail-pane.settings-pane-editor-open {
        min-height: 0;
        margin-top: 0.5rem;
      }
      #panel-settings .settings-detail-pane.settings-pane-editor-open .settings-detail-placeholder {
        display: none;
      }
      #panel-settings .settings-nav {
        padding-top: 0.35rem;
        padding-bottom: max(0.3rem, env(safe-area-inset-bottom, 0px));
      }
      #panel-settings .settings-nav-item.active {
        border-width: 1.5px;
        border-color: var(--brand);
      }
      #panel-settings .settings-detail-back {
        width: auto;
      }
      #panel-settings .settings-detail-back.btn,
      #panel-settings .settings-detail-back.btn-action,
      #panel-settings .settings-detail-back.btn-secondary {
        padding: 0 1rem;
        min-height: 36px;
        height: 36px;
        border-radius: 999px;
        font-size: 13px;
        margin: 0 0 0.65rem;
      }
    }
    #panel-settings .settings-summary-list {
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      border: var(--s-line, 1px solid color-mix(in srgb, var(--border) 72%, transparent));
      border-radius: var(--s-radius-block, 14px);
      overflow: hidden;
      background: var(--surface);
      min-width: 0;
    }
    #panel-settings .settings-summary-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.65rem;
      width: 100%;
      min-height: var(--touch-min, 44px);
      padding: 0.65rem 0.85rem;
      margin: 0;
      border: none;
      border-bottom: var(--s-line, 1px solid color-mix(in srgb, var(--border) 72%, transparent));
      background: var(--surface);
      color: var(--text);
      font-family: inherit;
      font-size: var(--s-text-sm, 13px);
      text-align: left;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    #panel-settings .settings-summary-row:last-child {
      border-bottom: none;
    }
    #panel-settings .settings-summary-row:hover {
      background: var(--surface-hover);
    }
    #panel-settings .settings-summary-row:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
    }
    #panel-settings .settings-summary-row.settings-summary-row--active {
      background: color-mix(in srgb, var(--brand) 12%, var(--surface));
      box-shadow: inset 3px 0 0 0 var(--brand);
    }
    #panel-settings .settings-summary-row.settings-summary-row--active .settings-summary-row__label {
      color: var(--brand);
    }
    #panel-settings .settings-summary-row--primary {
      background: color-mix(in srgb, var(--brand) 8%, var(--surface));
      font-weight: 600;
    }
    #panel-settings .settings-summary-row--primary:hover {
      background: color-mix(in srgb, var(--brand) 14%, var(--surface));
    }
    #panel-settings .settings-summary-row__main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    #panel-settings .settings-summary-row__label {
      font-weight: 600;
      font-size: var(--s-text-md, 15px);
      color: var(--text);
      letter-spacing: -0.02em;
    }
    #panel-settings .settings-summary-row__hint {
      font-size: var(--s-text-xs, 11px);
      color: var(--muted);
      line-height: 1.35;
    }
    #panel-settings .settings-summary-row__value {
      flex-shrink: 0;
      max-width: 42%;
      font-size: var(--s-text-sm, 13px);
      font-weight: 600;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #panel-settings .settings-summary-row__chev {
      flex-shrink: 0;
      font-size: 1.1rem;
      color: var(--muted-soft);
      line-height: 1;
    }
    #panel-settings .settings-summary-row.settings-summary-row--primary .settings-summary-row__chev {
      color: var(--brand);
    }
    #panel-settings .settings-detail-pane {
      position: relative;
      min-width: 0;
      border: var(--s-line, 1px solid color-mix(in srgb, var(--border) 72%, transparent));
      border-radius: var(--s-radius-block, 14px);
      background: var(--surface);
      padding: var(--s-card-p, 16px);
      min-height: 12rem;
    }
    #panel-settings .settings-detail-placeholder {
      padding: 0.5rem 0.15rem 1rem;
    }
    #panel-settings .settings-detail-placeholder .stat {
      margin-top: 0;
    }
    #panel-settings .settings-detail-back {
      margin: 0 0 0.75rem;
      width: 100%;
    }
    #panel-settings .settings-editor-panel {
      outline: none;
    }
    #panel-settings .settings-editor-panel .settings-card:first-child {
      margin-top: 0;
    }
    #panel-settings .settings-attention-strip {
      font-size: var(--s-text-sm, 13px);
      padding: 0.55rem 0.75rem;
      margin-bottom: 0.35rem;
      border-radius: var(--radius-sm, 8px);
      background: color-mix(in srgb, var(--warning) 12%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
      color: var(--text);
    }
    #panel-settings .settings-connect-accounts-lede {
      margin: 0 0 0.85rem;
      font-size: var(--s-text-sm, 13px);
      color: var(--text-muted);
      line-height: 1.45;
    }
    #panel-settings .settings-nav-attention {
      font-size: 0.72rem;
      color: var(--warning);
      margin: 0.35rem 0 0;
      padding: 0 0.25rem;
      line-height: 1.35;
    }
    #panel-settings .connect-accounts-inline-attention {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.75rem;
      padding: 0.55rem 0.75rem;
    }
    #panel-settings .connect-accounts-inline-attention .banner-content {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      flex: 1;
      min-width: 0;
    }
    @media (max-width: 520px) {
      #panel-settings .connect-accounts-inline-attention {
        flex-wrap: wrap;
      }
      #panel-settings .connect-accounts-inline-attention-cta {
        width: 100%;
      }
    }
    @keyframes settings-skeleton-pulse {
      0% { opacity: 0.55; }
      100% { opacity: 0.9; }
    }
    #panel-settings .settings-skeleton-wrap { min-height: 1.1rem; display: block; }
    #panel-settings .settings-skeleton-line {
      display: block;
      height: 0.65rem;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--surface-hover), color-mix(in srgb, var(--border) 40%, var(--surface-hover)), var(--surface-hover));
      background-size: 200% 100%;
      animation: settings-skeleton-pulse 1.1s ease-in-out infinite alternate;
    }
    #panel-settings .settings-skeleton-line--long { width: 92%; max-width: 22rem; }
    #panel-settings .settings-skeleton-stack {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    #panel-settings .settings-skeleton-block {
      height: 2.75rem;
      border-radius: 10px;
      background: var(--surface-hover);
      animation: settings-skeleton-pulse 1.1s ease-in-out infinite alternate;
    }
    #panel-settings .settings-skeleton-block--narrow { width: 72%; }
    #panel-settings .settings-detail-heading {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin: 0 0 0.6rem;
      padding: 0;
    }
    #panel-settings .plan-billing-compare-details {
      margin: 0.75rem 0;
      border-radius: var(--radius-sm, 8px);
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      padding: 0.35rem 0.65rem 0.5rem;
      background: color-mix(in srgb, var(--surface-hover) 40%, var(--surface));
    }
    #panel-settings .plan-billing-compare-summary {
      cursor: pointer;
      list-style: none;
      font-weight: 600;
      padding: 0.25rem 0;
    }
    #panel-settings .plan-billing-compare-summary::-webkit-details-marker { display: none; }
    #panel-settings .plan-billing-compare-inner { padding-top: 0.35rem; }
    @media (min-width: 900px) {
      #panel-settings .plan-billing-compare-details { margin-top: 0.5rem; }
    }
    #panel-settings .settings-card-header-static {
      padding: 0.65rem 0 0.85rem;
      margin-bottom: 0.35rem;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }
    /* (Removed) body.settings-mobile-editor-open full-screen sheet — caused blank scroll and hid the list. */
    /* Social picker + settings narrow rules: see consolidated @media (max-width: 899px) above. */
    .settings-picker-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.35rem;
    }
    .settings-picker-sheet-head h4 {
      margin: 0;
      font-size: 1.05rem;
    }
    .settings-layout {
      display: flex;
      flex-direction: column;
      gap: var(--s-gap, 12px);
      align-items: stretch;
    }
    .settings-nav {
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.35rem;
      padding: 0.45rem 0 max(0.35rem, env(safe-area-inset-bottom, 0px));
      margin: 0 calc(-1 * var(--s-px, 16px)) 0.35rem;
      padding-left: max(var(--s-px, 16px), env(safe-area-inset-left, 0px));
      padding-right: max(var(--s-px, 16px), env(safe-area-inset-right, 0px));
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    }
    .settings-nav::-webkit-scrollbar {
      display: none;
    }
    .settings-nav-label {
      display: none;
    }
    .s-rail-group {
      display: none;
    }
    .settings-nav-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      flex: 0 0 auto;
      min-height: var(--touch-min, 44px);
      padding: 0 0.85rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-hover);
      color: var(--muted);
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
      text-align: center;
      font-family: inherit;
      white-space: nowrap;
    }
    .settings-nav-item:hover {
      background: var(--surface);
      color: var(--text);
    }
    .settings-nav-item.active {
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
    }
    .settings-nav-item:focus-visible {
      outline: none;
      box-shadow: var(--s-focus-ring, 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent));
    }
    .settings-nav-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      color: inherit;
    }
    .settings-nav-icon svg {
      width: 18px;
      height: 18px;
    }
    .settings-section {
      display: block;
      scroll-margin-top: 4.5rem;
    }
    /* Desktop: sidebar picks one category — show only the active section (avoid stacked Personalize+Connect+Account). */
    @media (min-width: 900px) {
      #panel-settings .settings-section:not(.active) {
        display: none;
      }
      #panel-settings .settings-detail-back {
        display: none;
      }
    }
    .settings-section + .settings-section {
      padding-top: 1.75rem;
      border-top: var(--s-line, 1px solid color-mix(in srgb, var(--border) 72%, transparent));
      margin-top: 0.5rem;
    }
    .settings-section-header {
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: none;
    }
    [data-theme="dark"] .settings-section-header {
      border-bottom-color: rgba(255,255,255,0.06);
    }
    .settings-section-header h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--text);
      margin: 0 0 var(--space-2) 0;
      letter-spacing: -0.03em;
    }
    .settings-section-desc {
      font-size: var(--text-base);
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
    }
    @media (min-width: 900px) {
      #panel-settings .settings-layout {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
      }
      #panel-settings .settings-nav {
        display: none !important;
      }
      #panel-settings .settings-rail {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 1.1rem;
        z-index: 1;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.5rem;
        margin: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--s-radius-block, 14px);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: 1px;
        -webkit-overflow-scrolling: touch;
      }
      #panel-settings .s-rail-heading {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        margin: 0.85rem 0.5rem 0.25rem;
        padding: 0;
      }
      #panel-settings .s-rail-heading:first-child {
        margin-top: 0.25rem;
      }
      #panel-settings .s-rail-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.55rem 0.7rem;
        border: none;
        background: transparent;
        border-radius: 8px;
        color: var(--text);
        font: inherit;
        font-size: 0.9rem;
        cursor: pointer;
        text-align: left;
        min-height: 36px;
        transition: background 0.12s ease, color 0.12s ease;
      }
      #panel-settings .s-rail-item:hover {
        background: var(--surface-hover);
      }
      #panel-settings .s-rail-item:focus-visible {
        outline: none;
        box-shadow: var(--s-focus-ring, 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent));
      }
      #panel-settings .s-rail-item.s-rail-item--active {
        background: color-mix(in srgb, var(--brand) 12%, var(--surface));
        color: var(--brand);
        font-weight: 600;
      }
      #panel-settings .s-rail-item[hidden] {
        display: none;
      }
      #panel-settings .settings-content {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        max-width: none;
      }
      #panel-settings .settings-section-header {
        display: none;
      }
      #panel-settings .settings-inpage-nav {
        display: none !important;
      }
      #panel-settings .settings-wide-canvas {
        display: block !important;
        max-width: none;
        margin: 0;
        grid-template-columns: unset;
        gap: 0;
      }
      #panel-settings .settings-section {
        scroll-margin-top: 1.5rem;
      }
      #panel-settings .settings-summary-list {
        display: none !important;
      }
      #panel-settings #settings-live-region {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: start;
        pointer-events: none;
        z-index: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
      }
    }
    @media (min-width: 900px) and (max-width: 1024px) {
      #panel-settings .settings-layout {
        gap: 1.25rem;
        grid-template-columns: 240px minmax(0, 1fr);
      }
    }
    @media (max-width: 899px) {
      #panel-settings .settings-rail {
        display: none !important;
      }
    }
    @media (min-width: 1200px) {
      #panel-settings .settings-layout {
        grid-template-columns: 264px minmax(0, 1fr);
      }
    }
    .settings-card-featured {
      border: 2px solid var(--brand-soft);
    }
    #panel-settings .settings-card h3 {
      margin: 0 0 0.75rem;
      font-size: var(--s-text-md, 15px);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    #panel-settings .settings-card--always-expanded .settings-card-collapsible {
      border-top: none;
      margin-top: 0;
      padding-top: 0.65rem;
    }
    #panel-settings details.channel-hint {
      font-size: 0.78rem;
    }
    #panel-settings .s-card-body > .stat:first-child {
      margin-bottom: 0.25rem;
    }
    #panel-settings .s-card-body > details.channel-hint {
      margin-top: 0.5rem;
    }
    #panel-settings .s-card-body > details.channel-hint > summary {
      padding: 0.15rem 0;
    }
    @media (min-width: 900px) {
      #panel-settings #theme-settings-card .s-card-body > .stat:first-child {
        display: none;
      }
    }
    #panel-settings .s-card-body {
      margin-top: 0.25rem;
    }
    #panel-settings .settings-card .s-card-head h3 {
      margin: 0;
      font-size: var(--s-text-md, 15px);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    #panel-settings .s-connect-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.65rem;
    }
    #panel-settings .s-connect-head h3 {
      margin: 0;
      flex: 1 1 auto;
      min-width: min(100%, 12rem);
    }
    #panel-settings .s-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: var(--touch-min, 44px);
      padding: var(--s-row-py, 13px) 0;
      border-bottom: var(--s-line, 1px solid color-mix(in srgb, var(--border) 72%, transparent));
    }
    #panel-settings .s-card-body .s-row:first-child {
      padding-top: 0;
    }
    #panel-settings .s-row:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
    }
    #panel-settings .s-row__main {
      flex: 1;
      min-width: 0;
    }
    #panel-settings .s-row__title {
      margin: 0;
      font-size: var(--s-text-md, 15px);
      font-weight: 600;
      color: var(--text);
    }
    #panel-settings .s-row__desc,
    #panel-settings .s-row__main .stat {
      margin: 0.2rem 0 0;
      font-size: var(--s-text-sm, 13px);
      color: var(--muted);
      line-height: 1.45;
    }
    #panel-settings .s-row__main .stat {
      margin-top: 0;
    }
    #panel-settings .s-row__ctrl {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    #panel-settings .s-row-foot {
      margin: 0.5rem 0 0;
      font-size: var(--s-text-xs, 11px);
    }
    @media (max-width: 599px) {
      #panel-settings .s-row {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      #panel-settings .s-row__ctrl {
        width: 100%;
        justify-content: flex-start;
      }
      #panel-settings .s-row__ctrl .theme-toggle {
        width: 100%;
        justify-content: stretch;
      }
      #panel-settings .s-row__ctrl .theme-toggle .theme-btn,
      #panel-settings .s-row__ctrl .theme-toggle .lite-mode-btn {
        flex: 1 1 auto;
        justify-content: center;
      }
    }
    #panel-settings .s-field-row {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin-top: 0.65rem;
    }
    #panel-settings .s-field-row .s-field__grow {
      flex: 1 1 180px;
      min-width: 0;
    }
    @media (min-width: 600px) {
      #panel-settings .s-field-row {
        flex-flow: row wrap;
        align-items: flex-end;
      }
      #panel-settings .s-field-row .channel-input {
        max-width: none;
      }
    }
    #panel-settings .channel-input {
      max-width: 100%;
      width: 100%;
      margin-right: 0;
      font-size: max(16px, var(--text-sm));
    }
    #panel-settings .social-accounts-grid {
      grid-template-columns: 1fr;
    }
    @media (min-width: 480px) {
      #panel-settings .social-accounts-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      }
    }
    #panel-settings .s-hero-stack {
      display: flex;
      flex-direction: column;
      gap: var(--s-gap, 12px);
      margin-bottom: 0.5rem;
    }
    #panel-settings .s-hero-stack .settings-card {
      margin-bottom: 0;
    }
    #panel-settings .settings-card-header-clickable {
      min-height: var(--touch-min, 44px);
      padding: 0.35rem 0;
    }
    #panel-settings .s-privacy-export-card .settings-account-actions {
      margin-top: 0;
    }
    #panel-settings .settings-card .settings-banner {
      margin: 0.5rem 0 0.85rem;
    }
    #panel-settings #notion-connect-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    #panel-settings .s-field label.channel-hint {
      display: block;
      margin-bottom: 0.35rem;
    }
    #panel-settings .settings-account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    @media (prefers-reduced-motion: reduce) {
      #panel-settings * {
        transition: none !important;
      }
      .plan-cards-grid {
        scroll-behavior: auto;
      }
    }
    /* Referral program — Account section */
    .referral-settings-card {
      background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, var(--surface)) 0%, var(--surface) 55%, var(--surface) 100%);
      border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    }
    .referral-settings-card h3 {
      margin-bottom: 0.35rem;
    }
    .referral-code-block {
      margin: 0.85rem 0 1rem 0;
    }
    .referral-code-label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .referral-code-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }
    .referral-code-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      padding: 0.65rem 1rem;
      margin: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      flex: 1;
      min-width: 10.5rem;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .referral-link-label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .settings-card-header-clickable {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: -0.25rem 0 0 0;
      padding: 0.25rem 0;
      cursor: pointer;
      user-select: none;
    }
    .settings-card-header-clickable h3 {
      margin: 0;
      flex: 1;
    }
    .settings-card-toggle {
      font-size: 0.75rem;
      color: var(--muted);
      transition: transform 0.2s ease;
    }
    .settings-card-advanced.open .settings-card-toggle,
    .settings-card-danger.open .settings-card-toggle {
      transform: rotate(180deg);
    }
    .settings-card-collapsible {
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      margin-top: 1rem;
    }
    .settings-banner {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border-radius: 12px;
      margin-bottom: 1.25rem;
    }
    /* PWA soft prompt + settings */
    .pwa-soft-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10050;
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
      background: var(--surface-elevated);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 24px rgba(0,0,0,.08);
      display: none;
      align-items: flex-start;
      gap: 0.75rem;
      max-width: 100%;
    }
    .pwa-soft-banner.visible { display: flex; }
    [data-theme="dark"] .pwa-soft-banner {
      box-shadow: 0 -4px 24px rgba(0,0,0,.35);
    }
    .pwa-soft-banner-text { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-soft); }
    .pwa-soft-banner-text strong { color: var(--text); display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; }
    .pwa-soft-banner-actions { display: flex; flex-direction: column; gap: 0.35rem; flex-shrink: 0; }
    .pwa-soft-banner-actions button {
      font-size: 0.8125rem;
      padding: 0.45rem 0.75rem;
      border-radius: var(--radius-sm);
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      white-space: nowrap;
    }
    .pwa-soft-banner-actions .pwa-soft-primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    .settings-banner-promo {
      background: var(--brand-soft);
      border: 1px solid var(--border);
    }
    /* Chat-only: thin location nudge (not .settings-banner — avoids large card padding) */
    .location-nudge-bar {
      display: none;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      row-gap: 0.35rem;
      padding: 0.38rem 0.65rem;
      padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
      padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
      background: var(--brand-soft);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .location-nudge-bar__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      color: var(--brand);
      opacity: 0.92;
    }
    .location-nudge-bar__text {
      flex: 1;
      min-width: min(100%, 10rem);
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.35;
      color: var(--text-soft);
    }
    .location-nudge-bar__actions {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      flex-shrink: 0;
      margin-left: auto;
    }
    .location-nudge-bar__btn {
      padding: 0.22rem 0.55rem;
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1.2;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-family: inherit;
    }
    .location-nudge-bar__btn:hover {
      filter: brightness(1.03);
    }
    .location-nudge-bar__btn--primary {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }
    [data-theme="dark"] .location-nudge-bar__btn:not(.location-nudge-bar__btn--primary) {
      background: var(--surface-elevated);
    }
    .settings-banner-upgrade {
      background: var(--warning-soft);
      border: 1px solid var(--warning);
    }
    .referral-value-nudge.settings-banner {
      margin: 0 auto 0.65rem;
      max-width: 100%;
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }
    .referral-value-nudge .referral-value-nudge__btns {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      align-items: center;
      justify-content: flex-end;
      flex: 1 1 10rem;
      min-width: min(100%, 12rem);
    }
    .banner-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    .banner-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
    }
    .banner-content strong {
      color: var(--text);
      font-weight: 600;
    }
    .banner-content span {
      color: var(--muted);
      font-size: 0.875rem;
    }
    .btn-sm-settings {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      flex-shrink: 0;
    }

    /* Settings: theme + lite segmented toggles (state via .active; no inline styles) */
    .theme-toggle {
      display: flex;
      gap: 0.5rem;
      background: var(--surface-hover);
      padding: 4px;
      border-radius: var(--radius-sm);
      width: fit-content;
      flex-wrap: wrap;
    }
    .theme-btn,
    .lite-mode-btn {
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .theme-btn > span {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .theme-btn.active,
    .lite-mode-btn.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }
    .theme-btn:focus-visible,
    .lite-mode-btn:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    /* Browser topbar: session controls + refresh */
    .browser-topbar-actions .browser-topbar-control {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      min-height: 36px;
      padding: 0.4rem 0.75rem;
      font-size: 0.8125rem;
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    }
    .browser-topbar-actions .browser-topbar-control:not(.btn-disconnect):not(.btn-fullscreen) {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
    }
    .browser-topbar-actions .browser-topbar-control:not(.btn-disconnect):not(.btn-fullscreen):hover {
      background: var(--surface-hover);
      border-color: var(--border-strong);
    }
    .browser-topbar-actions .browser-topbar-control:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .browser-topbar-actions .browser-topbar-lights {
      align-items: center;
    }
    .browser-residential-ip-toggle--on {
      border-color: var(--brand) !important;
      background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
      color: var(--brand);
    }
    .browser-residential-ip-badge {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--brand);
      background: color-mix(in srgb, var(--brand) 10%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
    }

    .settings-pwa-actions-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    .settings-pwa-actions-row .btn-connect,
    .settings-pwa-actions-row .btn-action {
      margin: 0;
    }

    /* ── Schedule hub (automate tab) ─────────────────────────── */
    .schedule-hub-panel { padding: 1.25rem 1.5rem 2rem; overflow-y: auto; flex: 1; min-height: 0; }
    .schedule-hero {
      background: var(--brand-soft);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.25rem 1.35rem;
      margin-bottom: 1.25rem;
    }
    .schedule-hero h2 { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
    .schedule-hero p { margin: 0; font-size: 0.9375rem; color: var(--text-soft); line-height: 1.55; max-width: 42rem; }
    .schedule-hero-tip {
      margin-top: 0.85rem; padding: 0.65rem 0.85rem; background: var(--surface); border-radius: var(--radius-sm);
      font-size: 0.8125rem; color: var(--muted); border: 1px solid var(--border);
    }
    .schedule-toolbar {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
      margin-bottom: 1rem;
    }
    .schedule-presets {
      display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; min-width: 0;
    }
    .schedule-preset-chip {
      padding: 0.45rem 0.85rem; border-radius: 99px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text-soft); font-size: 0.8125rem; font-weight: 500;
      cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .schedule-preset-chip:hover {
      border-color: var(--brand); color: var(--brand); background: var(--brand-soft);
    }
    .schedule-preset-chip--custom { border-style: dashed; }
    .schedule-preset-chip:disabled { opacity: 0.45; cursor: not-allowed; }
    .schedule-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex-shrink: 0; }
    .schedule-btn-new { padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); }
    .schedule-toolbar-actions .btn.btn-primary.schedule-btn-new,
    .schedule-empty .btn.btn-primary.schedule-btn-new {
      min-height: auto;
      border-radius: var(--radius-sm);
    }
    .schedule-btn-refresh { font-size: 0.8125rem; }
    .schedule-plan-line { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.75rem; }
    .schedule-jobs-list { display: flex; flex-direction: column; gap: 1rem; }
    .schedule-task-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 1.05rem 1.2rem; transition: border-color 0.2s, box-shadow 0.2s;
      position: relative; overflow: hidden;
    }
    .schedule-task-card::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--brand); border-radius: 14px 0 0 14px; opacity: 0.65;
    }
    .schedule-task-card:hover { border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
    [data-theme="dark"] .schedule-task-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
    .schedule-task-card__head {
      display: flex; align-items: flex-start; gap: 0.85rem; flex-wrap: wrap;
      padding-left: 0.35rem;
    }
    .schedule-task-card__icon {
      width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, var(--brand-soft), var(--surface-hover));
      color: var(--brand);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      border: 1px solid rgba(20, 184, 166, 0.2);
    }
    .schedule-task-card__icon svg { width: 22px; height: 22px; }
    .schedule-task-card__titles { flex: 1; min-width: 0; }
    .schedule-task-card__name {
      margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    }
    .schedule-task-card__chips {
      display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem;
    }
    .schedule-task-chip {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: 0.7rem; font-weight: 600; padding: 0.22rem 0.5rem; border-radius: 999px;
      background: var(--surface-hover); color: var(--text-soft); border: 1px solid var(--border);
      max-width: 100%;
    }
    .schedule-task-chip--accent { background: var(--brand-soft); color: var(--brand); border-color: rgba(20, 184, 166, 0.25); }
    .schedule-task-chip--muted { color: var(--muted); }
    .schedule-task-chip svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.85; }
    .schedule-status-badge {
      display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.03em; vertical-align: middle; flex-shrink: 0;
    }
    .schedule-status-badge--paused { background: var(--surface-hover); color: var(--muted); }
    .schedule-status-badge--error { background: var(--error-soft); color: var(--error); }
    .schedule-status-badge--running {
      background: rgba(26, 127, 75, 0.12);
      color: #15803d;
      border: 1px solid rgba(26, 127, 75, 0.35);
      animation: cron-pulse 1.4s ease-in-out infinite;
    }
    @keyframes cron-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.45; }
    }
    .schedule-task-card__error {
      margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--error); line-height: 1.4; word-break: break-word;
    }
    .schedule-foot-btn--reenable { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 700; }
    .schedule-foot-btn--reenable:hover { border-color: var(--brand-hover); color: var(--brand-hover); background: var(--brand-soft); }
    .schedule-task-card__when { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--brand); font-weight: 700; }
    .schedule-task-card__meta { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
    .schedule-task-card__preview {
      margin: 0.65rem 0 0; margin-left: 0.35rem; padding: 0.55rem 0.75rem;
      background: var(--bg-alt, var(--surface-hover)); border-radius: 10px; border: 1px solid var(--border);
      font-size: 0.8125rem; color: var(--text-soft); line-height: 1.5; max-height: 4.2em; overflow: hidden;
    }
    .schedule-task-card__preview-body { display: block; margin-top: 0.2rem; }
    .schedule-task-card__meta--thread {
      margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--brand); font-weight: 600; line-height: 1.4; word-break: break-word;
    }
    .schedule-task-card__preview-label {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.25rem;
    }
    .schedule-task-card__foot {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.85rem; margin-left: 0.35rem;
      padding-top: 0.85rem; border-top: 1px solid var(--border);
    }
    .schedule-webhook-copy, .schedule-webhook-regen { font-size: 0.72rem !important; padding: 0.2rem 0.5rem !important; flex-shrink: 0; }
    .schedule-toggle {
      display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; margin-left: auto;
      user-select: none; position: relative;
    }
    .schedule-toggle input {
      position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
    }
    .schedule-toggle-track {
      width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--border);
      transition: background var(--transition); position: relative; flex-shrink: 0;
    }
    .schedule-toggle input:focus-visible + .schedule-toggle-track {
      outline: 2px solid var(--brand); outline-offset: 2px;
    }
    .schedule-toggle input:checked + .schedule-toggle-track { background: var(--brand); }
    .schedule-toggle-thumb {
      position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
      border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      transition: transform 0.2s ease;
    }
    .schedule-toggle input:checked + .schedule-toggle-track .schedule-toggle-thumb {
      transform: translateX(20px);
    }
    .schedule-foot-btn {
      padding: 0.35rem 0.65rem; font-size: 0.78rem; font-weight: 600; border-radius: 8px;
      border: 1px solid var(--border); background: var(--surface-hover); color: var(--text-soft); cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .schedule-foot-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
    .schedule-foot-btn--danger { border-color: rgba(239, 68, 68, 0.4); color: var(--error); }
    .schedule-foot-btn--danger:hover { background: var(--error-soft); }
    .schedule-empty {
      text-align: center; padding: 2.5rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius-lg);
      background: var(--surface-hover);
    }
    .schedule-empty p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; }
    /* Schedule task modal */
    .schedule-modal {
      position: fixed; inset: 0; z-index: 2100; display: none; align-items: flex-end; justify-content: center;
      padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    }
    .schedule-modal.open { display: flex; }
    .schedule-modal-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,0.48);
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    }
    .schedule-modal-sheet {
      position: relative; width: 100%; max-width: 560px; max-height: min(92vh, 720px);
      background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl);
      display: flex; flex-direction: column; overflow: hidden; animation: scheduleModalIn 0.24s var(--ease-out);
    }
    @keyframes scheduleModalIn { from { transform: translateY(100%); opacity: 0.9; } to { transform: translateY(0); opacity: 1; } }
    @media (min-width: 640px) {
      .schedule-modal { align-items: center; padding: 1.5rem; }
      .schedule-modal-sheet { border-radius: var(--radius-lg); max-height: min(88vh, 680px); }
    }
    .schedule-modal-header {
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
      padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .schedule-modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
    .schedule-modal-close {
      width: 36px; height: 36px; border: none; border-radius: 10px; background: var(--surface-hover);
      color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; flex-shrink: 0;
    }
    .schedule-modal-close:hover { background: var(--border); color: var(--text); }
    .schedule-modal-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.25rem; }
    .schedule-form-inner { display: flex; flex-direction: column; gap: 0.85rem; }
    .schedule-field label {
      display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--muted); margin-bottom: 0.35rem;
    }
    .schedule-field .channel-input { width: 100%; }
    .schedule-field-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
    .schedule-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
    .usage-grid-settings {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.65rem;
      margin: 0.75rem 0 0;
    }
    @media (min-width: 600px) {
      .usage-grid-settings {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 720px) {
      .usage-grid-settings {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .usage-upgrade-recommend.settings-banner {
      margin-top: 0.75rem;
      margin-bottom: 0;
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }
    .usage-upgrade-recommend .banner-content { min-width: min(100%, 14rem); }
    .usage-grid-settings .stat {
      margin: 0;
    }
    #panel-settings .s-stat {
      padding: 0.75rem 0.9rem;
      background: var(--surface-hover);
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    }
    #panel-settings .s-stat .stat {
      margin: 0 0 0.45rem;
      font-size: var(--s-text-sm, 13px);
    }
    #panel-settings .s-stat__bar {
      height: 4px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--border) 45%, transparent);
      overflow: hidden;
    }
    #panel-settings .s-stat__fill {
      display: block;
      height: 100%;
      width: var(--fill, 0%);
      max-width: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 65%, var(--success)));
      transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .credits-pools-card {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin: 0.75rem 0 1rem;
    }
    .credits-pool {
      padding: 0.85rem 0.95rem;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
      background: var(--surface-hover);
    }
    .credits-pool--total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      background: color-mix(in srgb, var(--brand) 8%, var(--surface-hover));
      border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
    }
    .credits-pool__head {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin-bottom: 0.45rem;
    }
    .credits-pool__badge {
      flex: 0 0 auto;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 700;
      background: color-mix(in srgb, var(--brand) 18%, transparent);
      color: var(--brand);
    }
    .credits-pool__badge--bonus {
      background: color-mix(in srgb, var(--warning, #d97706) 18%, transparent);
      color: var(--warning, #d97706);
    }
    .credits-pool__title {
      display: block;
      font-size: var(--s-text-sm, 13px);
    }
    .credits-pool__sub {
      margin: 0.15rem 0 0;
      font-size: 0.78rem;
    }
    .credits-pool__value {
      margin: 0 0 0.2rem;
      font-size: var(--s-text-sm, 13px);
    }
    .credits-pool__meta {
      margin: 0 0 0.45rem;
      font-size: 0.78rem;
    }
    .credits-pool__bar {
      height: 4px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--border) 45%, transparent);
      overflow: hidden;
    }
    .credits-pool__total-label {
      font-size: var(--s-text-sm, 13px);
      color: var(--text-muted);
    }
    .credits-pool__total-value {
      font-size: 1.15rem;
      color: var(--brand);
    }
    .settings-card-danger {
      border: 1.5px solid rgba(239, 68, 68, 0.35);
      background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, var(--surface) 48%);
      box-shadow: var(--shadow-xs);
    }
    [data-theme="dark"] .settings-card-danger {
      background: linear-gradient(180deg, rgba(248, 113, 113, 0.12) 0%, var(--surface) 50%);
      border-color: rgba(248, 113, 113, 0.45);
    }
    @media (max-width: 640px) {
      .settings-card-header-clickable {
        flex-wrap: wrap;
      }
      .file-row { padding: 0.55rem 0.6rem; min-height: 56px; }
      .file-row-name { font-size: 0.875rem; white-space: normal; overflow: visible; text-overflow: clip; }
    }

    .channel-input {
      width: 100%; max-width: 280px; min-height: var(--touch-min); padding: 0 1rem; margin-right: 0.5rem;
      background: var(--surface-hover); border: 1.5px solid var(--border); border-radius: var(--radius);
      color: var(--text); font-size: var(--text-sm); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
      box-shadow: var(--shadow-xs);
    }
    .channel-input:focus { outline: none; background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
    .qr-box { padding: 1.5rem; background: var(--surface); border-radius: 16px; margin-top: 0.5rem; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); }
    .qr-box img { max-width: 200px; height: auto; display: block; margin: 0 auto; }
    .qr-box p { font-size: .8125rem; color: var(--muted); margin: 0.5rem 0 0; }
    .pairing-banner { padding: 1rem 1.25rem; background: var(--warning-soft); border-radius: 14px; margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; box-shadow: 0 2px 8px rgba(251,191,36,0.15); }
    .pairing-actions { display: flex; gap: 0.5rem; align-items: center; }
    .pairing-input { width: 90px; padding: 0.6rem 0.8rem; background: var(--surface-hover); border: none; border-radius: 12px; color: var(--text); text-transform: uppercase; font-size: .9375rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.04); }
    .mobile-nav { display: none; gap: 4px; }
    .mobile-nav .tab { justify-content: center; }
    .thread-drawer-toggle { display: none; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); padding: 0; border: none; border-radius: var(--radius-lg); background: var(--surface-hover); color: var(--text); cursor: pointer; transition: all var(--transition); }
    .thread-drawer-toggle:hover { background: var(--brand-soft); color: var(--brand); }
    .thread-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
    .thread-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    .notif-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
    .notif-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    .notif-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 95vw; z-index: 200; background: var(--surface); box-shadow: -4px 0 24px rgba(0,0,0,0.15); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow: hidden; }
    html:not(.cloudaxis-embed) .notif-panel {
      bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
    .notif-panel.drawer-open { transform: translateX(0); }
    .notif-panel-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .notif-panel-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
    .notif-panel-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
    .notif-panel-empty {
      margin: 0.25rem 0.35rem 0.5rem;
      padding: 1.1rem 0.9rem;
      text-align: center;
      font-size: 0.875rem;
      line-height: 1.5;
      color: var(--text-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius, 12px);
      background: var(--surface-hover);
    }
    .notif-card { background: var(--surface-hover); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.5rem; border: 1px solid var(--border); }
    .notif-card.unread {
      border-left: 4px solid var(--brand); background: var(--brand-soft);
    }
    .notif-card.unread .notif-card-title { font-weight: 700; color: var(--text); }
    .notif-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
    .notif-card-header-right { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
    .notif-unread-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex-shrink: 0;
      box-shadow: 0 0 0 2px var(--surface);
    }
    .notif-card-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
    .notif-card-time { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
    .notif-card-content { font-size: 0.8125rem; color: var(--text); line-height: 1.5; word-break: break-word; }
    .notif-card-content.truncated { max-height: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; }
    .notif-card-content.expanded { max-height: none; overflow: visible; }
    .notif-card-content.expanded a { color: var(--accent); text-decoration: underline; }
    .notif-card-content.expanded strong { font-weight: 600; }
    .notif-card-content.expanded pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; overflow-x: auto; margin: 0.4rem 0; }
    .notif-card-content.expanded code { font-size: 0.78rem; }
    .notif-expand-hint { font-size: 0.72rem; color: var(--accent); cursor: pointer; margin-top: 0.25rem; user-select: none; font-weight: 500; }
    .notif-expand-hint:hover { text-decoration: underline; }
    .notif-card-actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
    .notif-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--muted); }
    .notif-card-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
    .notif-status-badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; }
    .notif-status-badge.ok { background: var(--success-soft); color: var(--success); }
    .notif-status-badge.partial { background: var(--warning-soft, rgba(232, 163, 23, 0.15)); color: var(--warning, #e8a317); }
    .notif-status-badge.error { background: var(--error-soft); color: var(--error); }

    /* Approvals inbox (features/approvals) — actionable cards pinned atop the notif drawer */
    .approvals-panel-section { flex-shrink: 0; max-height: 55vh; overflow-y: auto; padding: 0.5rem 0.5rem 0.25rem; border-bottom: 1px solid var(--border); }
    .approvals-panel-section[hidden] { display: none; }
    .approvals-panel-title { display: flex; align-items: center; gap: 0.45rem; margin: 0.15rem 0.25rem 0.55rem; font-size: 0.8rem; font-weight: 700; color: var(--text); }
    .approvals-panel-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--accent); color: #fff; }
    .approval-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface-hover); border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
    .approval-card-high { border-left-color: var(--error); }
    .approval-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
    .approval-card-summary { font-size: 0.88rem; font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
    .approval-card-code { flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
    .approval-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted); }
    .approval-badge { padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); font-weight: 600; }
    .approval-badge-high { color: var(--error); border-color: var(--error); }
    .approval-expiry { margin-left: auto; white-space: nowrap; }
    .approval-card-detail { font-size: 0.79rem; line-height: 1.42; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.55rem; max-height: 140px; overflow-y: auto; }
    .approval-card-actions { display: flex; gap: 0.5rem; margin-top: 0.1rem; }
    .approval-card-actions .btn-sm { flex: 1; min-height: 40px; justify-content: center; }
    /* Mobile shell — keep in sync with isMobileShell() in dashboard.html */
    @media (max-width: 768px), (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) and (hover: none) {
      /* Mobile chat shell: top under-scroll; composer is in-flow (hard limit above pills); --vv-bottom-inset in dashboard.html */
      #dashboard {
        --chat-composer-bottom-gap: 0.3rem;
        --chat-composer-stack-gap: 0.3rem;
        /* Log padding-top: reserve space for floating topbar; messages may scroll under it. */
        --chat-topbar-clearance: 3.95rem;
        /* Transluscent for top only (scroll-under). Composer + nav: solid; nothing scrolls behind. */
        --chat-glass-a-emp: 0.78;
        --chat-glass-a-meta: 0.96;
        --chat-glass-a-input: 0.98;
        --chat-glass-a-nav: 1;
        /* Top veil: soft; bottom veil: short fade just above in-flow composer (illusion only) */
        --chat-veil-h-top: 2.75rem;
        --chat-veil-h-bottom: 2.25rem;
        --chat-veil-a-top: 0.4;
        --chat-veil-a-bottom: 0.65;
      }
      /* Bump topbar clearance when employee subtitle row is showing (taller emp topbar) */
      #dashboard:has(#panel-chat > .app-topbar.emp-topbar-chat--mobile #emp-topbar-sub:not(:empty)) {
        --chat-topbar-clearance: 4.95rem;
      }
      /* Full-screen app shell — phones + touch landscape (width can exceed 768) */
      body, html { height: 100%; overflow: hidden; }
      /* Share viewport with trial banner: do not fixed-cover full screen (hides banner). */
      #dashboard .app-wrap {
        flex-direction: column;
        flex: 1 1 0%;
        min-height: 0;
        height: auto;
        overflow: hidden;
        position: relative;
        inset: auto;
      }
      .sidebar { display: none; }
      .sidebar-collapse-btn { display: none; }

      /* app-main fills space between (below topbar, above mobile-nav) */
      .app-main {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        background: var(--bg);
      }

      /* Panels fill their container, no extra rounding on mobile */
      .panel {
        flex: 1;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
        overflow: hidden;
        min-height: 0;
      }
      .panel:not(.active) {
        display: none !important;
      }
      /* Page bg behind floating topbar margin gaps (avoids surface-white bleed in light mode) */
      .panel.active {
        background: var(--bg);
      }
      /* Chat panel: soft atmospheric bg (message stream + gaps stay cohesive) */
      #panel-chat.active {
        background: var(--chat-panel-bg, var(--bg));
      }
      /* Match chat topbar density on every panel (thread drawer / title quirks stay on #panel-chat) */
      .panel > .app-topbar {
        min-height: 48px;
        max-height: 48px;
        padding: 0.4rem 0.75rem;
        flex-wrap: nowrap;
        align-items: center;
        overflow: visible;
      }

      /* Top bar — floating card above scroll (all panels) */
      .app-topbar {
        padding: max(0.5rem, env(safe-area-inset-top, 0px)) 0.75rem 0.5rem;
        position: sticky;
        top: 0;
        z-index: 50;
        flex-shrink: 0;
        margin: 0.5rem 0.65rem 0;
        border-radius: 14px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(12px) saturate(var(--chrome-saturate, 150%));
        -webkit-backdrop-filter: blur(12px) saturate(var(--chrome-saturate, 150%));
      }

      /* Bottom nav — floating glass pill (see --vv-bottom-inset + initMobileNavVisualViewport) */
      .mobile-nav {
        display: flex;
        flex-wrap: nowrap;
        flex-shrink: 0;
        position: fixed;
        bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-inset, 0px));
        left: 0.65rem;
        right: 0.65rem;
        width: auto;
        z-index: 100;
        padding: 0.45rem 0.4rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-nav, 0.99)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-nav, 0.99) * 0.96)) 100%
        );
        /* Lighter blur than desktop chrome — mobile GPUs benefit most */
        backdrop-filter: blur(var(--chrome-blur, 10px)) saturate(var(--chrome-saturate, 150%));
        -webkit-backdrop-filter: blur(var(--chrome-blur, 10px)) saturate(var(--chrome-saturate, 150%));
        box-shadow: var(--shadow-float, var(--shadow-xl));
        border-color: rgba(var(--brand-rgb), 0.16);
        gap: 0.2rem;
        justify-content: space-between;
        align-items: stretch;
      }
      [data-theme="dark"] .mobile-nav {
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-nav, 0.99)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-nav, 0.99) * 0.94)) 100%
        );
        border-color: rgba(20, 184, 166, 0.14);
      }
      .mobile-nav .tab {
        flex: 1;
        min-width: 0;
        min-height: var(--touch-min);
        font-size: var(--text-xs);
        font-weight: 600;
        padding: 0.35rem 0.2rem;
        flex-direction: column;
        gap: 4px;
        border: none;
        border-radius: var(--radius-lg);
        justify-content: center;
        background: transparent;
        color: var(--muted);
      }
      .mobile-nav .tab { transition: transform 0.18s var(--ease-out), color var(--transition), background var(--transition), box-shadow var(--transition); }
      .mobile-nav .tab:active { transform: scale(0.96); }
      .mobile-nav .tab.active {
        color: var(--brand);
        background: var(--brand-soft);
        box-shadow: var(--shadow-xs);
        transform: scale(1.04);
      }
      .mobile-nav .tab.active::before { display: none; }
      .mobile-nav .tab .tab-icon { width: 22px; height: 22px; }
      @media (prefers-reduced-motion: reduce) {
        .mobile-nav .tab, .mobile-nav .tab.active { transition-duration: 0.01ms !important; }
        .mobile-nav .tab.active { transform: none; }
      }

      /* Chat layout */
      .chat-layout { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; }
      .chat-panel { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
      .chat-log-wrap { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; }
      /* True floating topbar: keep chat stream scrolling under */
      #panel-chat { position: relative; }
      #panel-chat > .app-topbar {
        position: absolute;
        top: 0.35rem;
        left: 0.65rem;
        right: 0.65rem;
        margin: 0;
        z-index: 70;
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-emp, 0.78)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-emp, 0.78) * 0.95)) 100%
        );
        backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
        -webkit-backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
      }
      /* Layout no longer reserves topbar space — log itself does, so messages can scroll under topbar */
      #panel-chat .chat-layout {
        padding-top: 0;
      }
      #panel-chat .chat-panel {
        position: relative;
      }
      /* Log reserves space for floating topbar only. Composer is in flow below; tiny gap to pills row. */
      #panel-chat .chat-log-wrap {
        padding-top: calc(var(--chat-topbar-clearance) + env(safe-area-inset-top, 0px) + 0.4rem);
        padding-bottom: 0.5rem;
        scroll-padding-top: calc(var(--chat-topbar-clearance) + env(safe-area-inset-top, 0px));
      }
      /* Optical “scroll under” veils (pointer-events none; sticky + negative margin — no overlap bugs) */
      #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs) {
        position: relative;
        isolation: isolate;
      }
      #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::before {
        content: "";
        position: sticky;
        top: 0;
        z-index: 3;
        display: block;
        flex: 0 0 auto;
        height: var(--chat-veil-h-top, 2.75rem);
        margin-bottom: calc(-1 * var(--chat-veil-h-top, 2.75rem));
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          rgba(var(--surface-rgb), var(--chat-veil-a-top, 0.48)) 0%,
          rgba(var(--surface-rgb), 0) 100%
        );
      }
      #panel-chat .chat-log-wrap:not(.chat-log-wrap--notifs)::after {
        content: "";
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: block;
        flex: 0 0 auto;
        height: var(--chat-veil-h-bottom, 3.25rem);
        margin-top: calc(-1 * var(--chat-veil-h-bottom, 3.25rem));
        pointer-events: none;
        background: linear-gradient(
          to top,
          rgba(var(--surface-rgb), var(--chat-veil-a-bottom, 0.52)) 0%,
          rgba(var(--surface-rgb), 0) 100%
        );
      }

      /* Location nudge: card below floating topbar (safe-area + clearance) — buttons under message. */
      #location-onboarding-banner.location-nudge-bar--card {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + var(--chat-topbar-clearance, 3.5rem) + 0.55rem);
        bottom: auto;
        left: 0.65rem;
        right: 0.65rem;
        z-index: 75;
        margin: 0;
        padding: 0.8rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-elevated);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
        display: none;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0.7rem;
        align-items: stretch;
      }
      #location-onboarding-banner.location-nudge-bar--card[style*='grid'] {
        display: grid;
      }
      [data-theme="dark"] #location-onboarding-banner.location-nudge-bar--card {
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
      }
      #location-onboarding-banner .location-nudge-bar__head {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        min-width: 0;
      }
      #location-onboarding-banner .location-nudge-bar__text {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 0.84rem;
        line-height: 1.45;
      }
      #location-onboarding-banner .location-nudge-bar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin: 0;
        gap: 0.5rem;
      }
      #location-onboarding-banner .location-nudge-bar__btn {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.84rem;
        font-weight: 600;
        text-align: center;
      }
      #location-onboarding-banner .location-nudge-bar__btn--primary {
        grid-column: 1 / -1;
        order: -1;
      }
      #panel-chat.has-location-nudge .chat-log-wrap {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--chat-topbar-clearance, 3.5rem) + 0.4rem + 7.25rem);
        scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--chat-topbar-clearance, 3.5rem) + 7.25rem);
      }

      /* Thread drawer — must stack above .mobile-nav (sibling after .app-main, z-index 100) */
      /* Mobile: thread list opens via Chat tab, edge swipe, or backdrop — no hamburger toggle. */
      .thread-drawer-toggle {
        display: none !important;
      }
      #panel-chat > .app-topbar .app-topbar-title-group {
        position: relative;
        gap: 0.35rem;
      }
      /* Beat desktop split-pane rules (@media min-width 769) on touch landscape (width can exceed 768). */
      #thread-panel.thread-panel,
      #thread-panel.thread-panel--sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        padding-top: env(safe-area-inset-top, 0px);
        width: 88vw !important;
        max-width: 320px !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease;
        border-right: none;
        border-radius: 0 16px 16px 0;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--bg-alt) !important;
        box-shadow:
          6px 0 28px rgba(0, 0, 0, 0.52),
          12px 0 56px rgba(0, 0, 0, 0.28),
          inset -1px 0 0 rgba(255, 255, 255, 0.04);
      }
      #thread-panel.thread-panel.drawer-open,
      #thread-panel.thread-panel--sidebar.drawer-open {
        transform: translateX(0) !important;
      }
      #thread-panel.thread-panel.drawer-open::before,
      #thread-panel.thread-panel--sidebar.drawer-open::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--brand, #14b8a6) 0%, color-mix(in srgb, var(--brand, #14b8a6) 65%, #fff) 60%, transparent 100%);
        border-radius: 0 16px 0 0;
        z-index: 1;
        pointer-events: none;
      }
      #thread-panel.thread-panel.drawer-open .thread-panel-inner::after,
      #thread-panel.thread-panel--sidebar.drawer-open .thread-panel-inner::after {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        right: -14px;
        width: 4px;
        height: 36px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.15);
        pointer-events: none;
      }
      .thread-drawer-backdrop {
        display: block;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      /* While open: stack above first-run (12050), PWA banner (10050), activation funnel (9200).
         CloudAxis embed keeps its own 260/270 stack via dashboard-overrides.css — do not apply here. */
      html:not(.cloudaxis-embed) #dashboard.thread-drawer-open .app-main {
        position: relative;
        z-index: 220;
      }
      html:not(.cloudaxis-embed) #dashboard.thread-drawer-open .mobile-nav {
        z-index: 30;
        pointer-events: none;
      }
      html:not(.cloudaxis-embed) #dashboard.thread-drawer-open .thread-drawer-backdrop.open {
        z-index: 12100;
      }
      html:not(.cloudaxis-embed) #dashboard.thread-drawer-open .thread-panel.drawer-open {
        z-index: 12110 !important;
        pointer-events: auto;
      }
      /* Let touches reach the drawer/backdrop — chat column is full-width behind the slide-in roster */
      #dashboard.thread-drawer-open #panel-chat .chat-main-column,
      #dashboard.thread-drawer-open #panel-chat > .app-topbar {
        pointer-events: none;
      }
      /* Touch: sticky :hover on roster rows forces two-tap select on phones — gate hover. */
      @media (hover: none) {
        #panel-chat.active .thread-item:hover,
        #panel-chat.active .emp-item:hover {
          background: var(--surface);
          border-color: var(--border);
        }
        #panel-chat.active .thread-item.thread-active:hover,
        #panel-chat.active .emp-item.emp-item-active:hover {
          background: var(--brand-soft) !important;
          border-color: rgba(var(--brand-rgb), 0.35);
        }
        #panel-chat.active .emp-item.emp-item-active:hover {
          background: var(--brand-soft) !important;
        }
      }

      /* Input & popover */
      #chat-attached-chips { min-width: 0; }
      .model-popover { min-width: min(240px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); z-index: 300; }
      .chat-inputbar { overflow: visible; }
      /* In-flow composer: hard bottom limit (log ends just above Ask/pills). app-main padding-bottom clears nav. */
      #panel-chat .chat-inputbar {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        background: transparent !important;
        border-top: none !important;
        padding: 0 0.65rem 0.2rem;
        margin: 0 0 0.4rem;
        gap: var(--chat-composer-stack-gap, 0.3rem);
        position: relative;
        flex-shrink: 0;
        z-index: 65;
      }
      /* column-reverse: fix visual order — nav-adjacent input row, then pills, hooks, chips above chat */
      #panel-chat .chat-inputbar #chat-attached-chips { order: 2; }
      #panel-chat .chat-inputbar .chat-input-row { order: 3; }
      #panel-chat .chat-inputbar .chat-input-meta { order: 4; }
      #panel-chat .chat-inputbar #chat-hooks { order: 5; }
      #panel-chat .chat-input-row {
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-input, 0.97)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-input, 0.97) * 0.96)) 100%
        );
        backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
        -webkit-backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
        border: 1px solid var(--chat-composer-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--chat-composer-shadow);
      }
      [data-theme="dark"] #panel-chat .chat-input-row {
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-input, 0.97)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-input, 0.97) * 0.92)) 100%
        );
        border-color: var(--chat-composer-border);
        box-shadow: var(--chat-composer-shadow);
      }
      /* Mobile: primary send/stop share one elevation language on glass composer */
      #panel-chat .chat-inputbar button#chat-send,
      #panel-chat .chat-inputbar button#chat-stop {
        box-shadow: var(--shadow-sm);
      }
      #panel-chat .chat-inputbar button#chat-send:hover,
      #panel-chat .chat-inputbar button#chat-stop:hover {
        box-shadow: var(--shadow);
      }
      /* Mobile: attach stays utility — neutral press, no brand flash, readable on glass */
      #panel-chat .chat-input-row .chat-attach-btn {
        -webkit-tap-highlight-color: transparent;
        color: var(--text-muted);
      }
      #panel-chat .chat-input-row .chat-attach-btn:active {
        background: var(--surface-hover);
        color: var(--text);
        border-color: var(--border-strong);
        transform: scale(0.98);
      }
      [data-theme="dark"] #panel-chat .chat-input-row .chat-attach-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        color: var(--text-muted);
      }
      [data-theme="dark"] #panel-chat .chat-input-row .chat-attach-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text);
        border-color: rgba(255, 255, 255, 0.2);
      }
      [data-theme="dark"] #panel-chat .chat-input-row .chat-attach-btn:active {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text);
        border-color: rgba(255, 255, 255, 0.22);
      }
      #panel-chat .chat-input-meta {
        justify-content: flex-start;
        align-items: center;
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        padding: 0;
        margin-top: 0;
        gap: 0.2rem;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        min-height: auto;
      }
      #panel-chat .chat-input-meta .model-pill {
        min-height: 34px;
        padding: 0.1rem 0.48rem;
        font-size: 0.68rem;
        box-sizing: border-box;
        background: rgba(var(--surface-rgb), var(--chat-glass-a-meta, 0.88));
        border: 1px solid rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(8px) saturate(150%);
        -webkit-backdrop-filter: blur(8px) saturate(150%);
      }
      [data-theme="dark"] #panel-chat .chat-input-meta .model-pill {
        background: rgba(var(--surface-rgb), var(--chat-glass-a-meta, 0.88));
        border-color: rgba(255, 255, 255, 0.1);
      }
      #panel-chat #fast-mode-btn.model-pill {
        flex: 0 0 auto;
        min-width: 88px;
        max-width: none;
        justify-content: center;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
      }
      #panel-chat #model-pill-btn.model-pill {
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(58vw, 220px);
      }

      /* Settings, files, repos — these panels have their own scroll */
      .settings-panel, .files-panel { overflow-y: auto; flex: 1; }
      #saved-login-save-btn.btn.btn-primary {
        -webkit-tap-highlight-color: transparent;
      }

      /* Bottom padding: floating nav + safe area + gap */
      .app-main { padding-bottom: calc(4.35rem + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-inset, 0px)); }
      .chat-inputbar { padding-bottom: 0; }

      /* Pin strip hidden on mobile — use topbar pin icon */
      #pin-strip { display: none !important; }

      /* Pin modal — full width sheet on mobile, with safe-area bottom padding */
      #pin-modal { border-radius: 16px 16px 0 0; max-height: 88vh; max-height: 88dvh; }
      .pin-card-content { max-height: 120px; }

      /* Chat topbar: drawer toggle + title (height matches .panel > .app-topbar) */
      #panel-chat > .app-topbar {
        overflow: visible;
      }
      #panel-chat .chat-topbar-usage-wrap .usage-dropdown {
        z-index: 320;
      }
      /* Employee chat on phone: compact bar + safe area (grid: avatar | name+status, optional subtitle row) */
      #panel-chat > .app-topbar.emp-topbar-chat--mobile {
        min-height: calc(50px + env(safe-area-inset-top, 0px));
        max-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
        height: calc(50px + env(safe-area-inset-top, 0px));
        box-sizing: border-box;
        align-items: center;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb), var(--chat-glass-a-emp, 0.9)) 0%,
          rgba(var(--surface-rgb), calc(var(--chat-glass-a-emp, 0.9) * 0.95)) 100%
        );
      }
      /* Parent overflow:hidden clips the first letter of long names; unread dot is hidden here (bell still shows). */
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .app-topbar-title-group {
        overflow: visible;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile #emp-topbar-info {
        overflow: visible;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .chat-topbar-notif-dot {
        display: none !important;
      }
      /* Two-line header when subtitle visible — avoids clipping; still compact vs old ~30% bars */
      #panel-chat > .app-topbar.emp-topbar-chat--mobile:has(#emp-topbar-sub:not(:empty)) {
        min-height: calc(64px + env(safe-area-inset-top, 0px));
        max-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
        height: calc(64px + env(safe-area-inset-top, 0px));
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-info {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 0.45rem;
        row-gap: 0.04rem;
        align-items: center;
        min-width: 0;
        flex: 1;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-info-row {
        display: contents;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-profile-hit {
        display: contents;
        padding: 0;
        margin: 0;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-avatar-wrap {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        position: relative;
        z-index: 2;
      }
      /* With subtitle row, center avatar on the full name+subtitle block (not only row 1) */
      #panel-chat > .app-topbar.emp-topbar-chat--mobile:has(#emp-topbar-sub:not(:empty)) .emp-topbar-avatar-wrap {
        grid-row: 1 / -1;
        align-self: center;
      }
      /*
       * Match #emp-topbar-sub: span full grid width (1 / -1) + same left inset as tagline row.
       * Previously only grid-column 2 — middle column shared with status dot, so the name was much
       * narrower than the second line (which already used 1 / -1).
       */
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-name-row {
        grid-column: 1 / -1;
        grid-row: 1;
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
        padding-left: calc(36px + 0.45rem);
        padding-right: calc(6px + 0.45rem + 0.25rem);
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile #emp-topbar-status {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        margin: 0;
        position: relative;
        z-index: 2;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-name {
        line-height: 1.12;
        font-size: 0.88rem;
        /* flex-basis:auto avoids some WebKit flex sizing glitches that left only the first glyph visible */
        flex: 1 1 auto;
        min-width: 0;
        /* Subtitle is on #emp-topbar-sub; let the title use the full middle column (minus status dot). */
        max-width: none;
      }
      #panel-chat > .app-topbar.emp-topbar-chat--mobile .emp-topbar-sub:not(:empty) {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block !important;
        font-size: 0.68rem;
        line-height: 1.15;
        color: var(--text-muted);
        padding-left: calc(36px + 0.45rem);
        margin-top: -0.02rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .topbar-global-zone {
        display: flex; align-items: center; gap: 0.35rem;
        border-left: 1px solid var(--border);
        padding-left: 0.5rem; margin-left: auto;
      }
      .topbar-icon-btn {
        position: relative; width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-shrink: 0;
        border: none; background: transparent; color: var(--muted);
        display: flex; align-items: center; justify-content: center;
        border-radius: 8px; cursor: pointer;
      }
      .topbar-icon-badge {
        position: absolute; top: 1px; right: 1px;
        font-size: 0.6rem; font-weight: 700;
        background: var(--brand); color: #fff;
        border-radius: 99px; min-width: 14px; height: 14px;
        padding: 0 3px; line-height: 14px; text-align: center;
        display: none;
      }
      .usage-pill { font-size: 0.75rem; max-width: min(44vw, 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      #panel-team.panel.active {
        flex-direction: column;
        min-height: 0;
      }
      #panel-team .panel-topbar-stack--team {
        position: relative;
        flex-shrink: 0;
        z-index: 50;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar {
        min-height: 48px;
        max-height: 48px;
        padding: 0.4rem 0.75rem;
        flex-wrap: nowrap;
        align-items: center;
        overflow: visible;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar-secondary {
        margin: 0 0.65rem 0.35rem;
        padding: 0;
        flex-shrink: 0;
      }
      /* Team topbar: search lives in secondary row on mobile embed; inline with title on desktop */
      #panel-team > .panel-topbar-stack--team,
      #panel-team > .app-topbar {
        max-height: none;
        min-height: 48px;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar {
        max-height: none;
        min-height: 48px;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar-secondary .team-panel-search-wrap.thread-search-wrap,
      #panel-team > .app-topbar .team-panel-search-wrap.thread-search-wrap {
        flex: 1;
        min-width: 0;
        max-width: none;
        margin-left: auto;
        padding: 0;
        border: none;
        border-bottom: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        align-items: center;
        position: relative;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar-secondary .team-panel-search-wrap .thread-search-input,
      #panel-team > .app-topbar .team-panel-search-wrap .thread-search-input {
        width: 100%;
        min-height: 0;
      }
      .team-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
    }
    /* Team task board styles apply at all widths (desktop columns + mobile chips) */
    /* Team task board */
      .team-board-root { display: flex; flex-direction: column; min-height: 0; }
      .team-board-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
      .team-board-columns {
        display: flex; gap: 0.75rem; padding: 0 0.5rem 1rem; overflow-x: auto;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0;
      }
      .team-board-column {
        flex: 0 0 min(300px, 82vw); scroll-snap-align: start;
        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        display: flex; flex-direction: column; max-height: 100%; min-height: 200px;
      }
      [data-lite] .team-board-column { backdrop-filter: none; -webkit-backdrop-filter: none; }
      .team-board-column--drag-over { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }
      .team-board-column-head {
        display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.65rem;
        border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1;
      }
      .team-board-column-chat {
        flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between;
        gap: 0.35rem; border: none; background: transparent; cursor: pointer; text-align: left;
        min-height: 44px; padding: 0.25rem 0; color: var(--text); font: inherit;
      }
      .team-board-column-name { font-weight: 700; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .team-board-column-count {
        font-size: 0.75rem; font-weight: 600; color: var(--muted);
        background: var(--bg); border-radius: 99px; padding: 0.1rem 0.45rem;
      }
      .team-board-add-duty {
        min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px dashed var(--border);
        background: transparent; color: var(--brand); font-size: 1.25rem; cursor: pointer;
      }
      .team-board-column-body { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
      .team-board-card {
        border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.65rem;
        background: var(--bg); cursor: grab;
      }
      .team-board-card--dragging { opacity: 0.55; cursor: grabbing; }
      .team-board-card--running { border-color: rgba(var(--brand-rgb), 0.45); }
      .team-board-card--paused { opacity: 0.82; }
      .team-board-card-head { display: flex; align-items: flex-start; gap: 0.35rem; }
      .team-board-card-title { font-size: 0.85rem; font-weight: 600; flex: 1; min-width: 0; }
      .team-board-card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
      .team-board-chip {
        font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 6px;
        background: var(--surface); border: 1px solid var(--border); color: var(--text);
      }
      .team-board-chip--muted { color: var(--muted); }
      .team-board-chip--on { color: var(--success, #16a34a); border-color: currentColor; }
      .team-board-chip--off { color: var(--muted); }
      .team-board-card-chains { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem; }
      .team-board-chain { font-size: 0.68rem; padding: 0.1rem 0.35rem; border-radius: 6px; background: var(--brand-soft); color: var(--text); }
      .team-board-card-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
      .team-board-btn {
        min-height: 44px; padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 600;
        border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
      }
      .team-board-btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .team-board-empty, .team-board-error { font-size: 0.8rem; color: var(--muted); padding: 0.5rem 0.75rem; margin: 0; }
      .team-board-chips {
        display: flex; gap: 0.35rem; padding: 0 0.5rem 0.5rem; overflow-x: auto;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      }
      .team-board-chip-agent {
        flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0.4rem 0.75rem;
        border-radius: 99px; border: 1px solid var(--border); background: var(--surface);
        color: var(--text); font-size: 0.8rem; font-weight: 600; cursor: pointer;
      }
      .team-board-chip-agent--active { border-color: var(--brand); background: var(--brand-soft); }
      .team-board-chip-count { opacity: 0.75; }
      .team-board-mobile-col { flex: 1; min-height: 0; padding: 0 0.5rem 1rem; }
      .team-board-skeleton { display: flex; gap: 0.75rem; padding: 0.5rem; }
      .team-board-skeleton-col {
        flex: 0 0 280px; height: 180px; border-radius: 12px;
        background: linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%);
        background-size: 200% 100%; animation: team-board-shimmer 1.2s ease-in-out infinite;
      }
      @keyframes team-board-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
      @media (prefers-reduced-motion: reduce) {
        .team-board-skeleton-col { animation: none; }
        .team-board-card--dragging { transition: none; }
      }
      .team-board-sheet {
        position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0;
        transition: opacity 0.2s ease;
      }
      .team-board-sheet--open { pointer-events: auto; opacity: 1; }
      .team-board-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
      [data-lite] .team-board-sheet-backdrop { backdrop-filter: none; }
      .team-board-sheet-panel {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto;
        background: var(--surface); border-radius: 16px 16px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        border: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.65rem;
      }
      .team-board-sheet-panel label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; }
      .team-board-sheet-panel input, .team-board-sheet-panel textarea, .team-board-sheet-panel select {
        font: inherit; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
      }
      .team-board-sheet-actions { display: flex; gap: 0.5rem; }
      .team-board-sheet-item {
        display: block; width: 100%; min-height: 44px; text-align: left; padding: 0.65rem 0.75rem;
        border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer;
      }
      .team-board-sheet-cancel, .team-board-sheet-save {
        min-height: 44px; flex: 1; border-radius: 10px; border: 1px solid var(--border);
        background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer;
      }
      .team-board-sheet-save { background: var(--brand); color: #fff; border-color: var(--brand); }
      .team-board-edit-error { color: var(--danger, #dc2626); font-size: 0.8rem; margin: 0; }
      .team-architect-card {
        margin: 0.65rem 0.75rem 0.5rem; padding: 0.85rem 1rem;
        border-radius: 14px;
        border: 1.5px solid rgba(var(--brand-rgb), 0.35);
        background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 60%);
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .team-architect-card:hover {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);
      }
      .team-architect-card__row { display: flex; align-items: center; gap: 0.65rem; }
      .team-architect-card__text { flex: 1; min-width: 0; }
      .team-architect-card__title { font-weight: 800; font-size: 0.9rem; color: var(--text); }
      .team-architect-card__tag { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
    @media (max-width: 768px), (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) and (hover: none) {
      .emp-pipeline-group__stepchip {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 1.1rem; height: 1.1rem; padding: 0 5px;
        border-radius: 99px; background: var(--brand); color: #fff;
        font-size: 0.6875rem; font-weight: 700;
      }
      .more-sheet-divider {
        border: none; border-top: 1px solid var(--border);
        margin: 4px 0.75rem;
      }
      .more-sheet-icon--browser { position: relative; display: inline-flex; }
      .more-sheet-icon--browser .more-session-dot {
        position: absolute; top: -2px; right: -2px;
      }
      .mobile-nav { gap: 0.15rem; }
      .mobile-nav .tab { min-height: 44px; font-size: 0.7rem; padding: 0.3rem 0.1rem; gap: 3px; }
      .more-sheet-item { min-height: 52px; }

      /* Inset thread rows: same card language as desktop, scaled for narrow drawer */
      .thread-item {
        margin: 0.3rem 0.45rem;
        padding: 0.6rem 0.65rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
      }
      .emp-item { border: none; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; padding: 0.55rem 0.75rem; }
      /* Cloudia (Team Builder): break out of flat list — small inset card on mobile drawer */
      .emp-item--cloudia-team-builder {
        margin: 0.35rem 0.55rem 0.45rem;
        border-radius: 14px !important;
        border: 1px solid rgba(var(--brand-rgb), 0.22) !important;
        border-bottom: 1px solid rgba(var(--brand-rgb), 0.18) !important;
      }
      .thread-section-header {
        border: none; background: transparent; padding: 0.3rem 0.75rem;
        border-bottom: 1px solid var(--border); border-radius: 0; margin: 0;
      }
      .emp-pipeline-group {
        margin: 0.4rem 0.65rem 0.45rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      }
      [data-theme="dark"] .emp-pipeline-group {
        box-shadow: 0 2px 14px rgba(0,0,0,0.35);
      }
      .emp-pipeline-group__summary {
        border-radius: 12px 12px 0 0;
      }
      .emp-pipeline-group:not([open]) > .emp-pipeline-group__summary {
        border-bottom: none;
        border-radius: 12px;
      }
      .emp-pipeline-group__body {
        background: var(--surface);
        overflow: hidden;
        border-radius: 0 0 12px 12px;
      }
      .emp-pipeline-group:not([open]) > .emp-pipeline-group__body {
        display: none;
        border-radius: 0;
      }
      .emp-pipeline-group__body > .emp-item {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
      }
      .emp-pipeline-group__body > .emp-item:first-child {
        border-top: none;
      }
      .emp-pipeline-group[open] > .emp-pipeline-group__body > .emp-item:last-child {
        margin-bottom: 0;
        border-bottom: none;
        border-radius: 0 0 12px 12px;
      }

      /* Main chat stream — same neutral canvas as desktop (not legacy warm tint) */
      .chat-log-wrap:not(.chat-log-wrap--notifs) {
        background-color: var(--chat-canvas-bg) !important;
        background-image: var(--chat-canvas-veil) !important;
      }
      [data-theme="dark"] .chat-log-wrap:not(.chat-log-wrap--notifs) {
        background-color: var(--chat-canvas-bg) !important;
        background-image: var(--chat-canvas-veil) !important;
      }
      .msg { max-width: 90%; }
      .msg-pin-btn { display: none !important; }

      /* Welcome — compact: starters + specialists fit without scrolling */
      .chat-welcome.visible {
        gap: 0.35rem;
        padding: 0.6rem 0.65rem 0.75rem;
        justify-content: flex-start;
        margin-top: auto;
      }
      .chat-welcome-title {
        font-size: 1rem;
        font-weight: 700;
        background: var(--brand-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .welcome-showcase {
        background: transparent;
        border-radius: 0;
        padding: 0;
        border: none;
        box-shadow: none;
      }
      .chat-welcome-sub {
        display: block;
        font-size: 0.78rem;
        color: var(--muted);
        margin: 0 auto 0.5rem;
        max-width: 20rem;
        line-height: 1.4;
      }
      .welcome-starters-grid {
        gap: 0.35rem;
        margin-bottom: 0.65rem;
        max-width: 100%;
      }
      .welcome-start-chip {
        min-height: 2.35rem;
        padding: 0.4rem 0.45rem;
      }
      .welcome-start-chip__label { font-size: 0.72rem; }
      .welcome-proven-panel { margin-top: 0.3rem; padding: 0.5rem 0.4rem 0.6rem; }
      .first-session-checklist { margin-bottom: 0.45rem; padding: 0.5rem 0.55rem; }
      .welcome-divider {
        border-top: none;
        margin-top: 0.35rem;
        padding-top: 0.55rem;
        position: relative;
      }
      .welcome-divider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border), transparent);
      }
      .welcome-specialist-strip {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 0.45rem;
      }
      .welcome-specialist-item {
        background: var(--surface-hover);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0.4rem 0.4rem;
        min-width: 56px;
        gap: 0.15rem;
      }
      .welcome-specialist-item:hover {
        background: var(--surface);
        border-color: var(--brand);
      }
      .welcome-specialist-item--highlight {
        background: var(--brand-soft) !important;
        border-color: var(--brand) !important;
      }
      .welcome-specialist-item--highlight:hover {
        background: var(--brand-soft) !important;
        border-color: var(--brand-hover) !important;
      }
      .welcome-specialist-role { display: none; }

      .chat-welcome--tiered {
        gap: 0.55rem;
        max-width: 100%;
        padding-inline: 0;
      }
      .chat-welcome-tier--primary {
        padding: 0.62rem 0.48rem;
        border-radius: 12px;
      }
      .chat-welcome-tier__title {
        font-size: 0.96rem;
        font-weight: 800;
      }
      .welcome-starters-grid--hero {
        gap: 0.36rem;
        margin-bottom: 0.35rem;
      }
      .chat-welcome-tier--primary .welcome-start-chip {
        min-height: 2.45rem;
      }
      .chat-welcome-tier__hint {
        font-size: 0.74rem;
        padding-inline: 0.35rem;
      }
      .starter-pack-strip--welcome .starter-pack-mini {
        min-width: min(154px, 72vw);
        padding: 0.42rem 0.45rem;
      }
      .welcome-explore-more__summary {
        font-size: 0.76rem;
        padding: 0.52rem 0.52rem;
      }
      .welcome-explore-more__body {
        padding: 0 0.46rem 0.35rem;
        gap: 0.52rem;
      }

      /* Task strip — keep title + progress readable on small screens (drawer has full detail) */
      #task-strip.task-strip--visible {
        min-height: 44px;
        padding: 0.3rem 0.35rem 0.3rem 0.55rem;
        align-items: center;
        gap: 0.35rem;
      }
      #task-strip.task-strip--visible .task-strip-mid {
        flex: 1;
        min-width: 0;
        gap: 0.12rem;
      }
      #task-strip.task-strip--visible .task-strip-toprow { gap: 0.3rem; min-width: 0; }
      #task-strip.task-strip--visible .task-strip-title { font-size: 0.78rem; }
      #task-strip.task-strip--visible .task-strip-progress { font-size: 0.72rem; }
      #task-strip.task-strip--visible .task-strip-next { font-size: 0.7rem; }
      #task-strip.task-strip--visible .task-strip-bar-wrap { height: 3px; }
      #task-strip.task-strip--visible .task-strip-chevron { width: 40px; height: 40px; }
      #task-strip.task-strip--visible .task-strip-status-dot { margin-right: 0.2rem; flex-shrink: 0; }

      /* Files — toolbar: Search + Upload + overflow; sticky breadcrumb in drawer */
      #files-new-folder-btn,
      #files-delete-folder-btn { display: none !important; }
      .files-toolbar-more-wrap { display: block; }
      .workspace-file-tree.tree-drawer-mode .files-breadcrumb {
        position: sticky; top: 0; z-index: 4; background: var(--surface); margin-bottom: 0.5rem;
      }
      .editor-mobile-save { flex-shrink: 0; width: auto; min-width: 3.5rem; }

      /* Typography — minimum ~11px on badges/chips */
      .emp-duty-chip { font-size: 0.6875rem; }
      .thread-section-badge,
      .notif-status-badge { font-size: 0.6875rem; }
      /* Larger tap targets for the single most consequential tap in the product. */
      .approval-card-actions .btn-sm { min-height: 46px; font-size: 0.92rem; }
      .approval-card-summary { font-size: 0.94rem; }
      .approvals-panel-section { max-height: 62vh; }

      body.more-sheet-open { overflow: hidden; }
    }
    @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
      .chat-welcome.visible .welcome-showcase {
        animation: none;
      }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
      .sidebar { width: 72px; }
      .sidebar .sidebar-brand span,
      .sidebar .sidebar-section,
      .sidebar .sidebar-site-links,
      .sidebar .tab span:not(.tab-icon),
      .sidebar .sidebar-usage,
      .sidebar .account-meta,
      .sidebar .account-email,
      .sidebar .sidebar-brand { justify-content: center; padding: 1rem; }
      .sidebar .sidebar-brand img { height: 36px; width: 36px; }
      .sidebar .sidebar-expanded-content { display: none; }
      .sidebar .sidebar-nav { padding: 0.5rem; align-items: center; }
      .sidebar .tab { justify-content: center; padding: 0.625rem; width: 44px; height: 44px; border-radius: 12px; }
      .sidebar .tab.active { background: var(--brand-soft); }
      .sidebar .sidebar-account { justify-content: center; padding: 0.75rem 0.5rem; }
      .sidebar .account-avatar { width: 36px; height: 36px; }
      .sidebar .account-status { display: none !important; }
      .sidebar .sidebar-collapse-btn { display: none; }
    }
    @keyframes blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } }
    .thinking-dots { display: flex; gap: 2px; align-items: center; color: var(--muted-soft); }
    .thinking-dots span { animation: blink 1.4s infinite both; font-size: 1.2em; line-height: 1; }
    .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
    .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
    .msg-tool-status { font-size: 0.72rem; color: var(--muted-soft); font-style: italic; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.4rem; }
    .msg-helpers { font-size: 0.72rem; color: var(--muted-soft); margin-bottom: 0.35rem; }
    .msg-helper-line { display: flex; align-items: center; gap: 0.35rem; margin: 0.12rem 0; }
    .msg-usage { font-size: 0.7rem; color: var(--muted-soft); margin-top: 0.5rem; cursor: default; }
    .msg-thinking { margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--muted); }
    /* Helpers-working async indicator */
    .helpers-working-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; color: var(--muted-soft); }
    /* Thread update dot — shown on thread list item when async helper results arrived */
    .thread-update-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #14B8A6); margin-left: 6px; flex-shrink: 0; animation: pulse-dot 1.5s infinite; vertical-align: middle; }
    .thread-cron-running-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #15803d;
      margin-left: 4px;
      flex-shrink: 0;
      animation: cron-pulse 1.4s ease-in-out infinite;
      vertical-align: middle;
    }
    @keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
    .msg-thinking summary { cursor: pointer; color: var(--muted-soft); font-style: italic; user-select: none; }
    .msg-thinking-body { margin-top: 0.4rem; padding: 0.6rem 0.8rem; background: var(--bg-alt); border-left: 2px solid var(--border-strong); border-radius: 6px; white-space: pre-wrap; line-height: 1.5; max-height: 300px; overflow-y: auto; }

    /* ── WhatsApp-style mobile UI additions ─────────────────────────────── */

    /* Workspace segmented control */
    .workspace-segments {
      display: flex;
      gap: 2px;
      background: var(--border);
      border-radius: var(--radius);
      padding: 2px;
      flex-shrink: 0;
    }
    .segment-btn {
      flex: 1;
      padding: 0.3rem 0.75rem;
      min-height: var(--touch-min);
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .segment-btn.active {
      background: var(--surface);
      color: var(--brand);
      font-weight: 600;
    }
    .segment-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

    @media (max-width: 768px) {
      #panel-workspace.workspace-editor-active > .app-topbar {
        min-height: auto;
        max-height: none;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        gap: 0.35rem;
      }
      #panel-workspace.workspace-editor-active .workspace-segments {
        padding: 1px;
      }
      #panel-workspace.workspace-editor-active .segment-btn {
        min-height: 32px;
        padding: 0.22rem 0.55rem;
        font-size: 0.75rem;
      }
    }

    /* Workspace section — scroll file list inside panel */
    #panel-workspace { min-height: 0; }
    .workspace-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    /* Phone/tablet: workspace Files must not scroll as a whole — flex children need a bounded height so the editor fills the screen */
    @media (max-width: 768px) {
      #workspace-files.workspace-section {
        overflow: hidden;
        -webkit-overflow-scrolling: auto;
      }
    }
    .segment-btn-inner { display: inline-flex; align-items: center; gap: 0.35rem; }
    .segment-new-badge {
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em;
      padding: 0.12rem 0.35rem; border-radius: 4px;
      background: var(--brand-soft); color: var(--brand);
    }
    .workspace-repos-hint {
      margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 14px;
      border: 1px solid var(--border); background: var(--surface-hover);
      font-size: 0.8125rem; color: var(--text); line-height: 1.45;
    }
    .workspace-repos-hint a { color: var(--brand); font-weight: 600; text-decoration: none; cursor: pointer; }
    .workspace-repos-hint a:hover { text-decoration: underline; }
    .workspace-repos-toolbar { align-items: center; }
    .workspace-repos-toolbar-spacer { flex: 1; min-width: 0; }
    .workspace-repos-toolbar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .workspace-repos-import-picker { padding: 0.65rem 0 0.9rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
    .workspace-repos-import-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; }
    .workspace-repos-import-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
    .workspace-repos-import-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }
    .workspace-repos-add-form { padding: 0.65rem 0 0.9rem; }
    .workspace-repos-add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
    .workspace-repos-url-input { flex: 1; min-width: 12rem; }

    /* Editor split layout */
    .workspace-editor-layout { display: flex; flex: 1; min-height: 0; gap: 0; position: relative; }
    .workspace-file-tree-wrap {
      flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; min-width: 0;
      width: clamp(260px, 22vw, 400px);
    }
    .workspace-file-tree {
      width: 100%; min-width: 0; max-width: none; flex: 1; min-height: 0;
      display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border);
    }
    .workspace-file-tree .files-panel { min-height: 0; overflow: hidden; }
    .workspace-file-tree .files-list { flex: 1; min-height: 0; overflow-y: auto; }
    .workspace-resize-handle {
      width: 10px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; z-index: 2;
    }
    .workspace-resize-handle::after {
      content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
      background: var(--border); border-radius: 2px; opacity: 0.45;
      transition: opacity 0.15s ease, background 0.15s ease, width 0.15s ease;
    }
    .workspace-resize-handle:hover::after, body.workspace-resizing .workspace-resize-handle::after {
      background: var(--brand); opacity: 1; width: 4px;
    }
    .workspace-editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
    .workspace-editor-main.empty-state { align-items: center; justify-content: center; color: var(--muted); font-size: 0.875rem; }
    .editor-mobile-bar {
      display: none; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem;
      border-bottom: 1px solid var(--border); background: var(--surface-hover); flex-shrink: 0;
    }
    .editor-mobile-bar.visible { display: flex; }
    .editor-mobile-menu-btn {
      width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--surface); color: var(--text);
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .editor-mobile-menu-btn svg { width: 1.25rem; height: 1.25rem; }
    .editor-mobile-close {
      width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 10px; background: var(--surface);
      color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .editor-mobile-close:hover { background: var(--surface-hover); color: var(--text); }
    .editor-mobile-close:disabled { opacity: 0.35; cursor: default; }
    .editor-mobile-close svg { width: 1.15rem; height: 1.15rem; }
    .editor-mobile-title { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .editor-mobile-save {
      padding: 0.35rem 0.75rem;
      min-height: 36px;
      border-radius: var(--btn-radius-cta);
      border: none;
      background: var(--brand-gradient);
      color: #fff;
      font-weight: 600;
      font-size: 0.78rem;
      cursor: pointer;
      flex-shrink: 0;
      max-width: 42%;
      box-shadow: var(--shadow-sm);
      transition: filter var(--transition), transform 0.15s var(--ease-out), box-shadow var(--transition);
    }
    .editor-mobile-save:hover:not(:disabled) {
      filter: brightness(1.06);
      transform: scale(1.02);
      box-shadow: var(--shadow);
    }
    .editor-mobile-save:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .editor-mobile-save:disabled {
      opacity: 0.45;
      cursor: default;
      filter: none;
      transform: none;
    }
    .editor-mobile-save.editor-mobile-save--dirty:not(:disabled) {
      box-shadow: 0 0 0 2px rgba(var(--brand-rgb, 20, 184, 166), 0.4), var(--shadow-sm);
    }
    @media (max-width: 768px) {
      /* Editor mobile chrome: utility radius next to gradient Save CTA */
      .editor-mobile-menu-btn,
      .editor-mobile-close {
        border-radius: var(--btn-radius-utility);
      }
      .editor-mobile-save {
        -webkit-tap-highlight-color: transparent;
      }
    }
    .editor-tabs-bar {
      display: flex; gap: 0; overflow-x: auto; background: var(--surface-hover); border-bottom: 1px solid var(--border);
      min-height: 32px; flex-shrink: 0; scrollbar-width: thin; flex-wrap: nowrap;
      touch-action: pan-y;
    }
    @media (max-width: 768px) {
      .editor-tabs-bar { touch-action: pan-x pan-y; }
    }
    .editor-tab {
      display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.75rem; font-size: 0.78rem; border: none;
      background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
      border-top: 2px solid transparent; margin-top: -1px; transition: background 0.15s, color 0.15s, border-color 0.15s; position: relative;
    }
    .editor-tab:hover { background: var(--surface); color: var(--text); }
    .editor-tab.active { background: var(--surface); color: var(--brand); border-top-color: var(--brand); font-weight: 600; }
    .editor-tab .tab-icon-slot { display: flex; align-items: center; color: var(--brand); flex-shrink: 0; }
    .editor-tab .tab-icon-slot svg { width: 0.95rem; height: 0.95rem; display: block; }
    .editor-tab .tab-prefix { font-size: 0.65rem; color: var(--muted); max-width: 4rem; overflow: hidden; text-overflow: ellipsis; }
    .editor-tab .dirty-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: none; }
    .editor-tab.dirty .dirty-dot { display: inline-block; }
    .editor-tab .tab-close { font-size: 0.7rem; padding: 0.2rem 0.35rem; border-radius: 6px; border: none; background: none; color: var(--muted); cursor: pointer; line-height: 1; }
    .editor-tab .tab-close:hover { background: var(--error-soft); color: var(--error); }
    .editor-container { flex: 1; min-height: 0; overflow: hidden; position: relative; }
    .editor-container .cm-editor { height: 100%; }
    .editor-container .cm-scroller { overflow: auto; }
    .editor-container textarea.editor-fallback { width: 100%; height: 100%; border: none; resize: none; padding: 0.75rem; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.8125rem; line-height: 1.5; background: var(--bg); color: var(--text); outline: none; tab-size: 2; }
    .editor-statusbar {
      display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.22rem 0.55rem; font-size: 0.7rem;
      color: var(--muted); background: var(--surface-hover); border-top: 1px solid var(--border); flex-shrink: 0;
    }
    .editor-statusbar .editor-status-sep { opacity: 0.4; }
    .editor-conflict-bar { display: none; padding: 0.5rem 0.75rem; background: var(--warning-soft); border-bottom: 1px solid var(--border); font-size: 0.78rem; align-items: center; gap: 0.5rem; }
    .editor-conflict-bar.visible { display: flex; }
    .editor-conflict-bar button { font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
    @media (min-width: 641px) and (max-width: 1024px) {
      .workspace-file-tree-wrap { width: clamp(240px, 30vw, 340px); }
    }
    @media (max-width: 768px) {
      .workspace-resize-handle { display: none; }
      .workspace-editor-layout {
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }
      .workspace-file-tree-wrap { width: 100% !important; max-width: none !important; }
      .workspace-file-tree {
        width: 100%; max-width: 100%; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--border);
      }
      /* Browsing files only: use full height for the tree — hide the empty editor placeholder that was stealing ~half the viewport */
      .workspace-editor-layout:not(.editor-mobile-focus) .workspace-editor-main.empty-state {
        display: none !important;
      }
      .workspace-editor-layout:not(.editor-mobile-focus) .workspace-file-tree-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
      }
      .workspace-editor-layout:not(.editor-mobile-focus) .workspace-file-tree {
        max-height: none !important;
        flex: 1;
        min-height: 0;
        border-bottom: none;
      }
      /*
       * Workspace file drawer stacking (fixed layers; keep above in-app chrome):
       *   .mobile-nav z-index 100 (z-index 30 + pointer-events none when #dashboard.thread-drawer-open; drawer stacks at 12100+)
       *   · .app-main z-index 220 while thread drawer open · thread backdrop 260 · thread panel 270 · modals 280 · .app-topbar 50 · notif panel 200
       *   #workspace-file-drawer-backdrop 11950 · .tree-drawer-mode panel 12000 (full-width sheet)
       *   file action sheet 12100–12110 · file context flyout 12120 (⋮ menus above drawer)
       * New full-screen overlays should use z-index > 12120 or document the order here.
       */
      /*
       * Drawer uses the same #workspace-file-tree node as the in-flow list. The generic
       * .workspace-file-tree { max-height: 42vh } rule above must NOT apply here — without
       * max-height: none the drawer is capped at ~half the screen and the file list cannot scroll.
       */
      .workspace-file-tree.tree-drawer-mode {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        max-height: none !important;
        width: 100%;
        max-width: 100vw;
        z-index: 12000;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        border: none;
        border-right: 1px solid var(--border);
        border-radius: 0;
        background: var(--surface);
        transform: translateX(-102%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        flex-direction: column;
        overflow: hidden;
      }
      .workspace-file-tree.tree-drawer-mode.tree-drawer-open {
        transform: translateX(0);
      }
      .workspace-file-drawer-header {
        display: none;
        flex-shrink: 0;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.65rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface-hover);
      }
      .workspace-file-tree.tree-drawer-mode .workspace-file-drawer-header {
        display: flex;
        padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
      }
      .workspace-file-drawer-title {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text);
      }
      .workspace-file-drawer-close {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .workspace-file-drawer-close svg { width: 1.1rem; height: 1.1rem; }
      .workspace-file-drawer-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
      .workspace-file-tree.tree-drawer-mode .files-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      #workspace-file-drawer-backdrop.workspace-file-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 11950;
        background: var(--overlay-bg);
      }
      #workspace-file-drawer-backdrop.workspace-file-drawer-backdrop.open { display: block; }
      /* Drawer covers entire visual viewport; keep bottom nav from receiving stray taps */
      body.workspace-file-drawer-active .mobile-nav {
        pointer-events: none;
      }
      /* Tree is position:fixed in drawer — collapse wrap so it does not steal flex height */
      .workspace-editor-layout.editor-mobile-focus .workspace-file-tree-wrap {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
      }
      .workspace-editor-layout.editor-mobile-focus .workspace-resize-handle {
        display: none !important;
        width: 0 !important;
        flex: 0 !important;
      }
      .workspace-editor-layout.editor-mobile-focus .workspace-file-tree:not(.tree-drawer-mode) { display: none; }
      .workspace-editor-layout.editor-mobile-focus .workspace-file-tree.tree-drawer-mode { display: flex; }
      .workspace-editor-layout:not(.editor-mobile-focus) .workspace-file-tree.tree-drawer-mode { display: none; }
      /* One open file: tab strip is redundant with title bar */
      .workspace-editor-layout.editor-mobile-focus .editor-tabs-bar.editor-tabs-single {
        display: none !important;
        min-height: 0 !important;
        border: none !important;
      }
    }
    @media (max-width: 640px) {
      .editor-statusbar .editor-status-desktop { display: none; }
      #editor-empty-hint { padding: 1rem; text-align: center; max-width: 18rem; line-height: 1.45; }
    }
    @media (min-width: 769px) {
      .editor-mobile-bar { display: none !important; }
    }

    /* System notifications thread (pinned at top of thread list).
       No permanent brand left bar — that matches .thread-active selection; use section border only. */
    .thread-item-system {
      background: var(--surface-hover);
    }
    .thread-item-system .thread-avatar {
      background: var(--brand-soft);
      color: var(--brand);
    }
    .thread-item-system.has-unread .thread-avatar {
      background: var(--brand);
      color: #fff;
    }
    .thread-item-system .thread-title { color: var(--text); font-weight: 600; }
    /* Separate Notifications row from regular chats (WhatsApp-style section break) */
    #thread-item-notif.thread-item-system {
      margin-bottom: 0.5rem;
      padding-bottom: 0.7rem;
      border-bottom: 2px solid var(--border-strong);
    }

    /* ── Thread panel: Specialists + Conversations (single list) ───────── */
    .thread-section-header {
      display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
      padding: 0.38rem 0.62rem; margin: 0.42rem 0.5rem 0.2rem;
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
      position: sticky; top: 0; z-index: 1;
    }
    .thread-section-title { flex: 1; min-width: 0; }
    .thread-section-badge {
      display: none; align-items: center; justify-content: center;
      min-width: 1.1rem; height: 1.1rem; padding: 0 5px;
      border-radius: 99px; background: var(--brand); color: #fff;
      font-size: 0.62rem; font-weight: 700;
    }
    /* Specialist count — muted so it is not mistaken for unread / notification badges */
    .thread-section-count {
      display: none;
      flex-shrink: 0;
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      text-transform: none;
      padding: 0 0.15rem 0 0.25rem;
    }
    /* Cloudia (Team Builder): pinned above Team + pipelines — not mixed with specialists */
    .thread-cloudia-dock {
      margin: 0.35rem 0.45rem 0.55rem;
      border-radius: 14px;
      border: 1px solid var(--cloudia-card-border);
      background: var(--cloudia-card-bg);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(14, 165, 233, 0.1),
        0 3px 14px rgba(var(--brand-rgb), 0.12);
      overflow: visible;
      position: relative;
      z-index: 5;
    }
    [data-theme="dark"] .thread-cloudia-dock {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(14, 165, 233, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.38);
    }
    @media (min-width: 769px) {
      .thread-cloudia-dock:hover {
        border-color: rgba(var(--brand-rgb), 0.42);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.6),
          inset 0 0 0 1px rgba(14, 165, 233, 0.14),
          0 4px 18px rgba(var(--brand-rgb), 0.16);
      }
      [data-theme="dark"] .thread-cloudia-dock:hover {
        border-color: rgba(45, 212, 191, 0.45);
      }
    }
    .thread-cloudia-dock .thread-section-header--cloudia {
      position: relative;
      top: auto;
      margin: 0;
      border: none;
      border-radius: 0;
      border-bottom: 1px solid rgba(var(--brand-rgb), 0.15);
      background: rgba(255, 255, 255, 0.55);
    }
    [data-theme="dark"] .thread-cloudia-dock .thread-section-header--cloudia {
      background: rgba(0, 0, 0, 0.12);
      border-bottom-color: rgba(var(--brand-rgb), 0.22);
    }
    .thread-section-header-row--cloudia {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      width: 100%;
    }
    .thread-section-title--cloudia {
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      color: #0f766e;
      font-weight: 600;
    }
    [data-theme="dark"] .thread-section-title--cloudia {
      color: #5eead4;
    }
    .thread-cloudia-dock__body {
      padding: 0.35rem 0.25rem 0.35rem;
    }
    .thread-cloudia-dock__body .emp-item--support + .emp-item--cloudia-team-builder {
      margin-top: 0.45rem;
      position: relative;
    }
    .thread-cloudia-dock__body .emp-item--support + .emp-item--cloudia-team-builder::before {
      content: "";
      position: absolute;
      left: 0.4rem;
      right: 0.4rem;
      top: -0.25rem;
      height: 1px;
      background: rgba(var(--brand-rgb), 0.18);
    }
    .emp-item--support.emp-item-active {
      background: var(--brand-soft) !important;
      border-color: rgba(var(--brand-rgb), 0.4);
      box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.18);
    }
    .thread-cloudia-dock:has(.emp-item--support.emp-item-active) {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(14, 165, 233, 0.06),
        0 1px 6px rgba(var(--brand-rgb), 0.06);
    }
    [data-theme="dark"] .thread-cloudia-dock:has(.emp-item--support.emp-item-active) {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(14, 165, 233, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.28);
    }
    .thread-cloudia-dock__body .emp-item {
      margin-left: 0.2rem;
      margin-right: 0.2rem;
      margin-bottom: 0.35rem;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 10px rgba(var(--brand-rgb), 0.08);
      position: relative;
      z-index: 1;
    }
    .thread-cloudia-dock .thread-item-actions {
      z-index: 20;
    }
    .thread-cloudia-dock .thread-menu-dropdown {
      z-index: 300;
    }
    .emp-item--support .emp-item-name {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    /* Talk to Human roster row (ChatApp-style — square avatar, not specialist circle) */
    .thread-item--chat.thread-item--support {
      align-items: flex-start;
    }
    .thread-avatar--square {
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .thread-avatar--support {
      background: linear-gradient(145deg, #0ea5e9, #0369a1);
      border: 1px solid color-mix(in srgb, #0ea5e9 50%, var(--border, #e2e8f0));
      color: #fff;
      box-shadow: 0 0 12px color-mix(in srgb, #0ea5e9 40%, transparent);
    }
    .thread-item--support.thread-active .thread-avatar--support {
      box-shadow: 0 0 16px color-mix(in srgb, #0ea5e9 55%, transparent);
    }
    .thread-item-header-row--support {
      align-items: flex-start;
    }
    .thread-support-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
      min-width: 0;
      flex: 1;
    }
    .thread-support-title-line {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
      width: 100%;
    }
    .thread-support-title-line .thread-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1;
    }
    .thread-support-human-pill {
      flex-shrink: 0;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 0.1rem 0.35rem;
      border-radius: 999px;
      background: color-mix(in srgb, #0ea5e9 18%, var(--surface, #fff));
      color: #0369a1;
      border: 1px solid color-mix(in srgb, #0ea5e9 35%, var(--border, #e2e8f0));
    }
    [data-theme="dark"] .thread-support-human-pill {
      color: #7dd3fc;
      background: color-mix(in srgb, #0ea5e9 22%, var(--surface, #1e293b));
    }
    .thread-item--support .support-online-dot {
      margin-right: 0;
    }

    /* Talk to Human — premium UX (topbar, welcome card, team replies) */
    .emp-status-dot--online,
    .support-online-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.45rem;
      flex-shrink: 0;
    }
    .emp-topbar-support-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(145deg, #0ea5e9, #0369a1);
      color: #fff;
    }
    /* ── Chat hero cards (Talk to Human, Cloudia intro, etc.) — full-width, not bubble-width ── */
    .chat-log .chat-hero {
      display: flex;
      justify-content: center;
      width: 100% !important;
      max-width: min(34rem, 96%) !important;
      margin: 0.35rem auto 0.9rem !important;
      padding: 0;
      align-self: center;
      align-items: stretch;
    }
    .chat-hero__card {
      width: 100%;
      border-radius: 16px;
      padding: 0.95rem 1rem 0.85rem;
      box-sizing: border-box;
      text-align: left;
      position: relative;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
        0 14px 36px -24px rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .chat-hero__card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.55;
      background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%);
    }
    .chat-hero--support .chat-hero__card {
      border-color: color-mix(in srgb, #0ea5e9 28%, var(--border));
      background: linear-gradient(
        155deg,
        color-mix(in srgb, #0ea5e9 10%, var(--surface)) 0%,
        color-mix(in srgb, var(--surface) 94%, transparent) 48%
      );
    }
    .chat-hero--support .chat-hero__card::before {
      background: radial-gradient(100% 70% at 0% 0%, color-mix(in srgb, #0ea5e9 18%, transparent), transparent 60%);
    }
    .chat-hero--cloudia .chat-hero__card {
      border-color: var(--cloudia-card-border, color-mix(in srgb, var(--brand) 30%, var(--border)));
      background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--brand) 10%, var(--surface)) 0%,
        color-mix(in srgb, var(--surface) 94%, transparent) 50%
      );
    }
    .chat-hero__head {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.62rem;
      position: relative;
      z-index: 1;
    }
    .chat-hero__avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1.25rem;
      line-height: 1;
      box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.45);
    }
    .chat-hero__avatar--support {
      background: linear-gradient(145deg, #38bdf8, #0369a1);
      color: #fff;
    }
    .chat-hero__avatar--cloudia {
      background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 70%, #fff), color-mix(in srgb, var(--brand) 35%, #0f172a));
    }
    .chat-hero__titles { min-width: 0; flex: 1; }
    .chat-hero__title {
      font-size: 0.98rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.2;
    }
    .chat-hero__meta {
      margin-top: 0.12rem;
      font-size: 0.76rem;
      line-height: 1.35;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-wrap: wrap;
    }
    .chat-hero__live {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 22%, transparent);
      flex-shrink: 0;
    }
    .chat-hero__body {
      margin: 0 0 0.7rem;
      font-size: 0.86rem;
      line-height: 1.5;
      color: var(--text-soft);
      position: relative;
      z-index: 1;
    }
    .chat-hero__chips {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      position: relative;
      z-index: 1;
    }
    .chat-hero-chip,
    .cloudia-intro-chip,
    .support-chip {
      width: 100%;
      text-align: left;
      font-size: 0.8rem;
      line-height: 1.35;
      padding: 0.48rem 0.68rem;
      border-radius: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      color: var(--text);
      cursor: pointer;
      font-family: inherit;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }
    .chat-hero-chip:hover,
    .cloudia-intro-chip:hover,
    .support-chip:hover {
      border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
      background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
      transform: translateY(-1px);
      box-shadow: 0 8px 18px -14px rgba(var(--brand-rgb), 0.45);
    }
    .chat-hero--support .chat-hero-chip:hover {
      border-color: color-mix(in srgb, #0ea5e9 45%, var(--border));
      background: color-mix(in srgb, #0ea5e9 12%, var(--surface));
      box-shadow: 0 8px 18px -14px rgba(14, 165, 233, 0.35);
    }
    [data-theme="dark"] .chat-hero__card {
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
        0 16px 40px -22px rgba(0, 0, 0, 0.65);
    }
    .msg-support-ack {
      width: 100%;
      max-width: min(34rem, 96%);
      margin: 0.25rem auto 0.65rem;
      text-align: center;
      font-size: 0.74rem;
      color: var(--muted);
      padding: 0.38rem 0.65rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
      background: color-mix(in srgb, var(--surface-hover) 70%, transparent);
      box-sizing: border-box;
    }
    .msg.msg--support-team .role::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      margin-right: 0.4rem;
      vertical-align: middle;
    }
    /* ── Browser PiP (floating live view) ─────────────────────────────────── */
    .browser-pip {
      display: none; position: fixed; z-index: 350;
      width: min(94vw, 440px); height: min(42vh, 300px);
      right: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-inset, 0px)); left: auto; top: auto;
      flex-direction: column; pointer-events: auto;
      font-family: inherit;
    }
    @media (min-width: 769px) {
      .browser-pip { bottom: 24px; right: 24px; height: min(45vh, 380px); }
    }
    .browser-pip.browser-pip--dragging .browser-pip-bar { cursor: grabbing; }
    .browser-pip-card {
      display: flex; flex-direction: column; flex: 1; min-height: 0;
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 0 0 1px var(--border);
      background: var(--surface); border: 1px solid var(--border);
    }
    .browser-pip-bar {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      flex-shrink: 0; padding: 0.45rem 0.65rem; background: var(--surface-hover);
      border-bottom: 1px solid var(--border); cursor: grab; user-select: none; touch-action: none;
      position: relative; min-height: 38px;
    }
    .browser-pip-bar .browser-chrome-lights {
      position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
    }
    .browser-pip-title {
      display: flex; align-items: center; justify-content: center; gap: 0.35rem;
      font-size: 0.78rem; font-weight: 600; color: var(--text); min-width: 0;
      pointer-events: none; padding: 0 5.5rem;
    }
    .browser-chrome-lights {
      display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    }
    .browser-chrome-light {
      width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0;
      cursor: default; flex-shrink: 0; background: transparent;
    }
    button.browser-chrome-light {
      width: 22px; height: 22px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: filter 0.12s; position: relative;
    }
    button.browser-chrome-light::after {
      content: ''; width: 12px; height: 12px; border-radius: 50%;
      background: var(--browser-chrome-light-color, #888);
    }
    button.browser-chrome-light--close::after { background: #ff5f57; }
    button.browser-chrome-light--min::after { background: #febc2e; }
    button.browser-chrome-light--max::after { background: #28c840; }
    button.browser-chrome-light:hover { filter: brightness(1.15); }
    button.browser-chrome-light:focus-visible {
      outline: 2px solid var(--brand); outline-offset: 2px;
    }
    button.browser-chrome-light:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
    button.browser-chrome-light--max-restore::after {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }
    .browser-topbar-lights { margin-right: 0.15rem; }
    .browser-pip-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 0 2px rgba(34,197,94,0.35); flex-shrink: 0;
    }
    .browser-pip-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #111; }
    .browser-pip-frame { flex: 1; min-height: 120px; position: relative; }
    .browser-pip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent; }
    .browser-pip-loading {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.5rem;
      background: #111; color: #aaa; font-size: 0.75rem; z-index: 1; pointer-events: none;
    }
    .browser-pip-loading-spinner {
      width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.15);
      border-top-color: #22c55e; border-radius: 50%;
      animation: pip-spin 0.8s linear infinite;
    }
    @keyframes pip-spin { to { transform: rotate(360deg); } }
    .browser-pip-loading.hidden { display: none; }
    .browser-pip-rotating {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.5rem;
      background: rgba(17,17,17,0.92); color: #e5e7eb; font-size: 0.8rem;
      font-weight: 600; text-align: center; padding: 0.75rem; z-index: 2;
      pointer-events: none;
    }
    .browser-pip-rotating.hidden { display: none; }
    .browser-pip-pill {
      display: none; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem;
      min-height: 44px;
      border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 0.8rem; font-weight: 600; color: var(--text);
      cursor: pointer; max-width: 92vw;
    }
    .browser-pip-pill-label--short { display: none; }
    .browser-pip-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .browser-pip.browser-pip--minimized .browser-pip-card { display: none; }
    .browser-pip.browser-pip--minimized .browser-pip-pill { display: flex !important; }
    /* Minimized PiP should never block underlying content interactions */
    .browser-pip.browser-pip--minimized {
      width: auto !important;
      height: auto !important;
      max-width: calc(100vw - 16px) !important;
      background: transparent;
      pointer-events: none;
    }
    .browser-pip.browser-pip--minimized .browser-pip-pill {
      pointer-events: auto;
      margin-left: auto;
      margin-right: 0;
      box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    }
    .browser-pip.browser-pip--fullscreen {
      inset: 0 !important; width: 100% !important; height: 100% !important; max-height: 100dvh !important;
      right: auto !important; bottom: auto !important; left: 0 !important; top: 0 !important;
      border-radius: 0;
    }
    .browser-pip.browser-pip--fullscreen .browser-pip-card { border-radius: 0; height: 100%; }
    .browser-pip.browser-pip--fullscreen .browser-pip-bar { cursor: default; }
    /* ── Workspace file PiP (floating editor preview) ─────────────────────── */
    .workspace-pip {
      display: none; position: fixed; z-index: 348;
      width: min(94vw, 480px); height: min(48vh, 360px);
      left: 16px; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom-inset, 0px)); right: auto; top: auto;
      flex-direction: column; pointer-events: auto; font-family: inherit;
    }
    @media (min-width: 769px) {
      .workspace-pip { bottom: 24px; left: 24px; height: min(50vh, 400px); }
    }
    .workspace-pip.workspace-pip--dragging .workspace-pip-bar { cursor: grabbing; }
    .workspace-pip-card {
      display: flex; flex-direction: column; flex: 1; min-height: 0;
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 0 0 1px var(--border);
      background: var(--surface); border: 1px solid var(--border);
    }
    .workspace-pip-bar {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      flex-shrink: 0; padding: 0.45rem 0.65rem; background: var(--surface-hover);
      border-bottom: 1px solid var(--border); cursor: grab; user-select: none; touch-action: none;
      position: relative; min-height: 38px;
    }
    .workspace-pip-bar .browser-chrome-lights {
      position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
    }
    .workspace-pip-actions {
      position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
      display: flex; align-items: center; gap: 0.25rem;
    }
    .workspace-pip-action-btn {
      border: none; background: var(--surface); color: var(--text);
      border-radius: 8px; padding: 0.2rem 0.5rem; font-size: 0.72rem; font-weight: 600;
      cursor: pointer; font-family: inherit;
    }
    .workspace-pip-action-btn:hover:not(:disabled) { background: var(--surface-hover); }
    .workspace-pip-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .workspace-pip-action-btn--dirty { color: var(--brand); }
    .workspace-pip-title {
      display: flex; align-items: center; justify-content: center; gap: 0.35rem;
      font-size: 0.78rem; font-weight: 600; color: var(--text); min-width: 0;
      pointer-events: none; padding: 0 8rem;
    }
    #workspace-pip-title-text {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem;
    }
    .workspace-pip-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #6366f1;
      box-shadow: 0 0 0 2px rgba(99,102,241,0.35); flex-shrink: 0;
    }
    .workspace-pip-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-alt); }
    .workspace-pip-preview {
      flex: 1; margin: 0; padding: 0.65rem 0.75rem; overflow: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.75rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
      color: var(--text); background: transparent;
    }
    .workspace-pip-pill {
      display: none; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem;
      min-height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 0.8rem; font-weight: 600; color: var(--text);
      cursor: pointer; max-width: 92vw;
    }
    .workspace-pip-pill-label--short { display: none; }
    .workspace-pip.workspace-pip--minimized .workspace-pip-card { display: none; }
    .workspace-pip.workspace-pip--minimized .workspace-pip-pill { display: flex !important; }
    .workspace-pip.workspace-pip--minimized {
      width: auto !important; height: auto !important; pointer-events: none;
    }
    .workspace-pip.workspace-pip--minimized .workspace-pip-pill { pointer-events: auto; }
    .workspace-pip.workspace-pip--fullscreen {
      inset: 0 !important; width: 100% !important; height: 100% !important; max-height: 100dvh !important;
      left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
    }
    .workspace-pip.workspace-pip--fullscreen .workspace-pip-card { border-radius: 0; height: 100%; }
    .workspace-pip.workspace-pip--fullscreen .workspace-pip-bar { cursor: default; }
    @media (max-width: 640px) {
      .workspace-pip-bar { min-height: 44px; padding: 0.35rem 0.5rem; }
      .workspace-pip-bar .browser-chrome-lights { left: 0.45rem; gap: 4px; }
      .workspace-pip-title { padding: 0 8.5rem; font-size: 0.8rem; }
      .workspace-pip-pill-label--full { display: none; }
      .workspace-pip-pill-label--short { display: inline; }
      .workspace-pip-action-btn { min-height: 36px; padding: 0.35rem 0.55rem; }
    }
    #dashboard-toast {
      position: fixed; left: 50%; transform: translateX(-50%); bottom: 108px; z-index: 400;
      max-width: min(92vw, 360px); padding: 0.65rem 1rem; border-radius: 12px;
      background: var(--text); color: var(--surface); font-size: 0.875rem; font-weight: 500;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    #dashboard-toast.dashboard-toast--visible { opacity: 1; }
    @media (min-width: 769px) {
      #dashboard-toast { bottom: 32px; }
      .chat-log-wrap {
        background-image: none !important;
      }
      .app-topbar {
        padding: 0.35rem 1rem;
        min-height: 44px;
        flex-wrap: nowrap;
      }
      #panel-team.panel.active {
        flex-direction: column;
        height: 100%;
        overflow: hidden;
      }
      /* Desktop: title + team search share one sticky topbar row */
      #panel-team .panel-topbar-stack--team {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.65rem;
        flex-shrink: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        border-bottom: 1px solid var(--border);
        padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 1rem 0.42rem 1rem;
        position: sticky;
        top: 0;
        z-index: 50;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar {
        flex: 0 0 auto;
        min-width: 0;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        position: static;
      }
      #panel-team .panel-topbar-stack--team > .app-topbar-secondary {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
      }
      #panel-team .team-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 0.5rem 1rem;
      }
      .chat-log .msg { max-width: min(800px, 82%); }
      #pin-strip { display: none !important; }
      /* Slim chat topbar: bell / usage / pin live in sidebar */
      #panel-chat > .app-topbar {
        min-height: 44px;
        padding: 0.35rem 0.85rem;
      }
      /* Pin stays in chat topbar (per-thread); notif + usage remain in sidebar chrome */
      #panel-chat .topbar-global-zone {
        display: flex !important;
        align-items: center;
        gap: 0.35rem;
        border-left: 1px solid var(--border);
        padding-left: 0.5rem;
        margin-left: auto;
      }
      #panel-chat #topbar-notif-btn,
      #panel-chat .chat-topbar-usage-wrap { display: none !important; }
      /* Standalone mobile: sidebar is hidden — bell must live in chat topbar */
      html:not(.cloudaxis-embed) #panel-chat #topbar-notif-btn {
        display: flex !important;
      }
      .sidebar-chrome-actions { display: flex; }
      .sidebar-chrome-actions .sidebar-usage-wrap { flex: 1; min-width: 0; }
    }
    /* Desktop split-pane thread roster — exclude touch landscape phones (isMobileShell). */
    @media (min-width: 769px) and (not ((max-width: 1000px) and (max-height: 520px) and (orientation: landscape) and (hover: none))) {
      #thread-panel.thread-panel {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: clamp(300px, 26vw, 420px) !important;
        min-width: 260px !important;
        max-width: 420px !important;
        flex-shrink: 0;
        z-index: auto !important;
        box-shadow: none !important;
        border-radius: 0;
      }
    }
    .chat-inputbar.chat-inputbar--touch-primary button#chat-send .chat-send-label { display: inline; margin-left: 0.35rem; font-size: 0.8rem; font-weight: 600; }
    .chat-send-label { display: none; }
    @media (max-width: 640px) {
      #dashboard {
        --chat-composer-bottom-gap: 0.22rem;
        --chat-composer-stack-gap: 0.22rem;
        --chat-veil-h-top: 2.4rem;
        --chat-veil-h-bottom: 2rem;
        --chat-veil-a-top: 0.36;
        --chat-veil-a-bottom: 0.6;
        /* Slightly tighter clearance — smaller emp topbar (3.7rem) on narrow phones */
        --chat-topbar-clearance: 3.7rem;
        /* Topbar scroll-under only; composer + nav near-opaque */
        --chat-glass-a-emp: 0.78;
        --chat-glass-a-meta: 0.96;
        --chat-glass-a-input: 0.98;
        --chat-glass-a-nav: 1;
      }
      .chat-send-label { display: none !important; }
      .chat-inputbar { padding: 0.35rem 0.55rem 0.4rem; overflow: visible; }
      .chat-input-row { padding: 0.15rem 0.35rem; gap: 0.3rem; flex-wrap: nowrap; align-items: flex-end; }
      .chat-inputbar textarea#chat-input { flex: 1 1 auto; min-width: 0; min-height: 2rem; padding: 0.4rem 0.45rem; }
      .chat-input-meta {
        width: 100%;
        padding: 0.1rem 0 0;
        margin-top: 0.1rem;
        border-top: none;
        gap: 0.3rem;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .chat-input-meta::-webkit-scrollbar { display: none; }
      .chat-input-meta::after { display: block; }
      .model-pill { padding: 0.18rem 0.4rem; font-size: 0.7rem; gap: 0.2rem; }
      #panel-chat > .app-topbar {
        top: 0.25rem;
        left: 0.55rem;
        right: 0.55rem;
      }
      /* Chat layout padding-top stays 0 (inherited) so messages can scroll under the floating topbar.
         Topbar clearance is reserved by .chat-log-wrap padding-top via --chat-topbar-clearance (3.7rem here). */
      #panel-chat .chat-input-meta {
        margin-top: 0;
        gap: 0.16rem;
      }
      #panel-chat .chat-input-meta .model-pill {
        min-height: 30px;
        padding: 0.08rem 0.38rem;
        font-size: 0.64rem;
      }
      .chat-inputbar button#chat-send {
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 0;
        border-radius: var(--btn-radius-cta);
        background: var(--brand-gradient);
        color: #fff;
        border: none;
        box-shadow: var(--shadow-sm);
      }
      .chat-inputbar button#chat-stop {
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 0;
        border-radius: var(--btn-radius-cta);
        box-shadow: var(--shadow-sm);
      }
      #panel-chat .chat-inputbar button#chat-send:hover,
      #panel-chat .chat-inputbar button#chat-stop:hover {
        box-shadow: var(--shadow);
      }
      /* Narrow phones: reinforce neutral attach (base .chat-attach-btn:hover still uses brand) */
      #panel-chat .chat-input-row .chat-attach-btn {
        -webkit-tap-highlight-color: transparent;
      }
      #panel-chat .chat-input-row .chat-attach-btn:hover {
        background: var(--surface-hover);
        color: var(--text);
        border-color: var(--border-strong);
      }
      /* Small phones: in-flow composer — tighter side padding + small gap above nav area */
      #panel-chat .chat-inputbar {
        padding: 0 0.55rem 0.2rem;
        margin: 0 0 0.35rem;
        gap: var(--chat-composer-stack-gap, 0.22rem);
      }
      #panel-chat .chat-input-meta {
        justify-content: flex-start;
        align-self: flex-start;
        width: auto;
        padding: 0;
        overflow-x: visible;
        white-space: normal;
        touch-action: auto;
        background: transparent;
        border: none;
        box-shadow: none;
      }
      #panel-chat .chat-input-meta::after {
        display: none !important;
      }
      #panel-chat .chat-input-row { border-radius: var(--radius-lg); }
      .chat-log-wrap { padding: 0.5rem 0.65rem 0.75rem; }
      /* Inherits #panel-chat .chat-log-wrap padding (top: topbar, bottom: 0.5rem). Gutter only: */
      #panel-chat .chat-log-wrap {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
      }
      .msg { margin-bottom: 0.65rem; }
      .msg-bubble-footer { font-size: 0.75rem; }
      .msg-copy-btn, .msg-pin-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
      .msg.assistant .msg-copy-btn { right: 0.5rem; }
      textarea#chat-input { min-height: 2.5rem; font-size: 0.9375rem; padding: 0.5rem 0.55rem; }
      .model-pill { font-size: 0.75rem; }
      #model-pill-btn > svg:first-child { display: none; }
      #panel-chat > .app-topbar { flex-wrap: nowrap; gap: 0.3rem; padding: 0.4rem 0.75rem; overflow: visible; }
      #tab-chat-label { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
      .msg-bubble-footer { display: flex; flex-wrap: wrap; }
      .msg-meta-tag { display: inline-flex; align-items: center; max-width: 100%; }
      .thread-item { margin: 0.28rem 0.4rem; padding: 0.5rem 0.55rem; gap: 0.5rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
      .thread-title { font-size: 0.99rem; }
      .thread-preview { font-size: 0.8125rem; }
      .emp-item { padding: 0.55rem 0.65rem; gap: 0.5rem; margin: 0; min-height: 52px; box-sizing: border-box; border-radius: 0; }
      .emp-item-avatar { width: 32px; height: 32px; font-size: 0.9rem; }
      .emp-item-name { font-size: 0.9375rem; }
    }
    @media (max-width: 640px) {
      button.browser-chrome-light {
        width: 36px; height: 36px;
      }
      button.browser-chrome-light::after {
        width: 14px; height: 14px;
      }
      .browser-pip-bar { min-height: 44px; padding: 0.35rem 0.5rem; }
      .browser-pip-bar .browser-chrome-lights { left: 0.45rem; gap: 4px; }
      .browser-pip-title { padding: 0 6.5rem; font-size: 0.8rem; }
      .browser-pip-pill { padding: 0.45rem 0.6rem; max-width: 76vw; }
      .browser-pip-pill-label--full { display: none; }
      .browser-pip-pill-label--short { display: inline; }
      .iframe-container { border-radius: 8px; }
      #panel-browser #browser-live-stats { display: none !important; }
      .editor-statusbar { display: none !important; }
    }
    @media (max-width: 480px) {
      .browser-topbar-control-icon { display: inline-flex; align-items: center; justify-content: center; }
      .browser-topbar-control-label { display: none; }
      .browser-topbar-control {
        min-width: 40px; min-height: 40px; padding: 0.35rem !important;
      }
    }
    @media (max-width: 768px) {
      #employee-settings-modal.attach-modal {
        align-items: stretch; justify-content: stretch; padding: 0;
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
      }
      [data-theme="dark"] #employee-settings-modal.attach-modal {
        background: rgba(0, 0, 0, 0.55);
      }
      #employee-settings-modal .emp-settings-content.attach-modal-content {
        width: 100%; max-width: 100%; height: 100%; max-height: 100%;
        min-height: 0;
        border-radius: 0;
        animation: empSettingsSlideIn 0.28s ease-out;
      }
      @keyframes empSettingsSlideIn {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
      }
      #employee-settings-modal .emp-settings-back-btn { display: inline-flex; }
      #employee-settings-modal .emp-settings-panel__lede {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin: 0.1rem 0 0.45rem;
        max-width: 36rem;
      }
      #employee-settings-modal .emp-settings-panel.emp-settings-panel--collapsed {
        margin-bottom: 0.45rem;
        background: var(--bg-alt, var(--surface-hover));
      }
      #employee-settings-modal .emp-settings-panel__head ~ * {
        overflow: hidden;
        transition: max-height 0.22s var(--ease-out), opacity 0.18s ease;
        max-height: min(120vh, 2200px);
        opacity: 1;
      }
      /* Expanded panels: do not clip long duty lists / forms — outer .emp-settings-tab-panel scrolls. */
      #employee-settings-modal .emp-settings-panel:not(.emp-settings-panel--collapsed) .emp-settings-panel__head ~ * {
        max-height: none;
        overflow: visible;
      }
      #employee-settings-modal .emp-settings-panel.emp-settings-panel--collapsed .emp-settings-panel__head ~ * {
        max-height: 0 !important;
        opacity: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none;
      }
      #employee-settings-modal .emp-settings-panel__head {
        cursor: pointer; user-select: none; position: relative; padding-right: 1.85rem; margin-bottom: 0.25rem;
        min-height: 44px; display: flex; flex-direction: column; justify-content: center;
        box-sizing: border-box;
        border-radius: 10px;
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        padding-left: 0.15rem;
      }
      #employee-settings-modal .emp-settings-panel.emp-settings-panel--collapsed .emp-settings-panel__head {
        margin-bottom: 0;
      }
      #employee-settings-modal .emp-settings-section-nav {
        display: none !important;
      }
      #employee-settings-modal .emp-settings-system-prompt-input {
        min-height: 11rem;
      }
      #employee-settings-modal .emp-settings-tab-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.28rem;
        min-height: 44px;
        padding: calc(0.38rem + env(safe-area-inset-top, 0px)) 0.55rem 0.4rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
      }
      #employee-settings-modal .emp-settings-back-btn {
        width: 36px;
        height: 36px;
        min-height: 36px;
        margin-right: 0.1rem;
        font-size: 1.05rem;
      }
      #employee-settings-modal #emp-settings-tablist .emp-settings-tab {
        font-size: 0.78rem;
        padding: 0.34rem 0.58rem calc(0.34rem + 2px);
      }
      #employee-settings-modal #emp-settings-tablist .emp-settings-tab[aria-selected="true"] {
        color: var(--text);
        background: var(--brand-soft);
        border-radius: 9px;
      }
      #employee-settings-modal .emp-settings-close-btn {
        min-height: 36px;
        padding: 0.25rem 0.45rem;
      }
      #employee-settings-modal .emp-settings-open-chat-btn {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
      }
      #employee-settings-modal .emp-settings-panel:not(.emp-settings-panel--collapsed) {
        border-color: rgba(var(--brand-rgb), 0.28);
        box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.1);
      }
      #employee-settings-modal .emp-settings-rail { margin: 0.3rem 0 0.4rem; }
      #employee-settings-modal .emp-settings-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
      }
      #employee-settings-modal .emp-settings-panel__head::after {
        content: '\25bc';
        position: absolute;
        right: 0.1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.72rem;
        line-height: 1;
        color: var(--text-muted);
        transition: color 0.15s ease;
        pointer-events: none;
      }
      #employee-settings-modal .emp-settings-panel:not(.emp-settings-panel--collapsed) .emp-settings-panel__head::after {
        content: '\25b2';
      }
      #employee-settings-modal .emp-settings-name-input {
        min-height: 40px;
        font-size: 0.98rem;
        padding: 0.32rem 0.5rem;
      }
      #employee-settings-modal .emp-settings-copy-id {
        min-height: var(--touch-min);
        padding: 0.4rem 0.7rem;
        display: inline-flex;
        align-items: center;
      }
      /* Full-screen sheet: primary saves match chat/editor CTAs (no iOS gray flash on tap) */
      #employee-settings-modal .btn.btn-primary {
        -webkit-tap-highlight-color: transparent;
      }
    }
    @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
      #employee-settings-modal .emp-settings-content.attach-modal-content {
        animation: none;
      }
      #employee-settings-modal .emp-settings-panel__head ~ * {
        transition: none;
      }
    }
    .emp-item {
      display: flex; flex-direction: row; align-items: stretch; gap: 0.75rem;
      padding: 0.65rem 0.75rem; cursor: pointer; border: 1px solid var(--border);
      border-radius: 12px; background: var(--surface); margin: 0.24rem 0.5rem;
      position: relative; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    [data-theme="dark"] .emp-item { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
    .emp-item:hover { background: var(--surface-hover); border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .emp-item.emp-item-active { background: var(--brand-soft) !important; border-color: rgba(var(--brand-rgb), 0.35); box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.2); }
    /* Cloudia (Team Builder): brand-tinted row — matches dock + avatar plate */
    .emp-item--cloudia-team-builder {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--cloudia-card-bg);
      border-color: var(--cloudia-card-border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 0 1px rgba(14, 165, 233, 0.08),
        0 2px 12px rgba(var(--brand-rgb), 0.1);
    }
    .emp-item--cloudia-team-builder::after {
      display: none;
    }
    .emp-item--cloudia-team-builder > * { position: relative; z-index: 1; }
    .emp-item--cloudia-team-builder .emp-item-preview {
      color: var(--cloudia-meta-strong);
    }
    .emp-item--cloudia-team-builder .thread-time.thread-time--subtle {
      color: var(--cloudia-meta-strong);
    }
    [data-theme="dark"] .emp-item--cloudia-team-builder {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(14, 165, 233, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.32);
    }
    @media (min-width: 769px) {
      .emp-item--cloudia-team-builder:hover {
        border-color: rgba(var(--brand-rgb), 0.4);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.55),
          inset 0 0 0 1px rgba(14, 165, 233, 0.12),
          0 3px 14px rgba(var(--brand-rgb), 0.14);
      }
      [data-theme="dark"] .emp-item--cloudia-team-builder:hover {
        border-color: rgba(45, 212, 191, 0.42);
      }
    }
    .emp-item--cloudia-team-builder.emp-item-active {
      background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.16) 0%, var(--cloudia-card-bg-solid) 100%) !important;
      border-color: rgba(var(--brand-rgb), 0.3);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 0 2px rgba(var(--brand-rgb), 0.12),
        0 3px 12px rgba(var(--brand-rgb), 0.08);
    }
    [data-theme="dark"] .emp-item--cloudia-team-builder.emp-item-active {
      background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.2) 0%, var(--cloudia-card-bg-solid) 100%) !important;
      border-color: rgba(var(--brand-rgb), 0.42);
    }
    .emp-item-avatar--cloudia-team-builder {
      padding: 0;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--cloudia-avatar-border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring),
        0 1px 5px rgba(var(--brand-rgb), 0.1);
    }
    [data-theme="dark"] .emp-item-avatar--cloudia-team-builder {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring),
        0 2px 8px rgba(0, 0, 0, 0.28);
    }
    .emp-cloudia-mascot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
    }
    .emp-cloudia-mascot .cloudia-orb {
      flex-shrink: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .hire-card-avatar--cloudia,
      .emp-topbar-profile-hit:has(#emp-topbar-emoji.emp-topbar-emoji--cloudia) .emp-topbar-avatar-wrap {
        animation: none;
      }
    }
    .emp-item-avatar {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; line-height: 1; border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    [data-theme="dark"] .emp-item-avatar { border-color: rgba(255,255,255,0.08); }
    .emp-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-right: 3rem; /* match .thread-item-main — keeps last-run row aligned with chat threads */ }
    .emp-item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem; }
    .emp-item-name { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.25; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
    .emp-item-name--cloudia {
      white-space: normal;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.12rem 0.2rem;
      overflow: visible;
      text-overflow: clip;
    }
    .emp-item-name-main { font-weight: 700; letter-spacing: -0.02em; }
    .emp-item-name-role {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    /* Specialist sidebar rows: .thread-preview + .thread-meta-row (same typography as conversation list). */
    .emp-item-preview { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
    .emp-item-template { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.08rem; }
    .hire-card-role { font-size: 0.68rem; font-weight: 600; color: var(--muted); margin-top: 0.1rem; font-family: ui-monospace, monospace, Menlo, Consolas; }
    .emp-status-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; align-self: center;
      background: var(--muted-soft); box-shadow: none;
    }
    .emp-status-dot--paused { background: #c59a2d; box-shadow: none; }
    .emp-status-dot--dismissed { background: #94a3b8; box-shadow: none; }

    .emp-topbar-info {
      display: none; flex-direction: column; align-items: stretch; gap: 0.15rem; min-width: 0; flex: 1;
    }
    .emp-topbar-info-row {
      display: flex; align-items: center; gap: 0.35rem; min-width: 0;
    }
    .emp-topbar-sub {
      font-size: 0.75rem; color: var(--muted); line-height: 1.35;
      padding-left: calc(36px + 0.85rem); max-width: 100%;
      overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .emp-topbar-sub:empty { display: none; }
    .emp-topbar-profile-hit {
      display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; max-width: 100%;
      padding: 0.25rem 0.5rem 0.25rem 0.2rem; margin: -0.15rem 0;
      border: none; background: transparent; border-radius: 12px; cursor: pointer;
      font: inherit; text-align: left; color: inherit;
      transition: background 0.15s ease, box-shadow 0.15s ease;
      box-shadow: inset 0 0 0 1px transparent;
    }
    .emp-topbar-profile-hit:hover {
      background: var(--surface-hover);
      box-shadow: inset 0 0 0 1px var(--border);
    }
    .emp-topbar-profile-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-topbar-name-row {
      display: inline-flex;
      align-items: baseline;
      flex-wrap: nowrap;
      gap: 0;
      min-width: 0;
      flex: 1;
      max-width: 100%;
    }
    .emp-topbar-name-detail-sep {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--text-muted);
      flex-shrink: 0;
      margin: 0 0.12rem;
    }
    .emp-topbar-name-detail {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
      min-width: 0;
      flex: 1 1 12rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Empty detail still sat in the flex row with flex-basis 12rem — stole width from the name on mobile. */
    .emp-topbar-name-detail:empty {
      display: none;
    }
    .emp-topbar-avatar-wrap {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    [data-theme="dark"] .emp-topbar-avatar-wrap { box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
    .emp-topbar-profile-hit:has(#emp-topbar-emoji.emp-topbar-emoji--cloudia) .emp-topbar-avatar-wrap {
      overflow: hidden;
      animation: none;
      box-shadow:
        0 0 0 1px rgba(14, 165, 233, 0.22) inset,
        0 1px 5px rgba(var(--brand-rgb), 0.12);
    }
    [data-theme="dark"] .emp-topbar-profile-hit:has(#emp-topbar-emoji.emp-topbar-emoji--cloudia) .emp-topbar-avatar-wrap {
      box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.3) inset,
        0 1px 6px rgba(0, 0, 0, 0.4);
    }
    .emp-topbar-emoji {
      width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem; line-height: 1;
    }
    .emp-topbar-emoji.emp-topbar-emoji--cloudia {
      font-size: 0;
      background: var(--surface);
      border: 1px solid var(--cloudia-avatar-border);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring);
    }
    .emp-topbar-name {
      font-size: 1rem; font-weight: 600; color: var(--text);
      min-width: 0;
      flex: 1 1 auto;
      max-width: 100%;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .nid-card.attach-modal-content { max-width: 380px; padding: 1.35rem 1.5rem 1.5rem; }
    .modal-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; color: var(--text); }
    .nid-option-btn {
      display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
      width: 100%; padding: 0.85rem 1rem; margin-bottom: 0.5rem; border-radius: 14px;
      border: 1px solid var(--border); background: var(--surface-hover); color: var(--text);
      cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, background 0.15s;
    }
    .nid-option-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
    .nid-option-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .nid-option-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .nid-option-btn .nid-option-label { font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; gap: 0.45rem; }
    .nid-option-hint { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
    .nid-close-fab {
      position: absolute; top: 0.65rem; right: 0.65rem; width: 32px; height: 32px;
      border: none; border-radius: 8px; background: transparent; color: var(--muted);
      cursor: pointer; font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    }
    .nid-close-fab:hover { background: var(--surface-hover); color: var(--text); }
    #new-item-dialog.attach-modal .attach-modal-content { position: relative; }

    .hire-modal-content.attach-modal-content {
      max-width: min(1040px, calc(100vw - 1.5rem));
      width: min(1040px, calc(100vw - 1.5rem));
      height: min(860px, calc(100vh - 1.5rem));
      max-height: min(860px, calc(100vh - 1.5rem));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
      position: relative;
      z-index: 1;
      pointer-events: auto;
    }
    [data-theme="dark"] .hire-modal-content.attach-modal-content {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    }
    .hire-modal-chrome {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      height: 38px;
      padding: 0 0.85rem;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border-radius: 12px 12px 0 0;
    }
    .hire-modal-lights {
      display: flex;
      gap: 7px;
      flex-shrink: 0;
      width: 68px;
      align-items: center;
    }
    .hire-modal-light-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
      pointer-events: none;
    }
    .hire-modal-light-dot--min { background: #febc2e; }
    .hire-modal-light-dot--max { background: #28c840; }
    button.hire-modal-light {
      width: 22px;
      height: 22px;
      padding: 0;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: filter 0.12s;
      background: transparent !important;
      position: relative;
      pointer-events: auto;
      flex-shrink: 0;
    }
    button.hire-modal-light::after {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff5f57;
    }
    button.hire-modal-light:hover { filter: brightness(1.15); }
    button.hire-modal-light:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
    .hire-modal-chrome-title {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-muted, var(--muted));
      pointer-events: none;
    }
    .hire-modal-chrome-spacer {
      flex-shrink: 0;
      width: 68px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .hire-modal-close-text {
      border: none;
      background: transparent;
      color: var(--brand);
      font: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0.2rem 0.35rem;
      border-radius: 6px;
      pointer-events: auto;
    }
    .hire-modal-close-text:hover { background: var(--surface-hover); }
    .hire-modal-close-text:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
    .hire-modal-main {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      padding: 0.85rem 1.25rem 0.5rem;
    }
    .hire-modal-banner,
    .hire-modal-starter-hint,
    .hire-modal-busy,
    .hire-modal-error {
      margin: 0 0 0.65rem;
      flex-shrink: 0;
    }
    .hire-modal-starter-hint { font-size: 0.8rem; line-height: 1.45; text-align: left; }
    .hire-modal-busy { font-weight: 600; color: var(--brand); }
    .hire-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-shrink: 0; }
    .hire-modal-header h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
    .hire-modal-body { min-height: 0; }
    .hire-modal-footer {
      flex-shrink: 0;
      padding: 0.85rem 1.25rem 1.1rem;
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
    .hire-modal-footer-label {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text);
    }
    .hire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
    .hire-card {
      border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem;
      background: var(--surface-hover); text-align: left; cursor: pointer; font-family: inherit;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; display: flex; flex-direction: column; gap: 0.5rem;
    }
    .hire-card:hover:not(:disabled):not(.hire-card--disabled) { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
    .hire-card.hire-card--selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), 0 6px 20px rgba(var(--brand-rgb, 20, 184, 166), 0.12); transform: translateY(-1px); }
    .hire-card--disabled { opacity: 0.55; cursor: not-allowed; }
    .hire-card--cloudia-architect {
      border-color: var(--cloudia-card-border, rgba(var(--brand-rgb), 0.28));
      background: var(--cloudia-card-bg, var(--surface-hover));
    }
    .hire-card-avatar {
      width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; margin-bottom: 0.25rem;
    }
    .hire-card-avatar--cloudia {
      font-size: 0;
      padding: 0;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--cloudia-avatar-border);
      /* Static “premium plate” — no continuous glow loop (motion polish) */
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring),
        0 1px 6px rgba(var(--brand-rgb), 0.1);
    }
    [data-theme="dark"] .hire-card-avatar--cloudia {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px var(--cloudia-avatar-accent-ring),
        0 2px 10px rgba(0, 0, 0, 0.35);
    }
    .hire-card-avatar--cloudia .emp-cloudia-mascot {
      width: 100%;
      height: 100%;
    }
    .hire-card-name { font-weight: 700; font-size: 1rem; color: var(--text); }
    .hire-card-tag { font-size: 0.78rem; color: var(--muted); }
    .hire-card-desc {
      font-size: 0.8125rem; color: var(--text-soft); line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .hire-skills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
    .hire-skill-pill {
      font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 6px;
      background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
    }
    .hire-plan-badge { font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--warning-soft, rgba(245,158,11,0.15)); color: var(--warning, #b45309); }
    .hire-card-actions { margin-top: auto; padding-top: 0.5rem; }
    .hire-card-actions .btn.btn-primary,
    .hire-card-actions .hire-card-hire-btn { width: 100%; }
    .hire-card-setup {
      font-size: 0.72rem; line-height: 1.45; color: var(--text-soft); margin-top: 0.15rem;
      padding: 0.45rem 0.55rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
    }
    .hire-card-setup strong { color: var(--text); font-weight: 600; }
    .hire-card-setup-title { font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.25rem; }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .hire-modal-content.attach-modal-content {
        background: var(--surface);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

    @media (max-width: 768px) {
      #hire-picker-modal.attach-modal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
      }
      [data-theme="dark"] #hire-picker-modal.attach-modal {
        background: rgba(0, 0, 0, 0.55);
      }
      #hire-picker-modal .hire-modal-content.attach-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        border-radius: 0;
        animation: hireModalSlideUp 0.28s ease-out;
      }
      @keyframes hireModalSlideUp {
        from { transform: translateY(12px); opacity: 0.92; }
        to { transform: translateY(0); opacity: 1; }
      }
      .hire-modal-chrome { border-radius: 0; }
      .hire-modal-main { padding: 0.75rem 1rem 0.5rem; }
      .hire-modal-footer { padding: 0.75rem 1rem 1rem; }
      .hire-grid { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      #hire-picker-modal .hire-modal-content.attach-modal-content {
        animation: none !important;
      }
      .hire-card.hire-card--selected { transform: none; }
    }

    .emp-settings-content.attach-modal-content {
      max-width: min(900px, calc(100vw - 2rem)); width: 96%; max-height: min(92vh, 760px);
      display: flex; flex-direction: column; overflow: hidden; padding: 0;
      border-radius: 16px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    }
    .emp-settings-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }
    .emp-settings-tab-panels {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }
    .emp-settings-tab-panel {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 1.05rem 1.1rem 1.35rem;
      scroll-padding-top: 0.5rem;
      display: none;
      flex-direction: column;
      gap: 0.15rem;
    }
    .emp-settings-tab-panel.emp-settings-tab-panel--active,
    #employee-settings-modal .emp-settings-tab-panel:not([hidden]) {
      display: flex !important;
    }
    /* Ensure hidden attribute wins when both present during transitions */
    .emp-settings-tab-panel[hidden] {
      display: none !important;
    }
    [data-theme="dark"] .emp-settings-content.attach-modal-content {
      box-shadow: 0 16px 48px rgba(0,0,0,0.45);
    }
    .emp-settings-tab-bar {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
      min-height: 48px;
      padding: 0.4rem 0.65rem calc(0.4rem + 2px);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .emp-settings-tab-bar .emp-settings-back-btn { flex-shrink: 0; }
    .emp-settings-tab-bar__nav-wrap {
      flex: 1;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }
    .emp-settings-tab-bar__nav-wrap::-webkit-scrollbar { display: none; }
    #emp-settings-tablist.emp-settings-tab-bar__nav {
      position: relative;
      display: flex;
      align-items: flex-end;
      flex-wrap: nowrap;
      gap: 0;
      padding: 0 0.12rem;
      min-height: 38px;
    }
    #emp-settings-tablist .emp-settings-tab-indicator {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--brand);
      pointer-events: none;
      transition: transform 0.18s ease, width 0.18s ease;
      z-index: 1;
      width: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      #emp-settings-tablist .emp-settings-tab-indicator {
        transition: none;
      }
    }
    .emp-settings-tab {
      appearance: none;
      margin: 0;
      border: none;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 0.81rem;
      font-weight: 600;
      padding: 0.48rem 0.74rem calc(0.48rem + 2px);
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      scroll-snap-align: start;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      line-height: 1.2;
    }
    .emp-settings-tab[aria-selected="true"] {
      color: var(--text);
    }
    .emp-settings-tab:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      border-radius: 8px;
    }
    .emp-settings-tab__badge {
      font-variant-numeric: tabular-nums;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 0.06rem 0.4rem;
      border-radius: 999px;
      background: var(--surface-hover);
      border: 1px solid var(--border);
      color: var(--text-soft);
      min-height: auto;
      line-height: 1.2;
    }
    .emp-settings-tab__badge:empty {
      display: none;
    }
    .emp-settings-tab__dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--brand);
      box-shadow: 0 0 0 2px var(--surface);
      padding: 0;
    }
    .emp-settings-tab__dot--warn {
      background: var(--warning, #ca8a04);
    }
    .emp-settings-tab-bar > .emp-settings-close-btn {
      margin-left: auto;
      flex-shrink: 0;
    }
    .emp-settings-close-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
      min-height: 40px; padding: 0.35rem 0.6rem; border-radius: 10px;
      border: none; background: transparent; color: var(--text-soft);
      font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit;
    }
    .emp-settings-close-btn:hover { background: var(--surface-hover); color: var(--text); }
    .emp-settings-close-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-close-btn__x {
      display: inline; font-size: 1.45rem; line-height: 1; font-weight: 400;
      color: var(--muted);
    }
    .emp-settings-close-btn__text { display: none; }
    @media (min-width: 769px) {
      .emp-settings-close-btn {
        min-height: 36px; padding: 0.3rem 0.55rem;
        font-size: 0.78rem; color: var(--muted);
      }
      .emp-settings-close-btn__x { display: none; }
      .emp-settings-close-btn__text { display: inline; }
    }
    .emp-settings-avatar-hit {
      border: none; padding: 0; background: transparent; cursor: pointer; border-radius: 50%;
      flex-shrink: 0; position: relative; transition: transform 0.12s, box-shadow 0.12s;
    }
    .emp-settings-avatar-hit:hover { transform: scale(1.03); }
    .emp-settings-avatar-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%; }
    .emp-settings-avatar-hit::after {
      content: ''; position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
      background-color: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center;
    }
    #employee-settings-modal .emp-settings-name-input {
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 36px;
      box-sizing: border-box;
      padding: 0.3rem 0.55rem;
      margin: 0;
      font-size: 1.02rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.25;
      color: var(--text);
      background: var(--surface-hover);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow-xs);
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    #employee-settings-modal .emp-settings-name-input::placeholder {
      color: var(--muted-soft);
      font-weight: 600;
    }
    #employee-settings-modal .emp-settings-name-input:focus {
      outline: none;
      background: var(--surface);
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
    }
    .emp-settings-name-hint { font-size: 0.75rem; line-height: 1.4; }
    .emp-settings-title { font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; }
    .emp-settings-icon-btn {
      border: none; background: var(--surface-hover); color: var(--muted); width: 28px; height: 28px;
      border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .emp-settings-icon-btn:hover { background: var(--brand-soft); color: var(--brand); }
    .emp-settings-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-sub { font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 0; line-height: 1.35; }
    #emp-settings-avatar.hire-card-avatar,
    #employee-settings-modal #emp-settings-avatar.hire-card-avatar {
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    /* === Specialist card · Overview tab (identity card) ===================== */
    /* Wraps hero + metrics + CTA; styled as a premium card on mobile only */
    .emp-overview-mobile-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #employee-settings-modal #emp-settings-panel-overview {
      padding-top: 1.1rem;
    }
    #employee-settings-modal #emp-settings-avatar.emp-settings-avatar--hero {
      width: 64px !important;
      height: 64px !important;
      font-size: 1.85rem !important;
      box-shadow:
        0 0 0 4px var(--surface),
        0 0 0 5px var(--border),
        0 6px 18px rgba(0, 0, 0, 0.06) !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    #employee-settings-modal .emp-settings-avatar-hit--hero:hover #emp-settings-avatar.emp-settings-avatar--hero {
      transform: scale(1.04);
      box-shadow:
        0 0 0 4px var(--surface),
        0 0 0 5px var(--brand-soft),
        0 8px 22px rgba(0, 0, 0, 0.08) !important;
    }
    .emp-settings-overview-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.18rem;
      padding: 0.1rem 0.5rem 0.4rem;
    }
    .emp-settings-avatar-hit--hero {
      margin: 0 auto 0.55rem;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }
    .emp-settings-avatar-hit--hero::after {
      display: none;
    }
    .emp-settings-avatar-hit--hero:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 6px;
      border-radius: 50%;
    }
    .emp-settings-hero-name-wrap {
      width: 100%;
      max-width: 22rem;
      margin: 0 auto;
    }
    #employee-settings-modal .emp-settings-name-input--hero {
      text-align: center;
      font-size: 1.32rem !important;
      font-weight: 700 !important;
      letter-spacing: -0.012em;
      min-height: 38px;
      padding: 0.2rem 0.55rem !important;
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      border-radius: 8px;
      color: var(--text);
      transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    }
    #employee-settings-modal .emp-settings-name-input--hero:hover {
      background: var(--surface-hover);
      border-color: var(--border);
    }
    #employee-settings-modal .emp-settings-name-input--hero:focus {
      background: var(--surface);
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
      outline: none;
    }
    .emp-overview-role {
      margin: 0;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--muted);
      line-height: 1.3;
    }
    #employee-settings-modal .emp-overview-tagline {
      width: 100%;
      max-width: 28rem;
      margin: 0.45rem auto 0;
      padding: 0.32rem 0.55rem;
      text-align: center;
      font-size: 0.92rem;
      font-style: italic;
      font-weight: 400;
      line-height: 1.45;
      color: var(--text-soft);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
    }
    #employee-settings-modal .emp-overview-tagline::placeholder {
      color: var(--muted);
      font-style: italic;
      opacity: 0.85;
    }
    #employee-settings-modal .emp-overview-tagline:hover {
      background: var(--surface-hover);
      border-color: var(--border);
      color: var(--text);
    }
    #employee-settings-modal .emp-overview-tagline:focus {
      background: var(--surface);
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
      outline: none;
      color: var(--text);
      font-style: normal;
    }
    .emp-overview-status-line {
      margin: 0.55rem 0 0;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--muted);
      line-height: 1.3;
    }
    .emp-overview-status-line__text {
      min-width: 0;
    }
    .emp-overview-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--success, #22c55e);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    .emp-overview-status-line--active .emp-overview-status-dot {
      background: var(--success, #22c55e);
      animation: empOverviewPulse 2.4s ease-in-out infinite;
    }
    .emp-overview-status-line--paused .emp-overview-status-dot {
      background: var(--warning, #f59e0b);
      animation: none;
    }
    @keyframes empOverviewPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
      50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .emp-overview-status-line--active .emp-overview-status-dot { animation: none; }
    }
    .emp-overview-hidden-meta {
      display: none !important;
    }
    .emp-overview-metrics {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      margin: 1.1rem auto 0.95rem;
      max-width: 26rem;
      padding: 0.5rem 0.25rem;
      border-radius: 14px;
      background: var(--surface-hover);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);
    }
    .emp-overview-metric {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.18rem;
      padding: 0.25rem 0.5rem;
      min-width: 0;
      position: relative;
    }
    .emp-overview-metric + .emp-overview-metric::before {
      content: '';
      position: absolute;
      left: 0;
      top: 14%;
      bottom: 14%;
      width: 1px;
      background: var(--border);
      opacity: 0.85;
    }
    .emp-overview-metric__value {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .emp-overview-metric__label {
      font-size: 0.66rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      line-height: 1;
    }
    /* Specialist Overview tab — single clean mobile pass (no color-mix; matches desktop hierarchy) */
    @media (max-width: 768px) {
      #employee-settings-modal #emp-settings-panel-overview {
        padding: 0.6rem 0.75rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
        gap: 0;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-mobile-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem 1.1rem 1.1rem;
        border-radius: 20px;
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 0 0 0 0.5px var(--border), 0 8px 30px rgba(15, 23, 42, 0.08);
        gap: 0;
        width: 100%;
        box-sizing: border-box;
      }
      [data-theme="dark"] #employee-settings-modal #emp-settings-panel-overview .emp-overview-mobile-card {
        box-shadow: 0 0 0 0.5px var(--border), 0 10px 38px rgba(0, 0, 0, 0.38);
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-settings-overview-hero {
        width: 100%;
        padding: 0;
        gap: 0;
        margin-bottom: 0;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-settings-avatar-hit--hero {
        margin: 0 auto 0.65rem;
      }
      #employee-settings-modal #emp-settings-panel-overview #emp-settings-avatar.emp-settings-avatar--hero {
        width: 62px !important;
        height: 62px !important;
        font-size: 1.75rem !important;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-settings-name-input--hero {
        font-size: 1.25rem !important;
        min-height: 40px;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-settings-name-input--hero:focus {
        background: var(--surface-hover);
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
        outline: none;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-role {
        margin-top: 0.18rem;
        font-size: 0.82rem;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-tagline {
        font-size: 1rem;
        margin: 0.6rem auto 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.35rem 0.5rem;
        background: transparent;
        border: 1px solid transparent;
        box-shadow: none;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-tagline:focus {
        background: var(--surface-hover);
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
        font-style: normal;
        outline: none;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-status-line {
        margin-top: 0.55rem;
        justify-content: center;
        flex-wrap: wrap;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-status-line__text {
        white-space: normal;
        text-align: center;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-metrics {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 1rem 0 0;
        padding: 0.4rem 0.2rem;
        border-radius: 14px;
        background: var(--surface-hover);
        border: 1px solid var(--border);
        box-shadow: none;
        gap: 0;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-metric {
        flex: 1 1 0;
        padding: 0.3rem 0.4rem;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-metric + .emp-overview-metric::before {
        display: block;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-metric__value {
        font-size: 0.95rem;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-metric__label {
        font-size: 0.6rem;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-cta-row {
        width: 100%;
        max-width: 100%;
        margin: 0.9rem 0 0;
        gap: 0.45rem;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-cta {
        min-height: 48px;
        font-size: 1rem;
        border-radius: 999px;
        width: 100%;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-copy-link {
        font-size: 0.72rem;
        min-height: 40px;
        width: 100%;
        text-align: center;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-customize-disclosure {
        margin: 0.65rem 0 0;
        max-width: none;
        width: 100%;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface-hover);
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-customize-disclosure__summary {
        padding: 0.6rem 0.85rem;
        justify-content: flex-start;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-workflow-row {
        max-width: none;
        width: 100%;
        margin: 0.65rem 0 0;
        border-radius: 14px;
      }
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-danger-row {
        max-width: none;
        width: 100%;
        margin: 0.9rem 0 0.5rem;
        padding-top: 0.9rem;
      }
      #employee-settings-modal .emp-customize-disclosure__emoji-input.channel-input {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
      }
    }
    @media (max-width: 768px) and (hover: none) {
      #employee-settings-modal #emp-settings-panel-overview .emp-settings-name-input--hero:hover,
      #employee-settings-modal #emp-settings-panel-overview .emp-overview-tagline:hover {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: inherit;
      }
    }
    .emp-overview-cta-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      margin: 0 auto 0.4rem;
      max-width: 26rem;
    }
    #employee-settings-modal .emp-overview-cta {
      width: 100%;
      min-height: 44px;
      padding: 0.6rem 1.4rem;
      border-radius: 999px;
      font-size: 0.96rem;
      font-weight: 600;
      letter-spacing: 0.005em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
    }
    #employee-settings-modal .emp-overview-cta:not(:disabled):hover {
      transform: translateY(-1px) scale(1.005);
      box-shadow: 0 6px 18px rgba(20, 184, 166, 0.25);
    }
    #employee-settings-modal .emp-overview-cta:not(:disabled):active {
      transform: translateY(0) scale(0.995);
    }
    #employee-settings-modal .emp-overview-cta:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .emp-overview-cta__chev {
      font-size: 1.05rem;
      line-height: 1;
      transform: translateY(-1px);
    }
    .emp-overview-copy-link {
      font-size: 0.74rem;
      font-weight: 500;
      color: var(--muted);
      background: transparent;
      border: none;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
      border-radius: 6px;
      transition: color 0.14s ease, background 0.14s ease;
    }
    .emp-overview-copy-link:hover:not(:disabled) {
      color: var(--text);
      background: var(--surface-hover);
    }
    .emp-overview-copy-link:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .emp-overview-copy-link:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .emp-customize-disclosure {
      margin: 1.1rem auto 0;
      max-width: 26rem;
      border-radius: 12px;
      background: transparent;
      border: 1px solid transparent;
      transition: background 0.14s ease, border-color 0.14s ease;
    }
    .emp-customize-disclosure[open] {
      background: var(--surface-hover);
      border-color: var(--border);
    }
    .emp-customize-disclosure__summary {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
      list-style: none;
      padding: 0.5rem 0.75rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
      user-select: none;
      width: 100%;
      box-sizing: border-box;
      justify-content: center;
      border-radius: 12px;
    }
    .emp-customize-disclosure__summary::-webkit-details-marker { display: none; }
    .emp-customize-disclosure__summary:hover { color: var(--text); }
    .emp-customize-disclosure__summary:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .emp-customize-disclosure__chev {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6px;
      border-color: transparent transparent transparent currentColor;
      transition: transform 0.18s ease;
    }
    .emp-customize-disclosure[open] .emp-customize-disclosure__chev {
      transform: rotate(90deg);
    }
    .emp-customize-disclosure__body {
      padding: 0.4rem 0.85rem 0.85rem;
    }
    .emp-customize-disclosure__color-label {
      display: block;
      margin-top: 0.7rem;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 0.25rem;
    }
    #employee-settings-modal .emp-customize-disclosure__emoji-input {
      margin-top: 0.55rem;
    }
    .emp-overview-workflow-row {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      flex-wrap: wrap;
      margin: 1rem auto 0;
      max-width: 26rem;
      padding: 0.6rem 0.85rem;
      border-radius: 12px;
      background: var(--surface-hover);
      border: 1px solid var(--border);
    }
    .emp-overview-workflow-row__body {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 0.82rem;
      color: var(--text);
    }
    .emp-overview-workflow-row__body p,
    .emp-overview-workflow-row__body strong {
      font-size: 0.82rem;
    }
    .emp-overview-workflow-row__body .emp-pipeline-membership-row {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      margin: 0;
    }
    .emp-overview-workflow-row__actions {
      flex-shrink: 0;
    }
    .emp-overview-workflow-link {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--brand);
      background: transparent;
      border: none;
      padding: 0.2rem 0.4rem;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.14s ease;
    }
    .emp-overview-workflow-link:hover { background: var(--brand-soft); }
    .emp-overview-workflow-link:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .emp-overview-danger-row {
      display: flex;
      justify-content: center;
      margin: 1.4rem auto 0.4rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--border);
      max-width: 26rem;
    }
    .emp-overview-danger-link {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--error, #ef4444);
      background: transparent;
      border: none;
      padding: 0.3rem 0.6rem;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .emp-overview-danger-link:hover {
      background: var(--error-soft, rgba(239, 68, 68, 0.1));
      color: var(--error, #ef4444);
    }
    .emp-overview-danger-link:focus-visible {
      outline: 2px solid var(--error, #ef4444);
      outline-offset: 2px;
    }
    /* Legacy stats grid + thread details kept harmless if anything still references them. */
    .emp-settings-stats-grid { display: contents; }
    .emp-settings-stat-card { display: contents; }
    .emp-settings-section-divider { display: none; }
    .emp-settings-thread-details { display: none; }
    .emp-settings-hero-status-row { display: contents; }
    .emp-settings-status-line--hero { display: none; }
    .emp-card-context {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      padding: 0.38rem 0.48rem;
      margin: -0.2rem -0.1rem 0.75rem;
      border: none;
      border-radius: 10px;
      background: transparent;
      cursor: pointer;
      font: inherit;
      text-align: left;
      color: inherit;
      transition: background 0.12s ease;
    }
    .emp-card-context:hover {
      background: var(--surface-hover);
    }
    .emp-card-context:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    #employee-settings-modal .emp-card-context-mini-avatar {
      width: 28px !important;
      height: 28px !important;
      font-size: 0.92rem !important;
      flex-shrink: 0;
      margin: 0 !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    .emp-card-context__meta {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      flex-wrap: wrap;
      min-width: 0;
      flex: 1;
    }
    .emp-card-context__name {
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--text);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .emp-card-context__suffix {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
    }
    .emp-settings-error-banner {
      margin: 0.55rem 1rem 0; padding: 0.65rem 1rem; border-radius: 10px; border-left: 3px solid var(--error);
      background: var(--error-soft, rgba(239,68,68,0.12)); color: var(--text); font-size: 0.875rem; line-height: 1.45;
    }
    /* Persona + duty prompts: global .channel-input max-width:280px is too narrow here */
    #employee-settings-modal textarea.channel-input {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-right: 0;
    }
    #employee-settings-modal .emp-duty-prompt-display {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      min-height: 6rem;
    }
    .emp-settings-overview.emp-settings-overview--compact {
      display: flex; flex-direction: column; gap: 0.45rem;
      padding: 0.6rem 0.75rem;
      margin-bottom: 0.75rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-alt, var(--surface-hover));
    }
    .emp-settings-overview__top {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: start;
    }
    @media (max-width: 480px) {
      .emp-settings-overview__top { grid-template-columns: 1fr; }
    }
    .emp-settings-overview__row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      align-items: start;
    }
    @media (max-width: 480px) {
      .emp-settings-overview__row2 { grid-template-columns: 1fr; }
    }
    .emp-settings-overview__value--sub {
      font-size: 0.8rem; font-weight: 500; color: var(--text-soft);
      line-height: 1.35; word-break: break-word;
    }
    .emp-settings-overview__actions--primary {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
      margin-top: 0.12rem;
    }
    .emp-settings-overview__actions--primary .emp-settings-open-chat-btn { font-weight: 600; }
    .emp-settings-overview__since { margin-top: 0; }
    .emp-settings-thread-details { margin-top: 0.15rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
    .emp-settings-thread-details__summary {
      cursor: pointer; padding: 0.45rem 0.65rem; font-size: 0.78rem; font-weight: 600; color: var(--text-soft);
      list-style: none; user-select: none;
    }
    .emp-settings-thread-details__summary::-webkit-details-marker { display: none; }
    .emp-settings-thread-details__body { padding: 0 0.65rem 0.65rem; }
    .emp-settings-overview:not(.emp-settings-overview--compact) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.65rem;
      padding: 0.85rem 1rem;
      margin-bottom: 1.15rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--bg-alt, var(--surface-hover));
    }
    .emp-settings-overview__stat {
      display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
    }
    .emp-settings-overview__label {
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
    }
    .emp-settings-overview__value { font-size: 0.875rem; font-weight: 600; color: var(--text); word-break: break-all; }
    .emp-settings-overview__value--mono { font-family: ui-monospace, monospace; font-size: 0.78rem; font-weight: 500; }
    .emp-settings-overview__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
    .emp-settings-overview__thread-line {
      font-size: 0.78rem; color: var(--text-soft); word-break: break-all; line-height: 1.4;
    }
    .emp-settings-status-pill {
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
      width: fit-content; letter-spacing: 0.02em;
    }
    .emp-settings-status-pill--active { background: var(--success-soft, rgba(34,197,94,0.15)); color: var(--success, #15803d); }
    .emp-settings-status-pill--paused { background: var(--surface-hover); color: var(--muted); }
    .emp-settings-status-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
    .emp-settings-panel {
      margin-bottom: 0.8rem;
      padding: 0.75rem 0.88rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: none;
    }
    [data-theme="dark"] .emp-settings-panel { box-shadow: none; }
    .emp-settings-panel__head { margin-bottom: 0.55rem; }
    .emp-settings-rail {
      display: flex; align-items: center; gap: 0.55rem; margin: 0.1rem 0 0.45rem; color: var(--muted);
    }
    .emp-settings-rail::before,
    .emp-settings-rail::after {
      content: '';
      flex: 1; height: 1px; background: var(--border); opacity: 0.9;
    }
    .emp-settings-rail__label {
      font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
    }
    .emp-settings-section-nav {
      display: none;
      flex-wrap: wrap;
      align-content: flex-start;
      align-items: center;
      gap: 0.3rem 0.35rem;
      padding: 0 0 0.5rem;
      margin: 0 0 0.45rem;
    }
    @media (min-width: 769px) {
      #employee-settings-modal .emp-settings-section-nav {
        display: flex;
      }
    }
    .emp-settings-nav-eyebrow {
      width: 100%;
      flex: 0 0 100%;
      font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--muted);
      margin: 0.2rem 0 0.05rem; padding: 0 0.1rem;
    }
    .emp-settings-nav-eyebrow + .emp-settings-nav-eyebrow { margin-top: 0.5rem; }
    .emp-settings-nav-sep {
      width: 1px; height: 1rem; background: var(--border); margin: 0 0.15rem; align-self: center; flex-shrink: 0; opacity: 0.9;
    }
    .emp-settings-section-nav__chip {
      flex: 0 0 auto;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-soft);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .emp-settings-section-nav__chip:hover {
      border-color: rgba(var(--brand-rgb), 0.35);
      color: var(--brand);
      background: var(--brand-soft);
    }
    .emp-settings-section-nav__chip:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .emp-settings-system-prompt-input {
      min-height: 12rem;
    }
    .emp-settings-panel__title {
      margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
    }
    .emp-settings-panel__lede {
      margin: 0.18rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.42;
    }
    .emp-settings-back-btn {
      display: none; align-items: center; justify-content: center;
      width: 40px; height: 40px; margin-right: 0.25rem; flex-shrink: 0;
      border: none; border-radius: 10px; background: var(--surface-hover); color: var(--text);
      font-size: 1.15rem; line-height: 1; cursor: pointer; font-family: inherit;
    }
    .emp-settings-back-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-section { margin-bottom: 0; }
    .emp-settings-section:not(.emp-settings-panel) > h5 { display: none; }
    .emp-settings-section .channel-hint { margin-top: 0.35rem; }
    .emp-settings-inline-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.65rem; }
    .emp-settings-avatar-preview-wrap {
      display: flex; justify-content: center; margin-bottom: 0.85rem;
    }
    #emp-settings-avatar-preview.hire-card-avatar {
      width: 56px; height: 56px; font-size: 1.75rem; margin-bottom: 0;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
    .emp-settings-emoji-grid {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin-top: 0.35rem;
    }
    .emp-settings-emoji-btn {
      width: 100%; aspect-ratio: 1; max-height: 40px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--surface-hover); cursor: pointer;
      font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center;
      transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    }
    .emp-settings-emoji-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
    .emp-settings-emoji-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-emoji-btn--selected {
      border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); background: var(--brand-soft);
    }
    .emp-settings-color-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
    }
    .emp-settings-color-swatch {
      width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
      flex-shrink: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
      transition: transform 0.12s, box-shadow 0.12s;
    }
    [data-theme="dark"] .emp-settings-color-swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
    .emp-settings-color-swatch:hover { transform: scale(1.06); }
    .emp-settings-color-swatch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-color-swatch--selected {
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
    }
    .emp-settings-color-native {
      width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
      cursor: pointer; background: var(--surface); flex-shrink: 0;
    }
    .emp-settings-color-native::-webkit-color-swatch-wrapper { padding: 2px; }
    .emp-settings-color-native::-webkit-color-swatch { border-radius: 6px; border: none; }
    .emp-settings-copy-id {
      font-size: 0.72rem; padding: 0.25rem 0.5rem; border-radius: 6px;
      border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer;
    }
    .emp-settings-copy-id:hover { border-color: var(--brand); color: var(--brand); }
    .emp-settings-footer {
      display: none; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end;
      flex-shrink: 0;
      position: relative;
      z-index: 12;
      padding: 0.75rem 1.25rem;
      margin: 0;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.04) 0%, var(--surface) 35%);
      box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    }
    [data-theme="dark"] .emp-settings-footer { box-shadow: 0 -4px 24px rgba(0,0,0,0.35); }
    .emp-settings-footer.emp-settings-footer--visible { display: flex; }
    .emp-settings-footer-hint {
      font-size: 0.8125rem; color: var(--muted); flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem;
    }
    .emp-settings-footer-dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--warning, #f59e0b); flex-shrink: 0;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
    }
    .emp-byte-counter {
      font-size: 0.75rem; color: var(--muted); margin: 0.35rem 0 0; text-align: right;
    }
    .emp-byte-counter.emp-byte-counter--warn { color: var(--warning, #b45309); font-weight: 600; }
    .emp-byte-counter.emp-byte-counter--danger { color: var(--error); font-weight: 700; }
    .emp-settings-auto-row {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-alt, var(--surface-hover));
    }
    .emp-settings-auto-row__text { min-width: 0; flex: 1; }
    .emp-settings-auto-row__label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .emp-settings-auto-row__hint { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; }
    .emp-settings-automation-toggle {
      flex-shrink: 0; width: 48px; height: 28px; border-radius: 999px; border: none; padding: 3px; cursor: pointer;
      position: relative; background: var(--border); transition: background 0.15s;
    }
    .emp-settings-automation-toggle[aria-checked="true"] { background: var(--success, #22c55e); }
    .emp-settings-automation-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-settings-automation-toggle-thumb {
      width: 22px; height: 22px; border-radius: 50%; background: #fff; display: block; position: absolute; top: 3px; left: 3px;
      transition: transform 0.15s; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .emp-settings-automation-toggle[aria-checked="true"] .emp-settings-automation-toggle-thumb { transform: translateX(20px); }
    .emp-skill-row {
      display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 12px;
      border: 1px solid var(--border); background: var(--surface); transition: border-color 0.15s, background 0.15s;
    }
    .emp-skill-row--active {
      border-color: rgba(var(--brand-rgb), 0.35); background: var(--brand-soft);
    }
    .emp-skill-meta { flex: 1; min-width: 0; }
    .emp-skill-icon { font-size: 1.2rem; width: 32px; text-align: center; flex-shrink: 0; line-height: 1; }
    .emp-skill-label { font-size: 0.9rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
    .emp-skill-desc { font-size: 0.75rem; color: var(--muted); margin-top: 0.12rem; line-height: 1.4; }
    .emp-skill-toggle {
      flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px; border: none; padding: 3px; cursor: pointer;
      position: relative; background: var(--border); transition: background 0.15s;
    }
    .emp-skill-toggle[aria-checked="true"] { background: var(--brand); }
    .emp-skill-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .emp-skill-toggle-thumb {
      width: 18px; height: 18px; border-radius: 50%; background: #fff; display: block; position: absolute; top: 3px; left: 3px;
      transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .emp-skill-toggle[aria-checked="true"] .emp-skill-toggle-thumb { transform: translateX(20px); }
    .emp-skills-grid--cards { display: flex; flex-direction: column; gap: 0.5rem; }
    .emp-danger-zone--styled {
      border: 1px solid rgba(239, 68, 68, 0.25); border-left-width: 3px; border-left-color: var(--error);
      background: rgba(239, 68, 68, 0.06);
    }
    [data-theme="dark"] .emp-danger-zone--styled { background: rgba(239, 68, 68, 0.1); }
    .emp-danger-zone__warn { margin-right: 0.35rem; }
    #employee-settings-modal .emp-settings-cloudia-remove-wrap {
      margin-top: 1rem;
      padding: 1rem 0 0;
      border-top: 1px dashed var(--border);
    }
    /* .btn-danger: single definition in canonical button block above */
    .emp-duty-card {
      border: 1px solid var(--border, rgba(0,0,0,0.12));
      border-radius: 12px;
      padding: 0.85rem 0.95rem;
      margin-bottom: 0.75rem;
      background: var(--surface, #fff);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .emp-duty-card:hover { border-color: rgba(20, 184, 166, 0.35); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
    [data-theme="dark"] .emp-duty-card { border-color: rgba(255,255,255,0.1); }
    .emp-duty-card__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
    .emp-duty-name { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
    .emp-duty-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; width: 100%; }
    .emp-duty-chip {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 999px;
      background: var(--surface-hover); color: var(--text-soft); border: 1px solid var(--border);
    }
    .emp-duty-chip--brand { background: var(--brand-soft); color: var(--brand); border-color: rgba(20, 184, 166, 0.25); }
    .emp-duty-chip--muted { color: var(--muted); }
    .emp-duty-chip--ok { background: var(--success-soft, rgba(34,197,94,0.12)); color: var(--success, #15803d); border-color: transparent; }
    .emp-duty-chip--warn { background: var(--error-soft); color: var(--error); border-color: transparent; }
    .emp-duty-meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
    .emp-duty-meta code { font-size: 0.68rem; padding: 0.1rem 0.3rem; border-radius: 4px; background: var(--surface-hover); }
    .emp-duty-preview { margin: 0.35rem 0 0; font-size: 0.78rem; max-height: 3.2em; overflow: hidden; }
    .emp-duty-prompt-label {
      display: block; margin-top: 0.65rem; font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
    }
    .emp-duty-prompt-display {
      margin-top: 0.35rem; padding: 0.55rem 0.65rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-alt, var(--surface-hover)); font-size: 0.875rem; line-height: 1.5;
      color: var(--text-soft); white-space: pre-wrap; word-break: break-word; min-height: 5rem;
    }
    .emp-duty-card--editing .emp-duty-prompt-display { display: none; }
    .emp-duty-card--editing .emp-duty-display-name { display: none; }
    .emp-duty-card--editing .emp-duty-chips { display: none; }
    .emp-duty-card--editing .emp-duty-edit-fields { display: block; }
    .emp-duty-card--editing .emp-duty-prompt-input { display: block !important; }
    .emp-duty-card--editing .emp-duty-foot-secondary { display: none; }
    .emp-duty-card--editing .emp-duty-edit { display: none; }
    .emp-duty-save, .emp-duty-cancel { display: none; }
    .emp-duty-card--editing .emp-duty-save, .emp-duty-card--editing .emp-duty-cancel { display: inline-block; }
    .emp-duty-edit-fields { display: none; margin-top: 0.5rem; }
    .emp-duty-edit-fields label { display: block; margin-top: 0.45rem; font-size: 0.78rem; color: var(--muted); }
    .emp-duty-edit-fields label:first-child { margin-top: 0; }
    .emp-duty-prompt-input { display: none; }
    .emp-duty-cron-hint { display: none; margin-top: 0.25rem; font-size: 0.78rem; color: var(--error); }
    .emp-duty-cron-hint.emp-duty-cron-hint--visible { display: block; }
    .emp-item-role { font-size: 0.75rem; font-weight: 500; color: var(--text-soft); font-family: inherit; }
    .emp-item-chain { font-size: 0.75rem; color: var(--muted); opacity: 0.88; margin-top: 0.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .emp-item-chain--more { font-weight: 600; }
    .thread-section-header--specialists .thread-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; }
    .emp-sidebar-toolbar { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.2rem 0.5rem 0.45rem; border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; }
    .emp-sidebar-toolbar .btn-sm { font-size: 0.72rem; padding: 0.2rem 0.45rem; }
    .emp-pipeline-group {
      margin: 0.35rem 0.5rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    [data-theme="dark"] .emp-pipeline-group { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
    .emp-pipeline-group__summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.2rem;
      padding: 0.7rem 0.85rem;
      min-height: 48px;
      box-sizing: border-box;
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      position: relative;
      transition: background 0.15s ease;
      background: var(--bg-alt);
      border-bottom: 1px solid var(--border);
    }
    .emp-pipeline-group[open] > .emp-pipeline-group__summary { border-bottom-color: var(--border); }
    .emp-pipeline-group__summary:hover { background: var(--surface-hover); }
    .emp-pipeline-group__summary::-webkit-details-marker { display: none; }
    /* Disclosure chevron: points right when collapsed, rotates to down when open (common list / accordion pattern). */
    .emp-pipeline-group__chev-wrap {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin-left: auto;
      border-radius: 10px;
      color: var(--muted);
      background: rgba(var(--surface-rgb), 0.65);
      border: 1px solid var(--border);
      box-sizing: border-box;
    }
    .emp-pipeline-group__summary:hover .emp-pipeline-group__chev-wrap {
      color: var(--text);
      background: var(--surface-hover);
    }
    .emp-pipeline-group__chev {
      display: block;
      transform: rotate(0deg);
      transition: transform 0.2s var(--ease-out, ease);
    }
    .emp-pipeline-group[open] > .emp-pipeline-group__summary .emp-pipeline-group__chev {
      transform: rotate(90deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .emp-pipeline-group__chev { transition-duration: 0.01ms !important; }
    }
    .emp-pipeline-group__summary:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: -2px;
    }
    .emp-pipeline-group__title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      padding-right: 0;
      box-sizing: border-box;
    }
    .emp-pipeline-group__title-text { flex: 1; min-width: 0; font-weight: inherit; }
    .emp-pipeline-group__color-dot {
      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
      background: var(--pipeline-group-dot, var(--brand));
      box-shadow: 0 0 0 2px rgba(var(--surface-rgb), 0.9);
    }
    .emp-pipeline-group__meta-row {
      width: 100%;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.02em;
      margin-top: 0.08rem;
    }
    .emp-pipeline-group__state { display: none; line-height: 1.35; }
    .emp-pipeline-group:not([open]) > .emp-pipeline-group__summary .emp-pipeline-group__state--collapsed { display: block; }
    .emp-pipeline-group[open] > .emp-pipeline-group__summary .emp-pipeline-group__state--expanded { display: block; }
    .emp-pipeline-group__summary .emp-pipeline-group__stepchip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 6px;
      border-radius: 8px;
      background: var(--surface-hover);
      color: var(--text-soft);
      border: 1px solid var(--border);
      font-size: 0.7rem;
      font-weight: 700;
    }
    .emp-pipeline-group__summary .emp-pipeline-strip-node {
      width: 28px; height: 28px; font-size: 0.78rem;
    }
    .emp-pipeline-group__summary > .emp-pipeline-strip {
      width: 100%;
      margin-top: 0.15rem;
    }
    .emp-pipeline-group:not([open]) > .emp-pipeline-group__body {
      display: none;
    }
    .emp-pipeline-group__body .emp-item { margin-left: 0.35rem; margin-right: 0.35rem; }
    .emp-pipeline-group__body .emp-item:last-child { margin-bottom: 0.45rem; }
    .emp-pipeline-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; font-size: 0.65rem; }
    .emp-pipeline-strip-node { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; border: 1px solid var(--border); }
    .emp-pipeline-strip--card .emp-pipeline-strip-node,
    .pipelines-card .emp-pipeline-strip-node {
      width: 32px; height: 32px; font-size: 0.9rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .emp-pipeline-strip-join { color: var(--muted); margin: 0 0.05rem; }
    .emp-duty-chain-row { margin: 0.25rem 0 0.15rem; font-size: 0.72rem; color: var(--muted); }
    .emp-duty-chain-badge {
      display: inline-block; padding: 0.18rem 0.55rem; border-radius: 8px; margin-right: 0.35rem;
      font-weight: 600; font-size: 0.75rem;
      background: var(--brand-soft); border: 1px solid rgba(var(--brand-rgb), 0.25); color: var(--brand);
    }
    .emp-duty-chain-badge--upstream {
      background: var(--surface-hover); border: 1px solid var(--border); border-style: solid; color: var(--text-soft);
    }
    .emp-duty-run-ribbon--ok { border-left: 4px solid var(--success, #22c55e); padding-left: calc(0.95rem + 1px); }
    .emp-duty-run-ribbon--bad { border-left: 4px solid var(--error, #ef4444); padding-left: calc(0.95rem + 1px); }
    .emp-duty-run-ribbon--muted { border-left: 4px solid var(--muted, #94a3b8); padding-left: calc(0.95rem + 1px); }
    .emp-duty-run-ribbon--running {
      border-left: 4px solid var(--brand, #14b8a6);
      padding-left: calc(0.95rem + 1px);
      animation: emp-duty-ribbon-pulse 1.2s ease-in-out infinite;
    }
    @keyframes emp-duty-ribbon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
    .emp-duty-chip--running {
      background: var(--brand-soft, rgba(20, 184, 166, 0.15));
      color: var(--brand, #14b8a6);
      border-color: rgba(20, 184, 166, 0.35);
    }
    /* Duty live scratch board — card ticker */
    .emp-duty-scratch-ticker {
      display: flex; align-items: flex-start; gap: 0.4rem;
      margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--text-soft);
      line-height: 1.4; transition: opacity 0.4s;
    }
    .emp-duty-scratch-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 0.25rem;
      background: var(--brand, #14b8a6);
      animation: emp-duty-ribbon-pulse 1.2s ease-in-out infinite;
    }
    .emp-duty-scratch-ticker-text {
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
    }
    /* Automate — scheduled task card live scratch (duty-scratch SSE) */
    .schedule-task-scratch-ticker {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      margin: 0.4rem 0 0;
      padding: 0.35rem 0.5rem;
      border-radius: 8px;
      background: var(--surface-hover, rgba(0, 0, 0, 0.04));
      border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
      font-size: 0.72rem;
      color: var(--text-soft);
      line-height: 1.4;
      transition: opacity 0.35s;
      min-width: 0;
    }
    .schedule-task-scratch-ticker[hidden] { display: none !important; }
    .schedule-task-scratch-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 0.25rem;
      background: var(--brand, #14b8a6);
      animation: emp-duty-ribbon-pulse 1.2s ease-in-out infinite;
    }
    .schedule-task-scratch-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
      flex: 1;
      min-width: 0;
    }
    .schedule-task-scratch-rounds {
      flex-shrink: 0;
      font-size: 0.68rem;
      opacity: 0.75;
      white-space: nowrap;
      align-self: center;
      padding: 0.1rem 0.35rem;
      border-radius: 6px;
      background: var(--brand-soft, rgba(20, 184, 166, 0.12));
      color: var(--brand, #14b8a6);
    }
    /* Duty live scratch board — thread block */
    .duty-scratch-msg { margin: 0.25rem 0 0.5rem; max-width: 100%; }
    .duty-scratch-details {
      border: 1px solid var(--border);
      border-left: 3px solid var(--brand, #14b8a6);
      border-radius: 10px; background: var(--surface-hover);
      font-size: 0.8rem; color: var(--muted); overflow: hidden;
    }
    .duty-scratch-summary {
      cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 0.75rem; font-style: italic; color: var(--muted-soft, var(--muted));
      user-select: none; list-style: none;
    }
    .duty-scratch-summary::-webkit-details-marker { display: none; }
    .duty-scratch-dot-thread {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
      background: var(--brand, #14b8a6);
      animation: emp-duty-ribbon-pulse 1.2s ease-in-out infinite;
    }
    .duty-scratch-details--done {
      border-left-color: var(--border);
      opacity: 0.92;
    }
    .duty-scratch-details--done .duty-scratch-summary {
      font-style: normal;
      color: var(--muted-soft, var(--muted));
    }
    .duty-scratch-token-hint {
      font-size: 0.72rem;
      opacity: 1;
      color: var(--text-soft);
      font-weight: 600;
    }
    .duty-scratch-body {
      padding: 0.55rem 0.85rem 0.65rem; border-top: 1px solid var(--border);
      white-space: pre-wrap; word-break: break-word;
      line-height: 1.55; max-height: 320px; overflow-y: auto;
      background: var(--bg-alt, var(--surface));
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    /* Full-width in chat column (desktop + mobile; beats .msg max-width: 65% / 90%) */
    .msg.duty-scratch-msg {
      max-width: 100%;
      width: 100%;
      align-self: stretch;
      box-sizing: border-box;
      margin-left: 0;
      margin-right: 0;
    }
    .duty-scratch-details { box-sizing: border-box; }
    .emp-duty-card--editing .emp-duty-scratch-ticker { display: none !important; }
    .emp-duty-scratch-ticker { min-width: 0; }
    .emp-duty-scratch-ticker-text { min-width: 0; flex: 1; }
    @media (max-width: 768px) {
      .duty-scratch-summary {
        min-height: 44px;
        padding: 0.55rem 0.85rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      .duty-scratch-body {
        max-height: min(42vh, 260px);
      }
      .duty-scratch-details {
        font-size: 0.8125rem;
      }
      .emp-duty-scratch-ticker {
        font-size: 0.76rem;
        padding-right: 0.15rem;
      }
      .schedule-task-scratch-ticker {
        font-size: 0.76rem;
        padding: 0.4rem 0.55rem;
      }
    }
    .emp-pipeline-membership-row {
      border: 1px solid var(--border);
      border-left: 4px solid var(--pipeline-accent, var(--brand));
      border-radius: 10px;
      padding: 0.65rem 0.75rem;
      margin-bottom: 0.65rem;
      background: var(--surface-hover);
    }
    .emp-pipeline-membership-row strong {
      font-size: 0.9375rem; font-weight: 700; display: block; margin-bottom: 0.2rem;
    }
    @keyframes pipelines-shimmer {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .pipelines-skeleton-row {
      height: 72px; border-radius: 16px; margin-bottom: 0.5rem;
      background: linear-gradient(90deg, var(--surface-hover) 25%, var(--bg-alt) 50%, var(--surface-hover) 75%);
      background-size: 400px 100%;
      animation: pipelines-shimmer 1.4s ease infinite;
    }
    .pipelines-panel-root { flex: 1; overflow: auto; padding: 0.75rem 1rem 1.5rem; min-height: 0; background: var(--bg-alt); }
    .pipelines-split { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
    .pipelines-list {
      flex: 0 1 min(260px, 28%); min-width: 180px; max-width: 280px;
      display: flex; flex-direction: column; gap: 0.55rem;
      position: sticky; top: 0; align-self: flex-start; z-index: 1;
    }
    .pipelines-card {
      text-align: left; border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem;
      background: var(--surface); cursor: pointer; font: inherit; color: var(--text);
      box-shadow: var(--shadow-sm);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .pipelines-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
    .pipelines-card--active {
      border-color: var(--brand); background: var(--brand-soft);
      box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-sm);
    }
    .pipeline-architect-custom-card-wrap { margin: 0 0 0.85rem; width: 100%; max-width: 100%; }
    /* Cloudia “plate” card pictogram (pipelines CTA + Team card) */
    .pipeline-architect-custom-card__mascot,
    .team-architect-card__mascot {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pipeline-architect-custom-card__mascot .emp-cloudia-mascot,
    .team-architect-card__mascot .emp-cloudia-mascot {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    .pipeline-architect-custom-card {
      display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; text-align: left;
      padding: 0.85rem 1rem; border-radius: 14px;
      border: 1.5px solid rgba(var(--brand-rgb), 0.35);
      background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 60%);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
      cursor: pointer; font: inherit; color: inherit;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    }
    .pipeline-architect-custom-card:hover {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .pipeline-architect-custom-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .pipeline-architect-custom-card__mascot .cloudia-orb,
    .team-architect-card__mascot .cloudia-orb {
      width: 100%;
      height: 100%;
    }
    .pipeline-architect-custom-card__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
    .pipeline-architect-custom-card__title { font-weight: 800; font-size: 0.95rem; color: var(--text); letter-spacing: -0.02em; }
    .pipeline-architect-custom-card__sub { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
    .pipelines-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.4rem; }
    .pipelines-card-title { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
    .pipelines-health-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .pipelines-health-dot--ok { background: var(--success, #22c55e); }
    .pipelines-health-dot--warn { background: var(--warning, #f59e0b); }
    .pipelines-health-dot--muted { background: var(--muted, #94a3b8); }
    .pipelines-card-meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.35; }
    .pipelines-detail {
      flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem;
      background: var(--surface); box-shadow: var(--shadow);
    }
    .pipelines-back-mobile { display: none; margin-bottom: 0.65rem; }
    .pipelines-flow-wrap { overflow-x: auto; margin: 0.5rem 0; }
    .pipelines-flow-svg { width: 100%; max-width: 100%; height: auto; }
    .pipelines-subheading { font-size: 0.9rem; font-weight: 700; margin: 0.85rem 0 0.4rem; color: var(--text); letter-spacing: -0.02em; }
    .pipelines-tl-header {
      display: grid; grid-template-columns: 180px 1fr 140px; gap: 0.45rem; align-items: center;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
      margin-bottom: 0.35rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
    }
    .pipelines-tl-row {
      display: grid; grid-template-columns: 180px 1fr 140px; gap: 0.45rem; align-items: center;
      font-size: 0.8125rem; margin-bottom: 0.35rem;
    }
    .pipelines-tl-label {
      display: flex; align-items: center; gap: 0.4rem; min-width: 0;
      font-weight: 500; color: var(--text-soft);
    }
    .pipelines-tl-avatar {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; line-height: 1;
      flex-shrink: 0;
    }
    .pipelines-tl-bar-wrap {
      background: var(--surface-hover); border-radius: 6px; height: 10px; overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .pipelines-tl-bar { height: 100%; min-width: 12px; border-radius: 6px; transition: width 0.2s ease; }
    .pipelines-tl-bar--ok { background: linear-gradient(90deg, var(--success-soft, #d1fae5) 0%, var(--success, #10b981) 100%); }
    .pipelines-tl-bar--bad { background: linear-gradient(90deg, var(--error-soft, #fee2e2) 0%, var(--error, #ef4444) 100%); }
    .pipelines-tl-bar--muted { background: linear-gradient(90deg, var(--surface-hover) 0%, var(--muted, #94a3b8) 100%); }
    .pipelines-tl-time { font-size: 0.78rem; color: var(--muted); text-align: right; }
    .pipelines-state-table { width: 100%; border-spacing: 0; border-collapse: separate; font-size: 0.8125rem; margin-top: 0.5rem; }
    .pipelines-state-table th {
      background: var(--bg-alt); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--muted); padding: 0.45rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border);
    }
    .pipelines-state-table td { padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pipelines-state-table tr:last-child td { border-bottom: none; }
    .pipelines-state-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
    .pipelines-state-seg {
      font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--border);
    }
    .pipelines-state-seg--published { background: var(--success-soft); color: var(--success); border-color: transparent; }
    .pipelines-state-seg--skipped, .pipelines-state-seg--error { background: var(--error-soft); color: var(--error); border-color: transparent; }
    .pipelines-state-seg--intake, .pipelines-state-seg--enriching, .pipelines-state-seg--planned, .pipelines-state-seg--generating {
      background: var(--brand-soft); color: var(--brand); border-color: rgba(var(--brand-rgb), 0.2);
    }
    .pipelines-state-seg--default { background: var(--surface-hover); color: var(--text-soft); }
    .pipelines-status-badge {
      display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px;
      font-size: 0.68rem; font-weight: 600; border: 1px solid transparent;
    }
    .pipelines-status-badge--published { background: var(--success-soft); color: var(--success); }
    .pipelines-status-badge--skipped, .pipelines-status-badge--error { background: var(--error-soft); color: var(--error); }
    .pipelines-status-badge--intake, .pipelines-status-badge--enriching, .pipelines-status-badge--planned, .pipelines-status-badge--generating {
      background: var(--brand-soft); color: var(--brand);
    }
    .pipelines-status-badge--default { background: var(--surface-hover); color: var(--text-soft); border-color: var(--border); }
    .pipelines-state-error { color: var(--error); margin-bottom: 0.5rem; font-weight: 500; }
    .pipelines-state-raw { font-size: 0.8125rem; overflow: auto; max-height: 240px; background: var(--bg-alt); padding: 0.65rem; border-radius: 8px; border: 1px solid var(--border); }
    .pipelines-skeleton { padding: 0.5rem 0; color: var(--muted); }
    .pipelines-skeleton--hero { min-height: 0; }
    .pipelines-error-banner { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
    .pipelines-health-card {
      margin-top: 0.85rem; padding: 1rem 1.1rem; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 0.8125rem;
    }
    .pipelines-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
    .pipelines-health-stat { display: flex; flex-direction: column; gap: 0.2rem; }
    .pipelines-health-stat__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }
    .pipelines-health-stat__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    .pipelines-health-stat__hotspot-warn { color: var(--warning); font-weight: 600; font-size: 0.8125rem; }
    .pipelines-health-table { width: 100%; border-spacing: 0; font-size: 0.78rem; margin-top: 0.25rem; }
    .pipelines-health-table th, .pipelines-health-table td { padding: 0.4rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); }
    .pipelines-health-table th { color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .pipelines-health-table tr:last-child td { border-bottom: none; }
    .pipelines-health-note { font-size: 0.72rem; color: var(--muted); margin-top: 0.65rem; line-height: 1.45; }
    @media (max-width: 768px) {
      .pipelines-split { flex-direction: column; }
      .pipelines-list { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
      .pipelines-card { flex: 1 1 140px; }
      .pipelines-back-mobile { display: inline-block; }
      .pipelines-panel-root--mobile-detail .pipelines-detail {
        width: 100%;
        min-height: 40vh;
        box-sizing: border-box;
      }
    }
    .emp-cred-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.25rem; }
    .emp-cred-input-row .emp-cred-input { flex: 1; min-width: 0; }
    .emp-cred-row { margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
    .emp-cred-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .emp-skills-grid label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; cursor: pointer; }
    .emp-danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
    .emp-settings-panel.emp-danger-zone { margin-top: 1.15rem; padding-top: 1rem; border-top: none; }

    /* Hide chat input when viewing notifications thread */
    .chat-inputbar.notif-view { display: none; }
    /* Notifications thread: inbox-style feed (not chat bubbles) */
    .chat-log--notif-feed { padding: 0 0.35rem; }
    .chat-log-wrap--notifs {
      background-color: var(--chat-canvas-bg);
      background-image: var(--chat-canvas-veil);
    }
    [data-theme="dark"] .chat-log-wrap--notifs {
      background-color: var(--chat-canvas-bg);
      background-image: var(--chat-canvas-veil);
    }
    .notif-chat-feed { max-width: 520px; margin: 0 auto; padding-bottom: 1rem; }
    .notif-chat-feed-header {
      display: flex; align-items: flex-start; gap: 0.75rem;
      padding: 0.75rem 0.85rem; margin: 0 0 0.65rem;
      border-radius: var(--radius); border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: none;
    }
    [data-theme="dark"] .notif-chat-feed-header {
      background: var(--surface);
      box-shadow: none;
    }
    .notif-chat-feed-header-icon {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--brand-soft); color: var(--brand);
      box-shadow: none;
    }
    .notif-chat-feed-header-icon svg { width: 20px; height: 20px; }
    .notif-chat-feed-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0 0 0.2rem; }
    .notif-chat-feed-sub { font-size: 0.78rem; color: var(--muted); line-height: 1.45; margin: 0; }
    .notif-chat-feed-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .notif-chat-card {
      display: flex; gap: 0.75rem; align-items: stretch;
      padding: 0.65rem 0.75rem 0.65rem 0.6rem; margin: 0;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      border-left: 3px solid transparent;
      background: var(--wa-incoming);
      box-shadow: none;
    }
    [data-theme="dark"] .notif-chat-card {
      background: var(--wa-incoming);
      box-shadow: none;
    }
    .notif-chat-card.unread {
      border-left-color: var(--brand);
      background: var(--brand-soft);
    }
    [data-theme="dark"] .notif-chat-card.unread {
      background: rgba(20, 184, 166, 0.18);
    }
    .notif-chat-card-glyph-wrap {
      flex-shrink: 0; width: 38px; display: flex; justify-content: center; padding-top: 0.15rem;
    }
    .notif-chat-card-glyph {
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface-hover); color: var(--brand); border: 1px solid var(--border);
    }
    [data-theme="dark"] .notif-chat-card-glyph {
      background: var(--surface-hover); color: var(--brand); border-color: var(--border);
    }
    .notif-chat-card-glyph svg { width: 17px; height: 17px; }
    .notif-chat-card-main { flex: 1; min-width: 0; }
    .notif-chat-card-kicker {
      font-size: 0.68rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
      color: var(--muted); margin-bottom: 0.2rem;
    }
    .notif-chat-card.unread .notif-chat-card-kicker { color: var(--brand); }
    .notif-chat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
    .notif-chat-card-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0; line-height: 1.35; }
    .notif-chat-card.unread .notif-chat-card-title { font-weight: 700; }
    .notif-chat-card-status {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 0.2rem 0.45rem; border-radius: 6px; flex-shrink: 0;
    }
    .notif-chat-card-status--ok { background: var(--success-soft); color: var(--success); }
    .notif-chat-card-status--err { background: var(--error-soft); color: var(--error); }
    .notif-chat-card-status--na { background: var(--surface-hover); color: var(--muted); }
    .notif-chat-card-head-right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
    .notif-chat-card-tasks { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
    .notif-chat-card-body { font-size: 0.8125rem; color: var(--text-soft, var(--muted)); line-height: 1.55; }
    .notif-chat-card-time { font-size: 0.68rem; color: var(--muted); margin-top: 0.45rem; font-variant-numeric: tabular-nums; }
    .notif-chat-card-actions { margin-top: 0.5rem; }
    .notif-chat-empty {
      color: var(--muted); font-size: 0.875rem; text-align: center; padding: 2rem 1rem;
      border: 1px dashed var(--border); border-radius: var(--radius); margin-top: 0.5rem; background: var(--surface-hover);
    }
    /* Unread dot on sidebar / mobile Chat tab icon (matches hamburger + topbar) */
    .tab-notif-dot {
      position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; z-index: 3;
      border-radius: 50%; background: var(--brand);
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--brand-rgb), 0.35);
      display: none; pointer-events: none;
    }
    .tab-notif-dot.visible { display: block; animation: notifPop 0.3s ease; }
    @keyframes notifPop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
    /* Message footer: model + source + time */
    .msg-meta-tag { font-size: 0.625rem; color: var(--wa-footer-text); opacity: 0.85; }
    /* Account meta CSS (was inline) */
    .account-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }

    /* App-topbar: allow workspace segments to sit in the topbar */
    .app-topbar { flex-wrap: wrap; gap: 0.4rem; }

    /*
     * iOS Safari / Chrome on iOS: auto-zoom on focus when form controls are < 16px (fluid html root).
     * This block MUST stay after .channel-input, .files-search-input, .chat-inputbar textarea, and
     * .editor-fallback — those rules also set font-size and would otherwise override an earlier block.
     * max-width 900px covers phone landscape. .channel-input = cron modal, settings forms, etc.
     */
    @media (max-width: 900px) {
      .thread-search-input,
      .files-search-input,
      .chat-inputbar textarea#chat-input,
      .chat-inputbar input:not([type="file"]),
      .auth-form input[type=email],
      .auth-form input[type=password],
      .channel-input,
      .pairing-input,
      textarea.editor-fallback,
      .editor-container .cm-content {
        font-size: 16px !important;
      }
    }

    /* Phone landscape: tighter vertical headroom; composer + topbar are smaller */
    @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) and (hover: none) {
      #dashboard {
        --chat-composer-bottom-gap: 0.2rem;
        --chat-composer-stack-gap: 0.2rem;
        --chat-veil-h-top: 2.1rem;
        --chat-veil-h-bottom: 1.85rem;
        --chat-veil-a-top: 0.32;
        --chat-veil-a-bottom: 0.55;
        /* Compact landscape topbar */
        --chat-topbar-clearance: 3.2rem;
        /* Top only: emp translucent; input + nav solid */
        --chat-glass-a-emp: 0.78;
        --chat-glass-a-input: 0.98;
        --chat-glass-a-nav: 1;
      }
      #panel-chat .chat-inputbar {
        margin: 0 0 0.2rem;
        gap: var(--chat-composer-stack-gap, 0.2rem);
      }
      /* Non-chat panels keep their compact log padding */
      .chat-log-wrap {
        padding-top: 0.5rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        padding-bottom: 0.65rem;
      }
      /* Chat log inherits token-driven padding-top/bottom; only override left/right */
      #panel-chat .chat-log-wrap {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
      }
      .panel > .app-topbar {
        min-height: 44px;
        max-height: 44px;
        margin-top: 0.35rem;
      }
    }

    /* ── CloudyBot in-app onboarding / help ───────────────────────────── */
    #first-run-sheet[hidden],
    #help-drawer[hidden],
    #starter-pack-confirm-sheet[hidden] { display: none !important; }
    .first-run-sheet,
    #help-drawer,
    #starter-pack-confirm-sheet {
      position: fixed;
      inset: 0;
      z-index: 12050;
      display: none;
      align-items: stretch;
      justify-content: center;
      background: rgba(15,23,42,0.45);
      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
      scrollbar-gutter: stable;
      overscroll-behavior: contain;
    }
    .first-run-sheet[aria-hidden='false'],
    #help-drawer[aria-hidden='false'],
    #starter-pack-confirm-sheet[aria-hidden='false'] { display: flex; }
    #help-drawer[aria-hidden='false'] {
      justify-content: flex-end;
      align-items: stretch;
    }
    .first-run-sheet__panel {
      margin: auto;
      width: min(560px, 100%);
      height: min(720px, 100dvh);
      max-height: 100vh;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 80px rgba(0,0,0,0.35);
      transform: translateX(24px);
      opacity: 0;
      animation: onboardingSheetIn 0.22s ease forwards;
    }
    @keyframes onboardingSheetIn {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 640px) {
      .first-run-sheet__panel {
        margin: 0;
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: 100%;
      }
    }
    .first-run-sheet__head {
      padding: calc(14px + env(safe-area-inset-top)) 1rem 0.5rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .first-run-sheet__body {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0 1.1rem 1rem;
    }
    .first-run-cards {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .first-run-card-pane {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      overflow-y: auto;
      padding-bottom: env(safe-area-inset-bottom, 16px);
    }
    .first-run-card-pane.is-active {
      opacity: 1;
      transform: translateX(0);
    }
    .first-run-card-pane:not(.is-active) { pointer-events: none; }
    .first-run-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.85rem;
    }
    .first-run-chip {
      border: 1px solid var(--border);
      padding: 0.25rem 0.55rem;
      border-radius: 999px;
      font-size: 0.74rem;
      color: var(--text-soft);
    }
    .first-run-dots {
      display: flex;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.25rem;
    }
    .first-run-dots button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      background: var(--muted);
      padding: 0;
      cursor: pointer;
    }
    .first-run-dots button[aria-current='step'] {
      background: var(--brand);
      transform: scale(1.35);
    }
    .first-run-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.75rem;
      justify-content: space-between;
      border-top: 1px solid var(--border);
    }
    .onb-pane-visual {
      width: min(420px, 100%);
      margin: 0.65rem auto 0;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: var(--surface-hover);
      position: relative;
    }
    .onb-pane-visual img,
    .onb-pane-visual__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: var(--surface-hover);
    }
    .onb-pane-visual--missing > img,
    .onb-pane-visual--missing > video {
      display: none;
    }
    .onb-pane-visual__fallback {
      display: none;
      width: 100%;
      min-height: 140px;
      align-items: center;
      justify-content: center;
    }
    .onb-pane-visual--missing .onb-pane-visual__fallback {
      display: flex;
    }
    .onb-pane4-chips {
      margin-top: 0.65rem;
    }
    .onb-svg-wrap { width: min(360px, 100%); margin: 0 auto; }

    /* Animated slide embeds (MiscFiles cloudybot_slide1/2/4) inside first-run carousel */
    .onb-pane-visual.onb-pane-visual--embed {
      aspect-ratio: auto;
      min-height: 220px;
      max-height: min(420px, 52vh);
      overflow: auto;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface-hover);
    }
    /* Slide 4 (wiring): taller cap + clip — content is tightened below so no inner scroll */
    .onb-pane-visual.onb-pane-visual--embed:has(.onb-slide-embed-mount[data-slide='4']) {
      max-height: min(560px, 62vh);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .onb-pane-visual--embed:has(.onb-slide-embed-mount[data-slide='4']) .onb-slide-embed-mount {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .onb-pane-visual--embed .onb-slide-embed-mount {
      width: 100%;
      min-height: 0;
    }

    /* ── Slide 1 merge ── */
    .onb-emb-s1 {
      width: 100%;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.1rem;
      padding: 1rem 0.75rem;
    }
    .onb-emb-s1__row {
      display: flex;
      gap: 0.65rem;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
    }
    .onb-emb-s1__card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.75rem 0.55rem;
      width: 5.25rem;
      opacity: 0;
      transform: translateY(14px) scale(0.92);
      transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
    }
    .onb-emb-s1__card--visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .onb-emb-s1__card--merging {
      transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .onb-emb-s1__icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
    }
    .onb-emb-s1__icon--browse {
      background: rgba(59, 130, 246, 0.15);
    }
    .onb-emb-s1__icon--auto {
      background: rgba(34, 197, 94, 0.15);
    }
    .onb-emb-s1__icon--mem {
      background: rgba(245, 158, 11, 0.15);
    }
    .onb-emb-s1__icon--del {
      background: rgba(139, 92, 246, 0.12);
    }
    .onb-emb-s1__word {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-soft);
      text-align: center;
    }
    .onb-emb-s1__merged {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.85rem 1.25rem;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .onb-emb-s1__merged--visible {
      opacity: 1;
      transform: scale(1);
    }
    .onb-emb-s1__merged-icons {
      display: flex;
      gap: 0.35rem;
    }
    .onb-emb-s1__mi {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
    }
    .onb-emb-s1__merged-label {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
    }
    .onb-emb-s1__merged-sub {
      font-size: 0.65rem;
      color: var(--muted);
    }
    .onb-emb-s1__chips {
      display: flex;
      gap: 0.4rem;
      flex-wrap: wrap;
      justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .onb-emb-s1__chips--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s1__chip {
      font-size: 0.65rem;
      color: var(--text-soft);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 0.2rem 0.5rem;
    }
    .onb-emb-s1__replay {
      font-size: 0.65rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.15rem 0.35rem;
      opacity: 0;
      transition: opacity 0.4s ease, color 0.2s;
    }
    .onb-emb-s1__replay:hover {
      color: var(--text-soft);
    }
    .onb-emb-s1__replay--visible {
      opacity: 1;
    }

    /* ── Slide 2 browser ── */
    .onb-emb-s2 {
      width: 100%;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0.75rem 0.5rem 0.5rem;
      gap: 0.5rem;
    }
    .onb-emb-s2__browser {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(8px) scale(0.97);
      transition: opacity 0.5s ease, transform 0.5s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    .onb-emb-s2__browser--visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .onb-emb-s2__bar {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.55rem;
      background: #f3f3f3;
      border-bottom: 1px solid #e5e5e5;
    }
    .onb-emb-s2__dots {
      display: flex;
      gap: 4px;
    }
    .onb-emb-s2__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .onb-emb-s2__url {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 3px 8px;
      min-width: 0;
    }
    .onb-emb-s2__lock {
      font-size: 0.65rem;
    }
    .onb-emb-s2__urltext {
      font-size: 0.62rem;
      color: #555;
      font-family: ui-monospace, monospace;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .onb-emb-s2__live {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 0.58rem;
      font-weight: 600;
      color: #0f7a4d;
      white-space: nowrap;
    }
    .onb-emb-s2__livedot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #0f7a4d;
    }
    .onb-emb-s2__livedot--pulse {
      animation: onbEmb2LivePulse 1.2s infinite;
    }
    @keyframes onbEmb2LivePulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.2;
      }
    }
    .onb-emb-s2__body {
      min-height: 160px;
      overflow: hidden;
      position: relative;
      background: #fff;
    }
    .onb-emb-s2__nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.45rem 0.65rem;
      border-bottom: 1px solid #f0f0f0;
    }
    .onb-emb-s2__logo {
      font-size: 0.68rem;
      font-weight: 700;
      color: #1a1a1a;
    }
    .onb-emb-s2__navlinks {
      display: flex;
      gap: 0.45rem;
    }
    .onb-emb-s2__navlinks span {
      font-size: 0.58rem;
      color: #888;
    }
    .onb-emb-s2__hero {
      padding: 0.55rem 0.65rem;
      border-bottom: 1px solid #f0f0f0;
    }
    .onb-emb-s2__ht {
      font-size: 0.72rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 2px;
    }
    .onb-emb-s2__hs {
      font-size: 0.58rem;
      color: #888;
      margin-bottom: 0.45rem;
    }
    .onb-emb-s2__grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 5px;
    }
    .onb-emb-s2__pcard {
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 6px;
      position: relative;
    }
    .onb-emb-s2__pcard--feat {
      border-color: #378add;
    }
    .onb-emb-s2__pn {
      font-size: 0.52rem;
      font-weight: 700;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }
    .onb-emb-s2__pp {
      font-size: 0.85rem;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 1px;
    }
    .onb-emb-s2__pp span {
      font-size: 0.52rem;
      font-weight: 400;
      color: #888;
    }
    .onb-emb-s2__pf {
      font-size: 0.52rem;
      color: #888;
      margin-bottom: 1px;
    }
    .onb-emb-s2__pbtn {
      width: 100%;
      margin-top: 4px;
      padding: 3px;
      border-radius: 4px;
      border: none;
      font-size: 0.52rem;
      cursor: default;
      font-weight: 600;
    }
    .onb-emb-s2__pbtn--pri {
      background: #378add;
      color: #fff;
    }
    .onb-emb-s2__pbtn--sec {
      background: #f0f0f0;
      color: #555;
    }
    .onb-emb-s2__hi {
      position: absolute;
      inset: 0;
      border-radius: 6px;
      background: rgba(55, 138, 221, 0.12);
      border: 1.5px solid #378add;
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    .onb-emb-s2__hi--on {
      opacity: 1;
    }
    .onb-emb-s2__cursor {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #378add;
      opacity: 0;
      position: absolute;
      pointer-events: none;
      transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1), top 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
      transform: translate(-50%, -50%);
      z-index: 10;
      box-shadow: 0 0 0 2px rgba(55, 138, 221, 0.2);
    }
    .onb-emb-s2__login {
      position: absolute;
      inset: 0;
      background: rgba(250, 250, 250, 0.97);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      z-index: 5;
    }
    .onb-emb-s2__login--on {
      opacity: 1;
      pointer-events: all;
    }
    .onb-emb-s2__loginbox {
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      padding: 0.65rem;
      width: min(200px, 90%);
    }
    .onb-emb-s2__lt {
      font-size: 0.68rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 0.45rem;
      text-align: center;
    }
    .onb-emb-s2__field {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 5px 8px;
      font-size: 0.58rem;
      color: #333;
      margin-bottom: 5px;
      font-family: ui-monospace, monospace;
      background: #fafafa;
      outline: none;
      box-sizing: border-box;
    }
    .onb-emb-s2__field--act {
      border-color: #378add;
    }
    .onb-emb-s2__submit {
      width: 100%;
      background: #378add;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 6px;
      font-size: 0.58rem;
      font-weight: 700;
      cursor: default;
      margin-top: 3px;
    }
    .onb-emb-s2__submit--clk {
      background: #185fa5;
    }
    .onb-emb-s2__steplab {
      font-size: 0.65rem;
      color: var(--muted);
      text-align: center;
      min-height: 1rem;
      transition: opacity 0.3s;
    }
    .onb-emb-s2__notif {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.45rem 0.65rem;
      width: 100%;
      max-width: 420px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .onb-emb-s2__notif--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s2__nicon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #e1f5ee;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.75rem;
      color: #0f7a4d;
      font-weight: 800;
    }
    .onb-emb-s2__ntext p {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 1px;
    }
    .onb-emb-s2__ntext span {
      font-size: 0.58rem;
      color: var(--muted);
    }
    .onb-emb-s2__replay {
      font-size: 0.65rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.15rem 0.35rem;
      opacity: 0;
      transition: opacity 0.4s, color 0.2s;
    }
    .onb-emb-s2__replay--visible {
      opacity: 1;
    }

    /* ── Slide 3 residential IP / Connect (MiscFiles/slide3.html) ─────── */
    .onb-emb-s3,
    .onb-emb-s3 * {
      box-sizing: border-box;
    }
    .onb-emb-s3 {
      width: 100%;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0.45rem 0.35rem 0.3rem;
      gap: 0.35rem;
    }
    .onb-emb-s3__browser {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    }
    .onb-emb-s3__browser--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s3__bar {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.55rem;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
    }
    .onb-emb-s3__dots {
      display: flex;
      gap: 4px;
    }
    .onb-emb-s3__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .onb-emb-s3__url {
      flex: 1;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0.28rem 0.45rem;
      font-size: 0.62rem;
      color: #666;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
    }
    .onb-emb-s3__url > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .onb-emb-s3__lock {
      flex-shrink: 0;
      font-size: 0.65rem;
    }
    .onb-emb-s3__body {
      position: relative;
      min-height: 188px;
      background: #fafafa;
    }
    .onb-emb-s3__cblock {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 0.65rem;
      transition: opacity 0.5s ease;
    }
    .onb-emb-s3__cblock--hid {
      opacity: 0;
      pointer-events: none;
    }
    .onb-emb-s3__region-icon {
      font-size: 2.25rem;
      margin-bottom: 0.45rem;
      opacity: 0.65;
    }
    .onb-emb-s3__region-text {
      font-size: 0.72rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.25rem;
      text-align: center;
    }
    .onb-emb-s3__region-sub {
      font-size: 0.62rem;
      color: #888;
      text-align: center;
      max-width: 16rem;
      line-height: 1.35;
    }
    .onb-emb-s3__success-icon {
      font-size: 1.85rem;
      margin-bottom: 0.35rem;
    }
    .onb-emb-s3__success-title {
      font-size: 0.72rem;
      font-weight: 600;
      color: #1d9e75;
      margin-bottom: 0.2rem;
    }
    .onb-emb-s3__success-detail {
      font-size: 0.62rem;
      color: #666;
    }
    .onb-emb-s3__map {
      position: absolute;
      right: 0.45rem;
      top: 0.45rem;
      width: min(42%, 150px);
      background: #0f172a;
      border: 1px solid #1e293b;
      border-radius: 8px;
      padding: 0.45rem;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .onb-emb-s3__map--visible {
      opacity: 1;
    }
    .onb-emb-s3__mini-map {
      position: relative;
      width: 100%;
      height: 3.25rem;
      background: linear-gradient(180deg, #1e293b, #0f172a);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 0.25rem;
    }
    .onb-emb-s3__pin {
      position: absolute;
      left: 20%;
      top: 40%;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.55rem;
      opacity: 0;
      transition: left 1s ease, top 1s ease, opacity 0.4s ease, background 0.45s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      background: #185fa5;
      color: #fff;
    }
    .onb-emb-s3__map-text {
      font-size: 0.52rem;
      color: #64748b;
      text-align: center;
      line-height: 1.25;
    }
    .onb-emb-s3__settings {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.97);
      border-radius: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      padding: 0.45rem;
      overflow: auto;
    }
    .onb-emb-s3__settings--visible {
      opacity: 1;
      pointer-events: all;
    }
    .onb-emb-s3__settings-inner {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 8px;
      overflow: hidden;
      max-width: 100%;
      margin: 0 auto;
    }
    .onb-emb-s3__settings-hd {
      background: #0f172a;
      border-bottom: 1px solid #334155;
      padding: 0.45rem 0.55rem;
    }
    .onb-emb-s3__settings-title {
      font-size: 0.72rem;
      font-weight: 600;
      color: #f1f5f9;
    }
    .onb-emb-s3__settings-body {
      padding: 0.55rem 0.6rem;
    }
    .onb-emb-s3__sec-head {
      font-size: 0.62rem;
      font-weight: 600;
      color: #f1f5f9;
      margin-bottom: 0.15rem;
    }
    .onb-emb-s3__sec-sub {
      font-size: 0.55rem;
      color: #64748b;
      margin-bottom: 0.45rem;
      line-height: 1.3;
    }
    .onb-emb-s3__sec-explain {
      font-size: 0.55rem;
      color: #94a3b8;
      background: #0f172a;
      border-radius: 6px;
      padding: 0.45rem;
      margin-bottom: 0.45rem;
      line-height: 1.35;
    }
    .onb-emb-s3__input-row {
      display: flex;
      gap: 0.35rem;
      margin-bottom: 0.25rem;
      flex-wrap: wrap;
    }
    .onb-emb-s3__site-input {
      flex: 1;
      min-width: 0;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 0.35rem 0.45rem;
      font-size: 0.6rem;
      color: #cbd5e1;
    }
    .onb-emb-s3__add-btn {
      background: #185fa5;
      color: #f1f5f9;
      border: none;
      border-radius: 6px;
      padding: 0.35rem 0.55rem;
      font-size: 0.58rem;
      font-weight: 600;
      cursor: default;
      white-space: nowrap;
    }
    .onb-emb-s3__site-added {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 6px;
      margin-top: 0.35rem;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .onb-emb-s3__site-added--visible {
      opacity: 1;
    }
    .onb-emb-s3__site-flag {
      font-size: 1.1rem;
      line-height: 1;
    }
    .onb-emb-s3__site-domain {
      font-size: 0.62rem;
      font-weight: 500;
      color: #cbd5e1;
    }
    .onb-emb-s3__site-meta {
      font-size: 0.52rem;
      color: #64748b;
      margin-top: 0.1rem;
    }
    .onb-emb-s3__replay {
      font-size: 0.65rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.1rem 0.3rem;
      opacity: 0;
      transition: opacity 0.4s ease, color 0.2s;
    }
    .onb-emb-s3__replay:hover {
      color: var(--text-soft);
    }
    .onb-emb-s3__replay--visible {
      opacity: 1;
    }

    /* ── Slide 4 wiring ── */
    .onb-emb-s4,
    .onb-emb-s4 * {
      box-sizing: border-box;
    }
    .onb-emb-s4 {
      width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0.4rem 0.2rem 0.3rem;
      gap: 0.32rem;
      flex: 1 1 auto;
      max-height: 100%;
      overflow: hidden;
    }
    .onb-emb-s4__stage {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-height: 0;
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 3px;
      flex-wrap: nowrap;
    }
    .onb-emb-s4__svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }
    .onb-emb-s4__card {
      background: #0f172a;
      border: 1px solid #1e293b;
      border-radius: 10px;
      overflow: hidden;
      opacity: 0;
      position: relative;
      z-index: 2;
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.65s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
      flex-shrink: 0;
    }
    .onb-emb-s4__card[data-s4-c='1'] {
      transform: translateY(8px);
      width: 112px;
      min-width: 112px;
    }
    .onb-emb-s4__card[data-s4-c='2'],
    .onb-emb-s4__card[data-s4-c='3'] {
      transform: translateX(8px);
      width: 96px;
      min-width: 96px;
    }
    .onb-emb-s4__card--visible {
      opacity: 1;
      transform: translate(0, 0) !important;
    }
    .onb-emb-s4__card--shrink[data-s4-c='1'] {
      width: 96px;
      min-width: 96px;
    }
    .onb-emb-s4__head {
      padding: 0.35rem 0.45rem 0.32rem;
      border-bottom: 1px solid #1e293b;
    }
    .onb-emb-s4__av {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6rem;
      font-weight: 700;
      margin-bottom: 3px;
    }
    .onb-emb-s4__name {
      font-size: 0.58rem;
      font-weight: 600;
      color: #f1f5f9;
      margin-bottom: 1px;
    }
    .onb-emb-s4__role {
      font-size: 0.48rem;
      color: #64748b;
      margin-bottom: 2px;
    }
    .onb-emb-s4__st {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .onb-emb-s4__sdot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #334155;
      transition: background 0.4s;
      flex-shrink: 0;
    }
    .onb-emb-s4__sdot--on {
      background: #1d9e75;
    }
    .onb-emb-s4__stxt {
      font-size: 0.5rem;
      color: #475569;
      transition: color 0.4s;
    }
    .onb-emb-s4__stxt--on {
      color: #1d9e75;
    }
    .onb-emb-s4__skills {
      padding: 4px 5px;
      border-bottom: 1px solid #1e293b;
    }
    .onb-emb-s4__at {
      font-size: 0.48rem;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 3px;
    }
    .onb-emb-s4__sc {
      font-size: 0.48rem;
      padding: 1px 4px;
      border-radius: 999px;
      border: 1px solid #1e293b;
      color: #64748b;
      background: #0f172a;
      opacity: 0;
      transform: scale(0.82);
      transition: opacity 0.3s, transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
      display: inline-block;
      margin: 0 2px 2px 0;
    }
    .onb-emb-s4__sc--shown {
      opacity: 1;
      transform: scale(1);
    }
    .onb-emb-s4__sc--kept {
      background: #0c1e3a;
      border-color: #185fa5;
      color: #7eb8f7;
    }
    .onb-emb-s4__sc--dim {
      opacity: 0.12;
      transform: scale(0.82);
    }
    .onb-emb-s4__duties {
      padding: 4px 5px;
      opacity: 0;
      transform: translateY(3px);
      transition: opacity 0.4s, transform 0.4s;
    }
    .onb-emb-s4__duties--shown {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s4__duty {
      background: #1e293b;
      border-radius: 6px;
      padding: 4px 5px;
      margin-bottom: 2px;
    }
    .onb-emb-s4__duty:last-child {
      margin-bottom: 0;
    }
    .onb-emb-s4__dn {
      font-size: 0.48rem;
      font-weight: 600;
      color: #cbd5e1;
      margin-bottom: 1px;
    }
    .onb-emb-s4__ds {
      font-size: 0.44rem;
      color: #475569;
      margin-bottom: 2px;
    }
    .onb-emb-s4__dst {
      display: flex;
      align-items: center;
      gap: 3px;
      position: relative;
    }
    .onb-emb-s4__ddot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #334155;
      transition: background 0.4s;
      z-index: 2;
      flex-shrink: 0;
    }
    .onb-emb-s4__ddot--on {
      background: #1d9e75;
    }
    .onb-emb-s4__dring {
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      border: 1.5px solid #1d9e75;
      opacity: 0;
    }
    .onb-emb-s4__dring--pulse {
      animation: onbEmb4Ring 2s infinite;
    }
    @keyframes onbEmb4Ring {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      100% {
        transform: scale(3.2);
        opacity: 0;
      }
    }
    .onb-emb-s4__dlabel {
      font-size: 0.48rem;
      color: #475569;
      transition: color 0.4s;
    }
    .onb-emb-s4__dlabel--on {
      color: #1d9e75;
      font-weight: 600;
    }
    .onb-emb-s4__notif {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 10px;
      padding: 0.32rem 0.45rem;
      width: 100%;
      max-width: 360px;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.5s, transform 0.5s;
    }
    .onb-emb-s4__notif--visible {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s4__nicon {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: #0d2a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #1d9e75;
      font-weight: 800;
      font-size: 0.6rem;
    }
    .onb-emb-s4__ntext p {
      font-size: 0.62rem;
      font-weight: 600;
      color: #e2e8f0;
      margin: 0 0 1px;
    }
    .onb-emb-s4__ntext span {
      font-size: 0.5rem;
      color: #475569;
    }
    .onb-emb-s4__steplab {
      font-size: 0.58rem;
      color: var(--muted);
      text-align: center;
      min-height: 0.85rem;
      flex-shrink: 0;
      transition: opacity 0.3s;
    }
    .onb-emb-s4__replay {
      font-size: 0.62rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.1rem 0.3rem;
      opacity: 0;
      transition: opacity 0.4s, color 0.2s;
    }
    .onb-emb-s4__replay--visible {
      opacity: 1;
    }
    .onb-emb-s5 {
      position: relative;
      min-height: 200px;
      padding: 0.5rem 0.25rem 1.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
    }
    .onb-emb-s5__cloudia {
      font-size: 2rem;
      line-height: 1;
      opacity: 0.85;
      transition: transform 0.35s ease;
    }
    .onb-emb-s5__cloudia--pulse {
      transform: scale(1.06);
    }
    .onb-emb-s5__bubble {
      max-width: 92%;
      padding: 0.45rem 0.6rem;
      border-radius: 10px;
      font-size: 0.72rem;
      line-height: 1.35;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .onb-emb-s5__bubble--user {
      align-self: flex-start;
      background: rgba(20, 184, 166, 0.15);
      border: 1px solid rgba(20, 184, 166, 0.35);
    }
    .onb-emb-s5__bubble--cloudia {
      align-self: flex-end;
      background: rgba(99, 102, 241, 0.12);
      border: 1px solid rgba(99, 102, 241, 0.3);
    }
    .onb-emb-s5__shown {
      opacity: 1;
      transform: translateY(0);
    }
    .onb-emb-s5__team {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.35rem;
      min-height: 1.6rem;
    }
    .onb-emb-s5__hire {
      font-size: 0.68rem;
      padding: 0.25rem 0.45rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      opacity: 0;
      transform: scale(0.92);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .onb-emb-s5__hire--shown {
      opacity: 1;
      transform: scale(1);
    }
    .onb-emb-s5__deploy {
      margin-top: 0.25rem;
      padding: 0.4rem 0.85rem;
      border-radius: 8px;
      border: none;
      font-size: 0.75rem;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, #14b8a6, #0d9488);
      opacity: 0;
      transition: opacity 0.35s ease, box-shadow 0.35s ease;
    }
    .onb-emb-s5__deploy--pulse {
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.35);
    }
    .onb-emb-s5__replay {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 0.62rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.1rem 0.3rem;
    }
    @keyframes onbEmb4Flow {
      0% {
        stroke-dashoffset: 200;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
    .onb-globe-spin {
      animation: onb-globe-spin 12s linear infinite;
      transform-origin: 120px 90px;
    }
    @keyframes onb-globe-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .onb-pointer-drift {
      animation: onb-pointer-drift 2.8s ease-in-out infinite alternate;
      transform-origin: 40px 40px;
    }
    @keyframes onb-pointer-drift {
      from { transform: translate(10px, 8px); }
      to { transform: translate(-6px, 18px); }
    }
    /* ── Slide 6 welcome (pane 0) ── */
    .onb-emb-s6 {
      position: relative;
      min-height: 200px;
      padding: 0.5rem 0.25rem 1.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    .onb-emb-s6__logo {
      font-size: 2.25rem;
      line-height: 1;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .onb-emb-s6__title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .onb-emb-s6__team {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.4rem;
      min-height: 1.75rem;
    }
    .onb-emb-s6__member {
      font-size: 0.7rem;
      padding: 0.28rem 0.5rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .onb-emb-s6__member--shown,
    .onb-emb-s6__shown {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .onb-emb-s6__sub {
      font-size: 0.68rem;
      color: var(--muted);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .onb-emb-s6__replay {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 0.62rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.1rem 0.3rem;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .onb-emb-s6__replay--visible {
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .first-run-sheet__panel { animation: none; opacity: 1; transform: none; }
      .first-run-card-pane { transition: none; }
      .onb-globe-spin, .onb-pointer-drift { animation: none; }
      .onb-emb-s1__card,
      .onb-emb-s1__merged,
      .onb-emb-s1__chips,
      .onb-emb-s2__browser,
      .onb-emb-s5__bubble,
      .onb-emb-s5__hire,
      .onb-emb-s5__deploy,
      .onb-emb-s6__logo,
      .onb-emb-s6__title,
      .onb-emb-s6__member,
      .onb-emb-s6__sub {
        transition: none;
        opacity: 1;
        transform: none;
      }
      .onb-emb-s1__card--visible,
      .onb-emb-s1__merged--visible,
      .onb-emb-s1__chips--visible,
      .onb-emb-s2__browser--visible,
      .onb-emb-s5__shown,
      .onb-emb-s5__hire--shown,
      .onb-emb-s6__shown,
      .onb-emb-s6__member--shown {
        opacity: 1;
        transform: none;
      }
    }
    .starter-pack-strip {
      display: flex;
      gap: 0.65rem;
      overflow-x: auto;
      padding: 0.35rem 0;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .starter-pack-strip .starter-pack-mini {
      min-width: 220px;
      scroll-snap-align: start;
    }
    #first-run-sheet .starter-pack-mini {
      min-width: min(260px, 88vw);
    }
    .starter-pack-mini {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.65rem;
      background: var(--surface-hover);
    }
    .starter-pack-mini button {
      width: 100%;
      margin-top: 0.5rem;
      min-height: 44px;
    }
    #onboarding-demo-live {
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,0.35);
      position: relative;
      overflow: hidden;
    }
    #onboarding-demo-live iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      object-fit: contain;
      background: #000;
    }
    #onboarding-demo-progress {
      height: 4px;
      background: var(--surface-hover);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 0.65rem;
    }
    #onboarding-demo-progress > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--brand), var(--accent, #38bdf8));
      width: 0%;
      transition: width 0.5s linear;
    }
    .duty-scratch-recovery-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.55rem;
    }
    #help-drawer .help-drawer__panel-shell {
      margin-left: auto;
      margin-right: 0;
      width: min(480px, 100%);
      height: min(760px, 100dvh);
      max-height: 100vh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      min-height: 0;
      box-shadow: -8px 0 40px rgba(0,0,0,0.25);
    }
    /* Body: TOC + scrollable sections (first child); footer stays pinned below */
    #help-drawer .help-drawer__panel-shell > div:first-child {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    #help-drawer .help-drawer__panel-shell > div:last-child {
      flex-shrink: 0;
    }
    #help-drawer .help-drawer__body {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    #help-drawer .help-drawer__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.7rem;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    @media (max-width: 760px) {
      #help-drawer .help-drawer__panel-shell {
        width: 100%;
        margin-top: auto;
        height: 88dvh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        flex-direction: column;
      }
    }
    #help-drawer-toc {
      width: clamp(156px, 30vw, 200px);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      padding: 0.6rem;
      font-size: 0.75rem;
    }
    #help-drawer-toc button {
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      padding: 0.35rem 0.35rem;
      cursor: pointer;
      color: var(--text-soft);
      border-radius: 8px;
    }
    #help-drawer-toc button[aria-current='location'] {
      background: rgba(20,184,166,0.12);
      color: var(--text);
      font-weight: 600;
    }
    #help-drawer-sections {
      flex: 1;
      overflow-y: auto;
      padding: 0.75rem 1rem 1rem;
    }
    .help-feature-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.95rem;
      margin-bottom: 0.85rem;
      background: var(--surface-hover);
    }
    .help-feature-card.help-section--featured {
      border-width: 2px;
      border-color: rgba(20,184,166,0.45);
      background: rgba(20,184,166,0.06);
    }
    .examples-gallery__row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
      gap: 0.55rem;
    }
    @media (max-width: 760px) {
      .examples-gallery__row {
        grid-template-columns: unset;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }
      .examples-gallery__row .gallery-card {
        min-width: 180px;
        scroll-snap-align: start;
      }
      #help-drawer-toc { display: none; }
    }
    .gallery-card {
      border-radius: 10px;
      border: 1px solid var(--border);
      padding: 0.6rem;
      background: var(--surface);
      font-size: 0.8rem;
    }
    #activation-checklist-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin: 0.75rem 0;
    }
    @media (max-width: 640px) {
      #activation-checklist-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }
      #activation-checklist-strip .activation-pill {
        min-width: 120px;
        scroll-snap-align: start;
      }
    }
    .activation-pill {
      border: 1px solid var(--border);
      padding: 0.4rem 0.55rem;
      border-radius: 999px;
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }
    .activation-pill--done {
      border-color: var(--brand);
      color: var(--brand);
      font-weight: 600;
    }
    .welcome-callouts {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin: 0.75rem 0;
    }
    .welcome-callout-btn {
      border: 1px solid var(--border);
      padding: 0.5rem 0.85rem;
      border-radius: 999px;
      background: transparent;
      font-size: 0.8125rem;
      cursor: pointer;
      display: inline-flex;
      gap: 0.35rem;
      align-items: center;
      min-height: 44px;
      color: var(--text-soft);
    }
    .skills-focus-banner {
      border: 1px dashed rgba(20,184,166,0.45);
      background: rgba(20,184,166,0.08);
      color: var(--text);
      padding: 0.6rem;
      border-radius: 12px;
      font-size: 0.8125rem;
      margin-bottom: 0.75rem;
    }
    .emp-skill-extra {
      font-size: 0.78rem;
      color: var(--text-soft);
      margin-left: 1.95rem;
      margin-top: 0.35rem;
    }
    .emp-skill-extra a { color: var(--brand); cursor: pointer; text-decoration: none; margin-right: 0.35rem; }
    .hire-focus-callout {
      border-radius: 10px;
      border: 1px solid rgba(20,184,166,0.35);
      background: rgba(20,184,166,0.08);
      padding: 0.5rem 0.65rem;
      margin-bottom: 0.55rem;
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text-soft);
      flex-shrink: 0;
    }
    .make-recurring-chip {
      align-self: flex-start;
      border: 1px solid var(--border);
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
      font-size: 0.8125rem;
      margin: 0.35rem 0 0;
      background: transparent;
      color: var(--brand);
      cursor: pointer;
    }
    .cloudy-specialist-start-row {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      padding: 0.45rem 0.75rem 0.35rem;
      border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
    }
    .cloudy-specialist-start-row::before {
      content: 'Suggested prompts';
      display: block;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.15rem;
    }
    .cloudy-specialist-start-row .specialist-starter-chip {
      width: 100%;
      text-align: left;
      border-radius: 11px;
      border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    }
    .cloudy-specialist-start-row .specialist-starter-chip:hover {
      border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
      background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface));
      transform: translateY(-1px);
    }
    #onboarding-help-pill {
      position: fixed;
      right: 1rem;
      bottom: calc(5.75rem + env(safe-area-inset-bottom));
      z-index: 9100;
      border-radius: 999px;
      border: none;
      padding: 0.65rem 0.95rem;
      box-shadow: 0 6px 20px rgba(0,0,0,0.2);
      background: var(--brand);
      color: #fff;
      font-weight: 600;
      font-size: 0.8125rem;
      display: none;
    }
    /* ── Inline onboarding UX (duty recovery, recurring CTA, hire docs, emp skills helpers) ── */
    .make-recurring-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.45rem;
      flex-wrap: wrap;
    }
    .make-recurring-chip {
      font-size: 0.78rem !important;
    }
    .make-recurring-dismiss {
      border: 0;
      background: transparent;
      opacity: 0.55;
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1;
      padding: 0.1rem 0.2rem;
    }
    .duty-scratch-recovery-row {
      margin-top: 0.55rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
    }
    .duty-scratch-recovery-pair {
      display: inline-flex;
      gap: 0.35rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .duty-recovery-docs {
      font-size: 0.72rem;
      white-space: nowrap;
    }
    .hire-card-actions--split {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.35rem;
    }
    .hire-card-docs-link {
      font-size: 0.78rem;
      font-weight: 600;
      text-decoration: none;
      color: var(--brand);
    }
    .emp-skill-help-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      align-items: center;
      margin-top: 0.28rem;
      font-size: 0.72rem;
      line-height: 1.3;
    }
    .specialist-starter-chip--sm {
      padding: 0.35rem 0.55rem !important;
      font-size: 0.74rem !important;
      line-height: 1.22;
      max-width: 100%;
    }
    .dashboard-panel-onb-hint button.link-btn {
      vertical-align: baseline;
      display: inline;
      padding: 0;
    }

    /* ── Glass icon-only dock (desktop >=769px) ── */
    @media (min-width: 769px) {
      .sidebar {
        width: 72px;
        background: var(--nav-glass-bg, var(--glass-bg));
        backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
        -webkit-backdrop-filter: blur(var(--chrome-blur, 12px)) saturate(var(--chrome-saturate, 165%));
        border-right: 1px solid rgba(var(--brand-rgb, 20, 184, 166), 0.12);
        box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04);
      }
      [data-theme="dark"] .sidebar {
        background: linear-gradient(
          180deg,
          rgba(var(--surface-rgb, 32, 44, 51), 0.92) 0%,
          rgba(var(--surface-rgb, 32, 44, 51), 0.88) 100%
        );
        border-right-color: rgba(20, 184, 166, 0.14);
      }
      .sidebar .sidebar-collapse-btn { display: none !important; }
      .sidebar .sidebar-brand span,
      .sidebar .sidebar-section,
      .sidebar .sidebar-site-links,
      .sidebar .tab span:not(.tab-icon),
      .sidebar .sidebar-usage,
      .sidebar .account-meta,
      .sidebar .account-email,
      .sidebar .sidebar-expanded-content { display: none !important; }
      .sidebar .sidebar-brand {
        justify-content: center;
        padding: 0.85rem 0.5rem 0.5rem;
      }
      .sidebar .sidebar-brand img {
        height: 36px;
        width: 36px;
      }
      .sidebar .sidebar-nav {
        padding: 0.35rem 0.5rem;
        align-items: center;
        flex: 0 0 auto;
      }
      .sidebar .tab,
      .sidebar .dock-launcher-btn {
        justify-content: center;
        padding: 0.625rem;
        border-radius: 12px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        box-sizing: border-box;
      }
      .sidebar .tab.active,
      .sidebar .dock-launcher-btn:hover,
      .sidebar .dock-launcher-btn:focus-visible {
        background: var(--brand-soft);
      }
      .sidebar .dock-launcher-btn {
        display: flex;
        align-items: center;
        border: none;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-family: inherit;
        margin: 0 auto 0.25rem;
        flex-shrink: 0;
        transition: background 0.15s ease, color 0.15s ease;
      }
      .sidebar .dock-launcher-btn:hover,
      .sidebar .dock-launcher-btn:focus-visible {
        color: var(--brand);
        outline: none;
      }
      .sidebar .dock-launcher-btn:focus-visible {
        box-shadow: 0 0 0 2px var(--brand-soft);
      }
      .sidebar .dock-launcher-btn .tab-icon {
        width: 20px;
        height: 20px;
      }
      .sidebar .sidebar-nav-divider {
        width: 24px;
        margin: 0.35rem auto;
        opacity: 0.65;
      }
      .sidebar .sidebar-chrome-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.4rem 0.5rem;
        margin-top: auto;
        border-bottom: none;
        border-top: 1px solid var(--border);
      }
      .sidebar .sidebar-chrome-actions .sidebar-usage-wrap {
        display: block !important;
        width: 44px;
        flex: 0 0 auto;
        min-width: 0;
      }
      .sidebar .sidebar-chrome-actions .topbar-icon-btn {
        width: 44px;
        height: 44px;
      }
      .sidebar #sidebar-usage-badge.usage-pill {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        color: transparent;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        border-radius: 12px;
        position: relative;
        cursor: pointer;
      }
      .sidebar #sidebar-usage-badge.usage-pill::after {
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
        pointer-events: none;
      }
      [data-theme="dark"] .sidebar #sidebar-usage-badge.usage-pill::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
      }
      .sidebar .sidebar-account {
        justify-content: center;
        padding: 0.5rem 0.5rem 0.75rem;
        margin-top: 0;
      }
      .sidebar .account-avatar {
        width: 36px;
        height: 36px;
      }
      .sidebar .account-status { display: none !important; }
    }

    /* ── App drawer overlay ── */
    .app-drawer {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .app-drawer[hidden] { display: none !important; }
    .app-drawer.is-open { pointer-events: auto; }
    .app-drawer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.22s var(--ease-out);
    }
    [data-theme="dark"] .app-drawer-backdrop { background: rgba(0, 0, 0, 0.55); }
    .app-drawer.is-open .app-drawer-backdrop { opacity: 1; }
    .app-drawer-panel {
      position: relative;
      z-index: 1;
      width: min(94vw, 900px);
      max-height: min(88dvh, 720px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      min-height: 0;
      transform: scale(0.96);
      opacity: 0;
      transition: transform 0.24s var(--ease-out), opacity 0.22s var(--ease-out);
    }
    .app-drawer.is-open .app-drawer-panel {
      transform: scale(1);
      opacity: 1;
    }
    .app-drawer-handle {
      display: none;
      width: 40px;
      height: 5px;
      border-radius: 999px;
      background: var(--border-strong);
      margin: 0.65rem auto 0.25rem;
      flex-shrink: 0;
    }
    .app-drawer-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1rem 1.1rem 0.65rem;
      border-bottom: 1px solid var(--border);
    }
    .app-drawer-back {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 1.15rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
      margin-right: auto;
    }
    .app-drawer-back:hover { background: var(--surface-hover); }
    .app-drawer-back[hidden] { display: none !important; }
    .app-drawer-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      flex: 1;
      text-align: center;
    }
    .app-drawer-header .app-drawer-back:not([hidden]) + .app-drawer-title {
      margin-left: -36px;
    }
    .app-drawer-close {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .app-drawer-close:hover { background: var(--surface-hover); }
    .app-drawer-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 0.75rem 1rem 0.5rem;
      -webkit-overflow-scrolling: touch;
    }
    .app-drawer-section { margin-bottom: 1.1rem; }
    .app-drawer-section:last-child { margin-bottom: 0; }
    .app-drawer-section-title {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      padding: 0.15rem 0.25rem 0.5rem;
      margin: 0;
    }
    .app-drawer-grid-view,
    .app-drawer-detail-view,
    .app-drawer-connect-view {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }
    .app-drawer-grid-view[hidden],
    .app-drawer-detail-view[hidden],
    .app-drawer-connect-view[hidden] {
      display: none !important;
    }
    .app-drawer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 0.35rem 0.25rem;
    }
    .app-drawer-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-width: 0;
      min-height: 88px;
      padding: 0.5rem 0.35rem 0.45rem;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }
    .app-drawer-tile:hover,
    .app-drawer-tile:focus-visible {
      background: var(--surface-hover);
      outline: none;
    }
    .app-drawer-tile:hover .app-drawer-tile__glyph,
    .app-drawer-tile:focus-visible .app-drawer-tile__glyph {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-glow, var(--brand)) 35%, transparent),
        0 0 12px color-mix(in srgb, var(--app-glow, var(--brand)) 25%, transparent);
    }
    .app-drawer-tile:active { transform: scale(0.97); }
    .app-drawer-tile__glyph {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--app-glow, var(--brand)) 8%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--app-glow, var(--brand)) 18%, var(--border));
      margin-bottom: 0.35rem;
      flex-shrink: 0;
      transition: box-shadow 0.15s ease;
    }
    .app-drawer-tile__glyph svg {
      display: block;
      width: 28px;
      height: 28px;
    }
    .app-drawer-tile__icon {
      font-size: 1.35rem;
      line-height: 1;
      margin-bottom: 0.3rem;
      flex-shrink: 0;
    }
    .app-drawer-tile__label {
      font-size: 0.68rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      max-width: 88px;
      word-break: break-word;
      color: var(--text);
    }
    .app-drawer-explainer {
      max-width: 36rem;
      margin: 0 auto;
      padding: 0.5rem 0.25rem 1.5rem;
      text-align: center;
    }
    .app-drawer-explainer-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--app-glow, var(--brand)) 10%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--app-glow, var(--brand)) 22%, var(--border));
      box-shadow: 0 0 20px color-mix(in srgb, var(--app-glow, var(--brand)) 18%, transparent);
      margin-bottom: 1rem;
    }
    .app-drawer-explainer-icon svg {
      width: 48px;
      height: 48px;
    }
    .app-drawer-explainer-title {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .app-drawer-explainer-desc {
      margin: 0 0 1.25rem;
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--muted);
    }
    .app-drawer-explainer-caps-title {
      margin: 0 0 0.65rem;
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      text-align: left;
    }
    .app-drawer-explainer-caps {
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: left;
    }
    .app-drawer-explainer-caps li {
      position: relative;
      padding: 0.45rem 0 0.45rem 1.35rem;
      font-size: 0.88rem;
      line-height: 1.45;
      border-bottom: 1px solid var(--border);
    }
    .app-drawer-explainer-caps li:last-child { border-bottom: none; }
    .app-drawer-explainer-caps li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.72rem;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand);
    }
    [data-theme="dark"] .app-drawer-tile__glyph {
      background: color-mix(in srgb, var(--app-glow, var(--brand)) 12%, var(--surface));
    }
    #app-drawer-connect-host.settings-pane-editor-open .settings-editor-panel:not([hidden]) {
      display: block;
    }
    #app-drawer-connect-host .settings-editor-panel {
      outline: none;
    }
    #app-drawer-connect-host .settings-editor-panel .settings-card:first-child {
      margin-top: 0;
    }
    #app-drawer-connect-host .settings-detail-placeholder,
    #app-drawer-connect-host #connect-detail-back,
    #app-drawer-connect-host #connect-detail-heading {
      display: none !important;
    }
    #app-drawer-connect-host .settings-attention-strip {
      font-size: var(--s-text-sm, 13px);
      padding: 0.55rem 0.75rem;
      margin-bottom: 0.75rem;
      border-radius: var(--radius-sm, 8px);
      background: color-mix(in srgb, var(--warning) 12%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
      color: var(--text);
    }
    .app-drawer-connect-body {
      padding-top: 0.25rem;
    }
    .app-drawer-footer {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      padding: 0.65rem 1rem 1rem;
      border-top: 1px solid var(--border);
      font-size: 0.75rem;
    }
    .app-drawer-footer a {
      color: var(--muted);
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .app-drawer-footer a:hover { color: var(--brand); }
    @media (max-width: 768px) {
      .app-drawer {
        align-items: flex-end;
        justify-content: stretch;
      }
      .app-drawer-panel {
        width: 100%;
        max-width: 100%;
        max-height: min(88dvh, 640px);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: none;
        transform: translateY(105%);
        opacity: 1;
      }
      .app-drawer.is-open .app-drawer-panel { transform: translateY(0); }
      .app-drawer-handle { display: block; }
    }

    /* Desktop roster collapse (standalone dashboard; embed overrides in cloudaxis-app). */
    @media (min-width: 769px) and (not ((max-width: 1000px) and (max-height: 520px) and (orientation: landscape) and (hover: none))) {
      #panel-chat.active .thread-panel-inner {
        position: relative;
      }
      #panel-chat.active .roster-collapse-btn {
        position: absolute;
        top: 0.48rem;
        right: 0.45rem;
        z-index: 12;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
      }
      #panel-chat.active.roster-collapsed #thread-panel,
      #panel-chat.active.roster-collapsed .thread-panel--sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
      }
      #panel-chat.active.roster-collapsed .thread-search-wrap,
      #panel-chat.active.roster-collapsed .thread-section-header,
      #panel-chat.active.roster-collapsed .thread-item-main,
      #panel-chat.active.roster-collapsed .emp-item-meta,
      #panel-chat.active.roster-collapsed .thread-menu-btn,
      #panel-chat.active.roster-collapsed .thread-item-actions {
        display: none !important;
      }
      #panel-chat.active.roster-collapsed .thread-item,
      #panel-chat.active.roster-collapsed .emp-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.2rem;
        min-height: 48px;
      }
      #panel-chat.active.roster-collapsed .roster-collapse-btn {
        top: 0.35rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }
    }
    @media (max-width: 768px) {
      .roster-collapse-btn {
        display: none !important;
      }
    }

    /* ── Activation funnel (CloudAxis OnboardingFlow parity) ─────────────── */
    .activation-funnel-overlay {
      position: fixed;
      inset: 0;
      z-index: 9200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(0.75rem, 3vw, 1.5rem);
    }
    .activation-funnel-overlay[hidden] { display: none !important; }
    .activation-funnel__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 8, 16, 0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .activation-funnel__panel {
      position: relative;
      width: min(560px, 100%);
      max-height: min(90vh, 720px);
      overflow: auto;
      border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
      background: var(--surface);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
      padding: 1.1rem 1.25rem 1.25rem;
    }
    .activation-funnel__eyebrow {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand);
    }
    .activation-funnel__headline {
      margin: 0 0 0.45rem;
      font-size: clamp(1.25rem, 3.5vw, 1.55rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .activation-funnel__subline {
      margin: 0 0 1rem;
      font-size: 0.92rem;
      line-height: 1.45;
      color: var(--muted);
    }
    .activation-funnel__reveal {
      list-style: none;
      margin: 0 0 1rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .activation-funnel__reveal-item {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
      font-size: 0.86rem;
      line-height: 1.4;
      text-align: left;
    }
    .activation-funnel__reveal-icon { flex-shrink: 0; font-size: 1.1rem; }
    .activation-funnel__reveal-line { color: var(--muted); }
    .activation-funnel__footer { margin-top: 0.85rem; }
    .activation-funnel__footer--stack { display: flex; flex-direction: column; gap: 0.45rem; align-items: stretch; }
    .activation-funnel__cta { width: 100%; min-height: 44px; }
    .activation-funnel__footnote {
      margin: 0;
      font-size: 0.78rem;
      color: var(--muted);
      text-align: center;
    }
    .activation-funnel__link {
      border: 0;
      background: none;
      color: var(--brand);
      font: inherit;
      font-size: 0.82rem;
      cursor: pointer;
      text-decoration: underline;
      padding: 0.25rem;
    }
    .activation-funnel__chips {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.45rem;
      margin-bottom: 0.65rem;
    }
    .activation-funnel__chip {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.55rem 0.6rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.82rem;
      cursor: pointer;
      text-align: left;
      min-height: 44px;
    }
    .activation-funnel__chip--on {
      border-color: var(--brand);
      background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    }
    .activation-funnel__hint {
      margin: 0 0 0.75rem;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .activation-funnel__spinner {
      width: 2rem;
      height: 2rem;
      margin: 1rem auto;
      border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: activation-funnel-spin 0.8s linear infinite;
    }
    @keyframes activation-funnel-spin { to { transform: rotate(360deg); } }

    /* Email verification banner + gate */
    .email-verify-banner {
      position: relative;
      z-index: 120;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.55rem 2.25rem 0.55rem 0.85rem;
      background: rgba(234, 179, 8, 0.14);
      border-bottom: 1px solid rgba(234, 179, 8, 0.35);
      color: var(--text);
      font-size: 0.82rem;
      line-height: 1.35;
    }
    .email-verify-banner[hidden] { display: none !important; }
    .email-verify-banner__text { margin: 0; }
    .email-verify-banner__link {
      padding: 0;
      border: 0;
      background: none;
      color: var(--brand);
      font: inherit;
      cursor: pointer;
      text-decoration: underline;
    }
    .email-verify-banner__dismiss {
      position: absolute;
      top: 0.35rem;
      right: 0.45rem;
      width: 1.5rem;
      height: 1.5rem;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-size: 1.1rem;
      cursor: pointer;
    }
    .email-verify-gate {
      position: fixed;
      inset: 0;
      z-index: 9300;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(4, 8, 16, 0.75);
      backdrop-filter: blur(8px);
    }
    .email-verify-gate[hidden] { display: none !important; }
    .email-verify-gate__card {
      width: min(420px, 100%);
      padding: 1.25rem;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      text-align: center;
    }
    .email-verify-gate__title { margin: 0 0 0.5rem; font-size: 1.15rem; }
    .email-verify-gate__body { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

    /* Talk to Human — demoted (standalone + embed) */
    #panel-chat.active .thread-item--support {
      opacity: 0.72;
      margin-top: 0.35rem;
    }
    #panel-chat.active .thread-item--support .thread-avatar--support {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border-radius: 8px;
      box-shadow: none;
    }
    #panel-chat.active .thread-item--support .thread-avatar--support svg {
      width: 14px;
      height: 14px;
    }
    #panel-chat.active .thread-item--support .thread-title {
      font-size: 0.82rem;
      color: color-mix(in srgb, var(--text) 78%, transparent);
    }
    #panel-chat.active .thread-item--support .thread-preview {
      font-size: 0.72rem;
      color: color-mix(in srgb, var(--muted) 85%, transparent);
    }
    #panel-chat.active .thread-item--support .support-online-dot {
      display: none !important;
    }
    #panel-chat.active .thread-item--support.thread-active {
      opacity: 1;
    }

    .auth-value-line {
      margin: 0 0 0.85rem;
      font-size: 0.86rem;
      color: var(--muted);
      text-align: center;
      line-height: 1.4;
    }