/* ============================================================
   BRAND KIT v2.0 — HiveOS Design System
   Accent: Premium Purple-Blue #5E6AD2 | Dark Theme (Linear-grade)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* BRAND KIT v2.0 — premium-minimalism palette */
  --accent:         #5E6AD2;
  --accent-hover:   #6F7BE0;
  --accent-subtle:  rgba(94, 106, 210, 0.12);
  --bg-base:        #1a1d21;
  --bg-surface:     #222529;
  --bg-elevated:    #2A2D32;
  --text-primary:   #E8E8E8;
  --text-secondary: #9A9EA6;
  --text-disabled:  #4A5260;
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --success: #2BAC76; --warning: #F59E0B; --error: #EF4444;

  /* Agent Card v3 brand tokens — Noa spec 2026-04-25 (locked) */
  --color-brand-primary:         #2bac76;
  --color-brand-primary-hover:   #33c487;
  --color-brand-primary-bg:      rgba(43, 172, 118, 0.08);
  --color-brand-primary-border:  rgba(43, 172, 118, 0.20);
  --color-brand-primary-tint:    rgba(43, 172, 118, 0.06);
  --color-brand-primary-avatar:  rgba(43, 172, 118, 0.40);
  --color-bg-card:               #1a1d21;
  --color-bg-divider:            #222529;
  --color-text-cta:              #1a1d21;
  --color-text-tertiary:         #6b7280;
  --color-border-ghost:          rgba(255, 255, 255, 0.12);

  /* Legacy aliases */
  --bg-dark: var(--bg-base); --bg-sidebar: #0E1013; --bg-chat: #1A1D21; --bg-input: #1E2024;
  --bg-hover: #2A2D32; --bg-active: var(--accent);
  --text-muted: #616061; --green: var(--success); --scrollbar-thumb: #555;

  /* ── Brandbook v2 extension (Noa 2026-04-27) ────────────────────────────
     Tokens explicitly required by hiveos_brandbook_v2.md but not yet defined
     above. Aliases re-use existing values; new tokens fill semantic gaps. */
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;

  /* Accent state-tokens (selection / pressed / focus) */
  --accent-tint:    var(--accent-subtle);          /* alias for spec compatibility */
  --accent-pressed: #4F5AC0;                       /* darker indigo for press */

  /* Surface depth — pressed state */
  --bg-pressed:     #32363B;

  /* Text tier completion */
  --text-tertiary:  #6B7280;                       /* dim metadata text */
  --text-inverse:   #0E1013;                       /* dark text on light/accent surfaces */

  /* Border tier completion */
  --border-default: var(--border);                 /* alias — 0.08 alpha */
  --border-subtle:  rgba(255, 255, 255, 0.06);     /* quieter than --border */

  /* Status tints (for backgrounds, not borders) */
  --danger:         var(--error);                  /* alias — semantic name */
  --danger-tint:    rgba(239, 68, 68, 0.12);
  --warning-tint:   rgba(245, 158, 11, 0.12);

  /* Radii — household scale per brandbook §1.5 */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-full:    9999px;

  /* Motion — single ease, two durations */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:       120ms;
  --dur-base:       150ms;

  /* Elevation — 3 levels + focus ring */
  --elev-1:         0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-2:         0 4px 12px rgba(0, 0, 0, 0.40);
  --elev-3:         0 8px 24px rgba(0, 0, 0, 0.50);
  --elev-focus:     0 0 0 2px var(--accent);
}
body { font-family: var(--font-ui); background: var(--bg-dark); color: var(--text-primary); height: 100vh; height: 100dvh; overflow: hidden; display: flex; overscroll-behavior: none; }

/* Sidebar */
.sidebar { width: 260px; min-width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-header { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sidebar-header h1 { font-size: 15px; font-weight: 600; color: #fff; }
.sidebar-header p { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sh-titles { min-width: 0; }
/* Logo lockup — hex mark + wordmark, horizontal (brandbook §3.3 UI-chrome lockup) */
.sh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-mark { display: block; width: 26px; height: 26px; flex-shrink: 0; }
/* ===== Desktop sidebar collapse drawer (Phase 2) ===== */
.sidebar { transition: width var(--dur-normal, 200ms) var(--ease-out, ease); }
.sidebar-collapse-btn { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); color: var(--text-muted); cursor: pointer; transition: color var(--dur-fast,120ms) var(--ease-out,ease), background var(--dur-fast,120ms) var(--ease-out,ease), border-color var(--dur-fast,120ms) var(--ease-out,ease); }
.sidebar-collapse-btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-strong); }
.sidebar-collapse-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sidebar-collapse-btn svg { transition: transform var(--dur-normal,200ms) var(--ease-out,ease); }
@media (min-width: 769px) {
  .sidebar.collapsed { width: 60px; min-width: 60px; }
  .sidebar.collapsed .sh-titles { display: none; }
  .sidebar.collapsed .sidebar-header { justify-content: center; padding: 16px 0 12px; }
  .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
  .sidebar.collapsed .wl-bar { display: none; }
  .sidebar.collapsed .agent-list, .sidebar.collapsed .group-list { padding: 6px 0; }
  .sidebar.collapsed .chat-item { justify-content: center; padding: 7px 0; gap: 0; }
  .sidebar.collapsed .chat-item-info, .sidebar.collapsed .chat-item .dot, .sidebar.collapsed .chat-item .delete-group { display: none; }
  .sidebar.collapsed .new-group-wrap, .sidebar.collapsed .open-loops-section { display: none; }
}
@media (max-width: 768px) { .sidebar-collapse-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar-collapse-btn svg { transition: none; } }
.sidebar-section { padding: 12px 12px 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; }
.sidebar-section .add-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; border-radius: 3px; }
.sidebar-section .add-btn:hover { color: #fff; background: var(--bg-hover); }
.agent-list, .group-list { overflow-y: auto; padding: 4px 8px; }
.agent-list { flex: 1; }
.group-list { max-height: 160px; }
.chat-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background 0.15s; margin-bottom: 1px; position: relative; }
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active { background: var(--bg-surface); box-shadow: inset 2px 0 0 var(--accent); }
.chat-item img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.chat-item .fallback-av { width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.chat-item-info { display: flex; flex-direction: column; min-width: 0; }
.chat-item-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-sub { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.active .chat-item-name { color: var(--text-primary); }
.chat-item.active .chat-item-sub { color: var(--text-secondary); }
.chat-item .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.chat-item.agent-active .dot { display: block; margin-left: auto; }
.chat-item .delete-group { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; line-height: 1; }
.chat-item .delete-group:hover { color: #e74c3c; background: rgba(231,76,60,0.15); }
.chat-item:hover .delete-group { display: block; }
.group-avatars { width: 24px; height: 24px; display: grid; gap: 1px; flex-shrink: 0; border-radius: 5px; overflow: hidden; }
.group-avatars.g2 { grid-template-columns: 1fr 1fr; }
.group-avatars.g3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.group-avatars.g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.group-avatars img { width: 100%; height: 100%; object-fit: cover; }
.group-avatars .ga-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; }
.group-avatars.g3 img:first-child, .group-avatars.g3 .ga-fallback:first-child { grid-column: 1 / -1; }
.wl-bar { display: flex; align-items: center; padding: 6px 10px 4px; gap: 4px; border-bottom: 1px solid var(--border); }
.wl-select { flex: 1; background: none; border: none; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-select:hover { color: var(--accent); }
.wl-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px; border-radius: 4px; display: flex; align-items: center; transition: all 0.15s; }
.wl-btn:hover { color: #fff; background: var(--bg-hover); }
.wl-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; z-index: 30; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-height: 320px; overflow-y: auto; }
.wl-dropdown.open { display: block; }
.wl-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; color: var(--text-primary); transition: background 0.1s; }
.wl-dropdown-item:hover { background: var(--bg-hover); }
.wl-dropdown-item.active { color: var(--accent); font-weight: 700; }
.wl-dropdown-item .wl-count { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.wl-dropdown-item .wl-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.wl-dropdown-item:hover .wl-actions { opacity: 1; }
.wl-dropdown-item .wl-actions button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; display: flex; }
.wl-dropdown-item .wl-actions button:hover { color: #fff; background: var(--bg-active); }
.wl-dropdown-sep { height: 1px; background: var(--border); margin: 4px 8px; }
.wl-dropdown-create { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; color: var(--accent); transition: background 0.1s; }
.wl-dropdown-create:hover { background: var(--bg-hover); }
.wl-edit-row { display: flex; align-items: center; gap: 4px; padding: 4px 10px; }
.wl-edit-row input { flex: 1; background: var(--bg-hover); border: 1px solid var(--accent); border-radius: 4px; color: var(--text-primary); font-size: 12px; padding: 4px 8px; outline: none; }
.wl-edit-row button { background: var(--accent); border: none; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.chat-item.drag-over { border-top: 2px solid var(--accent); margin-top: -1px; }
.chat-item.dragging { opacity: 0.4; }
.model-selector { padding: 12px; border-top: 1px solid var(--border); }
.model-selector label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.model-selector select { width: 100%; margin-top: 4px; padding: 6px 8px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 13px; cursor: pointer; }

/* Chat Area */
.chat-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-chat); min-width: 0; position: relative; }
.chat-header { padding: 10px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; min-height: 52px; }
/* Context Budget Gauge (Improvement Pack #1, 4.2) — 4px bar under the chat header */
#ctxGauge { height: 4px; flex-shrink: 0; background: var(--bg-elevated); position: relative; overflow: visible; }
#ctxGauge .ctxg-fill { height: 100%; width: 0; background: var(--success); transition: width 0.3s ease, background-color 0.3s ease; }
#ctxGauge.ctxg-warning .ctxg-fill { background: var(--warning); }
#ctxGauge.ctxg-danger .ctxg-fill { background: var(--danger); }
#ctxGauge .ctxg-tick { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--text-secondary); opacity: 0.5; }
.chat-header img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; cursor: pointer; }
.chat-header .fallback-av { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; }
.chat-header-info { cursor: pointer; }
.chat-header-info h2 { font-size: 16px; font-weight: 700; color: #fff; }
.chat-header-info p { font-size: 12px; color: var(--text-muted); }
.chat-header-actions { margin-left: auto; display: flex; gap: 8px; }
.btn-sm { padding: 5px 12px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; }
.btn-sm:hover { background: var(--bg-hover); color: #fff; }
.btn-sm svg { width: 14px; height: 14px; flex-shrink: 0; }
/* System Notifications panel - bell icon dropdown showing backend-emitted notices
   (trigger runs, agent knowledge updates, BGJOB results). */
.sys-notif-panel { position: absolute; top: 52px; right: 12px; width: 360px; max-height: 520px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 50; display: flex; flex-direction: column; overflow: hidden; }
.sys-notif-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.sys-notif-header h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin: 0; }
.sys-notif-header button { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.sys-notif-header button:hover { background: var(--bg-hover); color: #fff; }
/* Scroll ownership moved up to .sys-notif-body — the panel now stacks two
   sections (Needs you / Activity). Noa spec Etap 4 §A.2. */
.sys-notif-list { padding: 4px 0; }
.sys-notif-body { flex: 1; overflow-y: auto; }
.sys-notif-sec + .sys-notif-sec { border-top: 1px solid var(--border); margin-top: 4px; }
.sys-notif-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.sys-notif-sec-head .n { font-family: var(--font-mono, monospace); }
.sys-notif-dec { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.sys-notif-dec:last-child { border-bottom: none; }
.sys-notif-dec:hover, .sys-notif-dec:focus-visible { background: var(--bg-hover); }
.sys-notif-dec:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sys-notif-dec-av { width: 28px; height: 28px; border-radius: 9999px; background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sys-notif-dec-main { min-width: 0; }
.sys-notif-dec-title { font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.sys-notif-dec-agent { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-notif-dec-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sys-notif-dec-ts { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono, monospace); white-space: nowrap; }
.sys-notif-dec-risk { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 4px; background: var(--warning-tint, rgba(245,158,11,.12)); color: var(--warning, #F59E0B); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sys-notif-sec-more { display: block; width: 100%; text-align: center; padding: 9px 14px; background: transparent; border: none; border-top: 1px solid rgba(255,255,255,.04); color: var(--text-secondary); font-size: 11px; font-weight: 500; cursor: pointer; }
.sys-notif-sec-more:hover { color: #fff; background: var(--bg-hover); }
.sys-notif-sec-empty { padding: 8px 14px 20px; font-size: 11px; color: var(--text-muted); }
.sys-notif-item { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.12s; }
.sys-notif-item:hover { background: var(--bg-hover); }
.sys-notif-item:last-child { border-bottom: none; }
.sys-notif-item.unread { background: rgba(241,196,15,0.06); border-left: 2px solid #f1c40f; padding-left: 12px; }
.sys-notif-item .sn-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.sys-notif-item .sn-body { font-size: 11px; color: var(--text-secondary); line-height: 1.4; max-height: 60px; overflow: hidden; }
.sys-notif-item .sn-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.sys-notif-empty { padding: 30px 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
.mode-toggle { padding: 3px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; display: none; }
.mode-toggle.visible { display: inline-flex; }
.mode-toggle button { padding: 4px 10px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-muted); background: transparent; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.3px; }
.mode-toggle button svg { width: 13px; height: 13px; }
.mode-toggle button.active { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.mode-toggle button:not(.active):hover { color: var(--text-primary); }

/* ============================================================================
   GLOBAL SCROLLBAR — thin, dark, no arrow buttons. Every scrollable surface
   (message input textarea, modals, popovers, any overflow container) inherits
   this so we never see the fat native OS scrollbar. Matches the styled side
   scrollbars (.messages / .agent-list). Reported by Rafal 2026-06-04:
   "zmień aby ten suwak miał taki sam wygląd jak te poboczne".
   ============================================================================ */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: #6a6a6a; }
/* Kill the up/down arrow buttons the native textarea scrollbar shows. */
*::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* Messages */
.messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.messages::-webkit-scrollbar, .agent-list::-webkit-scrollbar, .group-list::-webkit-scrollbar { width: 5px; }
.messages::-webkit-scrollbar-thumb, .agent-list::-webkit-scrollbar-thumb, .group-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
/* content-visibility: auto — browser skips layout + paint for off-screen bubbles.
   Native virtualization without losing scroll/find/copy/screenshot behavior. Critical
   for long chats: at 121 messages, Chrome was spending entire frames on off-screen
   bubble re-layout during streaming → UI freeze. Reference: session_1778857062 incident.
   contain-intrinsic-size reserves placeholder space so scrollbar doesn't jump as
   bubbles come in/out of viewport. The `auto` prefix tells the browser to REMEMBER
   each bubble's actual size after first render — subsequent scrolls are stable.
   Bumped 200 → 400 (2026-05-16): agents like Noa/Henry frequently emit multi-section
   markdown responses that render 1000-2000px tall; a 200px placeholder caused
   visible scrollbar thumb jumps when those bubbles first scrolled into view. 400px
   is closer to the actual median for our heavier responses and keeps thumb stable. */
.msg { display: flex; gap: 10px; padding: 8px 0; max-width: 100%; align-items: flex-start;
       content-visibility: auto; contain-intrinsic-size: auto 400px; }
/* Live streaming bubble must NOT be skipped — content-visibility:auto would defer
   layout updates while chunks arrive, causing visible pop-in per chunk. The
   :has() selector forces full paint on whichever bubble currently contains the
   live .streaming-content marker. */
.msg:has(.streaming-content) { content-visibility: visible; }
.msg .av-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.msg .av-text { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; color: #fff; }
.msg-body { flex: 1; min-width: 0; }
/* User messages — very subtle blue tint + blue accent border */
.msg-user .msg-body { background: rgba(94,106,210,0.04); border: 1px solid rgba(94,106,210,0.12); border-radius: 8px; padding: 10px 14px; }
.msg-user .msg-header { margin-bottom: 2px; }
/* Agent messages — barely-there grey canvas. Subtle separation without
   visually dominating the content. */
.msg-agent .msg-body { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px 14px; }
.msg-agent .msg-header { margin-bottom: 2px; }
/* While agent is still streaming and content is empty, drop the bubble so we
   don't show an empty grey rectangle under the sender header. */
.msg-agent .msg-body:has(.streaming-content:empty) { background: none; border-color: transparent; padding: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.msg-sender { font-size: 14px; font-weight: 700; color: #fff; }
.exec-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #d4af37; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); padding: 1px 7px; border-radius: 10px; margin-left: 8px; text-transform: lowercase; letter-spacing: 0.3px; cursor: help; }
/* Action bar under agent messages (email-send, approve, etc.) */
.msg-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); }
.msg-action-btn { background: var(--accent); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.msg-action-btn:hover { background: var(--accent-hover); }
.msg-action-btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.msg-action-btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-muted); color: #fff; }
.msg-action-btn svg { flex-shrink: 0; }
/* Inline result panel under action buttons */
.msg-inline-result { margin-top: 8px; padding: 10px 12px; border-radius: 6px; font-size: 12px; line-height: 1.55; }
.msg-inline-result.em-pending { background: rgba(212,175,55,0.1); color: #d4af37; border: 1px solid rgba(212,175,55,0.25); }
.msg-inline-result.em-success { background: rgba(43,172,118,0.1); color: #2bac76; border: 1px solid rgba(43,172,118,0.25); }
.msg-inline-result.em-warn { background: rgba(255,165,0,0.1); color: #ffa500; border: 1px solid rgba(255,165,0,0.25); }
.msg-inline-result.em-error { background: rgba(220,53,69,0.1); color: #ff6b7a; border: 1px solid rgba(220,53,69,0.25); }
.msg-inline-result .em-summary { font-weight: 700; margin-bottom: 4px; }
.msg-inline-result .em-row { font-size: 11px; opacity: 0.9; padding: 1px 0; }
.msg-inline-result .em-row.em-ok { color: #2bac76; }
.msg-inline-result .em-row.em-fail { color: #ff6b7a; }
.msg-inline-result .em-undo-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.em-undo-btn { background: transparent; color: inherit; border: 1px solid currentColor; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; }
.em-undo-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }
/* Open Loops sidebar panel */
.open-loops-section { border-top: 1px solid var(--border); flex-shrink: 0; max-height: 200px; display: flex; flex-direction: column; }
.open-loops-header { padding: 10px 12px 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.open-loops-header:hover { background: var(--bg-hover); }
.open-loops-title { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.open-loops-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 14px; padding: 0 4px; background: var(--accent); color: #fff; border-radius: 7px; font-size: 9px; font-weight: 700; }
.open-loops-count.zero { background: var(--border); color: var(--text-muted); }
.open-loops-chevron { transition: transform 0.15s; color: var(--text-muted); }
.open-loops-section.collapsed .open-loops-chevron { transform: rotate(-90deg); }
.open-loops-section.collapsed .open-loops-list { display: none; }
.open-loops-list { overflow-y: auto; padding: 0 8px 8px; flex: 1; }
.loop-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 11px; transition: background 0.15s; margin-bottom: 1px; }
.loop-item:hover { background: var(--bg-hover); }
.loop-item.has-goal { border-left: 2px solid #d4af37; padding-left: 6px; }
.loop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.loop-dot.waiting_for_reply { background: #d4af37; }
.loop-dot.reply_received { background: #2bac76; animation: pulse 1.5s infinite; }
.loop-dot.awaiting_approval { background: #5E6AD2; }
.loop-dot.in_progress { background: #5E6AD2; }
.loop-dot.stale_needs_followup { background: #dc3545; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.loop-item-body { flex: 1; min-width: 0; }
.loop-company { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-meta { color: var(--text-muted); font-size: 10px; margin-top: 1px; }
.loop-goal-ring { width: 14px; height: 14px; border: 2px solid #d4af37; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px rgba(212,175,55,0.5); position: relative; }
.loop-goal-ring::before { content: ''; position: absolute; inset: 2px; background: #d4af37; border-radius: 50%; }
/* Golden ring on agent avatar when they have a thread in AUTO mode */
.av-img.auto-mode, .av-text.auto-mode { box-shadow: 0 0 0 2px #d4af37, 0 0 8px rgba(212,175,55,0.5); }
/* Gold energy aura — pulsing glow on sidebar avatar during silent background research */
@keyframes research-aura {
  0%, 100% { box-shadow: 0 0 0 2px #d4af37, 0 0 6px rgba(212,175,55,0.25); }
  50% { box-shadow: 0 0 0 3px #d4af37, 0 0 14px rgba(212,175,55,0.55), 0 0 28px rgba(212,175,55,0.15); }
}
.chat-item.researching img { animation: research-aura 2.2s ease-in-out infinite; border-radius: 6px; }
.chat-item.researching .fallback-av { animation: research-aura 2.2s ease-in-out infinite; }
/* Agent working — subtle blue pulse on sidebar avatar during any active streaming.
   Distinct from gold research aura: this is 'agent is working right now',
   user never wonders if the agent froze. */
@keyframes active-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 4px rgba(94,106,210,0.25); }
  50% { box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(94,106,210,0.55), 0 0 24px rgba(94,106,210,0.15); }
}
.chat-item.agent-active img { animation: active-pulse 1.8s ease-in-out infinite; border-radius: 6px; }
.chat-item.agent-active .fallback-av { animation: active-pulse 1.8s ease-in-out infinite; }
/* Backend-activity pulse — softer than agent-active; shows any backend stage running.
   agent-active wins when both apply (streaming is the strongest visual signal). */
@keyframes backend-activity {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(94,106,210,0.35), 0 0 3px rgba(94,106,210,0.10); }
  50% { box-shadow: 0 0 0 2.5px rgba(94,106,210,0.55), 0 0 8px rgba(94,106,210,0.22); }
}
.chat-item.agent-working:not(.agent-active) img { animation: backend-activity 2.4s ease-in-out infinite; border-radius: 6px; }
.chat-item.agent-working:not(.agent-active) .fallback-av { animation: backend-activity 2.4s ease-in-out infinite; }
/* Inbound reply special rendering */
.msg-inbound-reply .msg-content { border-left: 3px solid #2bac76; padding-left: 10px; background: rgba(43,172,118,0.05); border-radius: 4px; }
/* Goal modal */
.goal-modal label { display: block; font-size: 11px; color: var(--text-secondary); margin: 10px 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.goal-modal textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 10px; border-radius: 5px; font-family: inherit; font-size: 13px; min-height: 80px; resize: vertical; }
.goal-modal input[type="number"] { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 5px; font-family: inherit; font-size: 12px; }
.goal-modal .goal-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.btn-start-auto { background: #d4af37; color: #1a1d21; border: none; padding: 7px 18px; border-radius: 5px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-start-auto:hover { background: #c19d2b; }

/* ============================================================ */
/* OPEN LOOPS v3 — agent-grouped sidebar                         */
/* ============================================================ */
.open-loops-section { max-height: 320px; }
.loop-agent-group { margin-bottom: 2px; }
.loop-agent-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; user-select: none; min-height: 40px; transition: background 0.15s; }
.loop-agent-mail-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: rgba(94,106,210,0.12); color: var(--accent); font-size: 11px; font-weight: 600; flex-shrink: 0; transition: background 0.15s; }
.loop-agent-row:hover .loop-agent-mail-badge { background: rgba(94,106,210,0.2); }
.loop-agent-mail-badge svg { width: 12px; height: 12px; }
.loop-agent-mail-badge .mail-count { font-family: ui-monospace, monospace; }
.loop-agent-group.flat .loop-agent-chev, .loop-agent-group.flat .loop-children, .loop-agent-group.flat .loop-agent-count { display: none; }
.loop-agent-row:hover { background: var(--bg-hover); }
.loop-agent-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.loop-agent-chev { color: var(--text-muted); flex-shrink: 0; transition: transform 0.2s ease-out; }
.loop-agent-group.expanded .loop-agent-chev { transform: rotate(90deg); }
.loop-agent-av { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.loop-agent-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-agent-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 16px; padding: 0 6px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.loop-agent-worstdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.loop-agent-worstdot.red { background: #dc3545; }
.loop-agent-worstdot.yellow { background: #d4af37; }
.loop-agent-worstdot.green { background: #2bac76; }
.loop-agent-worstdot.grey { background: var(--text-muted); opacity: 0.4; }
.loop-children { padding-left: 28px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
.loop-agent-group.expanded .loop-children { max-height: 1000px; transition: max-height 0.3s ease-in; }
.loop-child { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 5px; cursor: pointer; min-height: 36px; transition: background 0.15s; }
.loop-child:hover { background: var(--bg-hover); }
.loop-child.active-thread { background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--accent); }
.loop-child.has-goal { box-shadow: inset 3px 0 0 #d4af37; }
.loop-status-mini { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loop-status-mini svg { width: 10px; height: 10px; stroke-width: 2.5; }
.loop-status-mini.waiting_for_reply { background: rgba(212,175,55,0.18); color: #d4af37; }
.loop-status-mini.reply_received { background: rgba(43,172,118,0.18); color: #2bac76; }
.loop-status-mini.stalled_needs_followup, .loop-status-mini.stale_needs_followup { background: rgba(220,53,69,0.18); color: #dc3545; }
.loop-status-mini.awaiting_approval, .loop-status-mini.in_progress { background: rgba(94,106,210,0.18); color: var(--accent); }
.loop-status-mini.closed, .loop-status-mini.resolved { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.loop-child-body { flex: 1; min-width: 0; }
.loop-child-company { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.loop-child-topic { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.loop-child-days { font-size: 10px; color: var(--text-muted); font-family: ui-monospace, monospace; flex-shrink: 0; }

/* ============================================================ */
/* EMAIL WORKSPACE v4 — full-window overlay                      */
/* ============================================================ */
.email-workspace { position: fixed; inset: 0; z-index: 900; display: none; background: var(--bg-dark); }
.email-workspace.open { display: flex; flex-direction: column; animation: ewFade 0.2s ease-out; }
@keyframes ewFade { from { opacity: 0; } to { opacity: 1; } }
body.ew-open .sidebar, body.ew-open #chatMain, body.ew-open .chat-main { visibility: hidden; }

/* Top mode bar — exit affordances */
.ew-topbar { height: 36px; flex-shrink: 0; display: flex; align-items: center; padding: 0 12px; gap: 10px; background: linear-gradient(90deg, #1a1f2e 0%, #151921 100%); border-bottom: 1px solid #5B8DEF; }
.ew-back { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; }
.ew-back:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.ew-back svg { width: 12px; height: 12px; stroke-width: 2; }
.ew-breadcrumb { flex: 1; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.ew-breadcrumb-seg { cursor: pointer; transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-breadcrumb-seg:hover { color: var(--text-primary); }
.ew-breadcrumb-seg.current { color: var(--text-primary); font-weight: 500; }
.ew-breadcrumb-sep { color: var(--text-muted); flex-shrink: 0; }
.ew-panel { flex: 1; display: flex; min-height: 0; }

/* List pane — compact */
.ew-list { width: 220px; min-width: 200px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-chat); flex-shrink: 0; }
.ew-list-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.ew-list-search { width: 100%; background: rgba(255,255,255,0.03); border: none; color: var(--text-primary); padding: 6px 10px; border-radius: 5px; font-size: 12px; height: 30px; }
.ew-list-search:focus { outline: 1px solid var(--accent); }
.ew-list-items { flex: 1; overflow-y: auto; }
.ew-list-item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 16px 14px; column-gap: 8px; row-gap: 2px; align-items: center; height: 48px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.1s; }
.ew-list-item:hover { background: rgba(255,255,255,0.03); }
.ew-list-item.active { background: rgba(94,106,210,0.1); box-shadow: inset 3px 0 0 var(--accent); }
.ew-list-item-company { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 16px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ew-company-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ew-list-item .ew-mbx-chip { flex-shrink: 0; margin-left: 0; line-height: 14px; }
.ew-list-item-time { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); flex-shrink: 0; line-height: 16px; }
.ew-list-item-status { grid-column: 1 / -1; font-size: 11px; color: var(--text-secondary); line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-list-item-status.waiting_for_reply { color: var(--warning); }
.ew-list-item-status.reply_received { color: var(--success); }
.ew-list-item-status.stalled_needs_followup, .ew-list-item-status.stale_needs_followup { color: var(--error); }

.ew-detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ew-header { padding: 14px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.ew-header-title { flex: 1; min-width: 0; }
.ew-header-company { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.ew-header-email { font-size: 11px; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ew-header-email-addr { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); color: var(--accent); cursor: pointer; padding: 1px 4px; border-radius: 3px; transition: background 0.15s; }
.ew-header-email-addr:hover { background: rgba(94,106,210,0.12); }
.ew-header-email-addr .ew-copy-ico { opacity: 0.6; }
.ew-header-email-addr:hover .ew-copy-ico { opacity: 1; }
.ew-header-email-addr.copied { color: var(--success); }
.ew-header-subj { color: var(--text-muted); }
.ew-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ew-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ew-status-pill svg { width: 12px; height: 12px; stroke-width: 2; }
.ew-status-pill.waiting_for_reply { background: rgba(245,158,11,0.15); color: var(--warning); }
.ew-status-pill.reply_received { background: rgba(43,172,118,0.15); color: var(--success); }
.ew-status-pill.stalled_needs_followup, .ew-status-pill.stale_needs_followup { background: rgba(239,68,68,0.15); color: var(--error); }
.ew-status-pill.awaiting_approval, .ew-status-pill.in_progress { background: rgba(94,106,210,0.15); color: var(--accent); }
.ew-status-pill.closed, .ew-status-pill.resolved { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.ew-status-pill.has-goal { box-shadow: 0 0 0 1.5px var(--warning); }
.ew-status-pill.replied { background: rgba(43,172,118,0.15); color: var(--success); text-transform: none; letter-spacing: 0; }
.ew-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-secondary); border-radius: 6px; cursor: pointer; padding: 0; }
.ew-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.ew-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ew-meta { height: 44px; padding: 0 20px; background: rgba(0,0,0,0.18); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--text-secondary); flex-shrink: 0; flex-wrap: wrap; }
.ew-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.ew-meta-item svg { width: 12px; height: 12px; stroke-width: 2; opacity: 0.7; }
.ew-meta-sep { width: 1px; height: 12px; background: var(--border); }
.ew-meta-tid { font-family: var(--font-mono); color: var(--text-muted); cursor: pointer; }
.ew-meta-tid:hover { color: var(--accent); }

.ew-timeline { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ew-day-sep { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ew-day-sep::before, .ew-day-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ew-day-sep-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.ew-bubble { max-width: 72%; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.ew-bubble-received { align-self: flex-start; margin-right: auto; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text-primary); }
.ew-bubble-sent { align-self: flex-end; margin-left: auto; background: rgba(94,106,210,0.12); border: 1px solid rgba(94,106,210,0.28); border-bottom-right-radius: 4px; color: var(--text-primary); }
.ew-bubble-goal { align-self: stretch; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.28); border-left: 3px solid var(--warning); border-radius: 6px; padding: 10px 14px; color: var(--text-primary); font-size: 12px; }
.ew-bubble-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.ew-bubble-head-sender { font-weight: 500; color: var(--text-primary); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ew-bubble-head-time { color: var(--text-secondary); font-family: var(--font-mono); flex-shrink: 0; }
.ew-bubble-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ew-bubble-subject { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.ew-bubble-body { color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.ew-bubble-body.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.ew-bubble-toggle { background: transparent; border: none; color: var(--accent); font-size: 11px; padding: 6px 0 0; cursor: pointer; font-weight: 500; }
.ew-bubble-toggle:hover { text-decoration: underline; }
/* Attachments inside message bubble */
.ew-bubble-atts { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 4px; }
.ew-att-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; font-size: 11px; background: rgba(255,255,255,0.03); flex-wrap: wrap; min-height: 28px; }
.ew-att-row.has-text { background: rgba(43,172,118,0.08); }
.ew-att-ico { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-muted); }
.ew-att-row.has-text .ew-att-ico { color: var(--success); }
.ew-att-name { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; min-width: 80px; }
.ew-att-meta { color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ew-att-toggle { margin-left: auto; background: transparent; border: 1px solid rgba(43,172,118,0.4); color: var(--success); padding: 2px 8px; border-radius: 3px; font-size: 10px; cursor: pointer; flex-shrink: 0; }
.ew-att-toggle:hover { background: rgba(43,172,118,0.12); }
.ew-att-text { margin: 6px 0 0; padding: 10px; background: rgba(0,0,0,0.25); border-radius: 4px; font-size: 11px; color: var(--text-secondary); white-space: pre-wrap; overflow-x: auto; max-height: 300px; overflow-y: auto; line-height: 1.45; font-family: var(--font-mono); }

/* Empty state for the thread list (brandbook §2.8: icon + title + hint) */
.ew-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--text-muted); }
.ew-empty svg { opacity: 0.35; margin-bottom: 4px; }
.ew-empty-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ew-empty-sub { font-size: 11px; color: var(--text-muted); }
/* Skeleton rows while the archive fetch is in flight */
.ew-skel-row { display: flex; flex-direction: column; justify-content: center; gap: 6px; pointer-events: none; }

.ew-empty-hint { text-align: center; padding: 24px; color: var(--text-muted); }
.ew-empty-hint svg { opacity: 0.4; margin-bottom: 12px; }
.ew-empty-hint-text { font-size: 13px; color: var(--text-secondary); }
.ew-empty-hint-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Draft card — adaptive (3 states) */
.ew-draft { flex-shrink: 0; background: var(--bg-chat); border-top: 1px solid rgba(255,255,255,0.06); transition: all 0.24s cubic-bezier(0.4,0,0.2,1); display: flex; align-items: center; overflow: visible; position: relative; }
.ew-draft.state-empty { height: auto; min-height: 40px; padding: 6px 16px; gap: 12px; background: rgba(255,255,255,0.02); justify-content: flex-end; }
.ew-draft.state-empty .ew-draft-label-inline { font-size: 12px; color: var(--text-muted); }
.ew-draft.state-empty .ew-draft-inline-btn { background: transparent; border: none; color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.ew-draft.state-empty .ew-draft-inline-btn:hover { background: rgba(94,106,210,0.12); }
.ew-draft.state-empty .ew-draft-inline-btn svg { width: 12px; height: 12px; }
.ew-draft.state-amber { height: auto; min-height: 44px; padding: 6px 14px; gap: 10px; border-top: 1px solid rgba(245,158,11,0.5); background: rgba(245,158,11,0.04); flex-wrap: wrap; justify-content: flex-end; }
.ew-draft.state-amber .ew-draft-label-inline { font-size: 11px; color: var(--warning); display: inline-flex; align-items: center; gap: 5px; flex: 1; }
.ew-draft.state-amber .ew-draft-label-inline svg { width: 12px; height: 12px; stroke-width: 2; }
.ew-draft.state-amber .ew-draft-primary-btn { background: var(--warning); color: #1a1d21; border: none; padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; height: 26px; transition: background 0.15s; }
.ew-draft.state-amber .ew-draft-primary-btn:hover { background: #d97706; }
.ew-draft.state-full { flex-direction: column; align-items: stretch; min-height: 240px; max-height: 85vh; padding: 0; height: var(--draft-height, 460px); position: relative; }
.ew-draft-resize { position: absolute; top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 5; display: flex; align-items: center; justify-content: center; }
.ew-draft-resize::before { content: ''; width: 40px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background 0.15s; }
.ew-draft-resize:hover::before, .ew-draft-resize.dragging::before { background: var(--accent); }
body.ew-draft-resizing { cursor: ns-resize !important; user-select: none !important; }
.ew-draft.state-full .ew-draft-head { height: 32px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; }
.ew-draft.state-full .ew-draft-head .ew-draft-label { flex: 1; font-size: 10px; }
.ew-draft.state-full .ew-draft-head-author { font-size: 10px; color: var(--text-muted); }
.ew-draft.state-full .ew-draft-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.ew-draft.state-full .ew-draft-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.ew-draft.state-full .ew-draft-close svg { width: 12px; height: 12px; }
.ew-draft.state-full .ew-draft-body { padding: 8px 14px 4px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Missing-data warning banner — topbar shown when draft contains placeholders */
.ew-draft-missinginfo { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(245,158,11,0.12); border-bottom: 1px solid rgba(245,158,11,0.28); flex-shrink: 0; }
.ew-draft-missinginfo-ico { width: 16px; height: 16px; color: var(--warning); flex-shrink: 0; }
.ew-draft-missinginfo-text { flex: 1; font-size: 11.5px; color: var(--warning); line-height: 1.35; }
.ew-draft-missinginfo-text b { color: #F0BD6B; font-weight: 600; }
.ew-draft-missinginfo-btn { background: var(--warning); color: #1a1d21; border: none; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ew-draft-missinginfo-btn:hover { background: #F0BD6B; }
.ew-draft-missinginfo-btn svg { width: 11px; height: 11px; }
/* Action-log dropdown — clickable "by Agent" header surfaces context meta */
.ew-draft-author-wrap { position: relative; }
.ew-draft-author-btn { background: transparent; border: none; color: var(--text-muted); font-size: 10px; padding: 2px 6px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.ew-draft-author-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.ew-draft-author-btn svg { width: 9px; height: 9px; opacity: 0.7; }
.ew-draft-actionlog { position: absolute; top: calc(100% + 4px); right: 0; min-width: 300px; max-width: 380px; max-height: 340px; overflow-y: auto; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,0.5); z-index: 200; padding: 10px 12px; font-size: 11.5px; color: var(--text-primary); line-height: 1.5; display: none; }
.ew-draft-author-wrap.open .ew-draft-actionlog { display: block; }
.ew-draft-actionlog h5 { margin: 0 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.ew-draft-actionlog-row { display: flex; gap: 6px; padding: 3px 0; font-family: var(--font-mono); font-size: 10.5px; }
.ew-draft-actionlog-row .t { color: var(--text-muted); flex-shrink: 0; }
.ew-draft-actionlog-row .d { color: var(--text-primary); }
.ew-draft-actionlog-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.ew-draft-actionlog-section:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
.ew-draft-actionlog-att { display: block; padding: 2px 0; color: var(--text-secondary); font-size: 11px; }
.ew-draft-actionlog-att .ok { color: var(--success); }
.ew-draft-actionlog-att .miss { color: var(--warning); }
/* Hint button + popup for draft guidance */
.ew-hint-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); padding: 5px 10px; border-radius: 5px; font-size: 11px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
.ew-hint-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text-primary); background: rgba(255,255,255,0.04); }
.ew-hint-btn.active { border-color: var(--accent); color: var(--accent); }
/* Attachment button — neutral like Hint, lights up when files present */
.ew-attachment-btn.has-files { border-color: rgba(94,106,210,0.55); color: rgba(94,106,210,0.95); background: rgba(94,106,210,0.08); }
.ew-attachment-btn.uploading { opacity: 0.6; cursor: wait; }
.ew-attachment-btn:disabled { cursor: wait; }
/* Attachment chips — neutral pills under the toolbar */
.ew-attach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.ew-attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; background: rgba(94,106,210,0.08); border: 1px solid rgba(94,106,210,0.22); border-radius: 12px; font-size: 11px; color: var(--text-primary); max-width: 280px; }
.ew-attach-chip-ico { color: rgba(94,106,210,0.95); display: inline-flex; flex-shrink: 0; }
.ew-attach-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.ew-attach-chip-size { color: var(--text-muted); font-size: 10px; }
.ew-attach-chip-x { background: transparent; border: 0; color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit; }
.ew-attach-chip-x:hover { color: #ff6b7a; }
.ew-draft.state-empty, .ew-draft.state-amber { position: relative; }
.ew-hint-popup { position: absolute; bottom: calc(100% + 4px); right: 14px; width: 340px; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 -6px 24px rgba(0,0,0,0.5); padding: 10px; z-index: 50; }
.ew-hint-popup textarea { width: 100%; min-height: 80px; max-height: 140px; background: var(--bg-input); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; color: var(--text-primary); font-size: 12px; font-family: inherit; padding: 8px; resize: vertical; outline: none; box-sizing: border-box; }
.ew-hint-popup textarea:focus { border-color: var(--accent); }
.ew-hint-popup textarea::placeholder { color: var(--text-muted); font-style: italic; }
.ew-hint-popup-label { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; display: block; }
/* Reassign thread button */
.ew-reassign-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; display: inline-flex; align-items: center; transition: color 0.15s; margin-left: 2px; }
.ew-reassign-btn:hover { color: var(--accent); }
/* Sync emails button */
.ew-sync-btn { background: none; border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); padding: 4px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.ew-sync-btn:hover { border-color: var(--accent); color: var(--accent); }
.ew-sync-btn.syncing { animation: spin 1s linear infinite; pointer-events: none; color: var(--accent); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ew-generate-btn { background: var(--accent) !important; color: #fff !important; border: none !important; padding: 8px 16px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; transition: background 0.15s; box-shadow: 0 2px 8px rgba(94,106,210,0.3); }
.ew-generate-btn:hover { background: var(--accent-hover) !important; }
.ew-draft-actionlog { min-width: 340px; max-width: 420px; }
.ew-draft-action-bullet { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; font-size: 12px; line-height: 1.45; }
.ew-draft-action-bullet .bullet-dot { color: var(--success); font-size: 14px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.ew-draft-action-bullet .bullet-body { color: var(--text-primary); flex: 1; word-break: break-word; }
.ew-draft-action-bullet b { font-weight: 600; }

/* ============================================================ */
/* EMAIL WORKSPACE — Bulk actions + Draft CRUD (Noa spec v5)     */
/* ============================================================ */

/* Agent avatar picker in list pane header (v5 per Rafal feedback) */
.ew-list-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ew-list-selectall { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.22); background: var(--bg-input); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.ew-list-selectall:hover { border-color: rgba(255,255,255,0.4); }
.ew-list-selectall.checked { background: var(--accent); border-color: var(--accent); }
.ew-list-selectall.checked::after { content: ''; width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.ew-list-selectall.indeterminate { background: var(--accent); border-color: var(--accent); }
.ew-list-selectall.indeterminate::after { content: ''; width: 8px; height: 2px; background: #fff; }
.ew-agent-picker { position: relative; flex-shrink: 0; }
.ew-agent-picker-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 50%; }
.ew-agent-picker-btn:hover { background: rgba(255,255,255,0.06); }
.ew-agent-picker-btn img, .ew-agent-picker-btn .ew-agent-picker-fallback { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.ew-agent-picker-btn svg { width: 10px; height: 10px; color: var(--text-muted); }
.ew-agent-picker-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 100; padding: 4px; display: none; }
.ew-agent-picker.open .ew-agent-picker-dropdown { display: block; }
.ew-agent-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; cursor: pointer; transition: background 0.1s; }
.ew-agent-picker-item:hover { background: rgba(255,255,255,0.06); }
.ew-agent-picker-item.active { background: rgba(94,106,210,0.15); }
.ew-agent-picker-item img, .ew-agent-picker-item .ew-agent-picker-fallback { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.ew-agent-picker-item-name { flex: 1; font-size: 12px; color: var(--text-primary); }
.ew-agent-picker-item-count { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.ew-list-header .ew-sync-btn { margin-left: auto; }
.ew-list-view-toggle { display: inline-flex; background: rgba(255,255,255,0.04); border-radius: 4px; padding: 2px; gap: 2px; margin: 6px 12px 0; }
.ew-list-view-toggle button { flex: 1; background: transparent; border: none; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 8px; border-radius: 3px; cursor: pointer; transition: all 0.15s; }
.ew-list-view-toggle button.active { background: var(--bg-input); color: var(--text-primary); }
.ew-list-view-toggle button:hover:not(.active) { color: var(--text-primary); }
.ew-list-view-toggle .count { opacity: 0.7; font-family: var(--font-mono); margin-left: 2px; }

/* Thread list item — checkboxes always visible (v7 per Rafal feedback) */
.ew-list-item { position: relative; grid-template-columns: 20px 1fr auto; column-gap: 6px; }
.ew-list-checkbox { grid-row: 1 / span 2; grid-column: 1; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.22); background: var(--bg-input); cursor: pointer; flex-shrink: 0; opacity: 1; display: inline-flex; align-items: center; justify-content: center; align-self: center; transition: border-color 0.15s; }
.ew-list-item:hover .ew-list-checkbox { border-color: rgba(255,255,255,0.4); }
.ew-list-checkbox.checked { background: var(--accent); border-color: var(--accent); opacity: 1; }
.ew-list-checkbox.checked::after { content: ''; width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.ew-list-checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ew-list-item.has-draft { box-shadow: inset 3px 0 0 var(--success); }
.ew-list-item.has-draft.active { box-shadow: inset 3px 0 0 var(--accent); }

/* Company + time grid — now in columns 2/3 */
.ew-list-item-company { grid-column: 2; }
.ew-list-item-time { grid-column: 3; }
.ew-list-item-status { grid-column: 2 / -1; }

/* DRAFT READY pill — replaces status line */
.ew-draft-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(43,172,118,0.15); color: var(--success); cursor: help; }
.ew-draft-pill svg { width: 10px; height: 10px; stroke-width: 2.5; }
.ew-draft-pill-skeleton { display: inline-flex; width: 90px; height: 16px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 100%); background-size: 200% 100%; animation: ewShimmer 1.5s ease-in-out infinite; }
@keyframes ewShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Draft preview tooltip — floating, anchored to pill */
.ew-draft-tooltip { position: fixed; z-index: 950; width: 420px; max-height: 520px; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease-out, transform 0.18s ease-out; pointer-events: none; cursor: pointer; display: flex; flex-direction: column; }
.ew-draft-tooltip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ew-draft-tooltip:hover { border-color: var(--accent); }
/* Invisible bridge so mouse can cross the 8px gap between pill and tooltip without triggering mouseleave */
.ew-draft-tooltip::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }
.ew-draft-tooltip-subject { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: 1.3; flex-shrink: 0; }
.ew-draft-tooltip-body { font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.5; overflow-y: auto; flex: 1; padding-right: 6px; }
.ew-draft-tooltip-body::-webkit-scrollbar { width: 6px; }
.ew-draft-tooltip-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.ew-draft-tooltip-cap { font-size: 10px; color: var(--accent); margin-top: 8px; text-align: center; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; font-weight: 500; }

/* Bulk action toolbar — sticky bottom, vertical stack (v6 per Rafal) */
.ew-bulk-toolbar { flex-shrink: 0; max-height: 0; overflow: hidden; background: rgba(94,106,210,0.08); border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0 10px; transition: max-height 0.2s ease-out, padding 0.2s ease-out; }
.ew-list.has-selection .ew-bulk-toolbar { max-height: 200px; padding: 10px; }
.ew-bulk-btn-primary { width: 100%; background: var(--accent); color: #fff; border: none; padding: 8px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; white-space: nowrap; }
.ew-bulk-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.ew-bulk-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.ew-bulk-btn-primary svg { width: 12px; height: 12px; flex-shrink: 0; }
.ew-bulk-btn-secondary { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 7px 12px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ew-bulk-btn-secondary:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.25); }
.ew-bulk-btn-secondary svg { width: 12px; height: 12px; }
.ew-bulk-btn-clear { width: 100%; background: transparent; border: none; color: var(--text-muted); padding: 4px; font-size: 11px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ew-bulk-btn-clear:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.ew-bulk-btn-clear svg { width: 12px; height: 12px; }

/* Undo toast for archive */
.ew-undo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 950; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); display: flex; align-items: center; gap: 12px; min-width: 280px; font-size: 13px; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.ew-undo-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ew-undo-toast-icon { color: var(--text-muted); }
.ew-undo-toast-text { flex: 1; }
.ew-undo-toast-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; }
.ew-undo-toast-btn:hover { background: rgba(94,106,210,0.12); }
.ew-bulk-spinner { width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ewSpin 0.8s linear infinite; display: inline-block; }
@keyframes ewSpin { to { transform: rotate(360deg); } }

/* Draft Approval Card — state-full wired up */
/* Subject = inline compact row with label prefix, no stacked label block */
.ew-draft.state-full .ew-draft-subject-row { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 6px; }
.ew-draft.state-full .ew-draft-subject-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; }
.ew-draft.state-full .ew-draft-input { flex: 1; background: transparent; border: none; color: var(--text-primary); padding: 4px 0; font-family: inherit; font-size: 12px; outline: none; min-width: 0; }
.ew-draft.state-full .ew-draft-input:focus { color: var(--text-primary); }
/* Body fills remaining vertical space */
.ew-draft.state-full .ew-draft-textarea { width: 100%; background: transparent; border: none; color: var(--text-primary); padding: 0; font-family: inherit; font-size: 13px; flex: 1; resize: none; line-height: 1.6; outline: none; min-height: 280px; }
.ew-draft.state-full .ew-draft-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; }
.ew-draft.state-full .ew-draft-btn-send { background: var(--accent); color: #fff; border: none; padding: 8px 16px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ew-draft.state-full .ew-draft-btn-send:hover:not(:disabled) { background: var(--accent-hover); }
.ew-draft.state-full .ew-draft-btn-send:disabled { opacity: 0.6; cursor: not-allowed; }
.ew-draft.state-full .ew-draft-btn-sec { background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 8px 14px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; }
.ew-draft.state-full .ew-draft-btn-sec:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); }
.ew-draft.state-full .ew-draft-btn-reject { background: transparent; border: none; color: var(--text-secondary); padding: 8px 12px; font-size: 12px; cursor: pointer; border-radius: 5px; }
.ew-draft.state-full .ew-draft-btn-reject:hover { color: #ff6b7a; background: rgba(239,68,68,0.08); }
/* Attachment row inside the draft body — label + chips inline. Slot wraps chips so they left-align under the caption (overrides .ew-attach-chips default flex-end). */
.ew-draft.state-full .ew-draft-attach-row { align-items: flex-start; }
.ew-draft.state-full .ew-draft-attach-slot { flex: 1; min-width: 0; }
.ew-draft.state-full .ew-draft-attach-slot .ew-attach-chips { margin-top: 0; justify-content: flex-start; }
/* Action-row Attachment button — same .ew-attachment-btn pill, sized to align with the action-row Reject/Regenerate/Approve buttons. */
.ew-draft.state-full .ew-draft-actions .ew-attachment-btn { padding: 8px 14px; font-size: 12px; }
.ew-draft-meta { font-size: 10px; color: var(--text-muted); padding: 0 20px 8px; }

/* Sent confirmation strip */
.ew-draft.state-sent { height: 48px !important; min-height: 48px !important; max-height: 48px !important; background: rgba(43,172,118,0.08); border-top: 1px solid rgba(43,172,118,0.25); display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-direction: row; }
.ew-draft.state-sent .ew-draft-sent-label { flex: 1; font-size: 12px; color: #2bac76; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.ew-draft.state-sent .ew-draft-undo { background: transparent; border: 1px solid #2bac76; color: #2bac76; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }



/* ============================================================ */
/* ATLAS FLOW UI COMPONENTS — agent creation design system       */
/* ============================================================ */

/* Progress bar (3 steps) */
.atlas-progress { display: flex; gap: 6px; padding: 10px 16px; background: var(--bg-chat); border-bottom: 1px solid var(--border); font-size: 11px; position: sticky; top: 0; z-index: 10; }
.atlas-progress-step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: rgba(255,255,255,0.02); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.25s; }
.atlas-progress-step.active { background: rgba(94,106,210,0.12); color: var(--accent); border: 1px solid rgba(94,106,210,0.3); }
.atlas-progress-step.done { color: var(--green); }
.atlas-progress-step .atlas-step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.06); font-size: 10px; font-weight: 700; }
.atlas-progress-step.active .atlas-step-num { background: var(--accent); color: #fff; }
.atlas-progress-step.done .atlas-step-num { background: var(--green); color: #fff; }

/* Intro card */
.atlas-intro-card { margin: 16px 0; padding: 24px; background: linear-gradient(135deg, rgba(94,106,210,0.08), rgba(43,172,118,0.04)); border: 1px solid var(--border); border-radius: 12px; display: flex; gap: 16px; align-items: flex-start; }
.atlas-intro-avatar { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
.atlas-intro-body { flex: 1; }
.atlas-intro-text { font-size: 15px; line-height: 1.6; color: var(--text-primary); margin-bottom: 16px; }
.atlas-cta-btn { background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.atlas-cta-btn:hover { background: var(--accent-hover); }

/* Quick reply chips */
.atlas-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; }
.atlas-chip { background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 7px 14px; border-radius: 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.atlas-chip:hover { border-color: var(--accent); background: rgba(94,106,210,0.08); color: var(--accent); }
.atlas-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Confirm/Edit card */
.atlas-card { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 12px 0; }
.atlas-card.locked { opacity: 0.7; border-color: var(--green); background: rgba(43,172,118,0.05); }
.atlas-card.locked::before { content: '✓'; display: inline-block; color: var(--green); font-size: 14px; font-weight: 900; margin-right: 8px; }
.atlas-card-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.atlas-card-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.atlas-card-input, .atlas-card-textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 10px; border-radius: 6px; font-family: inherit; font-size: 13px; width: 100%; }
.atlas-card-textarea { min-height: 60px; resize: vertical; }
.atlas-card-input:focus, .atlas-card-textarea:focus { outline: none; border-color: var(--accent); }
.atlas-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.atlas-btn { padding: 7px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.atlas-btn-primary { background: var(--accent); color: #fff; }
.atlas-btn-primary:hover { background: var(--accent-hover); }
.atlas-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.atlas-btn-ghost:hover { color: #fff; border-color: var(--text-muted); }
.atlas-btn-success { background: var(--green); color: #fff; }
.atlas-btn-success:hover { background: #24985f; }
.atlas-btn-warn { background: rgba(220,53,69,0.15); color: #ff6b7a; border: 1px solid rgba(220,53,69,0.3); }
.atlas-btn-warn:hover { background: rgba(220,53,69,0.25); }

/* Skill/tool/checkpoint list (generic toggleable rows) */
.atlas-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.atlas-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; transition: all 0.15s; }
.atlas-row.checked { border-color: var(--accent); background: rgba(94,106,210,0.06); }
.atlas-row.unchecked { opacity: 0.55; }
.atlas-row-check { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
.atlas-row.checked .atlas-row-check { background: var(--accent); border-color: var(--accent); }
.atlas-row.checked .atlas-row-check::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 900; }
.atlas-row-body { flex: 1; min-width: 0; }
.atlas-row-title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.atlas-row-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.atlas-row-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; font-size: 14px; opacity: 0.6; }
.atlas-row-remove:hover { color: #ff6b7a; opacity: 1; }
.atlas-badge-recommended { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; color: #d4af37; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); padding: 1px 6px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.atlas-badge-suggested { display: inline-flex; align-items: center; font-size: 9px; color: var(--accent); background: rgba(94,106,210,0.15); padding: 1px 6px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.atlas-badge-assumed { display: inline-flex; align-items: center; font-size: 9px; color: #d4af37; background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.3); padding: 1px 6px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; cursor: help; margin-left: 6px; }
.atlas-add-btn { align-self: flex-start; background: transparent; border: 1px dashed var(--border); color: var(--text-muted); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.atlas-add-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Task board (3 columns) */
.atlas-taskboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.atlas-taskcol { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-height: 120px; }
.atlas-taskcol-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.atlas-task { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; font-size: 12px; color: var(--text-primary); cursor: grab; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
.atlas-task.unchecked { opacity: 0.5; }
.atlas-task-check { width: 14px; height: 14px; border: 1.5px solid var(--border); border-radius: 3px; flex-shrink: 0; cursor: pointer; }
.atlas-task.checked .atlas-task-check { background: var(--accent); border-color: var(--accent); position: relative; }
.atlas-task.checked .atlas-task-check::after { content: '✓'; color: #fff; font-size: 9px; font-weight: 900; position: absolute; top: -1px; left: 2px; }
.atlas-task-text { flex: 1; min-width: 0; word-wrap: break-word; }
.atlas-task-badge { font-size: 8px; padding: 1px 4px; border-radius: 4px; background: rgba(94,106,210,0.15); color: var(--accent); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
.atlas-task-move { font-size: 10px; color: var(--text-muted); padding: 2px 4px; cursor: pointer; user-select: none; }
.atlas-task-move:hover { color: #fff; }
@media (max-width: 768px) { .atlas-taskboard { grid-template-columns: 1fr; } }

/* Tool checklist (radio "have / don't have") */
.atlas-tool-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.atlas-tool-row-top { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.atlas-tool-row-purpose { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.atlas-tool-radios { display: flex; gap: 12px; margin-top: 4px; }
.atlas-tool-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.atlas-tool-radio input { accent-color: var(--accent); }

/* Agent picker (avatar cards) */
.atlas-agent-picker { display: flex; gap: 10px; overflow-x: auto; padding: 12px 0 16px; margin: 8px 0; }
.atlas-agent-card { flex-shrink: 0; width: 100px; padding: 12px; background: var(--bg-input); border: 2px solid var(--border); border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.15s; position: relative; }
.atlas-agent-card:hover { border-color: var(--text-muted); }
.atlas-agent-card.selected { border-color: var(--accent); background: rgba(94,106,210,0.08); }
.atlas-agent-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.atlas-agent-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.atlas-agent-card .atlas-agent-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.atlas-agent-card .atlas-agent-role { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Personality card */
.atlas-personality { background: linear-gradient(135deg, rgba(94,106,210,0.06), rgba(212,175,55,0.04)); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 12px 0; }
.atlas-personality-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.atlas-personality-icon { font-size: 22px; }
.atlas-personality-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.5px; }
.atlas-personality-behaviors { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.atlas-personality-behaviors li { font-size: 13px; color: var(--text-primary); padding-left: 18px; position: relative; }
.atlas-personality-behaviors li::before { content: '•'; color: var(--accent); position: absolute; left: 6px; font-weight: 900; }
.atlas-personality-alternatives { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Automation list */
.atlas-auto-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.atlas-auto-name { font-size: 13px; color: var(--text-primary); flex: 1; }
.atlas-auto-toggle { display: inline-flex; align-items: center; gap: 8px; }
.atlas-switch { position: relative; width: 38px; height: 20px; background: var(--border); border-radius: 10px; cursor: pointer; transition: background 0.2s; }
.atlas-switch.on { background: var(--accent); }
.atlas-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.atlas-switch.on::after { transform: translateX(18px); }
.atlas-freq-select { background: var(--bg-chat); border: 1px solid var(--border); color: var(--text-primary); padding: 3px 6px; border-radius: 4px; font-size: 11px; }
.atlas-escape-hatch { margin-top: 14px; padding: 12px; background: rgba(212,175,55,0.08); border: 1px dashed rgba(212,175,55,0.3); border-radius: 8px; text-align: center; }
.atlas-escape-hatch button { background: transparent; border: none; color: #d4af37; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.atlas-escape-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* Agent summary panel — full-width */
.atlas-summary { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin: 16px 0; }
.atlas-summary-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.atlas-summary-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.5px; text-transform: uppercase; }
.atlas-summary-section { margin-bottom: 14px; }
.atlas-summary-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.atlas-summary-section-body { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.atlas-summary-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.atlas-summary-pill { background: var(--bg-input); border: 1px solid var(--border); padding: 3px 10px; border-radius: 12px; font-size: 11px; color: var(--text-primary); }
.atlas-summary-tasks { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 4px; }
.atlas-summary-tasks > div { background: var(--bg-input); padding: 8px; border-radius: 6px; border: 1px solid var(--border); }
.atlas-summary-tasks .freq { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
@media (max-width: 768px) { .atlas-summary-tasks { grid-template-columns: 1fr; } }
.atlas-safeguards { margin-top: 14px; padding: 10px 12px; background: rgba(43,172,118,0.05); border: 1px solid rgba(43,172,118,0.25); border-radius: 6px; font-size: 11px; color: var(--text-secondary); }
.atlas-safeguards ul { margin: 4px 0 0 16px; padding: 0; }
.atlas-safeguards li { margin: 2px 0; }
.atlas-safeguards .customize-link { color: var(--text-muted); font-size: 10px; text-decoration: underline; cursor: default; margin-left: 8px; opacity: 0.6; }

/* Advisor cards */
.atlas-advisor { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 12px 0 16px; }
.atlas-advisor-title { font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.atlas-advisor-rec { padding: 10px 12px; border-left: 3px solid rgba(94,106,210,0.4); background: rgba(94,106,210,0.04); border-radius: 0 6px 6px 0; margin-bottom: 10px; transition: opacity 0.25s; }
.atlas-advisor-rec.skipped { opacity: 0.4; border-left-color: var(--border); }
.atlas-advisor-rec.added { border-left-color: var(--green); background: rgba(43,172,118,0.06); }
.atlas-advisor-text { font-size: 13px; color: var(--text-primary); margin-bottom: 3px; font-weight: 600; }
.atlas-advisor-reason { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.atlas-advisor-actions { display: flex; gap: 6px; }

/* Creation progress screen */
.atlas-creation { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 16px 0; text-align: center; }
.atlas-creation-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.atlas-creation-steps { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 400px; margin: 0 auto; }
.atlas-creation-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--text-secondary); }
.atlas-creation-step.done { color: var(--green); }
.atlas-creation-step.running { color: var(--accent); }
.atlas-creation-step.pending { color: var(--text-muted); opacity: 0.5; }
.atlas-creation-step-icon { width: 16px; text-align: center; font-weight: 900; }
.atlas-creation-step.running .atlas-creation-step-icon { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.atlas-creation-footer { margin-top: 16px; font-size: 11px; color: var(--text-muted); }

/* Completion screen */
.atlas-completion { background: linear-gradient(135deg, rgba(43,172,118,0.1), rgba(94,106,210,0.05)); border: 1px solid rgba(43,172,118,0.3); border-radius: 14px; padding: 28px 24px; margin: 16px 0; text-align: center; }
.atlas-completion-check { width: 48px; height: 48px; background: var(--green); border-radius: 50%; margin: 0 auto 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; font-weight: 900; }
.atlas-completion-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.atlas-completion-agent { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; }
.atlas-completion-agent img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.atlas-completion-agent-info { text-align: left; }
.atlas-completion-agent-name { font-size: 15px; font-weight: 700; color: #fff; }
.atlas-completion-agent-role { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.atlas-completion-stats { font-size: 12px; color: var(--text-muted); margin: 10px 0 16px; }
.atlas-completion-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Mode selector (entry) */
.atlas-mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 4px; margin: 8px 0; }
.atlas-mode-card { padding: 24px 20px; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s; text-align: center; }
.atlas-mode-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(94,106,210,0.15); }
.atlas-mode-icon { font-size: 26px; margin-bottom: 10px; }
.atlas-mode-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.atlas-mode-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 768px) { .atlas-mode-selector { grid-template-columns: 1fr; } }

/* === PATH_PICKER (Build together vs Design for me) === */
/* 2026-04-18: entry selector for /build-agent. Premium minimal cards. */
.atlas-path-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 4px 12px; margin: 8px 0; }
.atlas-path-card { position: relative; padding: 22px 20px 20px; background: var(--bg-chat); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.atlas-path-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(94,106,210,0.18); background: rgba(94,106,210,0.04); }
.atlas-path-card-featured { background: linear-gradient(180deg, rgba(212,175,55,0.05) 0%, var(--bg-chat) 60%); border-color: rgba(212,175,55,0.35); }
.atlas-path-card-featured:hover { border-color: rgba(212,175,55,0.7); box-shadow: 0 10px 28px rgba(212,175,55,0.18); background: rgba(212,175,55,0.08); }
.atlas-path-icon { display: inline-flex; padding: 6px; border-radius: 8px; background: rgba(255,255,255,0.04); color: var(--text-secondary); margin-bottom: 12px; }
.atlas-path-card-featured .atlas-path-icon { color: rgba(212,175,55,0.95); background: rgba(212,175,55,0.10); }
.atlas-path-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 4px; }
.atlas-path-time { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.atlas-path-desc { font-size: 12.5px; color: var(--text-primary); line-height: 1.55; margin-bottom: 10px; }
.atlas-path-best { font-size: 11px; color: var(--text-muted); font-style: italic; line-height: 1.5; }
@media (max-width: 768px) { .atlas-path-picker { grid-template-columns: 1fr; } }

/* === LOADING_FLOW overlay ("Atlas at Work" cinematic) === */
/* 2026-04-18 v1.2: compact centered strip (scroll-stopper, not full-bleed). */
.atlas-loading-overlay { position: relative; max-width: 816px; margin: 14px auto 16px; border-radius: 12px; overflow: hidden; background: #0c0d10; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 38px rgba(0,0,0,0.55), 0 0 0 1px rgba(94,106,210,0.12); transition: opacity 0.35s ease; opacity: 1;
  /* flex-shrink:0 pins natural size inside the flex-column #messages container. */
  flex-shrink: 0; }
.atlas-loading-imageframe { position: relative; width: 100%; aspect-ratio: 16/9; background: #0a0b0d; }
.atlas-loading-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; display: block; }
.atlas-loading-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%), linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 100%); }
.atlas-loading-meta { padding: 14px 19px 15px; background: linear-gradient(180deg, #0c0d10 0%, #08090b 100%); }
.atlas-loading-progress-text { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(94,106,210,0.95); margin-bottom: 7px; transition: opacity 0.4s ease; min-height: 12px; font-variant-numeric: tabular-nums; }
.atlas-loading-copy { font-size: 13px; line-height: 1.5; color: #e8e8e8; font-weight: 500; letter-spacing: -0.005em; margin-bottom: 12px; transition: opacity 0.4s ease; min-height: 19px; }
.atlas-loading-bar { height: 2px; width: 100%; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.atlas-loading-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(94,106,210,0.7) 0%, rgba(111,123,224,1) 50%, rgba(94,106,210,0.7) 100%); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; box-shadow: 0 0 6px rgba(94,106,210,0.45); }
@media (max-width: 768px) { .atlas-loading-overlay { max-width: 100%; margin: 14px 0 16px; } .atlas-loading-meta { padding: 12px 16px 14px; } .atlas-loading-copy { font-size: 13px; } }

/* === CREATION_AGENT_REVEAL v2 — premium HiveOS blue (Noa spec 2026-04-18) === */
@keyframes atlas-reveal-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes atlas-reveal-avatar-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes atlas-reveal-section-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.atlas-reveal-card { max-width: 640px; margin: 18px auto; padding: 0; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), #16181c; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset; animation: atlas-reveal-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both; overflow: hidden; }

/* Hero band — avatar with radial glow backdrop */
.atlas-reveal-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 32px 32px 8px; text-align: center; }
.atlas-reveal-glow { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; background: radial-gradient(circle at center, rgba(94,106,210,0.22) 0%, transparent 65%); pointer-events: none; filter: blur(14px); }
.atlas-reveal-card .atlas-reveal-avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 3px rgba(94,106,210,0.35); animation: atlas-reveal-avatar-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.atlas-reveal-card .atlas-reveal-avatar-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(94,106,210,0.28), rgba(94,106,210,0.10)); color: rgba(255,255,255,0.95); font-size: 38px; font-weight: 600; }

/* Identity block */
.atlas-reveal-identity { padding: 18px 32px 24px; text-align: center; }
.atlas-reveal-card .atlas-reveal-intro { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 12px; }
.atlas-reveal-card .atlas-reveal-name { font-size: 32px; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 6px; }
.atlas-reveal-card .atlas-reveal-role { font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 400; margin-bottom: 12px; }
.atlas-reveal-description { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 480px; margin: 0 auto; font-weight: 400; }
.atlas-reveal-tagline { font-size: 13px; line-height: 1.5; font-style: italic; color: rgba(255,255,255,0.5); max-width: 480px; margin: 10px auto 0; }

/* Shared section wrapper (between hero and actions) */
.atlas-reveal-section { padding: 20px 32px 20px; border-top: 1px solid rgba(255,255,255,0.05); animation: atlas-reveal-section-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.atlas-reveal-section:nth-of-type(1) { animation-delay: 120ms; }
.atlas-reveal-section:nth-of-type(2) { animation-delay: 200ms; }
.atlas-reveal-section:nth-of-type(3) { animation-delay: 280ms; }
.atlas-reveal-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 12px; }

/* Personality (archetype + traits) */
.atlas-reveal-archetype-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(94,106,210,0.14); border: 1px solid rgba(94,106,210,0.32); border-radius: 8px; margin-bottom: 12px; }
.atlas-reveal-archetype-freq { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(94,106,210,1); }
.atlas-reveal-archetype-freq::after { content: "\00b7"; margin: 0 6px; opacity: 0.4; }
.atlas-reveal-archetype-name { font-size: 13px; font-weight: 600; color: #fff; }
.atlas-reveal-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-reveal-trait-pill { padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; font-size: 12px; color: rgba(255,255,255,0.72); }

/* Skills + Tools (2-col grid) */
.atlas-reveal-skills-tools { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; padding: 20px 32px 20px; border-top: 1px solid rgba(255,255,255,0.05); animation: atlas-reveal-section-in 280ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
.atlas-reveal-skills-col, .atlas-reveal-tools-col { display: flex; flex-direction: column; gap: 8px; }
.atlas-reveal-skill-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45; }
.atlas-reveal-skill-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(111,123,224,0.9); margin-top: 8px; flex-shrink: 0; }
.atlas-reveal-tool-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.68); width: fit-content; }

/* Schedule (daily / weekly / on-demand) */
.atlas-reveal-schedule { padding: 20px 32px 20px; border-top: 1px solid rgba(255,255,255,0.05); animation: atlas-reveal-section-in 280ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both; }
.atlas-reveal-schedule-rows { display: flex; flex-direction: column; gap: 10px; }
.atlas-reveal-schedule-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; }
.atlas-reveal-schedule-key { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.atlas-reveal-schedule-value { font-size: 13px; color: rgba(255,255,255,0.76); line-height: 1.5; }

/* Facts pills (legacy / supplementary — still supported if Atlas emits them) */
.atlas-reveal-facts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 20px 32px 20px; border-top: 1px solid rgba(255,255,255,0.05); }
.atlas-reveal-fact { padding: 10px 14px; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: rgba(255,255,255,0.02); min-width: 0; flex: 0 1 auto; }
.atlas-reveal-fact-label { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.atlas-reveal-fact-value { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; line-height: 1.35; }

/* Decisions disclosure — collapsed by default (chevron toggle) */
.atlas-reveal-disclosure-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; border-top: 1px solid rgba(255,255,255,0.05); cursor: pointer; user-select: none; transition: background 150ms ease; }
.atlas-reveal-disclosure-toggle:hover { background: rgba(255,255,255,0.02); }
.atlas-reveal-disclosure-toggle-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.atlas-reveal-disclosure-chevron { width: 16px; height: 16px; color: rgba(255,255,255,0.3); transition: transform 200ms ease-out; flex-shrink: 0; }
.atlas-reveal-disclosure.open .atlas-reveal-disclosure-chevron { transform: rotate(180deg); }
.atlas-reveal-disclosure-body { max-height: 0; overflow: hidden; transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.atlas-reveal-disclosure.open .atlas-reveal-disclosure-body { max-height: 900px; }
.atlas-reveal-decisions { display: flex; flex-direction: column; gap: 10px; padding: 4px 32px 20px; }
.atlas-reveal-decision { padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; }
.atlas-reveal-decision-main { font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 4px; }
.atlas-reveal-decision-main strong { color: rgba(94,106,210,0.95); font-weight: 600; }
.atlas-reveal-decision-because { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.atlas-reveal-decision-source { font-size: 11px; color: rgba(255,255,255,0.32); margin-top: 4px; font-style: italic; }
.atlas-reveal-showall { display: inline-block; margin: 4px 32px 16px; font-size: 12px; color: rgba(94,106,210,0.9); text-decoration: none; cursor: pointer; }
.atlas-reveal-showall:hover { color: rgba(94,106,210,1); }
.atlas-reveal-decisions-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* Primary CTA row */
.atlas-reveal-actions { display: flex; align-items: center; gap: 10px; padding: 16px 32px 24px; border-top: 1px solid rgba(255,255,255,0.05); }
.atlas-reveal-cta-link { font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; transition: color 150ms ease; margin-right: auto; }
.atlas-reveal-cta-link:hover { color: rgba(255,255,255,0.8); }
.atlas-reveal-cta-secondary { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.82); background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; transition: all 150ms ease; }
.atlas-reveal-cta-secondary:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }
.atlas-reveal-cta-primary { font-size: 13px; font-weight: 600; color: #fff; background: #5E6AD2; border: 0; border-radius: 10px; padding: 10px 20px; min-height: 44px; cursor: pointer; transition: all 150ms ease; box-shadow: 0 2px 8px rgba(94,106,210,0.3); }
.atlas-reveal-cta-primary:hover { background: #6F7BE0; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(94,106,210,0.42); }
.atlas-reveal-cta-primary:active { background: #0d5490; transform: scale(0.98); }

@media (max-width: 768px) {
  .atlas-reveal-hero { padding: 24px 20px 4px; }
  .atlas-reveal-identity, .atlas-reveal-section, .atlas-reveal-schedule, .atlas-reveal-skills-tools, .atlas-reveal-facts, .atlas-reveal-actions { padding-left: 20px; padding-right: 20px; }
  .atlas-reveal-card .atlas-reveal-name { font-size: 26px; }
  .atlas-reveal-skills-tools { grid-template-columns: 1fr; gap: 20px; }
  .atlas-reveal-schedule-row { grid-template-columns: 80px 1fr; gap: 10px; }
  .atlas-reveal-disclosure-toggle { padding: 14px 20px; }
  .atlas-reveal-decisions, .atlas-reveal-showall { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-reveal-card, .atlas-reveal-card .atlas-reveal-avatar, .atlas-reveal-section, .atlas-reveal-skills-tools, .atlas-reveal-schedule { animation-duration: 0ms !important; }
  .atlas-reveal-disclosure-body { transition-duration: 0ms !important; }
}

/* ============================================================
   AGENT CARD v3 — Noa+Alex+Petra spec 2026-04-25 (LOCKED)
   560–600px max, zero scroll on 1080p, brand color #2bac76
   ============================================================ */
.agentcard-v3 { max-width: 560px; margin: 18px auto; background: var(--color-bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; animation: agentcard-v3-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes agentcard-v3-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.agentcard-v3__accent { height: 3px; background: var(--color-brand-primary); }

.agentcard-v3__identity { display: flex; gap: 16px; padding: 20px; align-items: flex-start; }
.agentcard-v3__avatar-wrap { position: relative; flex-shrink: 0; }
.agentcard-v3__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-brand-primary-avatar); display: block; }
.agentcard-v3__avatar-fallback { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--color-brand-primary-avatar); background: linear-gradient(135deg, rgba(43,172,118,0.32), rgba(43,172,118,0.08)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; font-weight: 600; }
.agentcard-v3__status-dot { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand-primary); border: 2px solid var(--color-bg-divider); }
.agentcard-v3__identity-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.agentcard-v3__name-row { display: flex; align-items: center; gap: 6px; }
.agentcard-v3__name { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.agentcard-v3__name-edit { background: transparent; border: none; padding: 2px; cursor: pointer; color: var(--color-text-tertiary); opacity: 0; transition: opacity 150ms ease-out, color 150ms ease-out; border-radius: 4px; display: inline-flex; align-items: center; }
.agentcard-v3__name-edit svg { width: 13px; height: 13px; }
.agentcard-v3:hover .agentcard-v3__name-edit { opacity: 0.7; }
.agentcard-v3__name-edit:hover { opacity: 1 !important; color: var(--text-primary); background: rgba(255,255,255,0.06); }
.agentcard-v3__name-edit:focus-visible { opacity: 1; outline: 2px solid var(--color-brand-primary); outline-offset: 1px; }
@media (max-width: 768px) { .agentcard-v3__name-edit { opacity: 0.5; } }
.agentcard-v3__role { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.3; }
.agentcard-v3__context { font-size: 13px; font-weight: 400; color: var(--color-brand-primary); line-height: 1.4; margin-top: 4px; }

.agentcard-v3__divider { height: 1px; background: var(--color-bg-divider); margin: 0 20px; }

.agentcard-v3__section { padding: 16px 20px; }
.agentcard-v3__section-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.agentcard-v3__bullets { display: flex; flex-direction: column; gap: 6px; }
.agentcard-v3__bullet { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.agentcard-v3__bullet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary); margin-top: 7px; flex-shrink: 0; }

.agentcard-v3__spine { margin: 0 20px; padding: 12px 16px; background: var(--color-brand-primary-tint); border-left: 3px solid var(--color-brand-primary); border-radius: 0 6px 6px 0; }
.agentcard-v3__spine-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.agentcard-v3__spine-punch { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 6px; }
.agentcard-v3__spine-caption { font-size: 11px; color: var(--color-text-tertiary); line-height: 1.4; }

.agentcard-v3__first-move { margin: 16px 20px; padding: 16px 20px; background: var(--color-brand-primary-bg); border: 1px solid var(--color-brand-primary-border); border-radius: 8px; }
.agentcard-v3__first-move-label { font-size: 11px; font-weight: 600; color: var(--color-brand-primary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.agentcard-v3__first-move-body { font-size: 13px; color: var(--text-primary); line-height: 1.45; margin-bottom: 8px; }
.agentcard-v3__first-move-anchor { font-size: 13px; font-weight: 600; color: var(--color-brand-primary); line-height: 1.4; margin-bottom: 12px; }
.agentcard-v3__first-move-sample { border-left: 3px solid var(--color-brand-primary); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 11px; color: var(--text-secondary); padding: 6px 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* Proof line — italic capability anchor (pre-30d) or living history (post-30d) */
.agentcard-v3__proof { font-size: 12px; font-style: italic; color: var(--text-secondary); margin-top: 10px; line-height: 1.45; }
/* Contractor benchmark — Hormozi value-stack anchor before any cost reveal */
.agentcard-v3__benchmark { font-size: 12px; color: var(--color-text-tertiary); margin-top: 6px; line-height: 1.4; }

.agentcard-v3__section--tools { padding-bottom: 12px; }
.agentcard-v3__tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.agentcard-v3__tool { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.agentcard-v3__tool svg { width: 16px; height: 16px; opacity: 0.85; }
.agentcard-v3__tool-more { font-size: 11px; color: var(--text-secondary); background: none; border: none; cursor: pointer; padding: 0; transition: color 150ms ease-out; font-family: inherit; }
.agentcard-v3__tool-more:hover { color: var(--text-primary); }
.agentcard-v3__tool-overflow { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 0 0; animation: agentcard-v3-in 180ms ease-out both; }

.agentcard-v3__cta-row { padding: 16px 20px 20px; display: flex; justify-content: stretch; }
.agentcard-v3__cta { flex: 1; height: 44px; padding: 0 20px; background: var(--color-brand-primary); color: var(--color-text-cta); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 150ms ease-out, transform 100ms ease-out; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.agentcard-v3__cta:hover { background: var(--color-brand-primary-hover); }
.agentcard-v3__cta:active { transform: translateY(1px); }
.agentcard-v3__cta:disabled { opacity: 0.5; cursor: default; }

/* ── Rename gate modal (Phase 2 of v3 build flow) ───────────────────── */
.agentcard-rename-overlay { position: fixed; inset: 0; background: rgba(8, 9, 12, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: agentcard-fade-in 180ms ease-out; }
@keyframes agentcard-fade-in { from { opacity: 0; } to { opacity: 1; } }
.agentcard-rename { width: 420px; max-width: calc(100vw - 32px); background: var(--color-bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: agentcard-rename-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes agentcard-rename-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.agentcard-rename__accent { height: 3px; background: var(--color-brand-primary); }
.agentcard-rename__body { padding: 24px; }
.agentcard-rename__label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.agentcard-rename__title { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.agentcard-rename__hint { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 16px; }
.agentcard-rename__input { width: 100%; height: 44px; padding: 0 14px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.agentcard-rename__input:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(43,172,118,0.18); }
.agentcard-rename__input--error { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.20) !important; animation: agentcard-rename-shake 360ms ease-out; }
@keyframes agentcard-rename-shake { 10%,90% { transform: translateX(-1px); } 30%,70% { transform: translateX(2px); } 50% { transform: translateX(-2px); } }
.agentcard-rename__role-hint { font-size: 11px; color: var(--color-text-tertiary); margin-top: 8px; }
.agentcard-rename__actions { display: flex; gap: 8px; padding: 0 24px 24px; }
.agentcard-rename__cancel { height: 40px; padding: 0 16px; background: transparent; color: var(--text-secondary); border: 1px solid var(--color-border-ghost); border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out; }
.agentcard-rename__cancel:hover { color: var(--text-primary); border-color: var(--border-strong); }
.agentcard-rename__confirm { flex: 1; height: 40px; background: var(--color-brand-primary); color: var(--color-text-cta); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 150ms ease-out; }
.agentcard-rename__confirm:hover { background: var(--color-brand-primary-hover); }
.agentcard-rename__confirm:disabled { opacity: 0.5; cursor: default; }

/* ── Avatar generation blocking spinner ────────────────────────────── */
.agentcard-avatar-gen { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 20px; }
.agentcard-avatar-gen__spinner { width: 36px; height: 36px; border: 3px solid var(--color-brand-primary-tint); border-top-color: var(--color-brand-primary); border-radius: 50%; animation: agentcard-spin 720ms linear infinite; }
@keyframes agentcard-spin { to { transform: rotate(360deg); } }
.agentcard-avatar-gen__label { font-size: 13px; color: var(--text-secondary); text-align: center; }
.agentcard-avatar-gen__name { color: var(--color-brand-primary); font-weight: 600; }

/* ── Mobile: keep card readable on phones ──────────────────────────── */
@media (max-width: 600px) {
  .agentcard-v3 { margin: 12px 8px; }
  .agentcard-v3__identity { padding: 16px; gap: 12px; }
  .agentcard-v3__avatar, .agentcard-v3__avatar-fallback { width: 64px; height: 64px; }
  .agentcard-v3__section, .agentcard-v3__cta-row { padding-left: 16px; padding-right: 16px; }
  .agentcard-v3__spine, .agentcard-v3__first-move { margin-left: 16px; margin-right: 16px; }
  .agentcard-v3__tools { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .agentcard-v3, .agentcard-rename-overlay, .agentcard-rename, .agentcard-avatar-gen__spinner { animation-duration: 0ms !important; }
  .agentcard-avatar-gen__spinner { animation: none !important; }
}

/* Full-profile collapsible — the technical wall, hidden by default */
.atlas-fullprofile { margin: 16px auto 0; max-width: 640px; padding: 20px 24px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.atlas-fullprofile h1, .atlas-fullprofile h2, .atlas-fullprofile h3 { color: rgba(255,255,255,0.85); }
.atlas-fullprofile pre, .atlas-fullprofile code { font-size: 11.5px; }

/* === DEPRECATED legacy reveal class — kept so historical messages still render === */
.atlas-agent-reveal { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin: 14px 0; background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, var(--bg-chat) 80%); border: 1px solid rgba(212,175,55,0.35); border-radius: 14px; }
.atlas-agent-reveal .atlas-reveal-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.atlas-agent-reveal .atlas-reveal-avatar-fallback { display: flex; align-items: center; justify-content: center; background: rgba(212,175,55,0.18); color: rgba(212,175,55,0.95); font-size: 22px; font-weight: 800; }
.atlas-agent-reveal .atlas-reveal-body { flex: 1; min-width: 0; }
.atlas-agent-reveal .atlas-reveal-intro { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(212,175,55,0.85); margin-bottom: 4px; }
.atlas-agent-reveal .atlas-reveal-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 2px; }
.atlas-agent-reveal .atlas-reveal-role { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; }
.atlas-agent-reveal .atlas-reveal-bio { font-size: 12px; line-height: 1.5; color: var(--text-muted); }

/* Multi-agent queue indicator */
.atlas-queue-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(94,106,210,0.12); padding: 3px 8px; border-radius: 8px; margin-left: 10px; }

/* Existing agent detection card */
.atlas-existing-agent { display: flex; align-items: center; gap: 14px; padding: 14px; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.3); border-radius: 10px; margin: 12px 0; }
.atlas-existing-agent img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.atlas-existing-agent-body { flex: 1; }
.atlas-existing-agent-name { font-weight: 700; color: var(--text-primary); font-size: 13px; }
.atlas-existing-agent-role { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.atlas-existing-agent-actions { display: flex; gap: 6px; }

/* Custom thinking indicator (overrides typing-text when Atlas sets it) */
.typing-text.atlas-thinking { color: var(--accent); font-style: italic; }
/* Send email modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.modal-card { background: var(--bg-chat); border: 1px solid var(--border); border-radius: 10px; width: 640px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-header h3 { color: #fff; font-size: 15px; font-weight: 700; margin: 0; }
.modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: #fff; }
.modal-body { padding: 16px 18px; }
.modal-body label { display: block; font-size: 11px; color: var(--text-secondary); margin: 10px 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.modal-body input[type="text"], .modal-body select, .modal-body textarea {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 7px 10px; border-radius: 5px; font-family: inherit; font-size: 13px;
}
.modal-body textarea { font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; resize: vertical; }
.modal-body .dry-run-label { display: flex; align-items: center; gap: 6px; text-transform: none; font-size: 12px; color: var(--text-primary); margin-top: 12px; cursor: pointer; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.15); }
.btn-cancel { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); padding: 7px 16px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.btn-cancel:hover { color: #fff; border-color: var(--text-muted); }
.btn-send-email { background: var(--accent); color: #fff; border: none; padding: 7px 18px; border-radius: 5px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.btn-send-email:hover { background: var(--accent-hover); }
.btn-send-email:disabled { opacity: 0.55; cursor: not-allowed; }
/* In-message attachment confirmation chips — sits above Send/Review action bar.
   Renders only when the [EMAIL_ATTACH:...] tag parsed successfully, giving the
   user visual proof the files are actually wired in (not just text the agent
   claims). Agent can't write this row — only the machine tag produces it. */
.msg-attachments-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 8px; padding: 8px 10px; background: rgba(94,106,210,0.06); border: 1px solid rgba(94,106,210,0.18); border-radius: 8px; }
.msg-attachments-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(94,106,210,0.9); margin-right: 4px; }
.msg-att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(94,106,210,0.28); border-radius: 14px; font-size: 12px; color: var(--text-primary); max-width: 280px; }
.msg-att-chip-icon { color: rgba(94,106,210,0.95); flex-shrink: 0; display: inline-flex; }
.msg-att-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Modal attachment list — shown above the result div when draft carries files */
.em-attachments-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.em-attach-row { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(94,106,210,0.08); border: 1px solid rgba(94,106,210,0.22); border-radius: 6px; font-size: 12px; color: var(--text-primary); max-width: 100%; }
.em-attach-icon { color: rgba(94,106,210,0.95); flex-shrink: 0; display: inline-flex; }
.em-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.em-attach-remove { background: transparent; border: 0; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.em-attach-remove:hover { color: #ff6b7a; }
.em-attach-empty { font-size: 11.5px; color: var(--text-muted); padding: 6px 10px; font-style: italic; }
.em-attach-add-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 12px; background: rgba(94,106,210,0.1); border: 1px dashed rgba(94,106,210,0.35); border-radius: 6px; color: rgba(94,106,210,0.95); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 120ms ease; }
.em-attach-add-btn:hover { background: rgba(94,106,210,0.16); border-color: rgba(94,106,210,0.55); border-style: solid; }
.em-attach-add-btn:active { transform: scale(0.98); }
.em-attach-add-btn svg { flex-shrink: 0; }

/* Recipient autocomplete dropdown — anchored below the TO textarea in the modal */
.em-recipient-dropdown { position: absolute; left: 18px; right: 18px; margin-top: -6px; background: #1e2126; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,0.5); max-height: 180px; overflow-y: auto; z-index: 10010; }
.em-recipient-item { padding: 8px 12px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); }
.em-recipient-item:last-child { border-bottom: 0; }
.em-recipient-item:hover { background: rgba(94,106,210,0.14); }
.em-recipient-item b { color: rgba(94,106,210,1); font-weight: 700; }
.em-result { margin-top: 12px; padding: 10px; border-radius: 5px; font-size: 12px; line-height: 1.5; }
.em-result.em-pending { background: rgba(212,175,55,0.12); color: #d4af37; border: 1px solid rgba(212,175,55,0.3); }
.em-result.em-success { background: rgba(43,172,118,0.12); color: #2bac76; border: 1px solid rgba(43,172,118,0.3); }
.em-result.em-warn { background: rgba(255,165,0,0.12); color: #ffa500; border: 1px solid rgba(255,165,0,0.3); }
.em-result.em-error { background: rgba(220,53,69,0.12); color: #ff6b7a; border: 1px solid rgba(220,53,69,0.3); }
.msg-time { font-size: 11px; color: var(--text-muted); }
/* Agent action log — tool calls displayed in a separate bordered container */
.agent-actions {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted, #9e9e9e);
  max-height: 200px;
  overflow-y: auto;
}
/* Progress bar — bonded to top edge (Noa spec 2026-04-15). Default hidden;
   shows after 3s of activity OR on subagent spawn. Indeterminate shimmer by
   default; determinate fill when agent emits [STEP:N/M]. */
.agent-actions.has-progress::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent, #5E6AD2) 40%, var(--accent, #5E6AD2) 60%, transparent 100%);
  background-size: 200% 100%;
  animation: agentActionsShimmer 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.agent-actions.has-progress.determinate::before {
  background: var(--accent, #5E6AD2);
  background-size: 100% 100%;
  animation: none;
  width: var(--progress-pct, 0%);
  right: auto;
  transition: width 0.4s ease-out;
}
@keyframes agentActionsShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.agent-actions-step-caption {
  position: absolute;
  top: -18px; right: 2px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.15s ease-out;
}
.agent-actions.has-progress.determinate .agent-actions-step-caption { opacity: 1; }
.agent-action-line {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-time {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  min-width: 28px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.agent-action-line svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.agent-actions::-webkit-scrollbar { width: 4px; }
.agent-actions::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ============================================================
   LIVE ACTIVITY STREAM — Grok-style feed (Noa spec 2026-07-04)
   Sequential lines above the reply; collapses to 1 summary on done.
   Near-monochrome, one indigo accent, semantic green/amber glyphs.
   ============================================================ */
.activity-feed {
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface, #222529);
  padding: 12px 14px;
  margin-bottom: 8px;
  font-family: var(--font-ui);
}
/* No max-height/overflow here: action rows flow inline in the chat container
   (one scroll surface — #messages). A nested scrollbox detached the actions
   from the conversation flow and swallowed the auto-scroll (Rafał 2026-07-10). */
.activity-feed .af-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.af-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  min-height: 22px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #9A9EA6);
  animation: afLineIn 200ms var(--ease-out, ease) both;
}
.af-line-active { color: var(--text-primary, #E8E8E8); }

/* ── LIVE MODE: one action = one card (2026-07-04, Rafał's spec) ──
   While streaming (feed NOT collapsed) each action gets its own container that
   slides in; the active card glows; earlier cards dim. After done → collapse →
   expand shows the original compact rows (dense history), so both worlds win. */
.activity-feed:not(.af-collapsed) {
  border: none;
  background: transparent;
  padding: 0;
}
/* Interleaved timeline (2026-07-05): action-card runs can now sit BELOW text
   blocks. When a live feed immediately follows a text block (any preceding
   sibling), give it a little top breathing room so the run doesn't collide with
   the paragraph above it. Only applies to the live (not-collapsed) feed; the
   single collapsed summary keeps its own margins. */
* + .activity-feed:not(.af-collapsed) { margin-top: 8px; }
.activity-feed:not(.af-collapsed) .af-detail {
  gap: 6px;
  padding: 2px;
}
.activity-feed:not(.af-collapsed) .af-line {
  background: var(--bg-surface, #222529);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 34px;
  font-size: 12px;
  animation: none; /* entrance only via .af-in — re-renders must not re-animate settled cards */
  opacity: 0.62;
  transition: opacity 400ms var(--ease-out, ease), border-color 400ms var(--ease-out, ease);
}
.activity-feed:not(.af-collapsed) .af-line-active {
  opacity: 1;
  border-color: var(--accent-border, rgba(94,106,210,0.45));
  box-shadow: 0 0 0 1px rgba(94,106,210,0.12), 0 4px 16px -8px rgba(94,106,210,0.35);
  animation: afGlow 1800ms ease-in-out infinite;
}
/* Entrance animation ONLY on the newly revealed card (.af-in set once by JS).
   Keyframe has only `from` → browser interpolates to the element's natural
   styles, so dim (0.62) and active (1) cards both land correctly. */
.activity-feed:not(.af-collapsed) .af-line.af-in {
  animation: afCardIn 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.activity-feed:not(.af-collapsed) .af-line-active.af-in {
  animation: afCardIn 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards,
             afGlow 1800ms ease-in-out 300ms infinite;
}
.activity-feed:not(.af-collapsed) .af-glyph { width: 18px; height: 18px; }
.activity-feed:not(.af-collapsed) .af-glyph svg { width: 16px; height: 16px; }
/* Idle placeholder card — shimmer sweep while the model thinks (dead air) */
.af-ph {
  position: relative;
  overflow: hidden;
}
.af-ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(94,106,210,0.10) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: afShimmer 1600ms linear infinite;
  pointer-events: none;
}
@keyframes afCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
}
@keyframes afGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(94,106,210,0.12), 0 4px 16px -8px rgba(94,106,210,0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(94,106,210,0.28), 0 4px 20px -6px rgba(94,106,210,0.55); }
}
@keyframes afShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
/* Legacy 4-step checklist hidden while the feed is the progress surface */
#typing.af-live .typing-steps, #typing.af-live #typingSteps,
#typing.af-live .typing-progress, #typing.af-live #typingProgress { display: none; }

/* ── Per-action icon chips (2026-07-04) — every action has an identity ── */
.af-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
}
.af-chip svg { width: 14px; height: 14px; display: block; }
.af-chip img.af-favicon { width: 16px; height: 16px; border-radius: 4px; display: block; }
.af-cat-ai   { color: #8B93E8; background: rgba(94,106,210,0.14); }
.af-cat-web  { color: #4EC5D4; background: rgba(78,197,212,0.12); }
.af-cat-file { color: #2BAC76; background: rgba(43,172,118,0.12); }
.af-cat-exec { color: #C9A94E; background: rgba(201,169,78,0.12); }
.af-cat-pass { color: var(--success, #2BAC76); background: rgba(43,172,118,0.14); }
.af-cat-fail { color: var(--warning, #F59E0B); background: rgba(245,158,11,0.14); }
/* Trailing status mini-glyph: spinner while running, muted check when settled */
.af-status { flex-shrink: 0; display: inline-flex; width: 13px; height: 13px; }
.af-status svg { width: 13px; height: 13px; }
.af-status-spin { color: var(--accent, #5E6AD2); animation: afSpin 900ms linear infinite; }
.af-status-done { color: var(--text-tertiary, #6B7280); opacity: 0.7; }
@keyframes afSpin { to { transform: rotate(360deg); } }
/* Compact (expanded-history) mode: smaller chips, no card chrome — density */
.activity-feed.af-collapsed .af-chip { width: 18px; height: 18px; border-radius: 5px; }
.activity-feed.af-collapsed .af-chip svg { width: 12px; height: 12px; }
.activity-feed.af-collapsed .af-chip img.af-favicon { width: 12px; height: 12px; }

/* ── Deliverable download card ([FILE:...] tag) ─────────────────────────── */
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  padding: 10px 12px;
  max-width: 480px;
  background: var(--bg-surface, #222529);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
}
.fc-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 6px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8B93E8;
  background: rgba(94,106,210,0.14);
}
.fc-icon[data-ext="PDF"]  { color: #E86A6A; background: rgba(232,106,106,0.13); }
.fc-icon[data-ext="HTML"], .fc-icon[data-ext="HTM"] { color: #4EC5D4; background: rgba(78,197,212,0.12); }
.fc-icon[data-ext="DOCX"], .fc-icon[data-ext="DOC"] { color: #5B9BE8; background: rgba(91,155,232,0.13); }
.fc-icon[data-ext="MD"]   { color: #2BAC76; background: rgba(43,172,118,0.12); }
.fc-icon[data-ext="MP4"], .fc-icon[data-ext="WEBM"] { color: #C9A94E; background: rgba(201,169,78,0.12); }
.fc-meta { flex: 1 1 auto; min-width: 0; }
.fc-label { font-size: 13px; font-weight: 600; color: var(--text-primary, #E8E8E8);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-name  { font-size: 11px; color: var(--text-tertiary, #6B7280); font-family: var(--font-mono);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease);
}
.fc-dl   { color: #fff; background: var(--accent, #5E6AD2); }
.fc-dl:hover { background: var(--accent-hover, #6E79DE); }
.fc-prev { color: var(--text-secondary, #9A9EA6); background: var(--bg-elevated, #2A2D32); }
.fc-prev:hover { color: var(--text-primary, #E8E8E8); }
.af-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.af-time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary, #6B7280);
  font-variant-numeric: tabular-nums;
}
/* Discreet real-actor suffix — truthful attribution (2026-07-04 addendum).
   Hidden by default; revealed only in the EXPANDED view. Muted, never shouty. */
.af-actor {
  flex-shrink: 0;
  display: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary, #6B7280);
  letter-spacing: 0.01em;
}
.activity-feed.af-collapsed.af-expanded .af-actor { display: inline; }
.af-glyph {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.af-glyph svg { width: 14px; height: 14px; display: block; }
.af-glyph.af-route  { color: var(--accent, #5E6AD2); }
.af-glyph.af-active { color: var(--accent, #5E6AD2); animation: afPulse 1200ms ease-in-out infinite; }
.af-glyph.af-done   { color: var(--success, #2BAC76); }
.af-glyph.af-pass   { color: var(--success, #2BAC76); }
.af-glyph.af-fail   { color: var(--warning, #F59E0B); }
/* Gate score pill */
.af-score {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 4px);
  font-variant-numeric: tabular-nums;
}
.af-score-pass { color: var(--success, #2BAC76); background: var(--success-tint, rgba(43,172,118,0.12)); }
.af-score-fail { color: var(--warning, #F59E0B); background: var(--warning-tint, rgba(245,158,11,0.12)); }

/* Collapsed summary row — button, click/Enter to expand */
.af-summary {
  display: none;                       /* shown only when .af-collapsed */
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 0;
  min-height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #9A9EA6);
  border-radius: var(--radius-sm, 4px);
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease),
              color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.af-summary:hover { background: var(--bg-elevated, #2A2D32); color: var(--text-primary, #E8E8E8); }
.af-summary:focus-visible { outline: none; box-shadow: var(--elev-focus, 0 0 0 2px var(--accent)); }
.af-sum-check { flex-shrink: 0; display: inline-flex; width: 14px; height: 14px; color: var(--success, #2BAC76); }
.af-sum-check svg { width: 14px; height: 14px; }
.af-sum-dot { color: var(--text-tertiary, #6B7280); flex-shrink: 0; }
.af-sum-gate.af-score-pass, .af-sum-gate.af-score-fail {
  padding: 1px 6px; border-radius: var(--radius-sm, 4px); font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.af-sum-model, .af-sum-steps { flex-shrink: 0; }
.af-chevron { flex-shrink: 0; width: 14px; height: 14px; margin-left: auto; transition: transform 200ms var(--ease-out, ease); }

/* Collapsed state: hide detail, show summary. Expanded: show both. */
.activity-feed.af-collapsed .af-summary { display: flex; }
.activity-feed.af-collapsed .af-detail  { display: none; }
.activity-feed.af-collapsed.af-expanded .af-detail { display: flex; }
.activity-feed.af-collapsed.af-expanded .af-chevron { transform: rotate(90deg); }

@keyframes afLineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes afPulse  { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (max-width: 768px) {
  .activity-feed { padding: 10px 12px; }
  .af-summary { min-height: 44px; }
}
@media (max-width: 480px) {
  .af-time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .af-line { animation: none; }
  .af-glyph.af-active { animation: none; }
  .af-chevron { transition: none; }
}

.msg-content { font-size: 14px; line-height: 1.5; color: var(--text-primary); word-wrap: break-word; overflow-wrap: break-word; }
.msg-content p { margin-bottom: 8px; } .msg-content p:last-child { margin-bottom: 0; }
.msg-content strong { color: #fff; }
.msg-content code { background: #3a3d41; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.msg-content pre { background: #1e1e1e; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 8px 0; }
.msg-content pre code { background: none; padding: 0; }
.msg-content ul, .msg-content ol { margin: 4px 0 6px 0; padding-left: 22px; }
.msg-content li { margin-bottom: 2px; padding-left: 4px; }
.msg-content ul + p:empty, .msg-content p:empty { display: none; }
.msg-content h1,.msg-content h2,.msg-content h3 { color: #fff; margin: 12px 0 6px; }
.msg-content h2 { font-size: 15px; } .msg-content h3 { font-size: 14px; }
.msg-content table { border-collapse: collapse; margin: 8px 0; width: auto; max-width: 100%; font-size: 13px; overflow-x: auto; display: block; }
.msg-content th,.msg-content td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.msg-content th { background: var(--bg-hover); color: #fff; font-weight: 600; }
.msg-content blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--text-secondary); margin: 8px 0; }
.streaming-content::after { content: '▋'; animation: blink 0.8s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

/* Typing */
.typing { display: none; padding: 10px 20px; gap: 6px; align-items: flex-start; flex-direction: column; }
.typing.active { display: flex; }
.typing-dots { display: flex; gap: 3px; padding: 8px 12px; background: #272330; border-radius: 12px; }
.typing-dots span { width: 7px; height: 7px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
.typing-steps { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.typing-step { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); opacity: 0.5; transition: opacity 0.3s, color 0.3s; }
.typing-step.active { opacity: 1; color: var(--accent); }
.typing-step.done { opacity: 0.7; color: var(--green); }
.typing-step svg { width: 14px; height: 14px; flex-shrink: 0; }
.typing-step.active svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.typing-progress { width: 160px; height: 3px; background: #272330; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.typing-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.5s ease; width: 0%; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.typing-text { font-size: 12px; color: var(--text-muted); font-style: italic; }
.typing-detail { font-size: 11px; color: var(--text-muted); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.2s, max-height 0.2s; display: block; margin-top: 2px; }
.typing.expanded .typing-detail { opacity: 0.6; max-height: 40px; }

/* Stop button */
.btn-stop { padding: 8px 16px; background: #e74c3c; border: none; color: #fff; cursor: pointer; font-size: 14px; padding-bottom: 12px; transition: background 0.15s; display: none; align-items: center; justify-content: center; }
.btn-stop:hover { background: #c0392b; }
.btn-stop.visible { display: flex; }

/* Chat notifications */
#notifStack { position: fixed; bottom: 80px; right: 20px; z-index: 9990; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; max-width: 300px; }
.chat-notif { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); pointer-events: auto; cursor: pointer; animation: notifSlideUp 0.3s ease-out; transition: opacity 0.3s, transform 0.3s; }
.chat-notif:hover { border-color: var(--accent); transform: scale(1.02); }
.chat-notif .notif-av { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.chat-notif .notif-av-text { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.chat-notif .notif-body { flex: 1; min-width: 0; }
.chat-notif .notif-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.chat-notif .notif-preview { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.chat-notif.fade-out { opacity: 0; transform: translateY(20px); }
@keyframes notifSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Sidebar unread badge */
.unread-badge { position: absolute; top: -2px; left: 18px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; z-index: 2; }

/* Mention autocomplete */
.mention-popup { display: none; position: absolute; bottom: 100%; left: 16px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; z-index: 25; min-width: 200px; max-height: 200px; overflow-y: auto; box-shadow: 0 -4px 16px rgba(0,0,0,0.4); margin-bottom: 4px; }
.mention-popup.open { display: block; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); transition: background 0.1s; }
.mention-item:hover, .mention-item.selected { background: var(--accent); color: #fff; }
.mention-item img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.mention-item .fallback-av { width: 20px; height: 20px; border-radius: 4px; font-size: 9px; }
.mention-tag { color: var(--accent); font-weight: 600; }

/* Slash command picker — Linear/Raycast-grade glass command palette (Noa 2026-07-10) */
.mention-popup.slash-mode {
  min-width: 460px; max-width: 520px; max-height: 360px;
  padding: 0; overflow: hidden auto;
  background: rgba(26, 29, 33, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(94, 106, 210, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mention-popup.slash-mode::-webkit-scrollbar { width: 8px; }
.mention-popup.slash-mode::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10); border-radius: 4px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* Sticky header — mono meta, hairline accent separator + top signal line */
.mention-popup.slash-mode .slash-header {
  position: sticky; top: 0; z-index: 2;
  padding: 11px 14px 9px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-secondary);
  background: rgba(22, 24, 29, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mention-popup.slash-mode .slash-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 106, 210, 0.55), transparent);
}

/* Rows — tighter two-line item, rounded selection fill */
.slash-item {
  display: flex; flex-direction: column; gap: 3px;
  margin: 2px 6px; padding: 7px 10px; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.slash-item:first-of-type { margin-top: 6px; }
.slash-item:last-of-type  { margin-bottom: 6px; }
.slash-item:hover { background: rgba(255, 255, 255, 0.04); }
.slash-item.selected {
  background: rgba(94, 106, 210, 0.14);
  box-shadow: inset 2px 0 0 var(--accent),
              0 0 0 1px rgba(94, 106, 210, 0.18),
              0 0 16px rgba(94, 106, 210, 0.12);
}
.slash-item:hover .slash-item-name,
.slash-item.selected .slash-item-name { color: var(--text-primary); }

.slash-item-row { display: flex; align-items: center; gap: 10px; }

/* Icon — bare stroked glyph, NO tile (the "less boxes" fix) */
.slash-item-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border-radius: 0; color: var(--text-tertiary);
}
.slash-item-icon svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.slash-item.t-utility .slash-item-icon { color: var(--text-tertiary); }
.slash-item.t-agent   .slash-item-icon { color: var(--success); }
.slash-item.t-guided  .slash-item-icon { color: #7C9EF0; }

/* Command name — crisp mono, weight steps up on focus */
.slash-item-name {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Badge — restrained dot-label, no filled pill */
.slash-item-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-tertiary); background: none; padding: 0; line-height: 1;
}
.slash-item-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.slash-item-badge.utility::before { background: var(--text-tertiary); }
.slash-item-badge.agent::before   { background: var(--success); }
.slash-item-badge.guided::before  { background: #7C9EF0; }
.slash-item.selected .slash-item-badge { color: var(--text-secondary); }

/* Description — single-line, aligned under the command name */
.slash-item-desc {
  font-size: 11px; line-height: 1.4; color: var(--text-secondary);
  padding-left: 30px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slash-item.selected .slash-item-desc { color: var(--text-primary); }

/* Sticky footer — refined mono kbd chips */
.slash-footer {
  position: sticky; bottom: 0; z-index: 2;
  padding: 8px 14px;
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--text-tertiary);
  background: rgba(22, 24, 29, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.slash-footer kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm); padding: 2px 6px; line-height: 1;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .slash-item { transition: none; }
}

/* Automate this conversation — button at bottom of agent skills panel */
.skills-meta-separator { height: 1px; background: #ffffff0d; margin: 12px 6px 10px; }
.btn-automate-chat { display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); margin: 0 6px 4px; height: 36px; padding: 0 12px; background: transparent; border: 1px solid #ffffff14; border-radius: 6px; color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; text-align: left; }
.btn-automate-chat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn-automate-chat:hover { background: #ffffff08; border-color: #ffffff26; color: #ffffff; }
.btn-automate-chat:disabled { cursor: default; opacity: 0.85; }
.btn-automate-chat:disabled:hover { background: transparent; border-color: #ffffff14; color: var(--text-secondary); }
.btn-automate-chat .spinner { width: 16px; height: 16px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: automate-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes automate-spin { to { transform: rotate(360deg); } }
/* Grey centred notice shown when the automate flow lands in Petra's chat */
.automate-system-note { text-align: center; font-size: 12px; color: var(--text-muted); padding: 10px 16px; margin: 8px auto; font-style: italic; opacity: 0.75; }

/* [ACTION_BUTTONS:...] — generic inline CTA row (Alex/Noa spec 2026-04-23).
   Used at every agent gate: Petra Automate, Dante briefs, Konrad invoices,
   Marek contracts. Primary (green) / Secondary (outlined) / Ghost (quiet link). */
.action-buttons-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-action-primary { height: 32px; padding: 0 14px; background: #2bac76; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 150ms ease-out; font-family: inherit; }
.btn-action-primary:hover { opacity: 0.85; }
.btn-action-secondary { height: 32px; padding: 0 14px; background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; cursor: pointer; transition: background 150ms ease-out; font-family: inherit; }
.btn-action-secondary:hover { background: #ffffff08; }
.btn-action-ghost { height: 32px; padding: 0 8px; background: transparent; border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: inherit; transition: color 150ms ease-out; }
.btn-action-ghost:hover { color: var(--text-primary); }
.btn-action-primary:disabled, .btn-action-secondary:disabled, .btn-action-ghost:disabled { cursor: default; }

/* ── Modify Mode Banner (Noa spec 2026-04-23) ───────────────────────────
   Reply-to chip pattern: signals user is in "modify" sub-mode above the input.
   Single banner at a time. Entrance 200ms ease-out, exit 150ms ease-in.
   max-height animation requires overflow:hidden to avoid child-content clip. */
.modify-banner {
  background: rgba(94, 106, 210, 0.12);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* steady state uses max-height: 60px so exit can animate to 0 */
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              max-height 200ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 200ms cubic-bezier(0.16, 1, 0.3, 1),
              margin-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modify-banner.entering {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.modify-banner.leaving {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: opacity 150ms cubic-bezier(0.7, 0, 0.84, 0),
              max-height 150ms cubic-bezier(0.7, 0, 0.84, 0),
              padding 150ms cubic-bezier(0.7, 0, 0.84, 0),
              margin-bottom 150ms cubic-bezier(0.7, 0, 0.84, 0);
}
.modify-banner .mb-header { display: flex; align-items: center; gap: 6px; }
.modify-banner .mb-icon { color: var(--accent); flex-shrink: 0; }
.modify-banner .mb-label { font-size: 12px; font-weight: 500; color: var(--accent); flex: 1; line-height: 1.3; }
.modify-banner .mb-close {
  background: transparent; border: none; padding: 2px; margin: 0;
  color: var(--text-muted); cursor: pointer; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.modify-banner .mb-close:hover { color: var(--text-secondary); background: rgba(255,255,255,0.06); }
.modify-banner .mb-preview {
  font-size: 12px; font-weight: 400; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; margin-top: 2px;
}
/* Input elevation when modify mode is active */
.input-wrapper.modify-active { border-color: var(--text-muted); }

/* ── Petra Progress Card + Delivery Card (Noa spec 2026-04-24) ──────────
   Single card component that morphs: progress-state (analyzing → building)
   into delivery-state on completion. Same container, cross-fade content,
   green border animation. Tokens reuse HiveOS system where possible;
   amber is a new accent introduced for the ANALYZING pulse only. */
.petra-progress-card {
  background: #22262d;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 8px 0;
  transition: border-color 200ms ease-out, background 200ms ease-out;
}
.petra-progress-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.petra-progress-card__header .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; /* amber pulse — ANALYZING */
  animation: petra-pulse 1.2s ease-in-out infinite;
}
.petra-progress-card[data-state="building"] .dot { background: var(--accent); }
@keyframes petra-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.petra-steps { display: flex; flex-direction: column; gap: 8px; }
.petra-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-primary);
  min-height: 24px;
  transition: color 150ms ease-out;
}
.petra-step .step-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color 150ms ease-out;
}
.petra-step .step-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.petra-step[data-status="done"] .step-icon { color: var(--green); }
.petra-step[data-status="done"] .step-label { color: var(--text-secondary); }
.petra-step[data-status="active"] .step-icon { color: var(--accent); animation: petra-spin 0.8s linear infinite; }
.petra-step[data-status="active"] .step-label { color: var(--text-primary); font-weight: 500; }
.petra-step[data-status="pending"] .step-icon { color: var(--border); }
.petra-step[data-status="pending"] .step-label { color: var(--text-muted); }
@keyframes petra-spin { to { transform: rotate(360deg); } }

/* Morph → Delivery Card — same .petra-progress-card container, data-state="done".
   Noa spec: green border 200ms, 150ms content cross-fade, total ~650ms with
   300ms hold between last step ✓ and morph. Hold is driven by JS via setTimeout. */
.petra-progress-card[data-state="done"] {
  border-color: var(--green);
  padding: 20px;
  gap: 16px;
}
.petra-delivery-content { display: flex; flex-direction: column; gap: 16px; opacity: 0; transition: opacity 150ms ease-out; }
.petra-progress-card[data-state="done"] .petra-delivery-content { opacity: 1; }
.petra-progress-card[data-state="done"] .petra-progress-card__header,
.petra-progress-card[data-state="done"] .petra-steps { display: none; }

/* Status pill */
.delivery-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(43, 172, 118, 0.12);
  border: 1px solid rgba(43, 172, 118, 0.25);
  border-radius: 100px;
  font-size: 11px; font-weight: 600; color: var(--green);
  letter-spacing: 0.04em; text-transform: uppercase;
  width: fit-content;
}
.delivery-card__status .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
/* Automation name */
.delivery-card__name { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
/* Command chip */
.delivery-card__command {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Consolas','Menlo','JetBrains Mono',monospace;
  font-size: 12px; color: var(--accent);
  cursor: pointer;
  width: fit-content;
  transition: border-color 150ms ease-out, background 150ms ease-out, color 150ms ease-out;
}
.delivery-card__command:hover { border-color: var(--accent); background: rgba(94,106,210,0.08); }
.delivery-card__command svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.delivery-card__command.copied { color: var(--green); border-color: var(--green); }
/* Description */
.delivery-card__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
/* Agent chain */
.delivery-card__chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.delivery-card__chain .agent-chip {
  padding: 3px 8px;
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: 11px; font-weight: 500; color: var(--text-primary);
}
.delivery-card__chain .chain-arrow { color: var(--text-muted); font-size: 11px; }
/* ACTION_BUTTONS within delivery — reuses .action-buttons-row styling */
.petra-delivery-content .action-buttons-row { margin-top: 0; }

/* "How it works" help modal — plain-language explainer dialog. */
.petra-help-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.petra-help-modal.open { pointer-events: auto; }
.petra-help-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 180ms ease-out; }
.petra-help-modal.open .petra-help-modal__backdrop { opacity: 1; }
.petra-help-modal.closing .petra-help-modal__backdrop { opacity: 0; }
.petra-help-modal__panel {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #22262d;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.petra-help-modal.open .petra-help-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.petra-help-modal.closing .petra-help-modal__panel { opacity: 0; transform: translateY(4px) scale(0.99); }
.petra-help-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.petra-help-modal__title { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.3; flex: 1; padding-right: 12px; }
.petra-help-modal__close {
  background: transparent; border: none; padding: 4px;
  color: var(--text-muted); cursor: pointer; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.petra-help-modal__close:hover { color: var(--text-secondary); background: rgba(255,255,255,0.06); }
.petra-help-modal__body {
  padding: 16px 20px 8px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.petra-help-modal__section { display: flex; flex-direction: column; gap: 4px; }
.petra-help-modal__label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.petra-help-modal__text { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.petra-help-modal__text code {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'Consolas','Menlo','JetBrains Mono',monospace;
  font-size: 12px;
  color: var(--accent);
}
.petra-help-modal__text strong { color: var(--text-primary); font-weight: 600; }
.petra-help-modal__footer {
  padding: 12px 20px 16px;
  display: flex; justify-content: flex-end;
}
/* Modify button (secondary) tint when it owns an active banner */
.btn-action-secondary.ab-selected {
  background: rgba(94, 106, 210, 0.15);
  color: var(--accent);
  border-color: var(--accent);
}

/* Live streaming timer — "Philosophising... 41s" style counter in live bubble header */
.live-timer { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--accent); font-family: 'Consolas','Menlo',monospace; margin-left: 8px; padding: 1px 6px; background: rgba(94,106,210,0.15); border-radius: 10px; animation: live-pulse 1.6s ease-in-out infinite; }
.live-timer::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: live-dot 1.2s ease-in-out infinite; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes live-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.5); } }

/* Group header avatars */
.group-header-avatars { display: flex; margin-left: 4px; }
.group-header-avatars img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-chat); margin-left: -8px; }
.group-header-avatars img:first-child { margin-left: 0; }
.group-header-avatars .gha-fallback { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-chat); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }
.group-header-avatars .gha-fallback:first-child { margin-left: 0; }

/* Input */
.input-area { padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.input-wrapper { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.2s; align-items: flex-end; }
.input-wrapper:focus-within { border-color: var(--accent); }
.input-wrapper textarea { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 14px; font-family: inherit; padding: 12px 16px; resize: none; outline: none; min-height: 44px; max-height: 160px; line-height: 1.4; }
.input-wrapper textarea::placeholder { color: var(--text-muted); }
.btn-mic { padding: 8px 10px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; transition: all 0.2s; padding-bottom: 12px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.btn-mic:hover { color: #fff; background: rgba(255,255,255,0.06); }
.btn-mic.recording { color: #e74c3c; background: rgba(231,76,60,0.12); animation: pulse 1.2s infinite ease-in-out; }

/* === Skills panel — agent capabilities browser, anchored above ⋮⋮ toolbar button === */
.btn-skills:hover { color: var(--accent); }
.skills-panel { background: #252830; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; min-width: 260px; max-width: 340px; box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(94,106,210,0.08); z-index: 950; overflow-y: auto; animation: skills-panel-in 160ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes skills-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.skills-panel-header { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 6px; }
.skills-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(94,106,210,0.9); }
.skills-panel-agent { font-size: 11px; color: var(--text-muted); }
.skills-panel-empty { padding: 18px 10px; font-size: 12.5px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.skills-panel-list { display: flex; flex-direction: column; gap: 2px; }
.skills-chip { display: block; width: 100%; text-align: left; padding: 9px 11px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: var(--text-primary); transition: background 120ms ease; font-family: inherit; position: relative; }
.skills-chip:hover { background: rgba(255,255,255,0.055); }
.skills-chip:active { background: rgba(94,106,210,0.14); }
.skills-chip-label { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; padding-right: 22px; }
.skills-chip-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* Pencil edit affordance (Noa spec 2026-04-24) — hover-revealed per-chip. */
.skills-chip__pencil { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 10px; margin: -10px; background: transparent; border: none; cursor: pointer; color: var(--text-muted); opacity: 0; transition: opacity 120ms ease-out, color 120ms ease-out; border-radius: 4px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.skills-chip__pencil svg { width: 12px; height: 12px; }
.skills-chip:hover .skills-chip__pencil { opacity: 0.6; }
.skills-chip__pencil:hover { opacity: 1; color: var(--text-primary); background: rgba(255,255,255,0.06); }
.skills-chip__pencil:active { color: var(--accent); }
.skills-chip__pencil:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 768px) { .skills-chip__pencil { opacity: 0.5; } }

/* Edit mode — chip becomes a small inline form */
.skills-chip--editing { background: #1e2024 !important; cursor: default; }
.skills-chip--editing .skills-chip__pencil { opacity: 1; color: var(--accent); }
.skills-chip__label-edit, .skills-chip__desc-edit { display: block; width: 100%; outline: none; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.10); color: var(--text-primary); font-family: inherit; padding: 2px 0; margin-bottom: 4px; caret-color: var(--accent); white-space: pre-wrap; word-break: break-word; }
.skills-chip__label-edit { font-size: 13px; font-weight: 600; color: #fff; padding-right: 22px; }
.skills-chip__desc-edit { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; min-height: 16px; }
.skills-chip__label-edit:focus, .skills-chip__desc-edit:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.skills-chip__desc-edit:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,0.25); pointer-events: none; }
.skills-chip__label-edit--error, .skills-chip__desc-edit--error { border-bottom-color: #ff6b7a !important; box-shadow: 0 1px 0 0 #ff6b7a !important; }

.skills-chip__edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.05); }
.skills-chip__reset-link { font-size: 11px; color: rgba(255,255,255,0.35); background: none; border: none; cursor: pointer; padding: 4px 0; margin-right: auto; transition: color 120ms ease-out; font-family: inherit; }
.skills-chip__reset-link:hover { color: var(--text-muted); }
.skills-chip__reset-link--confirm { color: #f0c420; }
.skills-chip__cancel-btn { font-size: 11px; font-family: inherit; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: color 120ms ease-out; }
.skills-chip__cancel-btn:hover { color: var(--text-primary); }
.skills-chip__save-btn { font-size: 11px; font-weight: 500; font-family: inherit; color: #fff; background: var(--accent); border: none; cursor: pointer; padding: 4px 10px; border-radius: 4px; transition: background 120ms ease-out; }
.skills-chip__save-btn:hover { background: #6F7BE0; }
.skills-chip__save-btn:active { background: #0e5590; }
.skills-chip__save-btn:disabled { opacity: 0.4; cursor: default; }

.skills-chip--saved { animation: skills-chip-saved 500ms ease-out forwards; }
@keyframes skills-chip-saved {
  0% { background: rgba(94,106,210,0.18); }
  100% { background: transparent; }
}

/* Active skill badge — shown above input after a chip is clicked, dismissible */
.active-skill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 9px; margin: 0 12px 6px; background: rgba(94,106,210,0.14); border: 1px solid rgba(94,106,210,0.3); border-radius: 14px; font-size: 11.5px; color: var(--text-primary); width: fit-content; }
.active-skill-icon { color: rgba(94,106,210,0.95); flex-shrink: 0; }
.active-skill-label { font-weight: 600; }
.active-skill-dismiss { background: transparent; border: 0; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 3px; margin-left: 2px; border-radius: 50%; }
.active-skill-dismiss:hover { color: #ff6b7a; background: rgba(255,107,122,0.12); }

/* Permanent skill attribution on sent message bubbles — the composer badge
   "moves" here on send. Smaller, subtler, non-dismissible (this is historical
   record, not a live control). Sits in the message header next to the time. */
.msg-skill-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 7px; background: rgba(94,106,210,0.12); border: 1px solid rgba(94,106,210,0.25); border-radius: 10px; font-size: 10.5px; font-weight: 600; color: rgba(94,106,210,0.95); letter-spacing: 0.02em; margin-left: 6px; }
.msg-skill-chip svg { opacity: 0.9; flex-shrink: 0; }

/* Email-sent indicator — replaces the Send/Review action bar once a draft has
   been dispatched. Gives the user a permanent visual record + prevents
   accidental re-sends. Rafal's UX feedback 2026-04-21. */
.msg-email-sent { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 7px 12px 7px 10px; background: rgba(43,172,118,0.1); border: 1px solid rgba(43,172,118,0.3); border-radius: 8px; width: fit-content; }
.msg-email-sent-icon { color: rgba(43,172,118,0.95); flex-shrink: 0; display: inline-flex; }
.msg-email-sent-label { font-size: 12px; font-weight: 700; color: rgba(43,172,118,1); letter-spacing: 0.02em; }
.msg-email-sent-meta { font-size: 11px; color: var(--text-muted); }

/* Stream-error bubbles — agent fetch failed (idle-timeout, network, abort).
   Amber tint distinguishes from normal responses so user doesn't read the
   helper text as agent's actual answer. Text stays readable. */
.msg.msg-stream-error .msg-content { color: #E8A94B; background: rgba(232,169,75,0.07); border-left: 2px solid rgba(232,169,75,0.5); padding: 8px 10px; border-radius: 6px; font-style: italic; }

/* Message attachment rows — block layout, attachments sit ABOVE the text body.
   Previously each file chip was inline-flex and flowed into the prose line,
   making "[pdf] [pdf] Marek nie!..." one jumbled row. Now files + images get
   their own flex rows stacked above the content. */
.msg-images-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msg-voice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.msg-voice-row audio { height: 32px; max-width: 280px; outline: none; }
.msg-voice-dur { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; letter-spacing: 0.02em; }
.msg-files-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.msg-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; max-width: 280px; }
.msg-file-chip:hover { background: rgba(255,255,255,0.06); border-color: rgba(94,106,210,0.3); }
.msg-file-icon { color: rgba(94,106,210,0.85); flex-shrink: 0; display: inline-flex; }
.msg-file-name { font-size: 12px; color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 180px; }
.msg-file-size { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; letter-spacing: 0.02em; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.msg-image { max-width: 260px; max-height: 180px; border-radius: 8px; margin-bottom: 8px; cursor: pointer; display: block; border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.15s; }
.msg-image:hover { opacity: 0.9; border-color: rgba(255,255,255,0.15); }
/* Image lightbox — full-size on click */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(4px); }
.lightbox-img { max-width: 92vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); cursor: default; }
.lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; opacity: 0.7; line-height: 1; }
.lightbox-close:hover { opacity: 1; }
#imagePreview img { height: 48px; border-radius: 4px; }
#imagePreview .remove-img { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 3px; }
#imagePreview .remove-img:hover { color: #e74c3c; background: rgba(231,76,60,0.15); }
.btn-send { padding: 8px 16px; background: var(--accent); border: none; color: #fff; cursor: pointer; font-size: 18px; padding-bottom: 12px; transition: background 0.15s; }
.btn-send:hover { background: var(--accent-hover); }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Welcome */
.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 12px; }
.welcome h2 { color: var(--text-secondary); font-size: 20px; }
.welcome p { font-size: 14px; max-width: 360px; text-align: center; line-height: 1.5; }
.empty-prompts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; margin-top: 4px; }
.empty-prompt-btn { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: 12px; padding: 7px 13px; cursor: pointer; transition: all 0.15s; text-align: left; line-height: 1.4; }
.empty-prompt-btn:hover { border-color: var(--accent); color: #fff; background: rgba(94,106,210,0.1); }

/* Profile Panel */
.profile-overlay { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 320px; background: var(--bg-sidebar); border-left: 1px solid var(--border); z-index: 10; flex-direction: column; animation: slideIn 0.2s ease-out; }
.profile-overlay.open { display: flex; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.profile-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.profile-top h3 { font-size: 15px; font-weight: 700; color: #fff; }
.profile-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.profile-close:hover { background: var(--bg-hover); color: #fff; }
.profile-body { flex: 1; overflow-y: auto; padding: 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-avatar { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; }
.profile-avatar-wrap { position: relative; display: inline-block; cursor: pointer; }
.profile-avatar-wrap:hover .avatar-edit { opacity: 1; }
.avatar-edit { position: absolute; bottom: 6px; right: 6px; width: 28px; height: 28px; background: rgba(0,0,0,0.7); border-radius: 6px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.avatar-edit svg { width: 14px; height: 14px; stroke: #fff; fill: none; }
.profile-name { font-size: 20px; font-weight: 700; color: #fff; text-align: center; }
.profile-fields { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.profile-field label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.profile-field .val { font-size: 14px; color: var(--text-primary); line-height: 1.4; }
.profile-field .tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; }
.profile-field .editable { display: flex; align-items: flex-start; gap: 6px; }
.profile-field .editable .val { flex: 1; }
.profile-field .edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 3px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.profile-field:hover .edit-btn { opacity: 1; }
.profile-field .edit-btn:hover { color: #fff; background: var(--bg-hover); }
.profile-field .edit-input { width: 100%; background: var(--bg-hover); border: 1px solid var(--accent); border-radius: 4px; color: var(--text-primary); font-size: 13px; font-family: inherit; padding: 6px 8px; outline: none; resize: vertical; min-height: 32px; }
.profile-field .edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.profile-field .edit-actions button { padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; }
.profile-field .btn-save { background: var(--accent); color: #fff; }
.profile-field .btn-cancel { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border) !important; }
/* ===== Profile → Skills (palette-aligned: mono /commands, dot status, no pills, no emoji — Noa 2026-07-10) ===== */
.profile-skills { width: 100%; margin-top: 4px; }
.profile-skills > label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.skill-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chip — hairline outline, transparent fill, mono command. A bounded token, not a pill. */
.skill-badge {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 4px 9px 4px 8px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  cursor: default;
  transition: border-color var(--dur-fast) var(--ease-out),
              background    var(--dur-fast) var(--ease-out);
}
.skill-badge:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }

/* Status dot — 5px, colour is the ONLY status signal (matches .slash-item-badge::before) */
.skill-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; background: var(--text-tertiary);
}
.skill-badge.active::before      { background: var(--success); }   /* registered & enabled */
.skill-badge.calibrating::before { background: var(--warning); }   /* legacy: in calibration */
.skill-badge.declared::before,
.skill-badge.disabled::before    { background: var(--text-tertiary); }

/* Command name — mono, quiet, steps up on hover (same behaviour as .slash-item-name) */
.skill-cmd {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-fast) var(--ease-out);
}
.skill-badge:hover .skill-cmd { color: var(--text-primary); }
.skill-badge.disabled .skill-cmd { color: var(--text-tertiary); }  /* reads as "off" */

/* Quiet route to management — text link, no button chrome, generous hit area */
.skill-manage {
  display: flex; align-items: center; width: 100%;
  margin: 6px 0 0; padding: 10px 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 500; text-align: left;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.skill-manage:hover { color: var(--accent); }
.skill-manage:focus-visible { outline: none; color: var(--accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .skill-badge, .skill-cmd, .skill-manage { transition: none; }
}
/* Model picker — dropdown (replaced the pill row once the list grew past 4
   and 5 pills clipped the 240px profile panel). Native select, dark-themed,
   inline SVG chevron (no emoji, CSP-safe: no data-URI background). */
.agent-model-select-wrap { position: relative; }
.agent-model-select { width: 100%; padding: 6px 30px 6px 10px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.15s; }
.agent-model-select:hover, .agent-model-select:focus { border-color: var(--accent); outline: none; }
.agent-model-select option { background: var(--bg-dark, #1a1d21); color: var(--text-primary); }
.agent-model-chevron { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; stroke: var(--text-muted); }

/* Modal */
.modal-bg { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; }
.modal-bg.open { display: flex; }
.modal { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: 380px; max-height: 80vh; overflow-y: auto; }
.modal h3 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.modal input[type=text] { width: 100%; padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 14px; margin-bottom: 12px; outline: none; }
.modal input:focus { border-color: var(--accent); }
.modal-agents { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 240px; overflow-y: auto; }
.modal-agent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.modal-agent:hover { background: var(--bg-hover); }
.modal-agent.selected { background: var(--accent); }
.modal-agent img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; }
.modal-agent .fallback-av { width: 28px; height: 28px; border-radius: 5px; }
.modal-agent span { font-size: 13px; color: var(--text-primary); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-actions .btn-create { padding: 8px 20px; background: var(--accent); border: none; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.modal-actions .btn-create:disabled { opacity: 0.4; cursor: not-allowed; }
.modal-actions .btn-cancel { padding: 8px 20px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 13px; cursor: pointer; }

/* ====== MOBILE RESPONSIVE ====== */
/* Sidebar = hidden drawer, chat = full screen, hamburger to toggle */
@media (max-width: 768px) {
  /* Layout: sidebar is an overlay drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; min-width: 280px; z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* Dark overlay when sidebar is open */
  .sidebar-backdrop {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 99;
  }
  .sidebar-backdrop.visible { display: block; }

  /* Chat area = full width, no horizontal scroll */
  .chat-area { width: 100%; overflow-x: hidden; }
  .messages { overflow-x: hidden; }
  .msg-content { overflow-x: auto; max-width: calc(100vw - 70px); }
  .msg-content pre { max-width: 100%; overflow-x: auto; }
  .msg-content table { max-width: 100%; overflow-x: auto; display: block; }

  /* Hamburger button in header */
  .mobile-menu-btn { display: flex !important; }

  /* Header adjustments */
  .chat-header { padding: 8px 10px; gap: 6px; }
  #headerName { font-size: 15px; }
  #headerDesc { display: none; }
  #headerAvatar img, #headerAvatar .av-text { width: 32px; height: 32px; }
  /* Header sticky on mobile — always visible when scrolling */
  .chat-header { position: sticky; top: 0; z-index: 20; background: var(--bg-sidebar); }

  /* Header action buttons — hide non-essential on mobile, keep restart centered */
  .chat-header-actions { gap: 2px; margin-left: auto; }
  .chat-header-actions .btn-sm { display: none; }
  .chat-header-actions .btn-restart-header { display: flex !important; width: 36px; height: 36px; align-items: center; justify-content: center; }
  .group-header-avatars { display: none; }
  .mode-toggle { display: none !important; }
  /* Session bar compact */
  .session-bar { display: none; }

  /* Messages — tighter padding */
  #messages { padding: 10px 12px; }
  .msg { gap: 8px; padding: 6px 0; }
  .av-img, .av-text { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  .msg-sender { font-size: 12px; }
  .msg-time { font-size: 10px; }
  .msg-content { font-size: 13px; }
  .msg-content pre { font-size: 11px; overflow-x: auto; }
  .msg-content table { font-size: 11px; }
  .msg-image { max-width: 200px; max-height: 150px; }

  /* Input area — mobile optimized */
  .input-area { padding: 6px 8px 10px; }
  .input-wrapper { border-radius: 22px; }
  #msgInput { font-size: 16px; padding: 10px 14px; min-height: 44px; }
  /* Hide less-used buttons on mobile — keep attach + send */
  #btnLang { display: none !important; }
  #btnMic { display: none !important; }
  .btn-send { padding: 10px 18px !important; border-radius: 0 22px 22px 0 !important; font-size: 20px !important; }
  .btn-stop { border-radius: 0 22px 22px 0 !important; }

  /* Profile overlay = full screen */
  .profile-overlay { width: 100%; }

  /* Typing indicator */
  #typing { padding: 8px 12px; }
  .typing-steps { flex-wrap: wrap; gap: 4px; }
  .typing-step { font-size: 10px; }

  /* Session bar */
  .session-bar { padding: 4px 10px; }
  .session-title { font-size: 10px; max-width: 150px; }

  /* Welcome screen */
  .welcome h2 { font-size: 18px; }
  .welcome p { font-size: 13px; max-width: 280px; }

  /* Notifications — bottom left on mobile */
  #notifStack { right: 10px; bottom: 70px; max-width: 260px; }
  .chat-notif { padding: 8px 10px; }

  /* Mention/slash popup */
  .mention-popup { left: 10px; right: 10px; min-width: auto; max-width: none; }
  /* Slash popup — full-bleed glass on mobile */
  .mention-popup.slash-mode {
    min-width: auto; max-width: none; left: 10px; right: 10px;
    max-height: 60vh; border-radius: var(--radius-lg);
  }

  /* Todo panel — full width on mobile */
  .todo-panel { width: calc(100% - 16px); right: 8px; left: 8px; top: auto; bottom: 70px; max-height: 50vh; }

  /* Agent actions in live bubble — scroll horizontally */
  .agent-actions { max-height: 120px; overflow-y: auto; }
  .agent-action-line { font-size: 11px; }

  /* Context size bar */
  .context-bar { font-size: 10px; padding: 3px 10px; }

  /* iOS safe area — bottom padding for home indicator */
  .input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* "Continue in new session" banner — make it full width */
  .context-bar button { font-size: 10px; padding: 3px 8px; }

  /* Hide elements not useful on mobile */
  .sidebar-section span { display: none; }
  .model-selector { display: none; }
}

/* Hamburger button — hidden on desktop, shown on mobile */
.mobile-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: none;
  color: var(--text-primary); cursor: pointer; flex-shrink: 0;
  border-radius: 6px; transition: background 0.15s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.08); }
.mobile-menu-btn svg { width: 20px; height: 20px; }

/* Todo Fab — tiny, draggable */
.todo-fab { position: fixed; bottom: 20px; right: 20px; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-sidebar); border: 1px solid var(--border); cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 1000; transition: box-shadow 0.15s; box-shadow: 0 1px 6px rgba(0,0,0,0.3); user-select: none; }
.todo-fab:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.todo-fab.dragging { cursor: grabbing; opacity: 0.8; }
.todo-fab svg { width: 14px; height: 14px; color: var(--text-muted); }
.todo-fab .todo-badge { position: absolute; top: -5px; right: -8px; background: var(--accent); color: #fff; font-size: 8px; font-weight: 700; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 4px; white-space: nowrap; }
/* Todo Panel */
.todo-panel { position: fixed; top: 48px; right: 8px; width: 320px; max-height: 380px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; z-index: 1000; display: none; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,0.5); overflow: hidden; }
.todo-panel.open { display: flex; }
.todo-panel-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.todo-panel-header h3 { font-size: 11px; font-weight: 700; color: #fff; margin: 0; }
.todo-panel-header .todo-progress-total { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.todo-panel-body { overflow-y: auto; padding: 4px 0; flex: 1; max-height: 320px; }
.todo-item { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(56,56,56,0.3); }
.todo-item:last-child { border-bottom: none; }
.todo-item-top { display: flex; align-items: center; gap: 6px; }
.todo-item-name { font-size: 11px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item-pct { font-size: 10px; font-weight: 700; min-width: 28px; text-align: right; flex-shrink: 0; }
.todo-item-pct.done { color: var(--green); }
.todo-item-pct.wip { color: #E67E22; }
.todo-item-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.todo-item-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.todo-item-meta { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-item-agent { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.todo-item-agent img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.todo-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); display: none; flex-direction: column; align-items: center; gap: 12px; }
.todo-empty.visible { display: flex; }
.todo-empty-icon { width: 40px; height: 40px; color: var(--text-muted); opacity: 0.5; }
.todo-empty-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.todo-empty-body { font-size: 11px; color: var(--text-muted); line-height: 1.5; max-width: 240px; }
.todo-item-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px; border-radius: 3px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.todo-item:hover .todo-item-del { opacity: 1; }
.todo-item-del:hover { color: #e74c3c; }

/* --- Plan Mode: panel upgrade (2026-04-22, spec by Noa) --- */
.todo-panel { max-height: 520px; }
.todo-panel-header h3 { font-size: 13px; font-weight: 600; }
.todo-progress-total { font-size: 11px; font-weight: 400; color: var(--text-muted); }
#todoPanelBody { padding: 0; max-height: 460px; }

/* Working on hero card */
.plan-hero { margin: 8px 8px 0 8px; padding: 12px 14px; border-radius: 8px; cursor: pointer; display: none; flex-direction: column; gap: 4px; min-height: 68px; position: relative; background: linear-gradient(135deg, rgba(var(--agent-rgb, 94,106,210), 0.08) 0%, transparent 100%), var(--bg-input, rgba(255,255,255,0.03)); border: 1px solid rgba(var(--agent-rgb, 94,106,210), 0.28); transition: background 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out; }
.plan-hero.visible { display: flex; animation: plan-hero-in 200ms ease-out; }
.plan-hero:hover { border-color: rgba(var(--agent-rgb, 94,106,210), 0.4); background: linear-gradient(135deg, rgba(var(--agent-rgb, 94,106,210), 0.12) 0%, transparent 100%), rgba(255,255,255,0.04); }
.plan-hero:active { transform: scale(0.99); }
@keyframes plan-hero-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.plan-hero-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; min-height: 20px; }
.plan-hero-av { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.plan-hero-av-text { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.plan-hero-agent { font-weight: 600; color: var(--agent-color, var(--accent)); }
.plan-hero-chat { color: var(--text-muted); font-weight: 400; }
.plan-hero-subtask { font-size: 13px; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pulsing dot (agent color) */
.plan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--agent-color, var(--accent)); flex-shrink: 0; animation: plan-pulse 2000ms ease-in-out infinite; }
@keyframes plan-pulse {
  0%   { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--agent-rgb, 94,106,210), 0.5); }
  50%  { opacity: 0.8; transform: scale(1.2);  box-shadow: 0 0 0 4px rgba(var(--agent-rgb, 94,106,210), 0); }
  100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--agent-rgb, 94,106,210), 0); }
}

/* Section labels (Active Plans, Other Tasks) */
.plan-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 12px 16px 4px 16px; }

/* Plan tree container */
.plan-tree { margin: 0 8px 4px 8px; border-radius: 6px; }
.plan-tree-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 36px; cursor: pointer; border-radius: 6px; transition: background 0.15s ease-out; }
.plan-tree-header:hover { background: rgba(255,255,255,0.04); }
.plan-tree-chevron { width: 12px; height: 12px; color: var(--text-muted); flex-shrink: 0; transition: transform 200ms ease-out; }
.plan-tree.collapsed .plan-tree-chevron { transform: rotate(-90deg); }
.plan-tree-av { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.plan-tree-av-text { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.plan-tree-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-tree-pct { font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.plan-tree-pct.done { color: var(--green); }
.plan-tree-spinner { width: 12px; height: 12px; color: var(--agent-color, var(--accent)); flex-shrink: 0; animation: plan-spin 800ms linear infinite; }
@keyframes plan-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Plan delete — hidden by default, shows on header hover (matches Other tasks row interaction) */
.plan-tree-delete { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 -4px 0 0; background: transparent; border: 0; border-radius: 4px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out; flex-shrink: 0; }
.plan-tree-delete svg { width: 12px; height: 12px; }
.plan-tree-header:hover .plan-tree-delete { opacity: 1; }
.plan-tree-delete:hover { background: rgba(255,77,77,0.15); color: #ff6b6b; }

/* Plan subtask list */
.plan-subtask-list { overflow: hidden; transition: max-height 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out; max-height: 600px; opacity: 1; }
.plan-tree.collapsed .plan-subtask-list { max-height: 0; opacity: 0; transition: max-height 150ms cubic-bezier(0.7, 0, 0.84, 0), opacity 150ms ease-in; }

/* Individual subtask row */
.plan-subtask { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 32px; min-height: 32px; border-radius: 4px; transition: background 0.15s ease-out; }
.plan-subtask:hover { background: rgba(255,255,255,0.03); }
.plan-subtask-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.plan-subtask-icon svg { width: 14px; height: 14px; }
.plan-subtask-text { font-size: 13px; line-height: 1.4; color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-subtask.pending .plan-subtask-icon { color: var(--text-muted); }
.plan-subtask.in_progress .plan-subtask-text { color: var(--text-primary); }
.plan-subtask.in_progress .plan-subtask-icon { color: var(--agent-color, var(--accent)); }
.plan-subtask.in_progress .plan-subtask-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--agent-color, var(--accent)); box-shadow: 0 0 0 3px rgba(var(--agent-rgb, 94,106,210), 0.18); animation: plan-pulse 2000ms ease-in-out infinite; }
.plan-subtask.done .plan-subtask-icon { color: var(--green); }
.plan-subtask.done .plan-subtask-text { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.2); }

/* Resume banner (inside plan tree, auto-dismissing) */
.plan-resume-banner { display: flex; align-items: center; gap: 8px; margin: 6px 8px; padding: 6px 12px; background: rgba(94,106,210,0.12); border-left: 2px solid var(--accent); border-radius: 6px; min-height: 28px; animation: plan-banner-in 200ms ease-out; }
.plan-resume-banner.fade-out { animation: plan-banner-out 300ms ease-in forwards; }
.plan-resume-banner svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.plan-resume-banner-text { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes plan-banner-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plan-banner-out { from { opacity: 1; } to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } }

/* Standalone items wrapper — separator from plans */
#todoStandalone:not(:empty) { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; padding-top: 4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plan-dot, .plan-subtask-dot, .plan-tree-spinner { animation: none; }
  .plan-hero, .plan-tree-chevron, .plan-subtask-list, .plan-resume-banner { animation: none !important; transition: none !important; }
}
/* Session bar */
.session-bar { display: flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(22,27,34,0.6); border-bottom: 1px solid var(--border); position: relative; }
.session-bar-label { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; flex-shrink: 0; }
.session-title-wrap { display: flex; align-items: center; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
.session-title { font-size: 11px; color: #fff; outline: none; border: none; background: none; padding: 2px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.session-title:focus { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.session-chevron { color: var(--text-muted); flex-shrink: 0; }
.session-new-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 4px; display: flex; align-items: center; transition: color 0.15s; }
.session-new-btn:hover { color: var(--accent); }
.session-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 0 0 8px 8px; z-index: 30; max-height: 250px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.session-dropdown.open { display: block; }
.session-item { padding: 8px 14px; cursor: pointer; border-bottom: 1px solid rgba(56,56,56,0.3); transition: background 0.1s; }
.session-item:last-child { border-bottom: none; }
.session-item:hover { background: var(--bg-hover); }
.session-item-title { font-size: 11px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item-meta { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
.session-item.active { border-left: 2px solid var(--accent); }
/* Context suggestion banner */
.context-suggestion { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 0 12px 8px; background: rgba(94,106,210,0.08); border: 1px solid rgba(94,106,210,0.2); border-radius: 8px; font-size: 11px; color: var(--text-muted); }
.context-suggestion button { background: var(--accent); color: #fff; border: none; padding: 4px 10px; border-radius: 5px; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.context-suggestion button:hover { filter: brightness(1.15); }
.context-suggestion .dismiss { background: none; color: var(--text-muted); padding: 2px; cursor: pointer; border: none; }
/* Dev capture overlay */
#devOverlay { display:none; position:fixed; inset:0; z-index:9999; cursor:crosshair; background:rgba(0,0,0,0.25); }
#devOverlay.active { display:block; }
#devOverlay .dev-sel { position:absolute; border:2px solid #2ea043; background:rgba(46,160,67,0.12); pointer-events:none; border-radius:3px; }
#devOverlay .dev-arrow { position:absolute; pointer-events:none; }
#devOverlay .dev-arrow line { stroke:#2ea043; stroke-width:2.5; }
#devOverlay .dev-arrow polygon { fill:#2ea043; }
#devOverlay .dev-hint { position:fixed; top:12px; left:50%; transform:translateX(-50%); background:var(--bg-card); border:1px solid var(--border); color:#fff; padding:6px 16px; border-radius:8px; font-size:12px; font-weight:600; pointer-events:none; z-index:10001; }
#devOverlay .dev-toolbar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px; pointer-events:auto; z-index:10001; }
#devOverlay .dev-tool { width:32px; height:32px; border:none; background:none; color:var(--text-muted); cursor:pointer; border-radius:6px; display:flex; align-items:center; justify-content:center; }
#devOverlay .dev-tool:hover { background:var(--bg-hover); color:#fff; }
#devOverlay .dev-tool.active { background:var(--accent); color:#fff; }
/* Dev feedback popup */
#devFeedback { display:none; position:fixed; z-index:10000; background:var(--bg-sidebar); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.5); width:380px; max-height:80vh; overflow:hidden; }
#devFeedback.open { display:flex; flex-direction:column; }
#devFeedback .dev-fb-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
#devFeedback .dev-fb-header h3 { font-size:12px; font-weight:700; color:#fff; margin:0; }
#devFeedback .dev-fb-body { padding:10px 14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
#devFeedback .dev-fb-preview { border-radius:6px; border:1px solid var(--border); max-height:200px; overflow:hidden; }
#devFeedback .dev-fb-preview img { width:100%; display:block; }
#devFeedback textarea { background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:#fff; padding:8px; font-size:12px; resize:vertical; min-height:60px; font-family:inherit; }
#devFeedback .dev-fb-actions { padding:8px 14px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:6px; }
#devFeedback .dev-fb-actions button { padding:6px 14px; border-radius:6px; border:none; font-size:11px; font-weight:600; cursor:pointer; }
#devFeedback .dev-btn-cancel { background:var(--bg-hover); color:var(--text-muted); }
#devFeedback .dev-btn-send { background:var(--accent); color:#fff; }
#devFeedback .dev-btn-send:hover { filter:brightness(1.15); }

/* ===== Inline media (agent-generated images/videos) ===== */
.agent-media {
  display:block;
  margin:12px 0;
  max-width:560px;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#0a0a0a;
  position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.agent-media:hover {
  border-color:rgba(88,166,255,0.4);
  box-shadow:0 6px 24px rgba(0,0,0,0.5);
}
.agent-media img, .agent-media video {
  display:block;
  width:100%;
  max-width:100%;
  max-height:520px;
  height:auto;
  object-fit:contain;
  cursor:zoom-in;
  background:#000;
}
.agent-media .media-label {
  font-size:11px;
  color:var(--text-muted);
  padding:7px 12px;
  background:rgba(13,17,23,0.85);
  border-top:1px solid var(--border);
  font-family:'Consolas','Courier New',monospace;
  word-break:break-all;
  line-height:1.4;
}
.agent-media .media-size { color:#8b949e; font-weight:500; }
.agent-media .media-actions { display:flex; gap:4px; padding:6px 8px; background:var(--bg-sidebar); border-top:1px solid var(--border); }
.agent-media .vf-btn { flex:0 0 auto; padding:5px 12px; font-size:11px; font-weight:600; background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:4px; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:5px; }
.agent-media .vf-btn:hover { background:var(--bg-hover); color:#fff; }
.agent-media .vf-btn.approved { border-color:#2bac76; color:#2bac76; background:rgba(43,172,118,0.12); }
.agent-media .vf-btn.rejected { border-color:#f85149; color:#f85149; background:rgba(248,81,73,0.12); }
.agent-media .gate-badge { font-size:9px; font-weight:700; letter-spacing:0.5px; padding:2px 6px; border-radius:3px; background:rgba(88,166,255,0.15); color:#58a6ff; margin-left:auto; text-transform:uppercase; font-family:'Consolas',monospace; }
.agent-media .vf-status { display:none; padding:6px 10px; background:var(--bg-sidebar); border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); align-items:center; gap:10px; flex-wrap:wrap; }
.agent-media .vf-status.open { display:flex; }
.agent-media .vf-status .vf-verdict-label { font-weight:600; }
.agent-media .vf-status .vf-verdict-label.approved { color:#2bac76; }
.agent-media .vf-status .vf-verdict-label.rejected { color:#f85149; }
.agent-media .vf-add-note-link { background:none; border:none; color:#58a6ff; font-size:11px; cursor:pointer; padding:0; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.agent-media .vf-add-note-link:hover { color:#79c0ff; text-decoration:underline; }
.agent-media .vf-note-box { display:none; padding:8px 10px; background:var(--bg-sidebar); border-top:1px solid rgba(255,255,255,0.03); flex-direction:column; gap:6px; }
.agent-media .vf-note-box.open { display:flex; }
.agent-media .vf-note-box textarea { background:var(--bg-input); border:1px solid var(--border); color:#fff; border-radius:4px; padding:6px; font-size:12px; font-family:inherit; resize:vertical; min-height:50px; }
.agent-media .vf-note-box .vf-note-actions { display:flex; gap:6px; align-self:flex-end; }
.agent-media .vf-note-box .vf-save, .agent-media .vf-note-box .vf-skip { padding:4px 12px; border:none; font-size:11px; font-weight:600; border-radius:4px; cursor:pointer; }
.agent-media .vf-note-box .vf-save { background:var(--accent); color:#fff; }
.agent-media .vf-note-box .vf-save:hover { filter:brightness(1.15); }
.agent-media .vf-note-box .vf-skip { background:var(--bg-hover); color:var(--text-muted); }
.agent-media .vf-note-box .vf-skip:hover { color:#fff; }
.agent-media .vf-saved { font-size:10px; color:#2bac76; padding:0 10px 6px; }

/* ===== Copy-ready blocks (agent emits ```paste for Google Docs / email / Slack) ===== */
.copy-block { margin:12px 0; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); overflow:hidden; max-width:100%; }
.copy-block-header { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border); }
.copy-block-label { font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); font-weight:700; display:flex; align-items:center; gap:6px; }
.copy-block-label svg { opacity:0.7; }
.copy-btn { background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:4px 12px; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all 0.15s; }
.copy-btn:hover { background:var(--bg-hover); color:#fff; border-color:var(--accent); }
.copy-btn.copied { border-color:#2bac76; color:#2bac76; background:rgba(43,172,118,0.1); }
.copy-block-body { padding:14px 16px; font-family:var(--font-mono); font-size:13px; line-height:1.55; color:#f0f6fc; white-space:pre-wrap; word-wrap:break-word; background:transparent; margin:0; }

/* Lightbox overlay (click image/video to enlarge) */
#mediaLightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:20000; align-items:center; justify-content:center; padding:40px; cursor:zoom-out; }
#mediaLightbox.open { display:flex; }
#mediaLightbox img, #mediaLightbox video { max-width:95vw; max-height:95vh; display:block; box-shadow:0 0 40px rgba(0,0,0,0.6); }
#mediaLightbox .lb-close { position:absolute; top:16px; right:20px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; opacity:0.8; }
#mediaLightbox .lb-close:hover { opacity:1; }

/* ===== Premium email sync notification (minimal, dark, centered-bottom) ===== */
.email-sync-notif {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  background: rgba(20, 22, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(43, 172, 118, 0.08);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  pointer-events: none;
  min-width: 220px;
  max-width: 380px;
}
.email-sync-notif.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.email-sync-notif .esn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(43, 172, 118, 0.12);
  color: #2bac76;
  flex-shrink: 0;
}
.email-sync-notif .esn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.email-sync-notif .esn-title {
  font-size: 13px;
  font-weight: 600;
  color: #f0f6fc;
  letter-spacing: -0.1px;
}
.email-sync-notif .esn-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Pipeline D — Winning Creatives grid ───────────────────────────────── */
.wc-grid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}
.wc-grid-ch {
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 600;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.wc-grid-ch-meta      { background: #1877f2; }
.wc-grid-ch-instagram { background: #e1306c; }
.wc-grid-ch-pinterest { background: #e60023; }
.wc-grid-ch-amazon    { background: #ff9900; color: #0d0d0d; }
.wc-grid-count { color: var(--text-muted); font-size: 11px; }
.wc-grid-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
  font-size: 12px;
}
.wc-grid {
  display: grid;
  /* Auto-fill: grid expands to chat width with as many cells per row as fit.
     Larger than 180px each so cells stay scannable even on wide monitors. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-width: none;
  width: 100%;
}
.wc-cell {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #2a2d32;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
  display: flex;
  flex-direction: column;
}
.wc-cell:hover {
  border-color: var(--accent, #5E6AD2);
  transform: translateY(-1px);
}
/* Image subsurface — the only clickable part for approve toggle. */
.wc-cell-img {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  overflow: hidden;
}
/* Meta bar below the image — badge on the left, reject ✕ on the right.
   Kept OUT of the image hit-area so clicking reject cannot accidentally approve. */
.wc-cell-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.05);
  min-height: 26px;
}
.wc-badge-row {
  color: #d0d3d7;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.wc-cell.wc-approved {
  border-color: #2bac76;
  box-shadow: 0 0 0 1px #2bac76 inset;
}
.wc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wc-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  background: #1f2226;
}
.wc-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.2px;
  pointer-events: none;
  max-width: calc(100% - 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: #2bac76;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.wc-cell.wc-approved .wc-check { display: flex; }

.wc-zoom {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #fff;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.wc-cell:hover .wc-zoom { opacity: 1; }
.wc-zoom:hover { background: rgba(0,0,0,0.9); }

/* Reject button — lives in .wc-cell-meta bar (below image), NEVER overlaps
   with the approve-toggle click surface. Small, inline, always visible. */
.wc-reject {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255,107,107,0.35);
  color: #ff6b6b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.wc-reject:hover { background: rgba(200,30,30,0.9); color: #fff; border-color: rgba(200,30,30,0.95); }
.wc-cell.wc-rejecting { opacity: 0.15; transform: scale(0.9); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }

/* Lightbox overlay */
.wc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wcLbFadeIn 0.12s ease;
}
@keyframes wcLbFadeIn { from { opacity: 0 } to { opacity: 1 } }
.wc-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
}
.wc-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background 0.12s ease;
}
.wc-lb-close:hover { background: rgba(255,255,255,0.18); }
.wc-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background 0.12s ease;
}
.wc-lb-nav:hover { background: rgba(255,255,255,0.18); }
.wc-lb-prev { left: 20px; }
.wc-lb-next { right: 20px; }
.wc-lb-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}
.wc-lb-imgwrap {
  position: relative;
  display: block;
  width: min(88vw, 88vh);
  height: min(88vw, 88vh);
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease;
  background: #0d0d0d;
}
.wc-lb-imgwrap:hover { border-color: rgba(255,255,255,0.25); }
.wc-lb-imgwrap.wc-lb-approved { border-color: #2bac76; box-shadow: 0 0 0 2px #2bac76 inset; }
.wc-lb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wc-lb-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: #2bac76;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.wc-lb-imgwrap.wc-lb-approved .wc-lb-check { display: flex; }
.wc-lb-meta {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d0d2d5;
  font-size: 12px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 3;
  white-space: nowrap;
}
.wc-lb-counter { color: #fff; font-weight: 500; }
.wc-lb-badge { color: #b8bbbf; }
.wc-lb-chip { font-size: 10px; padding: 2px 8px; }
.wc-lb-hint { color: var(--text-muted, #7f8389); }
.wc-lb-hint-ok { color: #2bac76; font-weight: 500; }

@media (max-width: 600px) {
  .wc-lb-prev { left: 8px; }
  .wc-lb-next { right: 8px; }
  .wc-lb-close { top: 10px; right: 10px; width: 36px; height: 36px; }
  .wc-zoom { opacity: 1; }
}

.wc-actions-text {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.wc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wc-action-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wc-action-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.wc-action-primary {
  background: var(--accent, #5E6AD2);
  border-color: var(--accent, #5E6AD2);
  color: #fff;
}
.wc-action-primary:hover:not(:disabled) {
  background: #0d4d82;
  border-color: #0d4d82;
}
.wc-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wc-actions-result {
  margin-top: 10px;
  font-size: 12px;
}
.wc-success {
  background: rgba(43, 172, 118, 0.12);
  color: #2bac76;
  border: 1px solid rgba(43, 172, 118, 0.25);
  border-radius: 4px;
  padding: 8px 10px;
}
.wc-error {
  background: rgba(220, 53, 69, 0.12);
  color: #ff6b7a;
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 4px;
  padding: 8px 10px;
}

/* ============================================================
   HiveOS Module Runner — rail + frame + slot transitions
   Specs:
     directives/playbooks/hiveos_module_architecture.md (Petra)
     directives/playbooks/hiveos_module_uiux.md         (Noa)
   ============================================================ */

/* Rail — wide labeled branded menu (Noa preview hiveos_views_v2.html .rail).
   Default 232px expanded (mark + wordmark + version chip + section label +
   numbered labeled items + footer). Collapses to a 60px icon-only drawer via
   .is-collapsed (toggled by module_runner.js, persisted in localStorage). */
.hiveos-rail {
  width: 232px;
  min-width: 232px;
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 100;
  transition:
    width 200ms var(--ease-out, ease),
    min-width 200ms var(--ease-out, ease);
}
/* collapsed = slim icon-only drawer; labels/numbers/wordmark/footer hidden */
.hiveos-rail.is-collapsed {
  width: 60px;
  min-width: 60px;
}

/* Rail head — hex-cluster mark + "HiveOS" wordmark + version chip (lockup,
   brandbook §3.3). Survives populateRail() re-renders (runner prepends it).
   Mark never animates per brandbook §4.5 — no hover/transition. */
.hiveos-rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: default;
}
.hiveos-rail-head .hiveos-rail-mark {
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.hiveos-rail-wm {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  white-space: nowrap;
  color: var(--text-primary);
}
.hiveos-rail-wm b { color: var(--accent); font-weight: 600; }
.hiveos-rail-ver {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.hiveos-rail.is-collapsed .hiveos-rail-head { padding: 18px 0 14px; justify-content: center; }
.hiveos-rail.is-collapsed .hiveos-rail-wm,
.hiveos-rail.is-collapsed .hiveos-rail-ver { display: none; }

/* Collapse / expand affordance — the minimize button row. */
.hiveos-rail-collapse-row {
  display: flex;
  align-items: center;
  padding: 8px 10px 0;
}
.hiveos-rail.is-collapsed .hiveos-rail-collapse-row { justify-content: center; padding: 8px 0 0; }
.hiveos-rail-collapse {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--dur-fast, 120ms) var(--ease-out, ease),
    color var(--dur-fast, 120ms) var(--ease-out, ease),
    border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hiveos-rail.is-collapsed .hiveos-rail-collapse { margin-left: 0; }
.hiveos-rail-collapse:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.hiveos-rail-collapse:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.hiveos-rail-collapse svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
  transition: transform 200ms var(--ease-out, ease);
}
.hiveos-rail.is-collapsed .hiveos-rail-collapse svg { transform: rotate(180deg); }

/* Section label between the collapse row and the module list. */
.hiveos-rail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 16px 18px 8px;
  white-space: nowrap;
}
.hiveos-rail.is-collapsed .hiveos-rail-label { opacity: 0; height: 12px; padding: 16px 0 8px; }

/* Module list — flexes to fill so the footer pins to the bottom. */
.hiveos-rail-list {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.hiveos-rail.is-collapsed .hiveos-rail-list { padding: 0 8px; }

/* Rail item — wide labeled row: icon + label + mono number. */
.hiveos-rail-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition:
    background var(--dur-fast, 120ms) var(--ease-out, ease),
    color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.hiveos-rail-item svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.hiveos-rail-lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hiveos-rail-num {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}
.hiveos-rail-item:hover:not(.is-active):not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* selected = surface step-up + 2px inset indigo bar (one accent per view) */
.hiveos-rail-item.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--accent);
}
.hiveos-rail-item.is-active .hiveos-rail-num { color: var(--accent); }
.hiveos-rail-item:disabled,
.hiveos-rail-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-disabled);
}
.hiveos-rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* collapsed item = icon only, centered; label + number hidden, tooltip on hover */
.hiveos-rail.is-collapsed .hiveos-rail-item { justify-content: center; padding: 0; gap: 0; }
.hiveos-rail.is-collapsed .hiveos-rail-lbl,
.hiveos-rail.is-collapsed .hiveos-rail-num { display: none; }

/* Footer note — hidden when collapsed. */
.hiveos-rail-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.hiveos-rail-foot b { color: var(--text-secondary); font-weight: 600; }
.hiveos-rail.is-collapsed .hiveos-rail-foot { display: none; }

/* Tooltip — only meaningful in the collapsed (icon-only) state; the wide state
   already shows the label inline. Appears right of the rail on hover. */
.hiveos-rail-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-out;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* Inline labels are visible when expanded, so suppress the hover tooltip there;
   only show it in the collapsed drawer where labels are hidden. */
.hiveos-rail.is-collapsed .hiveos-rail-item:hover .hiveos-rail-tooltip {
  opacity: 1;
  transition-delay: 200ms;
}
.hiveos-rail-item.is-active .hiveos-rail-tooltip {
  display: none; /* don't label the module you're already on */
}

@media (prefers-reduced-motion: reduce) {
  .hiveos-rail,
  .hiveos-rail-collapse svg { transition: none; }
}

/* Module frame — viewport for the active module. */
.hiveos-module-frame {
  flex: 1;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
}

/* Module slot — absolute fill inside frame. Runner toggles hidden attr. */
.module-slot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 200ms ease-out;
}
.module-slot[hidden] {
  display: none;
}
.module-slot.is-exiting {
  opacity: 0;
  transition: opacity 150ms ease-out;
  pointer-events: none;
}
.module-slot.is-entering {
  opacity: 0;
}
.module-slot.is-mounted {
  opacity: 1;
}

/* Chat module is a legacy container — its internal sidebar + chat-area
   need the body's original row flex. Recreate that flex inside the slot. */
.module-slot[data-module-id="chat"] {
  display: flex;
  flex-direction: row;
}
.module-slot[data-module-id="chat"][hidden] {
  display: none;
}

/* Mobile — collapse rail to an icon-only hamburger overlay at <=768px.
   Intent documented in Noa spec §7; v1.1 proper implementation follows. */
@media (max-width: 768px) {
  .hiveos-rail {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  .hiveos-rail.is-open {
    transform: translateX(0);
  }
}

/* ============================================================================
   LIVE CALL — header button + modal + iris-ring animation
   Spec: directives/agents/noa_product_designer/good_examples/
         2026-06-03_hiveos-chat_live-call-mode.md
   ============================================================================ */

/* Header headset button — replaces the muted-speaker TTS button.
   Uses the existing .btn-sm look but lights up green during a call. */
#btnLiveCall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition:
    color 120ms cubic-bezier(0.16, 1, 0.3, 1),
    background 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
#btnLiveCall:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
#btnLiveCall.is-in-call {
  color: var(--success);
  background: rgba(43, 172, 118, 0.12);
}

/* ----- Backdrop & modal container ----- */
.live-call-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9000;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-backdrop.is-open { opacity: 1; }

.live-call-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 480px;
  max-width: calc(100vw - 48px);
  min-height: 480px;
  max-height: calc(100vh - 96px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  z-index: 9001;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 32px 28px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  /* per-agent accent fed by JS — see live_call.js _mount() */
  --agent-color: var(--accent);
  --lc-amplitude: 1.0;
}
.live-call-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Close (X) — top-right of modal */
.live-call-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color 120ms cubic-bezier(0.16, 1, 0.3, 1),
    background 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ----- Avatar zone & iris rings ----- */
.live-call-avatar-zone {
  position: relative;
  width: 192px;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 24px auto 0;
}

.live-call-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--bg-elevated);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.live-call-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px solid var(--agent-color);
  border-radius: var(--radius-full);
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  will-change: transform, opacity;
}
.live-call-ring:nth-child(1) { width: 112px; height: 112px; }
.live-call-ring:nth-child(2) { width: 136px; height: 136px; }
.live-call-ring:nth-child(3) { width: 160px; height: 160px; }
.live-call-ring:nth-child(4) { width: 184px; height: 184px; }

/* ----- Mic dot (only visible in user-speaking state) ----- */
.live-call-mic-dot {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(43, 172, 118, 0.18);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   STATE A — CONNECTING (rotating low-opacity rings, staggered shimmer)
   ============================================================================ */
.live-call-modal[data-state="connecting"] .live-call-ring {
  animation: lc-ring-connect 2400ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.live-call-modal[data-state="connecting"] .live-call-ring:nth-child(1) { animation-delay: 0ms; }
.live-call-modal[data-state="connecting"] .live-call-ring:nth-child(2) { animation-delay: 200ms; }
.live-call-modal[data-state="connecting"] .live-call-ring:nth-child(3) { animation-delay: 400ms; }
.live-call-modal[data-state="connecting"] .live-call-ring:nth-child(4) { animation-delay: 600ms; }
@keyframes lc-ring-connect {
  0%   { opacity: 0.12; transform: translate(-50%, -50%) scale(0.92); }
  50%  { opacity: 0.28; transform: translate(-50%, -50%) scale(1.00); }
  100% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.92); }
}
.live-call-modal[data-state="connecting"] .live-call-avatar-img {
  opacity: 0.7;
}

/* ============================================================================
   STATE B — LISTENING (rings hidden; ring 1 ghost)
   ============================================================================ */
.live-call-modal[data-state="listening"] .live-call-ring,
.live-call-modal[data-state="muted"] .live-call-ring,
.live-call-modal[data-state="user-speaking"] .live-call-ring,
.live-call-modal[data-state="ended"] .live-call-ring {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-modal[data-state="listening"] .live-call-ring:nth-child(1) {
  opacity: 0.08;
}
.live-call-modal[data-state="listening"] .live-call-avatar-img {
  opacity: 0.85;
}

/* ============================================================================
   STATE C — AGENT SPEAKING (THE DOPAMINE MOMENT — amplitude-driven rings)
   --lc-amplitude is set by JS from real-time audio level (1.0 silent .. 1.22 peak).
   Each ring scales at a different fraction of (amplitude - 1.0) to mimic
   natural wave decay.
   ============================================================================ */
.live-call-modal[data-state="speaking"] .live-call-ring {
  animation: none;
  transition:
    opacity 80ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 80ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-modal[data-state="speaking"] .live-call-ring:nth-child(1) {
  /* Innermost ring — brightest, scales the most.
     Border thickens slightly with amplitude for extra punch. */
  opacity: calc(0.55 + var(--lc-glow, 0) * 0.40);
  transform: translate(-50%, -50%)
    scale(calc(1 + (var(--lc-amplitude) - 1) * 1.00));
  border-width: calc(1.5px + var(--lc-glow, 0) * 1.2px);
  border-color: color-mix(in srgb, var(--agent-color) 95%, #ffffff 5%);
}
.live-call-modal[data-state="speaking"] .live-call-ring:nth-child(2) {
  opacity: calc(0.38 + var(--lc-glow, 0) * 0.35);
  transform: translate(-50%, -50%)
    scale(calc(1 + (var(--lc-amplitude) - 1) * 0.78));
  border-color: color-mix(in srgb, var(--agent-color) 78%, transparent 22%);
}
.live-call-modal[data-state="speaking"] .live-call-ring:nth-child(3) {
  opacity: calc(0.22 + var(--lc-glow, 0) * 0.30);
  transform: translate(-50%, -50%)
    scale(calc(1 + (var(--lc-amplitude) - 1) * 0.56));
  border-color: color-mix(in srgb, var(--agent-color) 60%, transparent 40%);
}
.live-call-modal[data-state="speaking"] .live-call-ring:nth-child(4) {
  /* Outermost — most visible than before so the whole "wave" reads
     at a glance, not just inner. */
  opacity: calc(0.12 + var(--lc-glow, 0) * 0.26);
  transform: translate(-50%, -50%)
    scale(calc(1 + (var(--lc-amplitude) - 1) * 0.42));
  border-color: color-mix(in srgb, var(--agent-color) 45%, transparent 55%);
}
.live-call-modal[data-state="speaking"] .live-call-avatar-img {
  opacity: 1;
  /* Stronger colored halo that brightens with amplitude. */
  box-shadow:
    0 0 0 2px var(--bg-elevated),
    0 0 0 calc(4px + var(--lc-glow, 0) * 6px)
      color-mix(in srgb, var(--agent-color)
        calc(45% + var(--lc-glow, 0) * 35%), transparent),
    0 0 calc(20px + var(--lc-glow, 0) * 36px)
      color-mix(in srgb, var(--agent-color)
        calc(20% + var(--lc-glow, 0) * 35%), transparent);
  transition: box-shadow 80ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   STATE D — USER SPEAKING (green mic dot pulses below avatar)
   ============================================================================ */
.live-call-modal[data-state="user-speaking"] .live-call-mic-dot {
  opacity: 1;
  animation: lc-mic-pulse 1600ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes lc-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 172, 118, 0.35); }
  50%  { box-shadow: 0 0 0 6px rgba(43, 172, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 172, 118, 0); }
}
.live-call-modal[data-state="user-speaking"] .live-call-avatar-img {
  opacity: 0.80;
}

/* ----- Muted (agent perspective: your mic is off) ----- */
.live-call-modal[data-state="muted"] .live-call-avatar-img {
  opacity: 0.6;
  filter: saturate(0.8);
}

/* ----- Ended ----- */
.live-call-modal[data-state="ended"] .live-call-avatar-img {
  opacity: 0.5;
  filter: saturate(0.5);
}

/* ----- State label row ----- */
.live-call-state-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  white-space: nowrap;
}
.live-call-agent-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.live-call-sep {
  font-size: 15px;
  color: var(--text-tertiary);
}
.live-call-state-text {
  font-size: 13px;
  font-weight: 450;
  color: var(--text-secondary);
}

/* ----- Meta row: timer + cost ----- */
.live-call-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.live-call-timer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.live-call-cost {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-cost.is-elevated {
  color: var(--warning);
}

/* ----- Action buttons footer ----- */
.live-call-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  width: 100%;
}
.live-call-btn-mute,
.live-call-btn-hangup {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 120ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 120ms cubic-bezier(0.16, 1, 0.3, 1),
    color 120ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.live-call-btn-mute {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
.live-call-btn-mute:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.live-call-btn-mute.is-muted {
  background: var(--danger-tint);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--danger);
}
.live-call-btn-mute.is-muted:hover {
  background: rgba(239, 68, 68, 0.20);
  border-color: var(--danger);
}
.live-call-btn-hangup {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
}
.live-call-btn-hangup:hover {
  background: #c0392b;
  border-color: #c0392b;
  transform: scale(1.04);
}
.live-call-btn-hangup:active {
  transform: scale(0.96);
}

/* Screen-reader only — accessibility live region */
.live-call-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Mobile — bottom sheet (≤768px) per Noa spec §7 ----- */
@media (max-width: 768px) {
  .live-call-modal {
    top: auto;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 28px 24px 32px;
    min-height: 0;
  }
  .live-call-modal.is-open {
    transform: translateY(0);
  }
  .live-call-avatar-zone {
    width: 168px;
    height: 168px;
  }
  .live-call-avatar-img {
    width: 84px;
    height: 84px;
  }
  .live-call-ring:nth-child(1) { width: 100px; height: 100px; }
  .live-call-ring:nth-child(2) { width: 120px; height: 120px; }
  .live-call-ring:nth-child(3) { width: 142px; height: 142px; }
  .live-call-ring:nth-child(4) { width: 162px; height: 162px; }
  .live-call-btn-mute,
  .live-call-btn-hangup {
    width: 48px;
    height: 48px;
  }
}

/* Respect prefers-reduced-motion: still show state changes, but stop loops */
@media (prefers-reduced-motion: reduce) {
  .live-call-modal[data-state="connecting"] .live-call-ring,
  .live-call-modal[data-state="user-speaking"] .live-call-mic-dot {
    animation: none !important;
  }
  .live-call-modal[data-state="connecting"] .live-call-ring {
    opacity: 0.2;
  }
  .live-call-backdrop,
  .live-call-modal {
    transition-duration: 100ms;
  }
}

/* Rail badge — approvals pending count (Noa spec 2026-07-03) */
.hiveos-rail-badge{min-width:16px;height:16px;border-radius:9999px;background:var(--accent,#5E6AD2);color:var(--text-inverse,#0E1013);font-family:var(--font-mono,monospace);font-size:10px;font-weight:600;padding:0 4px;line-height:16px;text-align:center;margin-left:4px;flex-shrink:0}
.hiveos-rail.is-collapsed .hiveos-rail-badge{position:absolute;top:6px;right:6px;width:7px;height:7px;min-width:7px;padding:0;border-radius:50%;overflow:hidden;color:transparent}

/* ============================================================
   DENSITY PASS — global 90% UI scale (Noa spec 2026-07-05, roadmap #36)

   Shareholder compared 100% vs 90% browser zoom and locked 90% as the
   canonical density. This bakes it in: `zoom: 0.9` on <body> reproduces
   the 90%-browser-zoom rendering at 100%, uniformly across the chat AND
   every module tab (automations, gallery, approvals...) without touching
   their stylesheets. Chrome-only is sanctioned for HiveOS apps; Chrome's
   standardized zoom (128+) keeps viewport units and CSS-positioned
   fixed overlays correct under element zoom.

   THE ONE HAZARD of element zoom: getBoundingClientRect()/clientX return
   POST-zoom visual pixels, but px lengths written by JS onto elements
   INSIDE the zoomed subtree are re-multiplied by 0.9 at render → JS-
   positioned popovers/connectors would land ~10% toward the origin.
   Fix: counter-zoom exactly those elements back to effective zoom 1.0
   (0.9 x 1.111111 = 0.9999999), so their JS-written px coordinates map
   1:1 to visual pixels again. They render at 100% scale — acceptable for
   small transient popovers; position correctness > size consistency.

   COUNTER-ZOOM REGISTRY — every element that receives px positions
   computed by JS from gBCR/clientXY. If you add a new JS-positioned
   element, ADD IT HERE or it will render ~10% off:
   - .ew-draft-tooltip     main.js _showDraftTooltip (rect.right/top)
   - #ttsSpeedPopover      main.js showTtsSpeedPopover (rect.bottom/right)
   - .skills-panel         main.js toggleSkillsPanel (rect.top/left)
   - .autom-trigger-picker automations/module.js openTypePicker (btnRect)
   - .autom-connector-svg  automations/module.js drawConnectors (rect deltas)
   - .autom-conn-label     automations/module.js updateConnectorLabel
   - #devOverlay           extras.js annotation tools (clientX/clientY)
   - #devFeedback          extras.js showDevFeedback (innerWidth centering)

   Rollback: delete this whole block.
   ============================================================ */
body { zoom: 0.9; }

/* Viewport-height compensation (hotfix 2026-07-05, "dół ścięło"):
   explicit vh/dvh lengths COMPUTE against the real viewport but RENDER
   scaled by the zoom — a 100vh body painted at 90% height left a dead
   10% strip at the bottom. `auto`/percentage sizes are unaffected, so
   only the explicit full-height users need dividing back by 0.9. Any
   future `height: 100vh` element inside <body> needs the same. */
body { height: calc(100vh / 0.9); height: calc(100dvh / 0.9); }
.hiveos-rail { height: calc(100vh / 0.9); height: calc(100dvh / 0.9); }

/* Touch devices (iPad/tablet/phone): kill the density zoom entirely.
   iPadOS Safari computes the layout viewport differently under element
   zoom — combined with the (now removed) user-scalable=no it rendered
   the app shifted/clipped ("nie dało się korzystać" 2026-07-18). Desktop
   pointer:fine keeps the 0.9 density; coarse pointers get 1:1 plus the
   matching vh un-compensation and connector-svg reset. */
@media (pointer: coarse) and (min-width: 768px) {
  /* TABLETS ONLY (iPad 768px+). Scoping matters: the first version applied
     to ALL coarse pointers and broke iPhone — zoom 1 + freed page zoom moved
     the composer under Safari's bottom URL bar ("nie moge wyslac wiadomosci",
     2026-07-18). Phones keep the original, field-proven zoom-0.9 layout. */
  body { zoom: 1; height: 100vh; height: 100dvh; }
  .hiveos-rail { height: 100vh; height: 100dvh; }
  .module-automations-root .autom-connector-svg { zoom: 1; }
}
.hiveos-module-frame { height: calc(100vh / 0.9); height: calc(100dvh / 0.9); }
.wc-lb-stage { width: calc(100vw / 0.9); height: calc(100vh / 0.9); }

.ew-draft-tooltip,
#ttsSpeedPopover,
.skills-panel,
.autom-trigger-picker,
.autom-conn-label,
#devOverlay,
#devFeedback,
.module-automations-root .autom-connector-svg { zoom: 1.111111; }

/* Draft-card resize compensation: main.js _onDraftResizeMove writes
   --draft-height in VISUAL px (from gBCR + clientY). Dividing by the
   body zoom here keeps the drag 1:1 with the cursor and preserves the
   persisted/default height visually (460px visual either way). */
.ew-draft.state-full { height: calc(var(--draft-height, 460px) / 0.9); }

/* ============================================================
   VOICE NOTES — composer control (roadmap #33 phase 2, Noa 2026-07-05)
   Record (MediaRecorder webm/opus) -> POST /api/stt -> transcription
   appended into #msgInput for review-before-send. Logic: vnToggle()
   IIFE at end of main.js. Pure in-flow layout + CSS-anchored hint —
   NO getBoundingClientRect positioning, so nothing here needs the
   density-pass counter-zoom registry above.
   ============================================================ */
/* Legacy Web Speech dictation superseded by voice notes (better PL via
   Scribe, review-before-send instead of live clobbering of #msgInput).
   toggleVoice() kept intact in main.js. Rollback: delete this line. */
#btnMic { display: none; }

.vn-btn { gap: 6px; }
.vn-btn .vn-live, .vn-btn .vn-ic-stop, .vn-btn .vn-spin { display: none; }
/* recording */
.vn-btn[data-state="rec"] { color: var(--danger); background: var(--danger-tint); }
.vn-btn[data-state="rec"]:hover { color: var(--danger); background: var(--danger-tint); }
.vn-btn[data-state="rec"] .vn-ic-mic { display: none; }
.vn-btn[data-state="rec"] .vn-live { display: inline-flex; align-items: center; gap: 6px; }
.vn-btn[data-state="rec"] .vn-ic-stop { display: block; }
/* transcribing */
.vn-btn[data-state="busy"] { cursor: default; }
.vn-btn[data-state="busy"]:hover { background: none; color: var(--text-muted); }
.vn-btn[data-state="busy"] .vn-ic-mic { display: none; }
.vn-btn[data-state="busy"] .vn-spin { display: inline-block; }
.vn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: vn-pulse 1.2s ease-in-out infinite; }
.vn-time { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-primary); min-width: 28px; text-align: left; }
.vn-spin { width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: vn-rot 0.8s linear infinite; }
@keyframes vn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes vn-rot { to { transform: rotate(360deg); } }
/* Inline hint (mic denied / transcription error) — quiet toast anchored
   above the composer via static CSS offsets (input-area is relative).
   Never alert(). */
.vn-hint { position: absolute; bottom: calc(100% + 4px); right: 20px; max-width: 360px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.4); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); z-index: 20; }
.vn-hint.show { opacity: 1; transform: translateY(0); }
.vn-hint.err { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .vn-dot { animation: none; }
  .vn-spin { animation: none; border-color: var(--accent); }
  .vn-hint { transition: none; transform: none; }
}

/* System events — autopilot machinery rows rendered as discreet lines, never
   as the operator's own bubbles (Rafal 2026-07-20). */
.sys-event { text-align: center; font-size: 12px; color: var(--text-muted); padding: 4px 16px; margin: 6px auto; max-width: 760px; opacity: .8; }
.sys-event summary { cursor: pointer; list-style: none; display: inline; }
.sys-event summary::-webkit-details-marker { display: none; }
.sys-event details[open] summary { opacity: .6; }
.sys-event-detail { text-align: left; white-space: pre-wrap; font-size: 11px; background: rgba(128,128,128,.08); border-radius: 8px; padding: 10px; margin-top: 6px; max-height: 280px; overflow: auto; }

/* Background-work strip — a working server must never look like a frozen one
   (Rafal 2026-07-26: "mam wrazenie ze agent sie zawiesil"). */
.bg-busy-strip { display:flex; align-items:center; gap:8px; margin:6px 16px 0;
  padding:7px 12px; border-radius:10px; font-size:12px; color:var(--text-muted);
  background:rgba(128,128,128,.10); border:1px solid rgba(128,128,128,.16); }
.bg-busy-dot { width:7px; height:7px; border-radius:50%; background:var(--accent);
  flex:0 0 auto; animation:bgBusyPulse 1.4s ease-in-out infinite; }
@keyframes bgBusyPulse { 0%,100%{opacity:.25;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }

/* ── SOURCE TRAIL (2026-08-04) ──────────────────────────────────────────
   Honesty layer under an agent reply: which knowledge sources the runtime
   actually handed it. Spec (computed contrast, token citations, all states):
   directives/agents/noa_product_designer/good_examples/
   2026-08-04_hiveos_chat_source_trail_footer.md

   Deliberately QUIETER than its sibling .activity-feed (no card in the
   collapsed state, 1.5 stroke icons): it must be ignorable 95% of the time.
   Only the empty and missing states earn color and weight — per the design
   intent, "no sources" is the loudest signal in the set, not an edge case. */
.source-trail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  font-family: var(--font-ui);
  animation: stFadeIn 200ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes stFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.st-summary {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  min-height: 44px;               /* real touch target on every viewport */
  padding: 0 4px;
  background: transparent; border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  font-size: 11px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-secondary, #9A9EA6);
  transition: background 120ms var(--ease-out, ease), color 120ms var(--ease-out, ease);
}
.st-summary:hover        { background: var(--bg-elevated, #2A2D32); color: var(--text-primary, #E8E8E8); }
.st-summary:active       { background: var(--bg-pressed, #32363B); }
.st-summary:focus-visible { outline: none; box-shadow: var(--elev-focus, 0 0 0 2px var(--accent)); }

.st-icon      { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; }
.st-icon svg  { width: 14px; height: 14px; }
.st-count     { flex-shrink: 0; }
.st-dot       { color: inherit; flex-shrink: 0; }
.st-flag      { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: #ff6b7a; font-weight: 600; }
.st-flag-icon     { display: inline-flex; width: 13px; height: 13px; }
.st-flag-icon svg { width: 13px; height: 13px; }
.st-chevron   { flex-shrink: 0; width: 14px; height: 14px; margin-left: auto;
                transition: transform 200ms var(--ease-out, ease); }
.source-trail.st-expanded .st-chevron { transform: rotate(90deg); }

/* Expanded detail. max-height (not grid 0fr/1fr) mirrors the shipped
   .atlas-reveal-disclosure-body precedent; padding lives on the inner
   .st-rows so no sliver shows at max-height:0. */
.st-detail {
  max-height: 0; overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  transition: max-height 200ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              border-color 200ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.source-trail.st-expanded .st-detail {
  max-height: 480px; overflow-y: auto; margin-top: 8px;
  background: var(--bg-surface, #222529);
  border-color: var(--border-subtle, rgba(255,255,255,0.06));
}
.st-rows { padding: 8px 12px; display: flex; flex-direction: column; }

.st-row { padding: 8px 0; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
          transition: background 120ms var(--ease-out, ease); }
.st-row:last-child { border-bottom: none; }
.st-row:hover { background: rgba(255,255,255,0.02); }
.st-row-main  { display: flex; align-items: center; gap: 8px; }

.st-chip { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
           display: inline-flex; align-items: center; justify-content: center; }
.st-chip svg { width: 14px; height: 14px; display: block; }

/* Trust axis: colorless = guaranteed, color intensity rises as trust falls.
   archive/rag reuse the activity feed's shipped hues verbatim (same concepts). */
.st-chip-manifest { color: var(--text-secondary, #9A9EA6); background: rgba(255,255,255,0.06); }
.st-chip-archive  { color: #C9A94E; background: rgba(201,169,78,0.12); }
.st-chip-rag      { color: #4EC5D4; background: rgba(78,197,212,0.12); }
.st-chip-missing  { color: var(--danger, #EF4444); background: var(--danger-tint, rgba(239,68,68,0.12)); }

/* One accessible grey for every neutral text role: --text-tertiary measures
   3.18:1 on --bg-surface and FAILS AA at 10-11px. Roles differ by weight,
   family and style instead. */
.st-name { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 500;
           color: var(--text-secondary, #9A9EA6);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-kind { flex-shrink: 0; font-size: 10px; font-weight: 400; color: var(--text-secondary, #9A9EA6); }
.st-size { flex-shrink: 0; margin-left: auto; font-family: var(--font-mono); font-size: 10px;
           color: var(--text-secondary, #9A9EA6); font-variant-numeric: tabular-nums; }
.st-reason { margin-top: 2px; padding-left: 26px; font-size: 10px; font-style: italic;
             font-weight: 400; line-height: 1.4; color: var(--text-secondary, #9A9EA6); }

/* Missing row: the filename is not the error, the load was — only kind+reason
   go red so the eye lands on what actually broke. #ff6b7a, not raw --danger
   (4.09:1, fails AA at this size). */
.st-row-missing .st-kind   { color: #ff6b7a; font-weight: 600; }
.st-row-missing .st-reason { color: #ff6b7a; font-style: normal; }

/* EMPTY — static row, never a button; same position as the collapsed summary
   so it is predictable, but colored so the anomaly reads before the words do. */
.source-trail.st-empty {
  display: flex; align-items: center; gap: 8px;
  min-height: 20px; padding: 0 4px;
  color: var(--warning, #F59E0B);
  font-size: 11px; font-weight: 500;
}
.source-trail.st-empty-danger { color: #ff6b7a; }
.st-empty-icon     { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; }
.st-empty-icon svg { width: 14px; height: 14px; }

@media (max-width: 768px) { .st-detail { max-height: 400px; } }
@media (max-width: 480px) { .st-size { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .source-trail { animation: none; }
  .st-detail, .st-chevron { transition: none; }
}

/* Agent self-check, folded into the same strip as the source evidence
   (Rafał 2026-08-05: one footer, not two). Muted by default — the tick is a
   confirmation, not an achievement; only a failed criterion earns color. */
.st-self { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.st-self-icon     { display: inline-flex; width: 13px; height: 13px; }
.st-self-icon svg { width: 13px; height: 13px; }
.st-self-ok  { color: var(--text-secondary, #9A9EA6); }
.st-self-bad { color: #ff6b7a; font-weight: 600; }

.st-summary-empty { color: var(--warning, #F59E0B); }
.st-summary-empty.st-empty-danger { color: #ff6b7a; }

.st-self-block { padding-top: 8px; margin-top: 4px;
                 border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); }
.st-self-title { font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
                 text-transform: uppercase; color: var(--text-secondary, #9A9EA6);
                 margin-bottom: 4px; }
.st-self-row  { display: flex; align-items: baseline; gap: 8px; padding: 2px 0;
                font-size: 10px; color: var(--text-secondary, #9A9EA6); }
.st-self-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.st-self-val  { flex-shrink: 0; font-family: var(--font-mono);
                font-variant-numeric: tabular-nums; }
.st-self-row-bad .st-self-val, .st-self-row-bad .st-self-name { color: #ff6b7a; font-weight: 600; }

/* 'opened by the agent' — same violet as the system accent: the agent
   fetched it deliberately, which is stronger evidence than a keyword
   match but weaker than a manifest guarantee. */
.st-chip-read { color: #8B93E8; background: rgba(139,147,232,0.12); }

/* ── Team auth: pre-boot gate overlay + rail identity (2026-08-14) ───────── */
.lgn-gate { position: fixed; inset: 0; z-index: 99999; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; }
.lgn-card { width: 360px; max-width: 92vw; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.lgn-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lgn-logo img { width: 26px; height: 26px; }
.lgn-logo b { font-size: 15px; color: var(--text-primary); }
.lgn-h1 { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.lgn-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.lgn-l { display: block; font-size: 11px; color: var(--text-secondary); margin: 12px 0 4px; }
.lgn-i { width: 100%; background: var(--bg-input, var(--bg-dark)); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text-primary); font-size: 13px; outline: none; box-sizing: border-box; }
.lgn-i:focus { border-color: var(--accent); }
.lgn-btn { width: 100%; margin-top: 18px; background: var(--accent); border: 0; border-radius: 8px; padding: 10px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.lgn-btn:disabled { opacity: .5; cursor: default; }
.lgn-err { color: var(--danger, #EF4444); font-size: 12px; margin-top: 10px; min-height: 16px; }
.lgn-skip { margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-tertiary); cursor: pointer; }
.lgn-skip:hover { color: var(--text-secondary); }

.hiveos-rail-foot.is-identity { padding: 10px 8px; }
.rail-id { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; text-align: left; }
.rail-id:hover { background: var(--bg-elevated); }
.rail-id-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-id-meta { display: flex; flex-direction: column; min-width: 0; }
.rail-id-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-id-role { font-size: 10px; color: var(--text-tertiary); text-transform: capitalize; }
.rail-id-pop { margin-top: 6px; padding: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; }
.rail-id-pop-who { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.rail-id-out { width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.rail-id-out:hover { color: var(--danger, #EF4444); border-color: var(--danger, #EF4444); }

/* Email workspace: which COMPANY mailbox a thread belongs to (2026-08-18 —
   biuro@ vs import@ was invisible and Rafal could not tell them apart). */
.ew-mbx-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 10px; font-family: var(--font-mono); vertical-align: middle; }
.ew-mbx-chip.lg { font-size: 11px; padding: 2px 8px; margin-left: 10px; color: var(--text-secondary); }

/* Mailbox filter chips + make the Open/Archive toggle read as BUTTONS
   (Rafal 2026-08-18: "nie widzę przycisku" — the tabs looked like labels). */
.ew-list-view-toggle button { border: 1px solid var(--border-subtle); }
.ew-list-view-toggle button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ew-list-view-toggle button.active { border-color: var(--accent); }
.ew-mbx-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 12px 0; }
.ew-mbx-filter button { background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary); font-size: 10px; font-family: var(--font-mono); padding: 3px 9px; cursor: pointer; }
.ew-mbx-filter button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ew-mbx-filter button.active { background: var(--bg-input); color: var(--text-primary); border-color: var(--accent); }
.ew-mbx-filter button .count { margin-left: 4px; color: var(--text-tertiary); }
/* 5+ mailboxes: overflow chips collapse behind a "+N" dropdown */
.ew-mbx-more { position: relative; display: inline-flex; }
.ew-mbx-more .ew-mbx-dropdown { left: auto; right: 0; min-width: 140px; }
.ew-mbx-more.open .ew-agent-picker-dropdown { display: block; }

/* Inline chat approval cards + attachment chips (2026-08-18) */
.chat-appr-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 8px 0; background: rgba(255,255,255,0.03); font-size: 13px; }
.chat-appr-head { font-weight: 600; margin-bottom: 6px; }
.chat-appr-row { color: var(--text-secondary); margin: 2px 0; }
.chat-appr-row b { color: var(--text-tertiary); font-weight: 600; font-size: 11px; margin-right: 6px; text-transform: uppercase; }
.chat-appr-row .mono { font-family: var(--font-mono); }
.chat-appr-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.chat-appr-btn { border-radius: 6px; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); }
.chat-appr-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.chat-appr-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-appr-btn:disabled { opacity: .5; cursor: default; }
.chat-appr-done { color: var(--success, #2bac76); font-size: 12px; font-weight: 600; }
.chat-appr-fail { color: var(--danger, #EF4444); font-size: 12px; font-weight: 600; }
.chat-appr-dim { color: var(--text-tertiary); font-size: 12px; }
.chat-appr-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.appr-mail-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.appr-att-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11px; font-family: var(--font-mono); }
.appr-att-chip.missing { color: var(--danger, #EF4444); border-color: rgba(239,68,68,.4); }
.appr-att-none { color: var(--text-tertiary); font-size: 11px; }

/* Email workspace: resizable list pane + tabs that always fit (2026-08-20) */
.ew-resizer { width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent; border-left: 1px solid var(--border-subtle); }
.ew-resizer:hover { background: var(--accent); opacity: .5; }
.ew-list-view-toggle button { padding: 4px 5px; min-width: 0; white-space: nowrap; }
.ew-list-view-toggle .count { margin-left: 2px; font-size: 9px; }

/* Quality-gate revision banner — the answer below was REPLACED after judge
   review; the swap is labeled, never silent (audyt Noi 2026-08-26 P1-2). */
.msg-revised-banner { display: flex; align-items: center; gap: 7px; margin: 8px 0 10px; padding: 7px 11px; border-radius: 7px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); color: var(--warning); font-size: 12px; font-weight: 500; }
.msg-revised-banner svg { flex-shrink: 0; }

/* "Done" toast — agent finished in a chat you are not looking at; click jumps
   there (audyt Noi 2026-08-26: the stream calls YOU). */
.done-toast { position: fixed; bottom: 24px; right: 24px; z-index: 960; display: flex; align-items: center; gap: 9px; background: var(--bg-elevated, #1E2128); border: 1px solid rgba(43,172,118,0.4); border-radius: 8px; padding: 11px 16px; font-size: 13px; color: var(--text-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.45); cursor: pointer; animation: doneToastIn .2s ease-out; }
.done-toast svg { color: var(--success); flex-shrink: 0; }
.done-toast:hover { border-color: var(--success); }
@keyframes doneToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Deliverable edit-in-chat modal (Rafal 2026-09-11; readability pass per
   Noa's corrective spec 2026-09-14): a DOCUMENT editor, not a code snippet —
   near-fullscreen, wrapped prose in UI font at a ~88ch measure. */
.dedit-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 970; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dedit-modal { background: var(--bg-elevated, #1E2128); border: 1px solid var(--border); border-radius: 12px; width: min(860px, calc(100vw - 48px)); height: min(92vh, 1040px); display: flex; flex-direction: column; padding: 20px 24px; gap: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.dedit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dedit-title { font-size: 15px; font-weight: 600; font-family: var(--font-ui); }
.dedit-hint { font-size: 12px; color: var(--text-muted); text-align: right; }
.dedit-area { flex: 1; min-height: 0; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 24px 32px; font: 450 14px/1.7 var(--font-ui); letter-spacing: 0; color: var(--text-primary); resize: none; outline: none; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dedit-area:focus { border-color: var(--accent); }
.dedit-err { font-size: 12px; color: var(--danger, #E74C3C); }
.dedit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dedit-count { font-size: 12px; color: var(--text-muted); }
.dedit-foot-btns { display: flex; gap: 8px; }
.dedit-foot .fc-btn { cursor: pointer; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; }
@media (max-width: 768px) { .dedit-backdrop { padding: 8px; } .dedit-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 16px; } .dedit-area { padding: 16px; } }