/*
 * chat-composer.css — composer + attachment row + voice mode hub.
 *
 * 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 commit #9 (composer redesign) and Wave B feature
 * commit #13 (attachment thumbnail row) rewrite to .cha-* (gated by
 * experimentalFeatures.redesign + experimentalFeatures.attachmentReorder).
 *
 * Surface scope: drag-drop overlay, pending attachment strip, paperclip
 * button, mic / camera buttons, voice mode hub (Voyager hero gradient),
 * export menu.
 */

      .bd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-base); }
      .bd-stat { text-align:center; padding:8px 4px; background:color-mix(in srgb, white 3%, transparent); border-radius:var(--radius-default); }
      .bd-stat-val { font-size:18px; font-weight:700; color:var(--text); }
      .bd-stat-lbl { font-size:10px; color:var(--hint); margin-top:var(--space-hairline); text-transform:uppercase; letter-spacing:0.3px; }
      .bd-status-bar { display:flex; height:8px; border-radius:var(--radius-sm); overflow:hidden; }
      .bd-bar-seg { min-width:4px; transition:width 0.3s; }
      .bd-legend { display:flex; flex-wrap:wrap; gap:8px 12px; }
      .bd-legend-item { display:flex; align-items:center; gap:var(--space-xs); font-size:11px; color:var(--hint); }
      .bd-legend-dot { width:6px; height:6px; border-radius:var(--radius-full); flex-shrink:0; }
      .bd-prio-row { display:flex; flex-wrap:wrap; gap:var(--space-tight); align-items:center; }
      .bd-prio-pill { font-size:11px; font-weight:600; padding:2px 8px; border:1px solid; border-radius:var(--radius-snug); }
      .bd-plan-tag { font-size:11px; color:var(--hint); padding:2px 6px; background:color-mix(in srgb, white 4%, transparent); border-radius:var(--radius-tight); }
      .bd-tasks { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; }
      .bd-task-row { display:flex; align-items:center; gap:var(--space-base); padding:8px 4px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, white 4%, transparent); transition:background 0.12s; }
      .bd-task-row:last-child { border-bottom:none; }
      .bd-task-row:active { background:color-mix(in srgb, white 6%, transparent); }
      .bd-task-dot { width:7px; height:7px; border-radius:var(--radius-full); flex-shrink:0; }
      .bd-task-title { flex:1; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .bd-task-prio { font-size:10px; font-weight:700; flex-shrink:0; min-width:20px; text-align:right; }
      .bd-task-age { font-size:10px; color:var(--hint); flex-shrink:0; min-width:24px; text-align:right; }
      .bd-prog { width:36px; height:4px; background:color-mix(in srgb, white 8%, transparent); border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
      .bd-prog-fill { height:100%; background:var(--color-success); border-radius:var(--radius-sm); }
      .bd-prog-txt { font-size:9px; color:var(--hint); flex-shrink:0; }
      .bd-chart-section { display:flex; flex-direction:column; gap:var(--space-xs); }
      .bd-chart-label { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
      .bd-chart-bars { display:flex; gap:var(--space-xs); align-items:flex-end; }
      .bd-chart-col { display:flex; flex-direction:column; align-items:center; flex:1; gap:var(--space-hairline); }
      .bd-chart-stack { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; }
      .bd-chart-bar { border-radius:var(--radius-sm); min-height:0; }
      .bd-chart-ok { background:var(--color-success); }
      .bd-chart-fail { background:var(--color-error); }
      .bd-chart-day { font-size:9px; color:var(--hint); }
      .bd-actions { display:flex; gap:var(--space-base); }
      .bd-action { flex:1; text-align:center; padding:9px 14px; border-radius:var(--radius-snug); border:1px solid color-mix(in srgb, white 10%, transparent); background:var(--bg2); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:transform 0.1s, background 0.15s; }
      .bd-action:active { transform:scale(0.97); background:color-mix(in srgb, var(--color-primary) 12%, transparent); }

      /* ── Controls drawer — finance section-strip + chip buttons ── */
      .ch-ctrl-btn { background:none; border:none; color:var(--hint); cursor:pointer; padding:var(--space-tight); border-radius:var(--radius-default); display:flex; align-items:center; justify-content:center; transition:transform 0.1s, color 0.15s; }
      .ch-ctrl-btn:active { transform:scale(0.94); }
      .ch-ctrl-btn.active { color:var(--color-primary); }
      .ch-ctrl-btn svg { width:20px; height:20px; }
      .ch-controls { display:none; padding:12px 14px; border-bottom:1px solid color-mix(in srgb, white 6%, transparent); flex-shrink:0; background:var(--bg); }
      .ch-controls.visible { display:block; }
      .ch-ctrl-row { display:flex; gap:var(--space-tight); flex-wrap:wrap; margin-bottom:var(--space-base); }
      .ch-ctrl-row:last-child { margin-bottom:0; }
      .ch-ctrl-row-label { font-size:11px; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-tight); font-weight:700; }
      .ch-ctrl-offline-wrap { margin-bottom:var(--space-snug); }
      /* .ch-ctrl-offline-wrap.hidden — covered by global .hidden in base.css. */
      .ch-ctrl-action { padding:7px 14px; border-radius:var(--radius-pill); border:1px solid color-mix(in srgb, white 10%, transparent); background:var(--bg2); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform 0.1s, background 0.15s; }
      .ch-ctrl-action:active { transform:scale(0.96); background:color-mix(in srgb, var(--color-primary) 12%, transparent); }
      .ch-ctrl-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:var(--bg2); color:var(--text); padding:8px 16px; border-radius:var(--radius-wide); font-size:13px; font-weight:500; z-index:100; box-shadow:0 4px 12px color-mix(in srgb, black 40%, transparent); opacity:0; transition:opacity 0.2s; pointer-events:none; }
      .ch-ctrl-toast.show { opacity:1; }

      /* ── Attachment pills ── */
      .ch-att-pills { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-tight); }
      .ch-att-pill { display:inline-flex; align-items:center; gap:3px; font-size:11px; background:color-mix(in srgb, black 20%, transparent); padding:2px 8px; border-radius:var(--radius-snug); opacity:0.85; }
      /* ── Reply quote in bubble ── */
      .ch-reply-quote { padding:4px 8px; margin-bottom:var(--space-tight); border-radius:var(--radius-sm); background:color-mix(in srgb, white 5%, transparent); display:flex; flex-direction:column; gap:1px; }
      .ch-reply-quote-role { font-size:11px; font-weight:600; color:var(--hint); }
      .ch-reply-quote-text { font-size:12px; color:var(--text); opacity:0.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-img { max-width:100%; border-radius:var(--radius-default); display:block; cursor:pointer; }
      /* Inline video preview shares the .ch-img box-model. `playsinline` on
         the element + max-height cap prevents iOS Safari from auto-fullscreening
         and from blowing past the bubble width on long-aspect clips. */
      .ch-video { max-width:100%; max-height:400px; border-radius:var(--radius-default); display:block; background:#000; }
      .ch-bubble.has-img { padding:var(--space-xs); max-width:320px; }
      .cha-bubble.has-img { padding:var(--space-xs); max-width:320px; }
      .ch-bubble.has-img .ch-img-caption,
      .cha-bubble.has-img .ch-img-caption { padding:4px 8px 2px; font-size:13px; opacity:0.9; }

      /* ── Drag-drop overlay — finance-aligned with token-driven primary tint ── */
      .ch-drop-overlay {
        display:none; position:absolute; inset:0; z-index:80;
        background:color-mix(in srgb, var(--color-primary) 18%, transparent);
        border:2px dashed var(--color-primary);
        border-radius:var(--radius-roomy);
        align-items:center; justify-content:center; flex-direction:column; gap:var(--space-base);
        font-size:16px; font-weight:600; color:var(--color-primary); pointer-events:none;
      }
      .ch-drop-overlay.visible { display:flex; }
      .ch-drop-hint { font-size:12px; font-weight:400; color:var(--hint); }

      /* ── Pending attachment strip ── */
      .ch-pending-att { display:none; flex-wrap:wrap; gap:var(--space-tight); padding:6px 12px 0; flex-shrink:0; }
      .ch-pending-att.visible { display:flex; }
      .ch-pending-pill { display:inline-flex; align-items:center; gap:var(--space-xs); font-size:12px; background:var(--bg2); border:1px solid color-mix(in srgb, white 10%, transparent); padding:4px 10px; border-radius:var(--radius-pill); max-width:240px; overflow:hidden; }
      .ch-pending-pill button { background:none; border:none; color:var(--hint); cursor:pointer; font-size:14px; padding:0 2px; line-height:1; flex-shrink:0; }
      .ch-pending-pill button:active { opacity:0.6; }
      .ch-att-thumb { width:24px; height:24px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
      .ch-att-img-pill { gap:var(--space-xs); }
      .ch-att-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-att-size { color:var(--hint); font-size:10px; flex-shrink:0; }
      .ch-att-snippet { font-size:10px; color:var(--hint); max-height:2.5em; overflow:hidden; line-height:1.25; margin-top:var(--space-hairline); white-space:pre-wrap; word-break:break-all; }
      .ch-pending-pill.doc-pill { flex-direction:column; align-items:flex-start; padding:6px 8px; max-width:260px; }
      .ch-pending-pill.doc-pill .ch-att-top { display:flex; align-items:center; gap:var(--space-xs); width:100%; }

      /* ── Paperclip button ── */
      /* Legacy `.ch-attach-btn` / `.ch-mic-btn` / `.ch-cam-btn` rules
         removed — replaced by `.cha-composer-tool` in chat-bubbles.css
         per Commit #9 / DD-07-09. */

      /* ── Mic / Camera buttons ── */
      /* mic / cam button rules → `.cha-composer-tool-mic` /
         `.cha-composer-tool-cam` in chat-bubbles.css per Commit #9. */
      .ch-voice-bar { display:flex; align-items:center; gap:var(--space-snug); padding:8px 12px; background:color-mix(in srgb, var(--color-error) 12%, transparent); border-top:1px solid color-mix(in srgb, var(--color-error) 30%, transparent); flex-shrink:0; }
      .ch-voice-dot { width:10px; height:10px; border-radius:var(--radius-full); background:var(--color-error); animation:pulse 1s infinite; }
      .ch-voice-timer { font-size:13px; font-variant-numeric:tabular-nums; color:var(--hint); flex:1; }
      .ch-voice-cancel { background:none; border:1px solid color-mix(in srgb, white 15%, transparent); color:var(--hint); padding:5px 10px; border-radius:var(--radius-default); font-size:12px; cursor:pointer; }
      .ch-voice-send { background:var(--color-error); border:none; color:#fff; padding:5px 12px; border-radius:var(--radius-default); font-size:12px; font-weight:600; cursor:pointer; }

      /* ── Voice mode hub (Commit #7 / DD-07-07) ──
         Voyager hero gradient kept (design-language signature) but
         3-stop hex literals migrated to tokens per DD-06b mapping
         (deep-navy stops 1+3 → primary-container-deep with surface-
         container fallback; mid stop → surface). Class namespace
         migrated .ch-voice-hub* / .ch-vh-* → .cha-voice-hub* /
         .cha-voice-orb / .cha-voice-hub-* per DD-07-07 + DD-09. */
      .cha-voice-hub {
        display:none; flex:1; min-height:0;
        padding:24px 20px;
        background:
          radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 55%),
          linear-gradient(145deg,
            var(--color-primary-container-deep, var(--color-surface-container)) 0%,
            var(--color-surface) 45%,
            var(--color-primary-container-deep, var(--color-surface-container)) 100%);
        overflow-y:auto;
      }
      .ch-wrap.voice-mode .ch-tabs,
      .ch-wrap.voice-mode .ch-toolbar,
      .ch-wrap.voice-mode .ch-messages,
      .ch-wrap.voice-mode .ch-autocomplete,
      .ch-wrap.voice-mode .ch-ctx-bar,
      .ch-wrap.voice-mode .ch-reply-bar,
      .ch-wrap.voice-mode .ch-pending-att,
      .ch-wrap.voice-mode .cha-composer,
      .ch-wrap.voice-mode .ch-voice-bar,
      .ch-wrap.voice-mode .ch-controls,
      .ch-wrap.voice-mode .cha-banner,
      .ch-wrap.voice-mode .cha-call-bar { display:none; }
      .ch-wrap.voice-mode .cha-voice-hub { display:flex; flex-direction:column; gap:var(--space-roomy); }

      .cha-voice-hub-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-snug); }
      .cha-voice-hub-pill {
        display:inline-flex; align-items:center; gap:var(--space-tight);
        font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
        color:var(--color-on-primary);
        background:color-mix(in srgb, var(--color-primary) 30%, transparent);
        border:1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
        border-radius:var(--radius-pill); padding:5px 12px;
      }
      .cha-voice-hub-pill::before {
        content:''; width:8px; height:8px; border-radius:var(--radius-full);
        background:var(--color-primary);
        box-shadow:0 0 10px var(--color-primary);
      }
      .cha-voice-hub-exit {
        border:none;
        background:color-mix(in srgb, var(--color-on-surface) 8%, transparent);
        color:color-mix(in srgb, var(--color-on-surface) 80%, transparent);
        border-radius:var(--radius-snug); padding:7px 12px; font-size:12px; cursor:pointer;
      }
      .cha-voice-hub-exit:active { opacity:0.7; }

      .cha-voice-orb {
        position:relative; width:min(74vw, 300px); aspect-ratio:1; margin:6px auto 0;
        border-radius:var(--radius-full);
        border:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
        background:
          radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-on-surface) 12%, transparent), transparent 45%),
          radial-gradient(circle at 65% 70%, color-mix(in srgb, var(--color-primary) 50%, transparent), color-mix(in srgb, var(--color-surface) 90%, transparent));
        box-shadow:
          0 14px 34px color-mix(in srgb, var(--color-on-surface) 60%, transparent),
          inset 0 0 28px color-mix(in srgb, var(--color-primary) 35%, transparent);
        display:flex; align-items:center; justify-content:center;
        transition:box-shadow 0.2s ease, transform 0.2s ease;
      }
      .cha-voice-hub.listening .cha-voice-orb {
        box-shadow:
          0 0 0 10px color-mix(in srgb, var(--color-primary) 14%, transparent),
          0 0 36px color-mix(in srgb, var(--color-primary) 55%, transparent),
          inset 0 0 40px color-mix(in srgb, var(--color-primary) 45%, transparent);
        transform:scale(1.02);
      }
      /* ── Voice mode hub inner elements (Commit #7 / DD-07-07) ──
         Class namespace migrated .ch-vh-* → .cha-voice-hub-* (and the
         orb-specific .ch-vh-orb → .cha-voice-orb per DD-07-07). Rules
         re-united here from a Commit #0 split-extraction bug — the
         .ch-vh-wave selector was left in chat-composer.css with the
         body + closing brace orphaned in chat-shell.css under a
         mis-placed "Calendar widget" comment. */
      .cha-voice-hub-wave {
        width:66%; height:44%;
        display:flex; align-items:flex-end; justify-content:center; gap:7px;
      }
      .cha-voice-hub-bar {
        width:9px; min-height:10px;
        height:calc(12px + (var(--vh-level, 0.14) * 34px));
        border-radius:var(--radius-pill);
        background:var(--color-primary);
        box-shadow:0 0 12px color-mix(in srgb, var(--color-primary) 60%, transparent);
        animation:vhWave 1.5s ease-in-out infinite;
      }
      .cha-voice-hub-bar:nth-child(2) { animation-delay:0.1s; }
      .cha-voice-hub-bar:nth-child(3) { animation-delay:0.2s; }
      .cha-voice-hub-bar:nth-child(4) { animation-delay:0.3s; }
      .cha-voice-hub-bar:nth-child(5) { animation-delay:0.4s; }
      @keyframes vhWave {
        0%, 100% { transform:scaleY(0.7); opacity:0.8; }
        50% { transform:scaleY(1.25); opacity:1; }
      }
      .cha-voice-hub-status {
        text-align:center; font-size:15px; font-weight:600;
        color:var(--color-on-surface);
      }
      .cha-voice-hub-hint {
        margin-top:-4px; text-align:center; font-size:12px;
        color:var(--color-on-surface-variant);
      }
      .cha-voice-hub-talk {
        margin:4px auto 0; border:none; cursor:pointer;
        padding:12px 18px; border-radius:var(--radius-roomy);
        background:var(--color-primary);
        color:var(--color-on-primary);
        font-size:14px; font-weight:700; letter-spacing:0.2px;
        min-width:180px;
        box-shadow:0 10px 24px color-mix(in srgb, var(--color-primary) 45%, transparent);
      }
      .cha-voice-hub-talk:active { transform:scale(0.97); }
      .cha-voice-hub-talk.recording { background:var(--color-error); box-shadow:0 10px 24px color-mix(in srgb, var(--color-error) 45%, transparent); }
      .cha-voice-hub-cards {
        display:flex; flex-direction:column; gap:var(--space-base);
        margin-top:var(--space-xs); padding-bottom:var(--space-base);
      }
      .cha-voice-hub-card {
        padding:10px 12px; border-radius:var(--radius-md);
        background:color-mix(in srgb, var(--color-on-surface) 8%, transparent);
        border:1px solid color-mix(in srgb, var(--color-on-surface) 11%, transparent);
        transform:translateY(12px) scale(0.97);
        opacity:0;
        animation:vhCardPop 0.28s ease forwards;
      }
      .cha-voice-hub-card-title {
        font-size:11px; font-weight:700; text-transform:uppercase;
        letter-spacing:0.5px;
        color:color-mix(in srgb, var(--color-primary) 70%, var(--color-on-surface));
        margin-bottom:3px;
      }
      .cha-voice-hub-card-body {
        font-size:13px; color:var(--color-on-surface); line-height:1.4;
      }
      @keyframes vhCardPop {
        from { opacity:0; transform:translateY(12px) scale(0.97); }
        to { opacity:1; transform:translateY(0) scale(1); }
      }

      /* ─── Attachment pill drag-reorder (Commit #13 / DD-08-C / FR-10) ──
         Adds visual states for `cha-pending-att` (draggable=true) on top
         of the legacy `.ch-pending-pill` chrome. Reorder logic in chat.js
         _wirePendingAttDrag(); when `experimentalFeatures.attachmentReorder`
         is false, pills don't get the `cha-pending-att` class so these
         rules become no-ops (R-09 mitigation: legacy single-line strip).
      */
      .cha-pending-att {
        cursor:grab;
        user-select:none;
        transition:transform 0.12s ease, box-shadow 0.12s ease;
      }
      .cha-pending-att:active { cursor:grabbing; }
      .cha-pending-att--dragging {
        opacity:0.5;
      }
      .cha-pending-att--over {
        outline:2px dashed var(--color-primary);
        outline-offset:2px;
        transform:scale(1.02);
      }