/* ============================================================================
   BrokerDIY REDESIGN — VOICE PILL brand polish (S15/D12, Bryan-directed
   2026-07-05: "the voice pill still does not look that great or professional…
   the design had a better view of it and a different color")

   The idle bottom-right pill graduates from the near-black W2 blob to a
   BRANDED PRIMARY surface: it paints with the workspace's --r-primary tokens,
   so it follows each theme's primary (Calm evergreen / Operator azure) AND any
   per-org/per-user custom accent from S15/D10 (tenant-accent.js) — the pill IS
   the brand. The EXPANDED transcript panel deliberately returns to the dark
   control surface (--r-dock-*): long transcript text stays on the high-
   legibility panel, per the V6 "dark is reserved for control panels" language.

   Loads AFTER redesign-parity.css (same selector shapes; later !important
   wins). Desktop pill only (min-width 768px) — the ≤767px phone dock keeps its
   v6-mobile design (parity §8). CSS-only: every protected voice id/handler
   (#hint-bar, .vd-host, .vd-dock, #orb-wrap/.vd-orb, #mic-state-text,
   #mic-indicator, #vd-status-bar, #transcript-live, #transcript-reply,
   #dock-settings-btn, #toggle-wake/-ambient/-mute, #tag-voice) is untouched;
   the orb + its rings are NOT restyled (hard rule).
   ========================================================================== */

@media (min-width: 768px) {

  /* ── idle pill: branded primary surface, machined edge, colored lift ── */
  html[data-rtheme] #hint-bar.quick-bar {
    /* self-derived monochrome gradient: subtle top-light of the SAME hue, so
       any theme primary or custom tenant accent stays calm (never two-tone) */
    background: linear-gradient(140deg,
      color-mix(in srgb, var(--r-primary) 88%, white),
      var(--r-primary)) !important;
    border: 1px solid color-mix(in srgb, var(--r-primary-ink) 22%, transparent) !important;
    border-top: 1px solid color-mix(in srgb, var(--r-primary-ink) 22%, transparent) !important;
    box-shadow:
      0 12px 30px -10px color-mix(in srgb, var(--r-primary) 55%, rgb(0 0 0 / 35%)),
      0 2px 6px rgb(0 0 0 / 16%),
      inset 0 1px 0 color-mix(in srgb, var(--r-primary-ink) 12%, transparent) !important;
    transition: box-shadow var(--r-dur, .14s) var(--r-ease, ease),
                transform var(--r-dur, .14s) var(--r-ease, ease);
  }
  html[data-rtheme] #hint-bar.quick-bar:hover {
    transform: translateY(-1px);
    box-shadow:
      0 16px 36px -10px color-mix(in srgb, var(--r-primary) 62%, rgb(0 0 0 / 40%)),
      0 3px 8px rgb(0 0 0 / 18%),
      inset 0 1px 0 color-mix(in srgb, var(--r-primary-ink) 12%, transparent) !important;
  }

  /* readout + gear take the on-primary ink (auto white/near-black via D10) */
  html[data-rtheme] #hint-bar #mic-state-text,
  html[data-rtheme] #hint-bar .vd-mic.mic-indicator {
    color: color-mix(in srgb, var(--r-primary-ink) 85%, transparent) !important;
  }
  html[data-rtheme] #hint-bar #dock-settings-btn {
    color: color-mix(in srgb, var(--r-primary-ink) 66%, transparent) !important;
  }
  html[data-rtheme] #hint-bar #dock-settings-btn:hover,
  html[data-rtheme] #hint-bar #dock-settings-btn:focus-visible {
    color: var(--r-primary-ink) !important;
  }

  /* ── expanded transcript panel: back to the dark control surface ── */
  html[data-rtheme] #hint-bar.quick-bar:has(.vd-tx.visible:not(:empty)) {
    background: var(--r-dock-bg) !important;
    border-color: var(--r-dock-border) !important;
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 50%), 0 2px 8px rgb(0 0 0 / 22%) !important;
    transform: none;
  }
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) #mic-state-text,
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) .vd-mic.mic-indicator {
    color: var(--r-dock-muted) !important;
  }
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) #dock-settings-btn {
    color: var(--r-dock-muted) !important;
  }
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) #dock-settings-btn:hover,
  html[data-rtheme] #hint-bar:has(.vd-tx.visible:not(:empty)) #dock-settings-btn:focus-visible {
    color: var(--r-dock-ink) !important;
  }

  /* reduced motion: pill never animates */
  @media (prefers-reduced-motion: reduce) {
    html[data-rtheme] #hint-bar.quick-bar,
    html[data-rtheme] #hint-bar.quick-bar:hover {
      transition: none;
      transform: none;
    }
  }
}