/* One shared mini-player: three 44px targets, no stacked text action row. */
#direct-ayah-root.compact-audio-mini {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 16;
  bottom: calc(var(--visual-bottom, 0px) + env(safe-area-inset-bottom) + 72px);
  width: min(480px, calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
  max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px);
  align-items: center; gap: 2px; min-height: 56px; padding: 4px 6px 4px 10px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 17px; box-shadow: 0 3px 14px #30261920; text-align: start;
}
.reading #direct-ayah-root.compact-audio-mini { bottom: calc(var(--visual-bottom, 0px) + env(safe-area-inset-bottom) + 6px); }
.compact-audio-copy { min-width: 0; padding-inline: 4px; }
.compact-audio-title, .compact-audio-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.55; margin: 0; }
.compact-audio-title { font-size: calc(12px * var(--ui-text-scale,1)); font-weight: 500; }
.compact-audio-status { font-size: calc(10px * var(--ui-text-scale,1)); opacity: .8; }
.compact-audio-mini button { padding: 10px; width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 50%; color: inherit; background: transparent; display: grid; place-items: center; }
.compact-audio-mini button[data-compact="toggle"] { background: var(--soft); }
.compact-audio-mini svg, .compact-audio-sheet .sheet-heading svg { width: 22px; height: 22px; pointer-events: none; }
.compact-audio-mini button:focus-visible, .compact-audio-sheet :is(button, select, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#listen-dialog.compact-audio-sheet { width: min(100%, 520px); max-height: min(85dvh, 680px); overflow-y: auto; overflow-x: hidden; padding: 8px max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); }
.compact-audio-sheet[open]:not([data-compact-exit]) { animation: compact-audio-rise 180ms ease-out; }
.compact-audio-sheet[open][data-compact-exit] { animation: compact-audio-fall 160ms ease-in forwards; pointer-events: none; }
.compact-audio-sheet .sheet-heading { margin-bottom: 6px; }
.compact-audio-sheet .sheet-heading h2 { font-size: calc(17px * var(--ui-text-scale,1)); }
.compact-audio-sheet .sheet-heading button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; }
#listen-root.compact-audio-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; text-align: start; }
.compact-audio-options > * { min-width: 0; }
.compact-field { display: grid; gap: 4px; font-size: calc(12px * var(--ui-text-scale,1)); margin: 0; }
.compact-field-reciter, .compact-modes, .compact-bounds, .compact-sheet-actions, .compact-sheet-status, .compact-policy, .compact-source, #listen-follow-status { grid-column: 1 / -1; }
.compact-field select, .compact-field input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: calc(16px * var(--ui-text-scale,1)); color: var(--ink); background: var(--paper); }
.compact-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; border: 0; gap: 4px; }
.compact-modes legend { padding: 0 0 5px; font-size: calc(12px * var(--ui-text-scale,1)); }
.compact-modes button { min-width: 0; padding: 7px 3px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; font-size: calc(12px * var(--ui-text-scale,1)); line-height: 1.5; }
.compact-modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.compact-bounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compact-sheet-actions { display: flex; gap: 8px; }
.compact-sheet-actions button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 8px; font-size: calc(13px * var(--ui-text-scale,1)); }
.compact-sheet-play { background: var(--ink); color: var(--paper); }
#listen-root .compact-sheet-status { font-size: calc(12px * var(--ui-text-scale,1)); margin: 0; line-height: 1.6; }
#listen-root .compact-policy, .compact-source { font-size: calc(10px * var(--ui-text-scale,1)); line-height: 1.6; margin: 0; opacity: .82; }
/* Move transient bookmark feedback above the single strip, without stopping or
   remounting audio when a number action or mark is used. */
.has-compact-audio .mark-toast { bottom: calc(var(--visual-bottom, 0px) + env(safe-area-inset-bottom) + 138px); }
.reading.has-compact-audio .mark-toast { bottom: calc(var(--visual-bottom, 0px) + env(safe-area-inset-bottom) + 72px); }
@keyframes compact-audio-fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
@keyframes compact-audio-rise { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@media (max-height: 500px) { #listen-dialog.compact-audio-sheet { max-height: 95dvh; } }
@media (prefers-reduced-motion: reduce) { .compact-audio-sheet[open]:not([data-compact-exit]), .compact-audio-sheet[open][data-compact-exit] { animation: none; } }
/* Add scroll-only clearance after the existing page surface. The Quran image,
   fit scale, centering and marker transforms are never resized for the player. */
.reading.has-compact-audio #viewport::after { content: ''; display: block; height: 72px; width: 1px; pointer-events: none; }
body:not(.reading).has-compact-audio #page-area { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
body:not(.reading).has-compact-audio #page-area::after { content: ''; position: absolute; top: max(100%, var(--audio-content-bottom, 100%)); left: 0; width: 1px; height: 72px; pointer-events: none; }

/* Spacious listening controls, with a stable two-column chapter/repeat row. */
#listen-dialog.compact-audio-sheet{padding:16px 20px max(20px,env(safe-area-inset-bottom));border-radius:26px 26px 0 0}
.compact-audio-sheet .sheet-heading{padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.compact-audio-sheet .sheet-heading h2{font-size:23px;font-weight:600}
.compact-audio-sheet .sheet-heading button{border:1px solid var(--line);border-radius:50%;background:var(--soft)}
#listen-root.compact-audio-options{gap:16px 12px}
.compact-audio-options .compact-field{gap:8px;font-size:17px}
.compact-audio-options .compact-field select,.compact-audio-options .compact-field input{min-height:52px;border-radius:13px;padding:10px 12px;background:var(--paper);font-size:17px}
.compact-field-chapter{grid-column:1;grid-row:2}.compact-field-repeat{grid-column:2;grid-row:2}
.compact-modes{gap:6px;background:var(--soft);padding:8px;border-radius:16px}
.compact-modes legend{padding-bottom:8px;font-size:17px}
.compact-modes button{border-color:transparent;border-radius:11px;min-height:48px;font-size:17px}
.compact-sheet-actions{padding-top:4px}
.compact-sheet-actions button{min-height:54px;border-radius:14px;font-size:17px}
.compact-sheet-actions .compact-sheet-play{flex:2;font-weight:700}
#listen-root .compact-sheet-status{text-align:center;min-height:22px;font-size:17px}
#listen-root .compact-policy,#listen-root .compact-source{font-size:17px;line-height:1.8}
@media(max-width:360px){#listen-dialog.compact-audio-sheet{padding-inline:12px}.compact-modes button{font-size:17px}.compact-sheet-actions button{font-size:17px}}