/* =========================================================================
   L3 · the chat play bar's styles: the transport above the chat composer.

   Two mounts, one look.  The bar is an *in-flow* sibling of the composer on
   both surfaces (``.chat-layout``'s last children on ``/chat``, the flex
   column of ``.ui-chat-sheet`` elsewhere), so it never needs a fixed position,
   never overlaps the floating tab bar and never covers the debug console: the
   surfaces themselves already reserve room for those, and anything below the
   bar in the same column simply follows it.

   Every value here is a token from design-tokens.css.  This sheet is under the
   B-1 ad-hoc-CSS ratchet (tests/test_design_tokens.py): it states no colour
   literal and no px/rem/em literal of its own, and proportions that do not
   exist on the spacing scale are written as ``calc()`` of one that does.

   Heights are intrinsic (never ``vh``), so a ``dvh``-sized column shrinks the
   bar with the keyboard instead of pushing the composer off-screen.
   ========================================================================= */

/* ── the bar ────────────────────────────────────────────────────────────── */

.chat-player {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 0 0 auto;
  margin: 0 0 var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs) var(--space-3xs);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

/* The sheet is a fixed layer sitting on the home indicator: give its copy the
   inset the page copy gets from the column's own padding. */
.ui-chat-sheet .chat-player {
  padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0));
}

.chat-player-main {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

/* ── artwork + text ─────────────────────────────────────────────────────── */

.chat-player-art-frame {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: calc(var(--space-xl) * 1.25);
  block-size: calc(var(--space-xl) * 1.25);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-tint-strong);
}

.chat-player-art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.chat-player-art-fallback {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.chat-player-meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.chat-player-title {
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-player-artist {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── the queue badge ────────────────────────────────────────────────────── */

.chat-player-queue {
  flex: 0 0 auto;
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--surface-tint-strong);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-normal);
}

.chat-player-queue[hidden] {
  display: none;
}

/* ── transport ──────────────────────────────────────────────────────────── */

.chat-player-transport {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3xs);
}

.chat-player-btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

/* The drawn circle stays compact; the hit area reaches the tap minimum. */
.chat-player-btn::after {
  position: absolute;
  inset: calc(var(--space-2xs) * -1);
  content: "";
}

.chat-player-btn:hover {
  background: var(--surface-tint);
  color: var(--color-text);
}

.chat-player-btn:focus-visible,
.chat-player-chevron:focus-visible,
.chat-player-toggle:focus-visible,
.chat-player-full:focus-visible,
.chat-player-device-btn:focus-visible {
  outline: var(--hairline) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}

.chat-player-btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}

.chat-player-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.chat-player-btn--primary[data-playing="true"] {
  background: var(--color-accent-hover);
}

/* ── volume shortcut (wide viewports only) ──────────────────────────────── */

/* Shown by `chat-player--wide`, which the script sets from the bar's own
   measured width (a viewport breakpoint would be a third copy of a number the
   other chat sheets already own — and it would be wrong in the sheet, whose
   width is not the viewport's). */
.chat-player-vol {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  inline-size: calc(var(--space-3xl) * 1.25);
}

.chat-player--wide .chat-player-vol {
  display: flex;
}

.chat-player-vol-range {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  accent-color: var(--color-accent);
}

/* ── the chevron ────────────────────────────────────────────────────────── */

.chat-player-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.chat-player-chevron svg {
  transition: transform var(--transition);
}

.chat-player--expanded .chat-player-chevron svg {
  transform: rotate(180deg);
}

/* ── progress ───────────────────────────────────────────────────────────── */

.chat-player-progress-line {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.chat-player-time {
  flex: 0 0 auto;
  min-inline-size: var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-tight);
}

.chat-player-time:last-child {
  text-align: end;
}

.chat-player-progress {
  flex: 1 1 auto;
  block-size: var(--space-3xs);
  min-inline-size: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-tint-strong);
  appearance: none;
  -webkit-appearance: none;
}

.chat-player-progress::-webkit-progress-bar {
  border-radius: var(--radius-full);
  background: var(--surface-tint-strong);
}

.chat-player-progress::-webkit-progress-value {
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: inline-size var(--transition);
}

.chat-player-progress::-moz-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* ── the honest-state strip ─────────────────────────────────────────────── */

.chat-player-state {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-tight);
}

.chat-player-state:empty {
  display: none;
}

.chat-player-link {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  color: var(--color-accent);
  text-decoration: underline;
}

.chat-player-link--button {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ── the drawer ─────────────────────────────────────────────────────────── */

/* The drawer floats *above* the bar instead of growing it.  In flow it would
   make the bar taller than the column can spare on a phone, and the composer —
   the thing this bar exists to sit above — would be pushed under the tab bar
   and the mini player.  Floating keeps the composer's box fixed; the drawer
   overlays the last lines of the transcript, which is what a popover does. */
.chat-player-drawer {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + var(--space-3xs));
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-block-size: 50dvh;
  padding: var(--space-xs);
  overflow-y: auto;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* Opaque on purpose: a translucent drawer over a transcript reads as
     ghosted text behind controls, which is worse than losing the blur. */
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
}

.chat-player-drawer[hidden] {
  display: none;
}

.chat-player-drawer-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.chat-player-drawer-row--buttons {
  flex-wrap: wrap;
}

.chat-player-drawer-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.chat-player-drawer-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
}

.chat-player-drawer-value {
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.chat-player-toggle {
  min-block-size: var(--tap-min);
  padding: 0 var(--space-sm);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.chat-player-toggle[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  color: var(--color-text);
}

/* ── the device list ────────────────────────────────────────────────────── */

/* The connection's account name (L4's /api/spotify/connection), read once
   when the drawer first opens.  Absent when that endpoint is not there. */
.chat-player-account {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.chat-player-account[hidden] {
  display: none;
}

.chat-player-devices {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.chat-player-device-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  max-block-size: calc(var(--space-3xl) * 2.5);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.chat-player-device-btn {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: 0 var(--space-xs);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  text-align: start;
  cursor: pointer;
}

.chat-player-device-btn:hover:enabled {
  border-color: var(--glass-border);
  background: var(--surface-tint-strong);
}

.chat-player-device-btn[aria-current="true"] {
  border-color: var(--color-accent);
  color: var(--color-text-muted);
  cursor: default;
}

.chat-player-device--empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.chat-player-full {
  min-block-size: var(--tap-min);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.chat-player-full:hover {
  background: var(--color-accent-hover);
}

/* ── compact: the composer has the keyboard on a phone ──────────────────── */

/* The bar gives its height back to the transcript, but play/pause and the
   transport never leave: a play system you cannot pause while typing is not
   a play system.  The gate text stays too — that is the honest part. */
/* `:not(.chat-player--wide)` is the "phone" half of that same measurement: a
   narrow bar compacts, a wide one keeps its full height. */
.chat-player--compact:not(.chat-player--wide) {
  gap: 0;
  padding-block: var(--space-3xs);
}

/* Progress and the artist line go; the chevron stays — it is the only way to
   the drawer, and the composer is focused by default on these surfaces. */
.chat-player--compact:not(.chat-player--wide) .chat-player-progress-line,
.chat-player--compact:not(.chat-player--wide) .chat-player-artist {
  display: none;
}

.chat-player--compact:not(.chat-player--wide) .chat-player-art-frame {
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
}

/* ── motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chat-player-chevron svg,
  .chat-player-progress::-webkit-progress-value,
  .chat-player-btn {
    transition: none;
  }
}