/* ============================================================================
   NabGol — TTS PLAYER polish (2026-08-29, rebuilt 2026-08-31)
   ----------------------------------------------------------------------------
   Owns two things, both scoped to `#ttsPlayer` so it cannot leak onto anything
   else on the canvas:

     1. The disabled look for rewind/forward/play-pause/seek while the Gemini
        progressive-PCM stream is playing and no <audio> element exists yet
        (see ttsSetLiveControlsEnabled in assets/script.js — createPlaybackQueue
        exposes no played-position getter, so a real mid-stream seek cannot be
        built; these controls are genuinely inert during that window, not just
        slow, so they must look inert instead of clickable-but-dead).
     2. Mobile: the whole geometry of the DOCKED player — where it sits, and
        how its controls are laid out in each of its two states. Floating /
        micro (the drag-me-anywhere mode in mobile-chat-v49.js) is NOT touched
        here: every rule below carries `.tts-docked`.

   Load order: LAST in both templates, after chat-composer.css, so its
   `!important` wins over the older `style-controls.css` layer it overrides.
   This file paints NO colours. Every colour on this player still comes from
   style-controls.css / mobile-chat-v42.css / mobile-chat-v49.css exactly as
   before — the one background value moved below (the progress track) is moved
   byte-for-byte, not re-picked.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) Disabled state — shared by desktop and mobile
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) #ttsPlayer .tts-ctrl-btn:disabled,
body:is(.desktop-chat, .mobile-chat) #ttsPlayer .tts-ctrl-btn.tts-ctrl-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
body:is(.desktop-chat, .mobile-chat) #ttsPlayer .tts-progress.tts-progress-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
   2) Mobile, docked — UNDER the composer, in normal flow
   ---------------------------------------------------------------------------
   MEASURED on the real page with CDP at 390x844, 390x640 and 390x580
   (live/tools/_tts_player_probe.js).

   The defect was never the player's POSITION. It was its own box maths: this
   file set padding-top:40px to clear the absolutely-positioned
   minimize/close buttons while mobile-chat-v42.css still pinned the minimized
   player to height:46px. 40 + 36 + 10 does not fit in 46, so the play
   button sat 20px BELOW the player's own bottom edge and overflow:hidden
   sliced it in half — at every viewport height, 844 included.

   Expanded, this file's flex-wrap:nowrap overrode v49's three-row grid but
   kept its fixed 104px voice select, so five items were crushed into one line:
   #ttsProgress and #ttsVoice measured 11px on top of each other.

   A first attempt at fixing this made the player position:fixed above the
   composer. That was wrong and is recorded here so nobody tries it again: a
   pinned player floats over the canvas, so the reader permanently loses the
   end of the robot's last message — it takes away the work, not just the
   player. The player belongs UNDER the composer, as a flex sibling, so the
   composer rides up with it and the canvas simply gets shorter.

   So: position stays in flow. What changed is the box —
     · minimize/close become real grid columns instead of absolute overlays, so
       no top padding has to be guessed for them and nothing can spill out,
     · every control is EXACTLY 44px in its short axis, never more: each pixel
       of this player is a pixel of conversation the reader cannot see,
     · padding and gaps are the smallest that keep the controls apart,
     · nothing is hidden that was not already hidden.
   --------------------------------------------------------------------------- */
/* IN FLOW, exactly where it always was: the last child of body's column,
   directly under the composer. It must NEVER float over the canvas. The chat
   is where the reader works, and a player parked on top of it is worse than
   one that is cut off: it takes the work away, not just the player.
   Only the box maths inside this element changed. Position, never.
   The safe-area term lives here because in flow this element, not the
   composer, is the last thing before the device edge. */
body.mobile-chat #ttsPlayer.tts-player-dock.tts-docked.show {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 6px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* The two chrome buttons were `position: absolute; top: 8px` (mobile-chat-
   v42.css) — that is what forced the 40px of top padding that then did not fit
   the 46px box. As real grid cells they cost exactly their own width and can
   never overhang. */
body.mobile-chat #ttsPlayer.tts-docked.show .tts-minimize-btn {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body.mobile-chat #ttsPlayer.tts-docked.show .tts-close-btn {
  position: static !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
}
body.mobile-chat #ttsPlayer.tts-docked.show .tts-player-row {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* 44px in the short axis for everything the finger has to hit — and EXACTLY
   44, not more. Each control's height is this player's height: a 48px play
   button costs 4px of the reader's conversation on every line it sits in, and
   the play button is already the one control nobody can miss (it is the only
   filled green circle in the row). The floor is the size, not a starting
   point to decorate upward from. */
body.mobile-chat #ttsPlayer.tts-docked.show .tts-ctrl-btn,
body.mobile-chat #ttsPlayer.tts-docked.show .tts-play-main,
body.mobile-chat #ttsPlayer.tts-docked.show .tts-minimize-btn,
body.mobile-chat #ttsPlayer.tts-docked.show .tts-close-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
body.mobile-chat #ttsPlayer.tts-docked.show .tts-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  grid-area: unset !important;
}

/* Expanded only: the transport group claims a full line, which pushes the
   track + voice pair onto a second one. That is the whole two-row layout —
   no wrapper div, no second grid, and nothing to keep in sync by hand. */
body.mobile-chat #ttsPlayer.tts-docked.show:not(.minimized) .tts-controls {
  flex: 1 0 100% !important;
}

/* content-box on purpose: expanded, mobile-chat-v49.css draws this as a
   bordered, padded capsule around the bar. Sizing the CONTENT box to 44px
   keeps that decoration outside the touch target instead of eating into it —
   with border-box the padding+border left only 32px of content and the bar's
   own 44px hit box was silently squashed back to 38px. */
body.mobile-chat #ttsPlayer.tts-docked.show .tts-track-area {
  padding: 0 7px !important;
  grid-area: unset !important;
  order: unset !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: content-box !important;
  flex: 1 1 100px !important;
  flex-basis: 100px !important;
  min-width: 90px !important;
  height: 44px !important;
  min-height: 44px !important;
  /* Expanded, mobile-chat-v49.css pads this capsule 5px top and bottom. On top
     of a 44px touch target that is 10px of pure decoration in the one axis
     this player is not allowed to spend. The horizontal 7px stays — it is what
     keeps the bar's ends off the capsule's border. */
  padding-block: 0 !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
}
/* A 6px-tall bar is a 6px-tall touch target. Padding grows the hit box to a
   real 44px while `background-clip: content-box` keeps the PAINTED track the
   same 6px strip it has always been — same rgba(255,255,255,.12), same
   gradient fill, same knob. ttsSeek() reads only the x axis of
   getBoundingClientRect, so a taller box cannot skew a seek. */
body.mobile-chat #ttsPlayer.tts-docked.show .tts-progress {
  box-sizing: content-box !important;
  width: 100% !important;
  height: 6px !important;
  padding: 19px 0 !important;
  margin: 0 !important;
  background-clip: content-box !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.mobile-chat #ttsPlayer.tts-docked.show .tts-voice-select {
  grid-area: unset !important;
  order: unset !important;
  flex: 0 0 110px !important;
  width: 110px !important;
  max-width: 110px !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* Speed +/- and download need a row this player does not have room for on a
   phone — dropped here per the mobile layout brief, not hidden by accident,
   and unchanged from the previous version of this file. The voice select keeps
   working without them (default speed 1x, download stays on desktop), and it
   is also reachable from the header's "گزینه‌های گفتگو" sheet while the whole
   player is closed (`#ttsVoiceSheet` in templates/*.php). */
body.mobile-chat #ttsPlayer .tts-speed-btn,
body.mobile-chat #ttsPlayer .tts-speed-display,
body.mobile-chat #ttsPlayer .tts-download {
  display: none !important;
}
/* No room for the time readout; the progress bar carries position and the
   `.tts-state-badge` that mobile-chat-v49.js injects carries the state text. */
body.mobile-chat #ttsPlayer .tts-time,
body.mobile-chat #ttsPlayer .tts-status {
  display: none !important;
}
body.mobile-chat #ttsPlayer.tts-docked.show .tts-state-badge {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  grid-area: unset !important;
}