/*
 * chat-shell.css — chrome around the chat content area.
 *
 * Verbatim slice extracted from pwa/views/chat.js inline <style> block at
 * commit #0 of chat-domain-redesign per design DD-05a + DD-06. Zero token
 * migration, zero class rename, zero behavior change at the extraction
 * step. Per-section commits #1..#9 progressively rewrite .ch-* selectors
 * to .cha-* (gated by experimentalFeatures.redesign per DD-09); the legacy
 * .ch-* rules remain alongside until commit #10 (full-stack assembly).
 *
 * Surface scope: header, toolbar, task bar, exec banners, tab strip, call
 * bar, side panel, badges, calendar widget (side-panel inbox tab),
 * responsive overrides.
 */

      .ch-outer { display:flex; height:100%; position:relative; }
      .ch-wrap { display:flex; flex-direction:column; flex:1; min-width:0; position:relative; height:100%; overflow:hidden; }

      /* Chat header host — PwaChatHeader.mount() attaches here. T-09
         renames .ch-header-host → .cha-header-host for finance-aligned
         prefix consistency. Sticky-top + surface background stays. */
      .cha-header-host {
        flex-shrink:0;
        position:sticky;
        top:0;
        z-index:12;
        background:var(--color-surface);
        border-bottom:1px solid var(--color-outline-variant);
      }
      .ch-toolbar {
        display:flex; align-items:center; gap:var(--space-base);
        padding:8px 16px;
        border-bottom:1px solid color-mix(in srgb, white 6%, transparent);
        background:var(--color-surface);
        flex-shrink:0;
        overflow-x:auto;
        scrollbar-width:none;
      }
      .ch-toolbar::-webkit-scrollbar { display:none; }
      .ch-toolbar .ch-tasks-badge { margin-right:auto; }

      /* ── Inbox side panel (Commit #8 / DD-07-08) ──
         Class namespace migrated .ch-task-panel / .ch-tp-* → .cha-side-*
         per DD-09. Markup at chat.js:68 emits the new classes; legacy
         rules removed (no external consumers — only storybook-static
         build artifacts referenced them). Mobile drawer behavior
         retained; rail-mode (.is-chat-rail) overrides below in the
         responsive-shell block use the new selectors. */
      .cha-side-panel {
        position:fixed; left:0; top:0; bottom:0; width:85vw; max-width:320px;
        background:var(--color-surface); border-right:1px solid color-mix(in srgb, white 8%, transparent);
        z-index:60; transform:translateX(-100%); transition:transform 0.25s ease;
        display:flex; flex-direction:column; overflow:hidden;
      }
      .cha-side-panel.open { transform:translateX(0); }
      .cha-side-overlay {
        display:none; position:fixed; inset:0; background:color-mix(in srgb, black 50%, transparent);
        z-index:59;
      }
      .cha-side-overlay.visible { display:block; }
      .cha-side-header {
        display:flex; align-items:center; justify-content:space-between;
        padding:14px 16px; border-bottom:1px solid color-mix(in srgb, white 6%, transparent); flex-shrink:0;
      }
      .cha-side-header h3 { font-size:15px; font-weight:600; margin:0; }
      /* .cha-side-tabs is the mountTabStrip host — primitive owns visuals. */
      .cha-side-close {
        background:none; border:none; color:var(--color-on-surface-variant);
        font-size:20px; cursor:pointer; padding:4px 8px; line-height:1;
      }
      .cha-side-close:active { opacity:0.6; }
      .cha-side-list { flex:1; overflow-y:auto; padding:8px 0; overscroll-behavior:contain; }
      .cha-side-empty { padding:24px 16px; text-align:center; color:var(--color-on-surface-variant); font-size:13px; }
      .cha-side-calendar { flex:1; overflow-y:auto; padding:8px 12px; overscroll-behavior:contain; }
      .ch-cal-item { display:flex; align-items:center; gap:var(--space-base); padding:8px 10px; border-radius:var(--radius-default); margin-bottom:var(--space-xs); background:var(--bg2); }
      .ch-cal-item:active { opacity:0.7; }
      .ch-cal-time { font-size:12px; font-weight:600; color:var(--color-on-surface-variant); min-width:42px; }
      .ch-cal-title { font-size:13px; font-weight:500; color:var(--color-on-surface); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      /* ── Task context bar (Commit #3 / DD-07-03) ──
         Mirrors .fin-rec-card shape: surface-container background + 4px
         primary-accent left rail (instead of the legacy primary-tinted
         pill with bottom border). Class namespace migrated
         .ch-task-bar* → .cha-task-context* per DD-09; markup at
         chat.js:93 emits the new classes. Legacy .ch-task-bar* rules
         removed (no consumers remaining). */
      .cha-task-context {
        display:flex; align-items:center; gap:var(--space-base);
        padding:10px 16px 10px 14px;
        background:var(--color-surface-container);
        border-left:4px solid var(--color-primary);
        border-bottom:1px solid var(--color-outline-variant);
        flex-shrink:0;
      }
      /* .cha-task-context.hidden — covered by global .hidden in base.css. */
      .cha-task-context-title {
        flex:1; font-size:13px; font-weight:500; color:var(--color-on-surface);
        overflow-x:auto; overflow-y:hidden; white-space:nowrap;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
      }
      .cha-task-context-title::-webkit-scrollbar { display:none; }
      .cha-task-context-view {
        background:color-mix(in srgb, var(--color-primary) 15%, transparent);
        border:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
        color:var(--color-primary);
        padding:4px 10px; border-radius:var(--radius-tight);
        font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap;
      }
      .cha-task-context-view:active { opacity:0.6; }
      .cha-task-context-exit {
        background:none;
        border:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
        color:var(--color-primary);
        padding:4px 10px; border-radius:var(--radius-tight);
        font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap;
      }
      .cha-task-context-exit:active { opacity:0.6; }
      .cha-task-context-toggle {
        background:none; border:none; color:var(--color-primary);
        font-size:10px; cursor:pointer; padding:4px 6px;
        transition:transform 0.2s;
      }
      .cha-task-context-toggle.expanded { transform:rotate(180deg); }
      .ch-task-detail-panel { padding:8px 16px 10px; background:color-mix(in srgb, var(--color-primary) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent); font-size:12px; max-height:200px; overflow-y:auto; flex-shrink:0; }
      /* .ch-task-detail-panel.hidden — covered by global .hidden in base.css. */
      .ch-task-detail-panel .tdp-row { display:flex; align-items:center; gap:var(--space-tight); padding:2px 0; }
      .ch-task-detail-panel .tdp-dot { width:6px; height:6px; border-radius:var(--radius-full); flex-shrink:0; }
      .ch-task-detail-panel .tdp-dot.done { background:var(--color-success); }
      .ch-task-detail-panel .tdp-dot.in_progress { background:var(--color-primary); animation:ux-pulse 2.2s ease-in-out infinite; }
      .ch-task-detail-panel .tdp-dot.pending { background:var(--color-on-surface-variant); }
      .ch-task-detail-panel .tdp-dot.failed { background:var(--color-error); animation:ux-pulse 1.8s ease-in-out infinite; }
      .ch-task-detail-panel .tdp-dot.skipped { background:var(--color-outline); opacity:0.5; }
      .ch-task-detail-panel .tdp-label { color:var(--hint); }
      .ch-task-detail-panel .tdp-title { color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-task-detail-panel .tdp-highlight { background:color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius:3px; padding:1px 4px; margin:0 -4px; }
      .ch-task-detail-panel .tdp-section { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--hint); margin:6px 0 3px; }
      .ch-task-detail-panel .tdp-section:first-child { margin-top:0; }
      .ch-task-detail-panel .tdp-progress { display:flex; align-items:center; gap:var(--space-tight); margin-bottom:var(--space-xs); }
      .ch-task-detail-panel .tdp-progress-bar { flex:1; height:4px; background:color-mix(in srgb, white 10%, transparent); border-radius:var(--radius-sm); overflow:hidden; max-width:120px; }
      .ch-task-detail-panel .tdp-progress-fill { height:100%; background:var(--btn); border-radius:var(--radius-sm); }
      .ch-task-detail-panel .tdp-kv { display:flex; gap:var(--space-tight); padding:1px 0; }
      .ch-task-detail-panel .tdp-kv-key { color:var(--hint); min-width:55px; }
      .ch-task-detail-panel .tdp-kv-val { color:var(--text); }
      .ch-task-detail-panel .tdp-preview { color:var(--hint); font-size:11px; line-height:1.4; margin-top:var(--space-hairline); white-space:pre-wrap; }

      /* ── Exec banner (Commit #4 / DD-07-04) ──
         Mirrors .fin-alert tone variants: 12% tonal background +
         border-left accent (was: 8% bg + bottom border). Class namespace
         migrated .ch-exec-banner* → .cha-banner* per DD-09; markup at
         chat.js:100 emits the new classes. Legacy .ch-exec-* rules
         removed (no consumers remaining). */
      .cha-banner {
        display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-sm);
        padding:10px 16px;
        border-left:4px solid var(--color-outline-variant);
        background:var(--color-surface-container);
        flex-shrink:0;
      }
      /* .cha-banner.hidden — covered by global .hidden in base.css. */
      .cha-banner-info {
        background:color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-left-color:var(--color-primary);
      }
      .cha-banner-success {
        background:color-mix(in srgb, var(--color-success) 12%, transparent);
        border-left-color:var(--color-success);
      }
      .cha-banner-warning {
        background:color-mix(in srgb, var(--color-warning) 12%, transparent);
        border-left-color:var(--color-warning);
      }
      .cha-banner-error {
        background:color-mix(in srgb, var(--color-error) 12%, transparent);
        border-left-color:var(--color-error);
      }
      /* Offline-banner fallback shape — used only when uxAlertBanner is
         unavailable (degraded build). Migrated from inline-style chat.js
         emission per chat-no-inline-styles lock-down close-out. */
      .ch-ctrl-offline-fallback {
        background:color-mix(in srgb, var(--color-warning) 15%, transparent);
        color:var(--color-warning);
        font-size:12px;
        padding:6px 12px;
        border-radius:var(--radius-default);
        text-align:center;
      }

      .cha-banner-main { min-width:0; flex:1; }
      /* .cha-banner-top → .base-row-wrap in pwa/styles/base.css. Markup composes both. */
      .cha-banner-pill {
        font-size:10px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
        border-radius:var(--radius-pill); padding:4px 8px;
        background:color-mix(in srgb, var(--color-on-surface) 6%, transparent);
        color:var(--color-on-surface-variant);
      }
      .cha-banner-title { font-size:13px; font-weight:700; color:var(--color-on-surface); }
      .cha-banner-detail { margin-top:var(--space-xs); font-size:12px; color:var(--color-on-surface-variant); line-height:1.45; }
      .cha-banner-meta { display:flex; gap:var(--space-tight); flex-wrap:wrap; justify-content:flex-end; }
      .cha-banner-chip {
        font-size:10px; font-weight:700;
        color:var(--color-on-surface-variant);
        background:color-mix(in srgb, var(--color-on-surface) 6%, transparent);
        border-radius:var(--radius-pill); padding:4px 8px; white-space:nowrap;
      }

      /* ── Inbox toggle badge ── */
      .ch-tasks-badge { position:relative; }
      .ch-tasks-badge .ch-badge-count {
        position:absolute; top:-2px; right:-4px;
        background:var(--color-error); color:#fff;
        font-size:9px; font-weight:700; min-width:14px; height:14px;
        border-radius:7px; display:flex; align-items:center; justify-content:center;
        padding:0 3px; line-height:1;
      }
      .ch-tasks-badge .ch-badge-count.hidden { display:none; }

      /* When chat is rail-mounted (#appChatRail at any width), keep the inbox
         panel as a drawer overlay — switching to a 260px in-flow column inside
         a narrow rail leaves only ~100px for chat content. The body class
         is-chat-rail is set by initThreeColumnShell when rail mount succeeds.
         Spec: desktop-chat-in-rail T-06 W-08. */
      @media (min-width: 768px) {
        body:not(.is-chat-rail) .cha-side-panel {
          position:static; transform:none; width:260px; flex-shrink:0;
          border-right:1px solid color-mix(in srgb, white 8%, transparent);
        }
        body:not(.is-chat-rail) .cha-side-panel:not(.open) { display:none; }
        body:not(.is-chat-rail) .cha-side-overlay { display:none !important; }
        body:not(.is-chat-rail) .cha-side-close { display:none; }
      }

      /* Header redesign per chat-domain-redesign DD-07-01 (Commit #1) — the
         production chat header is rendered by PwaChatHeader (component-owned
         .pwa-chathdr* classes covering status dot + agent chip + utility-icon
         action cluster). The legacy `.ch-header*` / `.ch-conn-dot*` /
         `.ch-profile-btn*` / `.ch-new-btn*` rules below were retained from a
         previous redesign and are no longer emitted anywhere in markup
         (verified via `grep -E 'class="ch-(header|conn|profile|new)' pwa/`).
         Deleted to shrink chat-shell.css surface ahead of Wave A per-section
         commits. The `.ch-header-host` mount-target div (chat-shell.css:19)
         is preserved — that's where PwaChatHeader.mount() attaches. The
         `.ch-label-btn` rule (toolbar buttons, used by the tasks-toggle +
         controls-toggle in chat.js:82/90) is preserved below. */

      .ch-label-btn {
        background:none; border:1px solid color-mix(in srgb, white 12%, transparent); color:var(--hint);
        padding:6px 10px; border-radius:var(--radius-default); font-size:12px; font-weight:600; cursor:pointer;
      }
      .ch-label-btn.active { color:var(--btn); border-color:color-mix(in srgb, var(--color-primary) 45%, transparent); background:color-mix(in srgb, var(--color-primary) 12%, transparent); }
      .ch-label-btn:active { opacity:0.6; }

      /* ── Tab bar — finance-aligned (.fin-tabs / .fin-tab pill style) ──
         T-12 (DD-07-02): overscroll-behavior-x:contain + touch-action:pan-x
         claim horizontal trackpad/touch swipes for tab-strip scroll, blocking
         macOS Safari/Chrome browser-back gestures (Native Conflicts row #1).
         Forward-staged .cha-tab-strip alias for the post-T-30 flag-on path
         (DD-09 coexistence — same rules apply to either prefix). */
      .ch-tabs, .cha-tab-strip {
        display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain; touch-action:pan-x;
        border-bottom:1px solid color-mix(in srgb, white 6%, transparent);
        flex-shrink:0; scrollbar-width:none; gap:var(--space-xs); padding:8px 12px;
      }
      .ch-tabs::-webkit-scrollbar { display:none; }
      .ch-tab {
        display:flex; align-items:center; gap:var(--space-tight); padding:7px 14px;
        font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
        border-radius:var(--radius-pill); background:var(--bg2); color:var(--hint);
        flex-shrink:0; max-width:200px; overflow:hidden; text-overflow:ellipsis;
        border:none; transition:all 0.15s;
      }
      .ch-tab.active { background:var(--color-primary); color:#fff; }
      .ch-tab .dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--color-warning); animation:pulse 1.5s infinite; display:none; flex-shrink:0; }
      .ch-tab.generating .dot { display:inline-block; }
      .ch-tab.active .dot { background:#fff; }
      .ch-tab-close { background:none; border:none; color:inherit; font-size:14px; padding:0 2px; cursor:pointer; opacity:0; flex-shrink:0; margin-left:var(--space-hairline); }
      .ch-tab:hover .ch-tab-close { opacity:0.7; }
      @media (pointer: coarse) { .ch-tab-close { opacity:0.5; } }
      .ch-tab-new { padding:7px 12px; color:var(--hint); cursor:pointer; font-size:16px; flex-shrink:0; border-radius:var(--radius-pill); }
      .ch-tab-new:active { opacity:0.6; }

      /* ── Active call bar (Commit #6 / DD-07-06) ──
         Slim status bar pinned above tab strip during a voice call.
         role="status" + aria-live="polite" (DD-07-06 + AC-21). Token-
         driven state tints — base = success (active call), .connecting
         = warning, .error = error tone. Class namespace migrated
         .ch-call-bar* → .cha-call-bar* per DD-09; markup at chat.js:110
         emits the new classes + ARIA. Legacy .ch-call-bar* rules
         removed. */
      .cha-call-bar {
        display:flex; align-items:center; gap:var(--space-sm);
        padding:12px 16px;
        background:color-mix(in srgb, var(--color-success) 12%, transparent);
        border-bottom:1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
        flex-shrink:0;
      }
      .cha-call-bar.connecting {
        background:color-mix(in srgb, var(--color-warning) 12%, transparent);
        border-bottom-color:color-mix(in srgb, var(--color-warning) 30%, transparent);
      }
      .cha-call-bar.error {
        background:color-mix(in srgb, var(--color-error) 12%, transparent);
        border-bottom-color:color-mix(in srgb, var(--color-error) 30%, transparent);
      }
      /* .cha-call-bar.hidden — covered by global .hidden in base.css. */
      .cha-call-status { font-size:13px; font-weight:500; flex:1; color:var(--color-on-surface); }
      .cha-call-timer {
        font-size:13px;
        font-variant-numeric:tabular-nums;
        color:var(--color-on-surface-variant);
        min-width:40px;
      }
      .cha-call-mute {
        background:none;
        border:1px solid var(--color-outline);
        color:var(--color-on-surface);
        padding:5px 10px; border-radius:var(--radius-default);
        font-size:12px; font-weight:500;
        cursor:pointer;
        display:flex; align-items:center; gap:var(--space-xs);
      }
      .cha-call-mute.muted {
        background:color-mix(in srgb, var(--color-on-surface) 10%, transparent);
      }
      .cha-call-mute:active { opacity:0.6; }
      .cha-call-end {
        background:var(--color-error);
        border:none;
        color:var(--color-on-error, var(--color-on-primary));
        padding:5px 10px; border-radius:var(--radius-default);
        font-size:12px; font-weight:600;
        cursor:pointer;
      }
      .cha-call-end:active { opacity:0.7; }

      /* Voice-mode hub inner rules moved to chat-composer.css per
         DD-05 surface split (voice is composer-adjacent for layout
         purposes — the hub replaces the chat list when voice mode is
         active). The mis-placed "Calendar widget" comment that
         previously headed this block was a Commit #0 extraction bug —
         the orphaned `.ch-vh-wave` body fragment got grouped here by
         mistake. Cleaned up Commit #7. */

      /* Export menu — `--bg-secondary` / `--border` / `--bg-hover` aliases
         drop their hex fallbacks; tokens.css defines surface-container +
         outline as the canonical replacements (chat-tokens-only un-skip). */
      .ch-export-menu { position:absolute;right:0;top:100%;background:var(--bg-secondary,var(--color-surface-container));border:1px solid var(--border,var(--color-outline-variant));border-radius:var(--radius-default);padding:4px 0;z-index:100;min-width:140px;box-shadow:0 4px 12px color-mix(in srgb, black 30%, transparent); }
      .ch-export-menu button { display:block;width:100%;text-align:left;padding:8px 16px;background:none;border:none;color:var(--text-primary,var(--color-on-surface));cursor:pointer;font-size:14px; }
      .ch-export-menu button:hover { background:var(--bg-hover,var(--color-surface-container-high)); }

      /* ── Calendar Widget ─────────────────────────────────────── */
      .cal-wrap { --cal-blue:var(--color-primary); --cal-green:var(--color-success); --cal-red:var(--color-error); --cal-orange:var(--color-warning); --cal-purple:var(--color-tertiary); --cal-free:color-mix(in srgb, var(--color-success) 15%, transparent); --cal-free-border:color-mix(in srgb, var(--color-success) 40%, transparent); --cal-today-bg:color-mix(in srgb, var(--color-primary) 8%, transparent); --cal-grid-line:color-mix(in srgb, white 6%, transparent); --cal-now:var(--color-error); border-radius:var(--radius-roomy); background:var(--bg2,var(--color-surface-container)); overflow:hidden; }
      .cal-wrap.cal-empty, .cal-wrap.cal-error { padding:var(--space-md); text-align:center; }
      .cal-empty-icon { font-size:32px; margin-bottom:var(--space-base); }
      .cal-empty-text { color:var(--hint,#888); font-size:14px; }
      .cal-fallback { color:var(--hint,#888); font-size:13px; margin-bottom:var(--space-base); }
      .cal-header { display:flex; align-items:center; gap:var(--space-base); padding:10px 14px; border-bottom:1px solid var(--border-color,color-mix(in srgb, white 8%, transparent)); flex-wrap:wrap; }
      .cal-title { display:flex; align-items:center; gap:var(--space-tight); flex:1; min-width:0; }
      .cal-date-label { font-size:15px; font-weight:600; color:var(--text,#fff); white-space:nowrap; }
      .cal-tz { font-size:11px; color:var(--hint,#888); background:color-mix(in srgb, white 6%, transparent); padding:2px 6px; border-radius:var(--radius-sm); }
      .cal-nav { display:flex; gap:var(--space-hairline); }
      .cal-nav-btn { width:28px; height:28px; border-radius:var(--radius-tight); border:1px solid color-mix(in srgb, white 10%, transparent); background:none; color:var(--text,#fff); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
      .cal-nav-btn:active { background:color-mix(in srgb, white 8%, transparent); }
      .cal-view-tabs { display:flex; gap:var(--space-hairline); background:color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-default); padding:var(--space-hairline); }
      .cal-tab { padding:4px 10px; border-radius:var(--radius-tight); font-size:12px; font-weight:500; border:none; background:none; color:var(--hint,#888); cursor:pointer; white-space:nowrap; }
      .cal-tab.active { background:var(--accent,var(--color-primary)); color:#fff; }
      /* Day view */
      .cal-allday { padding:6px 14px 6px 48px; display:flex; gap:var(--space-xs); flex-wrap:wrap; border-bottom:1px solid var(--cal-grid-line); }
      .cal-allday-event { font-size:12px; padding:3px 8px; border-radius:var(--radius-tight); color:#fff; opacity:0.9; cursor:pointer; }
      .cal-time-grid { position:relative; overflow-y:auto; padding-left:0; will-change:transform; }
      .cal-hour-line { position:absolute; left:0; right:0; border-top:1px solid var(--cal-grid-line); }
      .cal-hour-label { position:absolute; left:var(--space-tight); top:-9px; font-size:10px; color:var(--hint,#888); width:38px; text-align:right; }
      .cal-now-line { position:absolute; left:44px; right:0; height:2px; background:var(--cal-now); z-index:3; }
      .cal-now-line::before { content:''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:var(--radius-full); background:var(--cal-now); }
      .cal-event { position:absolute; right:var(--space-xs); border-radius:var(--radius-tight); padding:3px 8px; color:#fff; opacity:0.9; cursor:pointer; min-height:20px; overflow:hidden; font-size:12px; z-index:2; transition:opacity 0.15s; }
      .cal-event:hover { opacity:1; }
      .cal-event-time { font-size:10px; opacity:0.8; }
      .cal-event-title { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .cal-free { position:absolute; left:48px; right:var(--space-xs); border:1px dashed var(--cal-free-border); background:var(--cal-free); border-radius:var(--radius-tight); display:flex; align-items:center; justify-content:center; z-index:1; }

/* ── Utility classes added during inline-style extraction ─────────── */

/* Task-bar toggle button — hidden by default. Migrated 2026-05-03 to
   the centralized .hidden utility from pwa/styles/base.css (it had
   zero markup callers; consumers should use class="hidden" instead). */

/* Side-panel calendar states */
.ch-cal-loading  { padding: var(--space-gutter); color: var(--color-on-surface-variant); font-size: 13px; }
.ch-cal-empty    { padding: var(--space-gutter); color: var(--color-on-surface-variant); font-size: 13px; text-align: center; }
.ch-cal-error    { padding: var(--space-gutter); color: var(--color-error); font-size: 13px; }

/* Task-detail panel — states */
.tdp-preview-mt  { margin-top: var(--space-xs); }
.tdp-kv-val-bold { font-weight: 600; }

/* Subtask / step title states */
.tdp-title-done   { color: var(--color-on-surface-variant); text-decoration: line-through; }
.tdp-title-failed { color: var(--color-error); }

/* Deliverable status label */
.tdp-label-right { margin-left: auto; }

/* Backlog link row */
.tdp-view-link-row { margin-top: var(--space-base); text-align: center; }
.tdp-view-link     { color: var(--color-primary); font-size: 11px; text-decoration: none; }

/* Driver recommendation book button */
.tdp-book-btn-wrap { margin-top: var(--space-tight); }
.tdp-book-btn {
  display: inline-block; padding: 6px 14px;
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success); border-radius: var(--radius-default);
  font-size: 12px; font-weight: 600; text-decoration: none;
}

/* Tone classes — replace dynamic style="color:...". Compose with -bold for
   weight: e.g. class="tdp-kv-val tdp-tone-success tdp-tone-bold" */
.tdp-tone-success { color: var(--color-success); }
.tdp-tone-warning { color: var(--color-warning); }
.tdp-tone-error   { color: var(--color-error); }
.tdp-tone-primary { color: var(--color-primary); }
.tdp-tone-muted   { color: var(--color-on-surface-variant); }
.tdp-tone-bold    { font-weight: 600; }

/* CSS-var carve-out for dynamic per-row progress fill (see also
   chat-bubbles.css .ch-task-card-progress-fill). */
.tdp-progress-fill { width: var(--ch-progress-pct, 0%); }

/* CSS-var carve-out for dynamic calendar item border. JS passes
   `--ch-cal-color: var(--color-primary)|...`. */
.ch-cal-item { border-left: 3px solid var(--ch-cal-color, var(--color-primary)); }