.sonbolat-player { box-sizing: border-box; position: relative; direction: rtl; text-align: right; width: 100%; max-width: 100%; margin-block: 18px; font-family: system-ui, sans-serif; color: var(--sonbolat-player-text, #172e2b); background: var(--sonbolat-background, #fff); border: 1px solid #d6e2db; border-radius: 14px; box-shadow: 0 5px 22px #153d320c; isolation: isolate; }
.sonbolat-player *, .sonbolat-player *::before, .sonbolat-player *::after { box-sizing: border-box; }
.sonbolat-player [hidden] { display: none !important; }
.sonbolat-player .sonbolat-icon-button { display: inline-flex; position: relative; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 36px; block-size: 36px; min-width: 36px; padding: 8px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: none; vertical-align: middle; }
.sonbolat-player .sonbolat-icon-button svg { display: block; width: 19px; height: 19px; pointer-events: none; }
.sonbolat-player .sonbolat-icon-button:hover { background: #52695b14; color: inherit; }
.sonbolat-player button:disabled { opacity: .45; cursor: default; }
.sonbolat-player :is(button, a, select, input, [tabindex]):focus-visible { outline: 2px solid var(--sonbolat-progress, #175b54); outline-offset: 3px; }

/* Navigation above the audio controls; reading tools below them. */
.sonbolat-player :is(.sonbolat-navigation-bar, .sonbolat-reading-bar) { position: relative; z-index: 4; flex-shrink: 0; background: var(--sonbolat-toolbar-background, #edf3f0); color: var(--sonbolat-toolbar-text, #172e2b); padding: 8px 14px; }
.sonbolat-player .sonbolat-navigation-bar { border-radius: 14px 14px 0 0; border-block-end: 1px solid #69807224; }
.sonbolat-player .sonbolat-reading-bar { border-block: 1px solid #69807224; }
.sonbolat-player :is(.sonbolat-navigation-tools, .sonbolat-reader-tools) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sonbolat-player .sonbolat-reader-menu-toggle { display: none; }
.sonbolat-player[data-navigation="false"] .sonbolat-navigation-bar { display: none; }
.sonbolat-player .sonbolat-tool-field { display: flex; align-items: center; gap: 7px; min-width: 0; font: 12px/1.6 system-ui, sans-serif; margin: 0; }
.sonbolat-player .sonbolat-tool-field select { display: block; width: auto; min-width: 100px; max-width: 280px; height: 32px; min-height: 32px; margin: 0; padding: 3px 8px; background-color: #fff; color: #172e2b; border: 1px solid #bacbc1; border-radius: 6px; font: 13px/1.5 system-ui, sans-serif; box-shadow: none; }
.sonbolat-player .sonbolat-navigation-tools .sonbolat-tool-field { flex: 1 1 200px; max-width: 480px; }
.sonbolat-player .sonbolat-navigation-tools select { flex: 1; max-width: 100%; min-width: 0; }
.sonbolat-player .sonbolat-zoom-controls { display: flex; align-items: center; gap: 2px; }
.sonbolat-player .sonbolat-tool-label { margin-inline-end: 7px; font-size: 12px; }
.sonbolat-player .sonbolat-zoom-reset { position: relative; height: 32px; margin: 0; padding: 3px 9px; border: 1px solid #69807240; border-radius: 6px; background: #fff; color: #172e2b; font: 12px/1.5 system-ui, sans-serif; cursor: pointer; box-shadow: none; }
.sonbolat-player .sonbolat-follow-resume { font: 12px/1.6 system-ui, sans-serif; color: inherit; padding: 5px 8px; background: transparent; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; }

/* Compact audio controls remain visible at every viewport width. */
.sonbolat-player .sonbolat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0; background: var(--sonbolat-background, #fff); position: relative; z-index: 5; }
.sonbolat-player .sonbolat-play { inline-size: 44px; block-size: 44px; min-width: 44px; border-radius: 50%; background: var(--sonbolat-primary); color: var(--sonbolat-button-text, #fff); box-shadow: 0 2px 7px #102c2215; }
.sonbolat-player .sonbolat-play:hover { background: var(--sonbolat-primary); color: var(--sonbolat-button-text, #fff); filter: brightness(.95); }
.sonbolat-player .sonbolat-timeline { flex: 1 1 150px; min-width: 80px; }
.sonbolat-player .sonbolat-clock { display: flex; align-items: center; gap: 7px; justify-content: space-between; font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sonbolat-player .sonbolat-secondary-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex-shrink: 0; }
.sonbolat-player .sonbolat-volume-control { display: flex; align-items: center; gap: 1px; }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume) { display: block; min-height: 28px; height: 28px; margin: 0; padding: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sonbolat-player .sonbolat-seek { width: 100%; background: linear-gradient(to right, var(--sonbolat-progress) 0 var(--sonbolat-position, 0%), #b9cbc4 var(--sonbolat-position, 0%) 100%) center/100% 4px no-repeat !important; }
.sonbolat-player .sonbolat-volume { width: 64px; max-width: 64px; margin-inline: 3px 7px; background: linear-gradient(to right, var(--sonbolat-progress) 0 var(--sonbolat-volume-position, 100%), #b9cbc4 var(--sonbolat-volume-position, 100%) 100%) center/100% 3px no-repeat !important; }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume)::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; border-radius: 4px; box-shadow: none; }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume)::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background: var(--sonbolat-progress); box-shadow: 0 0 0 1px var(--sonbolat-progress); }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume)::-moz-range-track { height: 4px; background: transparent; border: 0; box-shadow: none; }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume)::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--sonbolat-progress); box-shadow: 0 0 0 1px var(--sonbolat-progress); }
.sonbolat-player :is(.sonbolat-seek, .sonbolat-volume)::-moz-range-progress { height: 4px; background: var(--sonbolat-progress); border-radius: 4px; }
.sonbolat-player .sonbolat-speed-control { display: flex; align-items: center; gap: 0; padding-inline-start: 5px; position: relative; border: 1px solid #69807230; border-radius: 7px; }
.sonbolat-player .sonbolat-speed-icon { display: flex; pointer-events: none; }
.sonbolat-player .sonbolat-speed-icon svg { width: 15px; height: 15px; }
.sonbolat-player .sonbolat-speed { height: 32px; min-height: 32px; min-width: 61px; max-width: 68px; width: 68px; border: 0; background-color: transparent; color: inherit; padding: 2px 3px; border-radius: 6px; font: 600 12px/1.5 system-ui, sans-serif; cursor: pointer; box-shadow: none; }
.sonbolat-player .sonbolat-speed option { color: #172e2b; background: #fff; }
.sonbolat-player [data-tooltip]::after { content: attr(data-tooltip); position: absolute; inset-block-end: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 20; max-width: 230px; width: max-content; pointer-events: none; background: #172e2b; color: #fff; font: 500 12px/1.6 system-ui, sans-serif; padding: 5px 9px; border-radius: 6px; box-shadow: 0 3px 12px #0002; opacity: 0; visibility: hidden; }
.sonbolat-player [data-tooltip]:is(:hover, :focus-visible, :focus-within)::after { opacity: 1; visibility: visible; }
.sonbolat-player .sonbolat-status { margin: 0; padding: 9px 14px; font-size: 13px; line-height: 1.8; color: inherit; flex-shrink: 0; }
.sonbolat-player .sonbolat-error { background: #fff1f0; color: #8a1f17; border-block: 1px solid #efcfc9; }

/* Content and timed highlights. */
.sonbolat-player .sonbolat-stage { display: grid; isolation: isolate; min-height: 0; background: #fff; border-radius: 0 0 14px 14px; overflow: hidden; }
.sonbolat-player .sonbolat-panel { grid-area: 1 / 1; min-width: 0; min-height: 0; align-self: start; }
.sonbolat-player .sonbolat-panel.sonbolat-leave { pointer-events: none; }
.sonbolat-player .sonbolat-image-frame { display: flex; align-items: center; justify-content: center; width: var(--sonbolat-image-width, 100%); height: var(--sonbolat-image-height, auto); max-width: 100%; max-height: 75vh; margin: 0 auto; }
.sonbolat-player .sonbolat-scene-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: inherit; object-fit: contain; margin: 0 auto; border-radius: 0; }
.sonbolat-player .sonbolat-scene-text { position: relative; isolation: isolate; min-width: 0; background: #fff; font-family: var(--sonbolat-font); color: var(--sonbolat-text-color); font-size: calc(var(--sonbolat-font-size) * var(--sonbolat-reader-scale, 1)); line-height: 1.95; overflow-wrap: anywhere; max-height: 65vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: clamp(16px, 3vw, 28px); }
.sonbolat-player .sonbolat-scene-text > :not(.sonbolat-highlight-layer) { position: relative; z-index: 1; }
.sonbolat-player .sonbolat-scene-text :is(p, h1, h2, h3, h4, h5, h6, li, blockquote) { color: inherit; font-family: inherit; }
.sonbolat-player .sonbolat-scene-text :is(p, li) { font-size: inherit; }
.sonbolat-player .sonbolat-scene-text > :first-child { margin-block-start: 0; }
.sonbolat-player .sonbolat-scene-text > :last-child { margin-block-end: 0; }
.sonbolat-player .sonbolat-scene-text img { max-width: 100%; height: auto; }
.sonbolat-player .sonbolat-scene-text :is(ul, ol) { padding-inline-start: 1.7em; }
.sonbolat-player .sonbolat-scene-text table { display: block; max-width: 100%; overflow: auto; }
.sonbolat-player .sonbolat-paragraph { position: relative; border-radius: 6px; padding-inline: 7px; margin-inline: -7px; }
.sonbolat-player .sonbolat-highlight-layer { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 0; opacity: .4; }
.sonbolat-player .sonbolat-highlight-mark { position: absolute; top: 0; left: 0; border-radius: 6px; background: var(--sonbolat-highlight-color); opacity: 0; transition-property: transform, width, height, opacity; transition-timing-function: cubic-bezier(.2,.65,.25,1); transition-duration: var(--sonbolat-highlight-duration, 300ms); }
.sonbolat-player .sonbolat-para-listen { margin-inline: 4px 0; margin-block: 0; inline-size: 25px; block-size: 25px; min-width: 25px; padding: 5px; border-radius: 50%; color: var(--sonbolat-button-text); background: var(--sonbolat-primary); border: 1px solid transparent; }
.sonbolat-player .sonbolat-para-listen:hover { color: var(--sonbolat-button-text); background: var(--sonbolat-primary); filter: brightness(.95); }
.sonbolat-player .sonbolat-para-listen svg { width: 13px; height: 13px; }
.sonbolat-player .sonbolat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sonbolat-player .sonbolat-note-toggle { width: 24px; height: 24px; min-width: 24px; padding: 4px; color: var(--sonbolat-primary); background: #e4efea; vertical-align: text-top; border-radius: 5px; margin-inline: 3px; }
.sonbolat-player .sonbolat-note-toggle svg { width: 14px; height: 14px; }
.sonbolat-player .sonbolat-note-popover { position: absolute; z-index: 30; width: min(340px, calc(100% - 16px)); max-height: 45vh; overflow: auto; padding: 12px; border: 1px solid #bacdc4; border-radius: 9px; background: #fff; color: #172e2b; box-shadow: 0 6px 24px #0002; font: 17px/1.9 'SONBOLAT Naskh', serif; }
.sonbolat-player .sonbolat-note-close { float: inline-end; width: 28px; height: 28px; min-width: 28px; padding: 5px; }
.sonbolat-player .sonbolat-note-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Night mode is limited to the reading content and its annotations. */
.sonbolat-player[data-mode="night"] .sonbolat-scene-text { background: #171d22; color: #f1f5f7; color-scheme: dark; }
.sonbolat-player[data-mode="night"] .sonbolat-scene-text :is(p, li, h1, h2, h3, h4, h5, h6, span, blockquote, div:not(.sonbolat-highlight-mark):not(.sonbolat-highlight-layer)) { color: inherit !important; background-color: transparent !important; }
.sonbolat-player[data-mode="night"] .sonbolat-scene-text .sonbolat-format-verse { color: var(--sonbolat-verse-night, #bce6ca) !important; }
.sonbolat-player[data-mode="night"] .sonbolat-scene-text .sonbolat-format-note { color: #f1f8e9 !important; background-color: #344237 !important; }
.sonbolat-player[data-mode="night"] .sonbolat-scene-text a { color: #abd3f5 !important; }
.sonbolat-player[data-mode="night"] .sonbolat-highlight-layer { opacity: .25; }
.sonbolat-player[data-mode="night"] .sonbolat-note-popover { background: #243039; color: #f1f5f7; border-color: #576b78; }

/* Transitions and fullscreen. */
.sonbolat-player[data-transition="fade"] .sonbolat-enter, .sonbolat-player[data-transition="crossfade"] .sonbolat-enter { animation: sonbolat-fade-in var(--sonbolat-transition-duration, 300ms) ease-out both; }
.sonbolat-player[data-transition="crossfade"] .sonbolat-leave { animation: sonbolat-fade-out var(--sonbolat-transition-duration, 300ms) ease-out both; }
.sonbolat-player[data-transition="slide"] .sonbolat-enter { animation: sonbolat-slide-in var(--sonbolat-transition-duration, 300ms) ease-out both; }
.sonbolat-player.sonbolat-fullscreen { position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; display: flex; flex-direction: column; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.sonbolat-player.sonbolat-fullscreen .sonbolat-navigation-bar { border-radius: 0; max-height: 25vh; overflow: auto; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-reading-bar { max-height: 25vh; overflow: auto; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-stage { flex: 1 1 0; min-height: 0; border-radius: 0; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-panel { align-self: stretch; height: 100%; max-height: 100%; overflow: hidden; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-scene-text { height: 100%; max-height: 100%; padding-inline: max(24px, calc((100vw - 1000px) / 2)); }
.sonbolat-player.sonbolat-fullscreen .sonbolat-image-frame { height: var(--sonbolat-full-image-height, auto); max-height: 100%; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-image-frame[data-auto-height="true"] { height: 100%; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-scene-image { max-height: 100%; }
.sonbolat-player.sonbolat-fullscreen .sonbolat-controls [data-tooltip]::after { inset-block-end: auto; inset-block-start: calc(100% + 7px); }
.sonbolat-player::backdrop { background: #fff; }
.sonbolat-public-page { margin: 0; background: #f4f7f5; color: #172e2b; }
.sonbolat-public-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px; font-family: 'SONBOLAT Naskh', serif; }
.sonbolat-public-content h1 { font-family: inherit; font-size: clamp(24px, 4vw, 34px); line-height: 1.7; }
.sonbolat-site-link { color: #175b54; text-decoration: underline; }
@keyframes sonbolat-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sonbolat-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sonbolat-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sonbolat-player .sonbolat-panel, .sonbolat-player .sonbolat-highlight-mark { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
    .sonbolat-player .sonbolat-controls { gap: 6px 10px; padding: 10px 12px; }
    .sonbolat-player .sonbolat-timeline { flex-basis: calc(100% - 58px); }
    .sonbolat-player .sonbolat-secondary-controls { width: 100%; justify-content: flex-end; gap: 4px; }
    .sonbolat-player .sonbolat-secondary-controls > .sonbolat-icon-button, .sonbolat-player .sonbolat-mute { inline-size: 40px; block-size: 40px; min-width: 40px; }
    .sonbolat-player .sonbolat-speed-control { margin-inline-end: auto; }
    .sonbolat-player .sonbolat-speed { min-height: 36px; height: 36px; }
    .sonbolat-player .sonbolat-scene-text { max-height: 60vh; padding: 16px; }
    .sonbolat-player .sonbolat-para-listen, .sonbolat-player .sonbolat-note-toggle { inline-size: 34px; block-size: 34px; min-width: 34px; }
    .sonbolat-player .sonbolat-reader-menu-toggle { display: inline-flex; }
    .sonbolat-player .sonbolat-navigation-bar, .sonbolat-player[data-navigation="false"] .sonbolat-navigation-bar { display: flex; flex-wrap: wrap; padding: 5px 10px; }
    .sonbolat-player .sonbolat-navigation-tools { display: none; width: 100%; padding-block: 7px; }
    .sonbolat-player .sonbolat-reading-bar { display: none; padding: 8px 12px; }
    .sonbolat-player.sonbolat-tools-open .sonbolat-reading-bar { display: block; }
    .sonbolat-player.sonbolat-tools-open .sonbolat-navigation-tools { display: flex; }
    .sonbolat-player .sonbolat-reader-tools { gap: 8px 12px; }
    .sonbolat-player .sonbolat-tool-field { flex: 1 1 180px; }
    .sonbolat-player .sonbolat-tool-field select { flex: 1; max-width: 100%; min-width: 0; height: 36px; }
    .sonbolat-player .sonbolat-zoom-controls .sonbolat-icon-button { inline-size: 38px; block-size: 38px; }
    .sonbolat-player.sonbolat-fullscreen .sonbolat-scene-text { padding-inline: 16px; }
    .sonbolat-player .sonbolat-secondary-controls [data-tooltip]::after { left: auto; right: 0; transform: none; }
}