/* =============================================================
   SalatiPal — Quran bottom-toolbar player: speed + responsiveness
   Scope: body[data-sp-route="quran"] .bottom-toolbar-mobile
   Goal: bigger touch targets, faster perceived response, tactile
         active feedback. Colors and layout unchanged.
   Safe to remove: drop the <link> from index.html.
   ============================================================= */

/* ---------- Tap targets ----------
   The bundle uses h-8 (32px) + px-3 on every toolbar button. Both
   Apple HIG (44pt) and Material (48dp) call for ~44px minimum.
   We standardize at 44px and pad horizontally for finger comfort. */
body[data-sp-route="quran"] .bottom-toolbar-mobile .toolbar-button {
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 14px !important;
}

/* The reciter selector and the FS/VV / timer / play / stop buttons
   are all .toolbar-button OR direct children of the toolbar with
   h-8. Catch any h-8 inside the toolbar that isn't the .toolbar-button
   variant (the reciter pill and timer pill use the same height). */
body[data-sp-route="quran"] .bottom-toolbar-mobile .h-8 {
  height: 44px !important;
}

/* ---------- Icon sizes ----------
   Bundle uses w-3 h-3 (12px) for the play/stop/timer glyphs. Bumps
   to 18px for visibility without breaking the existing layout. */
body[data-sp-route="quran"] .bottom-toolbar-mobile .toolbar-button > svg,
body[data-sp-route="quran"] .bottom-toolbar-mobile .toolbar-button svg.w-3,
body[data-sp-route="quran"] .bottom-toolbar-mobile button svg.w-3 {
  width: 18px !important;
  height: 18px !important;
}

/* ---------- Transitions ----------
   Replace `transition-all duration-200` (which animates every
   property — layout, background, transform, opacity at once and
   can stutter on slower WebViews) with two focused transitions:
   - background-color: 120ms ease  (color change still feels smooth)
   - transform: 80ms ease-out      (active scale is near-instant) */
body[data-sp-route="quran"] .bottom-toolbar-mobile .toolbar-button,
body[data-sp-route="quran"] .bottom-toolbar-mobile button[class*="transition-all"] {
  transition: background-color 120ms ease,
              box-shadow      120ms ease,
              transform        80ms ease-out !important;
}

/* ---------- Tactile active feedback ----------
   On touchend the button settles back. Scale-down on :active gives
   the user immediate visceral confirmation that the tap registered
   — critical when audio start can be 100-300ms behind. */
body[data-sp-route="quran"] .bottom-toolbar-mobile .toolbar-button:active,
body[data-sp-route="quran"] .bottom-toolbar-mobile button:active {
  transform: scale(0.94) !important;
  transition: transform 60ms ease-out !important;
}

/* ---------- Hit-area safety net ----------
   Some buttons (icon-only Play/Stop) are narrower than the
   44px min. The padding fix above usually covers it, but the
   reciter ChevronDown icon and timer countdown chip can squeeze.
   Ensure the visible button never collapses below the touch min. */
body[data-sp-route="quran"] .bottom-toolbar-mobile button {
  min-height: 44px;
}

/* ---------- Reciter row alignment ----------
   The reciter selector pill is `flex-1 min-w-0` and stretches.
   With taller buttons it can drift vertically vs the icon buttons
   beside it — align them flush. */
body[data-sp-route="quran"] .bottom-toolbar-mobile > div > div {
  align-items: center !important;
}