:root {
    color-scheme: light dark;

    --bg: #fff;
    --text: #111;
    --panel: #f2f2f2;

    /* UI elements */
    --btn-bg: #000;
    --btn-color: #fff;
    --btn-hover: #222;

    --error: #c00;
    --hover: rgba(0,0,0,0.08);
    --border: rgba(0, 0, 0, 0.1);
    --accent: #0055cc;
    --on-accent: #fff;

    --popup-bg: #f2f2f2;
    --popup-color: #111;
    --popup-border: rgba(0, 0, 0, 0.08);
    --popup-shadow: 0 8px 24px rgba(15, 15, 15, 0.12);
    --translation-highlight-bg: #ffe58f;
    --translation-highlight-text: #111;
    --translation-highlight-border: #c78a00;
    --toc-active-bg: rgba(0, 0, 0, 0.06);
}

/* Dark theme overrides */
[data-theme="dark"] {
    --bg: #0d0d0e;
    --text: #eaeaea;
    --panel: #141416;

    --btn-bg: #f5f5f5;
    --btn-color: #111;
    --btn-hover: #e0e0e0;

    --error: #ff6b6b;
    --hover: rgba(255,255,255,0.1);
    --border: rgba(255, 255, 255, 0.1);
    --accent: #4a9eff;
    --on-accent: #111;

    --popup-bg: #141416;
    --popup-color: #eaeaea;
    --popup-border: rgba(255, 255, 255, 0.04);
    --popup-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    --translation-highlight-bg: #5c4512;
    --translation-highlight-text: #fff3bf;
    --translation-highlight-border: #f0c96a;
    --toc-active-bg: rgba(255, 255, 255, 0.2);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

.progress-legal-toggle {
    color: var(--text);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

.progress-legal-toggle:hover,
.progress-legal-toggle:focus-visible {
    text-decoration: underline;
}

.settings-legal-links {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.settings-legal-links a,
.settings-legal-links button {
    color: var(--accent);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.settings-legal-links button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.settings-legal-links a:hover,
.settings-legal-links a:focus-visible,
.settings-legal-links button:hover,
.settings-legal-links button:focus-visible {
    text-decoration: underline;
}

.legal-page {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

.legal-page main {
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 20px 56px;
}

.legal-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
    text-decoration: underline;
}

.legal-document {
    max-width: 820px;
}

.legal-document h1,
.legal-document h2,
.legal-document h3 {
    line-height: 1.25;
}

.legal-document h1 {
    margin: 0 0 8px;
    font-size: 2rem;
}

.legal-document h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.24rem;
}

.legal-document p,
.legal-document li {
    margin: 0 0 0.9rem;
}

.legal-document ul {
    padding-left: 1.2rem;
}

.legal-updated {
    color: var(--text);
    opacity: 0.72;
}

.legal-page a {
    color: var(--accent);
}

.legal-page-footer {
    max-width: 820px;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.legal-page-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.legal-page-footer a {
    font-weight: 600;
    text-decoration: none;
}

.legal-page-footer a:hover,
.legal-page-footer a:focus-visible {
    text-decoration: underline;
}

.legal-consent-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legal-consent-modal[hidden] {
    display: none;
}

.legal-consent-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.legal-consent-dialog {
    position: relative;
    z-index: 1000;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--popup-shadow);
    padding: 24px 20px 18px;
}

.legal-consent-dialog h2 {
    margin: 0 0 12px;
    font-size: 1.6rem;
}

.legal-consent-dialog p {
    margin: 0 0 12px;
    line-height: 1.6;
}

.legal-consent-links {
    margin: 0 0 16px;
    padding-left: 20px;
    line-height: 1.8;
}

.legal-consent-links a {
    color: var(--accent);
}

.legal-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.legal-consent-secondary {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 500;
    background: transparent;
    color: var(--text-secondary, var(--text));
    cursor: pointer;
    transition: opacity 0.15s;
}

.legal-consent-secondary:hover {
    opacity: 0.8;
}

.legal-consent-secondary:active {
    opacity: 0.7;
}

.legal-consent-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.legal-consent-accept {
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    transition: opacity 0.15s;
}

.legal-consent-accept:not(:disabled):hover {
    opacity: 0.9;
}

.legal-consent-accept:not(:disabled):active {
    opacity: 0.8;
}

.legal-consent-accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.legal-consent-accept:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body.legal-consent-blocked {
    overflow: hidden;
}

@media (max-width: 640px) {
    .legal-page main {
        padding-top: 28px;
    }

    .legal-document h1 {
        font-size: 1.7rem;
    }
}

/* Auto-hide on scroll: the reader chrome slides off the screen with a CSS
   transform that keeps its layout space (the reading area reserves
   top:45px / bottom:30px), so the book text never reflows or jumps while
   the bars animate. */
#topbar {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--panel);
    padding: 8px;
    display: flex;
    align-items: center;
    z-index: 10;
    transition: transform 0.3s ease;
}

#topbar.bars-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.toolbar-left {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: none;
}

.toolbar-left::-webkit-scrollbar {
    display: none;
}

.toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0 4px 0 8px;
}

.settings-grid-select select {
    min-width: 0;
    flex: 1;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
}

.voice-select {
    max-height: 180px;
    overflow-y: auto;
    background: var(--bg);
    color: var(--text);
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
    scrollbar-width: thin;
}

.voice-group {
    margin-bottom: 2px;
}

.voice-group-label {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
    padding: 2px 4px 1px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voice-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.voice-option:hover {
    background: var(--hover);
}

.voice-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.voice-name {
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-empty {
    font-size: 11px;
    opacity: 0.5;
    padding: 6px;
    text-align: center;
}

#languageIcon {
    cursor: pointer;
    user-select: none;
}

.hide-target-locale {
    display: none !important;
}

#viewer {
    position: absolute;
    top: 45px;
    bottom: 30px;
    width: 100%;
}

#progress {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: var(--panel);
    display: flex;
    align-items: stretch;
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Auto-hide on scroll: slides the bottom bar off-screen while the reading
   area reserves its layout space (see #viewer bottom:30px), so the text
   never jumps. */
#progress.bars-hidden {
    transform: translateY(100%);
    pointer-events: none;
}

.progress-zone {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
    line-height: 30px;
}

#progress-status {
    text-align: left;
}

#progress-read {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
    text-align: center;
    padding: 0 12px;
    background: var(--panel);
}

#progress-right {
    text-align: right;
}

#progress-status.is-truncated {
    cursor: pointer;
}

#progress-status:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── Independent reading progress bar ─────────────────────────────── */
#readingProgressBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Auto-hide on scroll: the thin progress line is redundant while the reader
   is in immersive mode, so it slides off-screen together with the other bars. */
#readingProgressBar.bars-hidden {
    transform: translateY(100%);
}

#readingProgressBar::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--pct, 0%);
    background: var(--translated-paragraph-marker);
    transition: width 0.35s ease-out;
}

/* ── TOC progress line (directly under #bookMetaTitle) ─────────────── */
#toc .toc-progress-label {
    font-size: 12px;
    padding: 2px 10px 0;
    border-bottom: none;
    cursor: default;
}

#toc .toc-progress-line {
    height: 3px;
    padding: 0;
    border-bottom: none;
    background: var(--translated-paragraph-marker);
    transition: width 0.35s ease-out;
    pointer-events: none;
}

/* ── Per-chapter progress indicator ────────────────────────────────── */
.toc-entry-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--translated-paragraph-marker);
    transition: width 0.35s ease-out;
    pointer-events: none;
}

/* Popup (keeps same top/center position) */
#popup {
    position: fixed;
    top: 50px;
    left: 50%;

    /* Position (`top`/`left`, including horizontal centering) is controlled by
       JS so the popup can follow the clicked word. The CSS `left: 50%` is only
       a fallback before JS runs. */

    background: var(--popup-bg);
    color: var(--popup-color);

    padding: 10px 14px 14px;

    border-radius: 12px;
    display: none;
    z-index: 100;

    max-width: 90vw;
    width: min(760px, 92%);

    border: 1px solid var(--popup-border);
    box-shadow: var(--popup-shadow);
}

/* Fade-out before hiding the popup. Kept short so a re-opened popup
   never shows stale text flickering behind the new one. */
@keyframes popup-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

#popup.popup-closing {
    animation: popup-fade-out 0.2s ease forwards;
}

/* Toolbar */

.popup-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
    min-height: 32px;
}

.popup-toolbar-left,
.popup-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Drag handle: visible grip + keyboard target to move the popup vertically.
   The whole toolbar is draggable; the handle is the accessible affordance. */
.popup-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2px 6px;
    border-radius: 6px;

    color: var(--text);
    opacity: 0.5;

    cursor: grab;
    touch-action: none;
    user-select: none;

    transition: opacity 0.15s ease, background 0.15s ease;
}

.popup-drag-handle:hover,
.popup-drag-handle:focus-visible {
    opacity: 0.9;
    background: var(--hover);
}

.popup-drag-handle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.popup-drag-handle .material-symbols-outlined {
    font-size: 18px;
}

/* While dragging the whole toolbar shows a grabbing cursor and text selection
   is disabled so the gesture feels like moving the window. */
.popup-toolbar.popup-dragging,
.popup-toolbar.popup-dragging * {
    cursor: grabbing;
    user-select: none;
}

/* Toolbar icon button (refresh, etc.) */

#popup .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: none;
    border-radius: 6px;
    background: transparent;

    color: var(--text);

    cursor: pointer;

    font-size: 20px;

    transition:
        background 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease;
}

#popup .icon-btn:hover {
    background: var(--hover);
    opacity: 0.85;
}

#popup .icon-btn:active {
    transform: scale(0.92);
}

/* Disabled popup buttons (e.g. "Speak word" when no fragment is selected):
   the generic .icon-btn:disabled rule loses to #popup .icon-btn:hover, so the
   disabled state is restated here at equal/lower position to stay dimmed,
   non-interactive and excluded from keyboard focus. */
#popup .icon-btn:disabled,
#popup .icon-btn:disabled:hover,
#popup .icon-btn:disabled:active {
    opacity: 0.4;
    background: transparent;
    transform: none;
    cursor: not-allowed;
}

/* Popup refresh modal ("report a problem") */

.popup-refresh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.popup-refresh-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.popup-refresh-dialog {
    position: relative;
    width: min(420px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--popup-bg);
    color: var(--popup-color);
    border: 1px solid var(--popup-border);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--popup-shadow);
    z-index: 1;
    /* Base scale: applyFont sets the modal font-size in %, and all inner
       text sizes are em so the dialog scales with the book font size. */
    font-size: 0.875em;
}

.popup-refresh-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.popup-refresh-modal-title {
    margin: 0 0 14px;
    font-size: 1.25em;
}

/* Informational hint inside the modal — accent-tinted, not a warning. */
.popup-refresh-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--popup-color);
    font-size: 0.8em;
    line-height: 1.4;
}

.popup-refresh-info-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 1.15em;
    color: var(--accent);
}

.popup-refresh-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.popup-refresh-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--popup-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.4;
}

.popup-refresh-option:hover {
    background: var(--hover);
}

.popup-refresh-option input {
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.popup-refresh-option-icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--accent);
}

.popup-refresh-option-text b {
    font-weight: 600;
}

.popup-refresh-submit {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
}

.popup-refresh-submit:hover {
    opacity: 0.85;
}

.popup-refresh-submit:active {
    transform: scale(0.98);
}

.popup-refresh-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.popup-refresh-validation {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
    font-size: 0.9em;
    text-align: center;
}

@keyframes popup-option-flash {
    0%, 100% { border-color: var(--popup-border); background: transparent; }
    50% { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }
}

.popup-refresh-option.flash-highlight {
    animation: popup-option-flash 0.5s ease-in-out 3;
}

/* Refresh button spin animation during retranslate/realign */

#popupRefresh.spin,
#popupTTSUpdate.spin {
    animation: popup-icon-spin 0.6s linear infinite;
}

@keyframes popup-icon-spin {
    to { transform: rotate(360deg); }
}

/* Non-clickable TTS indicator icons (db icon, lang label) */

.tts-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding: 4px;
    margin: 0;

    border: none;
    border-radius: 8px;

    cursor: default;
    opacity: 0.7;

    color: var(--text);
    user-select: none;
    line-height: 1;
}

#ttsLangIndicator {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 28px;
    opacity: 0.85;
}

#ttsVoiceLangIndicator {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 28px;
    opacity: 0.85;
}

.tts-lang-separator {
    min-width: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.6;
}

/* Close button */

#popup .popup-close {
    position: static;
}

/* Content */

#popupContent {
    font-size: 15px;
    line-height: 1.1;

    overflow-wrap: anywhere;
    word-break: break-word;

    max-height: 60vh;
    overflow: auto;

    padding-right: 2px;

    /* Short fade-in when a newly loaded translation replaces the previous one. */
    transition: opacity 0.15s ease;
}

/* While a new translation is loading the old content is faded out but kept in
   the DOM so the popup never shrinks and reveals the book text behind it. */
#popupContent.popup-content-fading {
    animation: popup-content-fade-out 0.18s ease forwards;
}

@keyframes popup-content-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes popup-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.translation-highlight {
    display: inline;
    background: var(--translation-highlight-bg);
    color: var(--translation-highlight-text);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.12em;
}

.popup-blur {
    filter: blur(5px);
    opacity: 0.4;
    transition: filter 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}
.popup-blur-revealed {
    filter: none !important;
    opacity: 1 !important;
    cursor: auto;
}

.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;
}

button {
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
}

#toc {
    position: fixed;
    top: 50px;
    left: -100%;
    width: 80%;
    height: calc(100% - 50px);
    background: var(--panel);
    overflow-y: auto;
    transition: left 0.3s;
    z-index: 20;
}

#toc.open {
    left: 0;
}

#toc div {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

#toc .toc-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    cursor: default;
}

#toc .toc-header-row #bookTitleDisplay {
    font-size: 13px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Visible "Open book" label next to the folder_open icon in the TOC. */
#toc .toc-open-btn-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Book title: h1 above the chapter list, visually dominant over entries */
#toc h1.toc-meta-title {
    margin: 0;
    padding: 8px 10px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.04);
    cursor: default;
}

/* Dark theme: lighter tint for dark panel */
[data-theme="dark"] #toc h1.toc-meta-title {
    background: rgba(255, 255, 255, 0.05);
}

/* Author rendered after the title, visually muted */
#toc h1.toc-meta-title .toc-meta-author {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}

#toc h1.toc-meta-title .toc-meta-separator {
    margin: 0 0.45em;
    opacity: 0.55;
}

/* Empty heading (no book opened) must stay silent for screen readers */
#toc h1.toc-meta-title:empty {
    display: none;
}

/* Heading wrappers around chapter entry buttons: neutralize defaults */
/* Sticky wrapper: keeps header-row, URL-row, actions and title pinned
   at the top while the chapter list scrolls underneath. */
#toc .toc-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel);
    padding: 0;
    border-bottom: none;
    cursor: default;
}

#toc .toc-entry-heading {
    margin: 0;
}

/* Chapter entry: native button inside the h2 heading */
#toc button.toc-entry {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    padding: 10px;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

/* ── Open book from URL row (inside the open book modal) ────────────── */

.open-book-modal .toc-url-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 8px;
    padding: 0;
    border-bottom: none;
    cursor: default;
}

/* Same 36px centered column as .icon-btn, so the link glyph sits flush
   with the folder_open glyph in openFileBtn. */
.open-book-modal .toc-url-row .toc-url-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--text);
    opacity: 1;
    flex-shrink: 0;
}

/* Same height as .icon-btn (36px) so the whole row sits on one line. */
#bookUrlInput {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    background: var(--bg);
    color: inherit;
}

#bookUrlInput:focus-visible {
    outline: 2px solid var(--accent, #4fc3f7);
    outline-offset: 1px;
}

#bookUrlInput:disabled {
    opacity: 0.5;
}

#bookUrlInput[aria-invalid="true"] {
    border-color: var(--error, #c00);
}

/* Validation hint: announced via role="status", indented under the input
   (section padding 0 + icon column 36px + gap 8px). */
.open-book-modal .toc-url-hint {
    display: block;
    min-height: 1em;
    padding: 4px 0 0 44px;
    font-size: 11px;
    color: var(--error, #c00);
    cursor: default;
}

/* TOC chapter translated marker */
#toc .translated-chapter::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 6px;

    width: 3px;
    border-radius: 999px;

    background: var(--translated-paragraph-marker);

    opacity: 0.95;
    pointer-events: none;
}

/* Same type+class chain as the base rule above so this wins the cascade:
   "#toc .toc-entry-active" alone would lose to "#toc button.toc-entry". */
#toc button.toc-entry.toc-entry-active {
    background: var(--toc-active-bg);
}

/* ── Book meta actions (above the book meta title) ─────────────────── */

#toc #bookMetaActions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #ccc;
    cursor: default;
}

/* ── Reading history panel ─────────────────────────────────────────── */

#historyPanel {
    position: fixed;
    top: 50px;
    left: -100%;
    width: 80%;
    height: calc(100% - 50px);
    background: var(--panel);
    overflow-y: auto;
    transition: left 0.3s;
    z-index: 20;
}

#historyPanel.open {
    left: 0;
}

#historyPanel .history-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
}

#historyPanel .history-panel-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#historyPanel .history-item {
    border-bottom: 1px solid #ccc;
}

#historyPanel .history-entry {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 10px;
    border-radius: 0;
    cursor: pointer;
}

#historyPanel .history-entry:hover {
    background: var(--hover);
}

#historyPanel .history-entry:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

#historyPanel .history-entry-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

#historyPanel .history-entry-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#historyPanel .history-entry-time {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}

#historyPanel .history-entry-snippet {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#historyPanel .history-empty {
    padding: 16px 10px;
    font-size: 13px;
    opacity: 0.6;
}

/* Per-position progress bar in a reading-history row. It mirrors the
   per-chapter TOC indicator: a thin accent line along the bottom edge of the
   row showing how far into its chapter this reading position is. */
#historyPanel .history-entry-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--translated-paragraph-marker);
    transition: width 0.35s ease-out;
    pointer-events: none;
}

/* ── Open book modal ────────────────────────────────────────────────── */

.open-book-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
}

.open-book-modal.open {
    display: flex;
}

.open-book-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.open-book-dialog {
    position: relative;
    width: min(480px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--popup-bg);
    color: var(--popup-color);
    border: 1px solid var(--popup-border);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--popup-shadow);
    z-index: 1;
    font-size: 0.875em;
}

.open-book-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.open-book-modal-title {
    margin: 0 0 16px;
    font-size: 1.25em;
}

.open-book-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.open-book-section-title {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.open-book-file-btn {
    align-self: flex-start;
}

.open-book-divider {
    border: none;
    border-top: 1px solid var(--popup-border);
    margin: 4px 0 14px;
}

.open-book-lang-label {
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.75;
}

.open-book-toggle {
    margin-bottom: 16px;
}

.open-book-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.open-book-submit {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent, #4fc3f7);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.open-book-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

.open-book-cancel {
    padding: 8px 14px;
    border: 1px solid var(--popup-border);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ── Local library list (embedded in the open book modal) ───────────── */

#localLibList .local-lib-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-bottom: 1px solid var(--popup-border);
}

#localLibList .local-lib-entry {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    background: transparent;
    color: inherit;
    text-align: left;
    border-radius: 0;
    cursor: pointer;
    font-size: 1em;
}

#localLibList .local-lib-entry:hover:not(:disabled) {
    background: var(--hover);
}

#localLibList .local-lib-entry:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

#localLibList .local-lib-entry:disabled {
    cursor: default;
    opacity: 0.55;
}

#localLibList .local-lib-item-missing .local-lib-title {
    opacity: 0.6;
}

#localLibList .local-lib-cover {
    flex: 0 0 40px;
    width: 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover);
    border-radius: 4px;
    overflow: hidden;
}

#localLibList .local-lib-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#localLibList .local-lib-cover .material-symbols-outlined {
    font-size: 28px;
    opacity: 0.5;
}

#localLibList .local-lib-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#localLibList .local-lib-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#localLibList .local-lib-author {
    font-size: 12px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#localLibList .local-lib-source {
    font-size: 11px;
    opacity: 0.65;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#localLibList .local-lib-opened {
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}

#localLibList .local-lib-missing-note {
    font-size: 11px;
    color: #b71c1c;
}

#localLibList .local-lib-delete {
    flex-shrink: 0;
    align-self: center;
}

#localLibList .local-lib-empty {
    padding: 8px 2px;
    font-size: 13px;
    opacity: 0.6;
    border: none;
}

/* Показываем до трёх записей сразу, остальные — через прокрутку. */
#localLibList {
    max-height: 234px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
    margin-right: -4px;
}

/* Подсветка выбранной книги + состояние для скринридера (aria-pressed). */
#localLibList .local-lib-entry.selected {
    background: color-mix(in srgb, var(--accent, #4fc3f7) 16%, transparent);
}

/* ── Book search panel ─────────────────────────────────────────────── */

#searchPanel {
    position: fixed;
    top: 50px;
    left: -100%;
    width: 80%;
    height: calc(100% - 50px);
    background: var(--panel);
    overflow-y: auto;
    transition: left 0.3s;
    z-index: 20;
}

#searchPanel.open {
    left: 0;
}

.search-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
}

.search-panel-title {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.search-panel-close {
    margin-left: auto;
}

.search-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
}

#searchInput {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: var(--panel);
    color: inherit;
}

#searchInput:focus-visible {
    outline: 2px solid var(--accent, #4fc3f7);
    outline-offset: 1px;
}

.search-scope {
    display: flex;
    gap: 6px;
    border: none;
    margin: 0;
    padding: 0;
}

.search-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 999px;
    cursor: pointer;
}

.search-scope-option input {
    accent-color: var(--accent, #4fc3f7);
    margin: 0;
}

.search-scope-option:has(input:checked) {
    border-color: var(--accent, #4fc3f7);
    background: color-mix(in srgb, var(--accent, #4fc3f7) 12%, transparent);
}

.search-scope-hint {
    margin: 0;
    padding: 6px 10px;
    font-size: 12px;
    opacity: 0.7;
    border-bottom: 1px solid #ccc;
}

.search-status {
    padding: 6px 10px;
    font-size: 12px;
    opacity: 0.7;
    min-height: 1em;
}

.search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.search-result:hover,
.search-result:focus-visible {
    background: var(--toc-active-bg);
    outline: none;
}

.search-result-active,
.search-result-active:hover {
    background: var(--toc-active-bg);
    box-shadow: inset 3px 0 0 var(--accent, #4fc3f7);
}

.search-result-chapter {
    font-size: 11px;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-snippet {
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.search-snippet-mark {
    background: var(--translation-highlight-bg);
    color: var(--translation-highlight-text);
    border-radius: 2px;
    padding: 0 1px;
}

.search-more-btn {
    margin: 8px 10px;
}


.selection-tts-controls {
    position: fixed;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.3s ease;
    z-index: 105;
    background: var(--panel);
    border: 1px solid var(--popup-border);
    box-shadow: var(--popup-shadow);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
}

.selection-tts-controls .icon-btn {
    font-size: 20px;
    padding: 4px;
}

/* The draggable panel is keyboard-focusable as a whole (Arrow keys move it),
   so it keeps the same visible focus indicator as the icon buttons. */
.selection-tts-controls:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* While dragging the panel shows a grabbing cursor, drops the top transition
   (it would lag behind the pointer) and disables text selection. */
.selection-tts-controls.popup-dragging,
.selection-tts-controls.popup-dragging * {
    cursor: grabbing;
    user-select: none;
    transition: none;
}

/* Settings menu */

.settings-menu {
    position: fixed;
    background: var(--panel);
    border: 1px solid var(--popup-border);
    border-radius: 10px;
    box-shadow: var(--popup-shadow);

    display: none;
    flex-direction: column;

    padding: 8px;
    min-width: 320px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;

    z-index: 110;
}

.settings-menu.open {
    display: flex;
}

.settings-section {

    padding: 8px 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-section+.settings-section {

    border-top: 1px solid var(--popup-border);
}

.settings-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .65;
}

.settings-divider {
    border: none;
    border-top: 1px solid var(--popup-border);
    margin: 0;
}

.settings-voice-section {

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-grid {

    display: grid;

    grid-template-columns: 32px 1fr 32px;

    align-items: center;

    gap: 6px;
}

.settings-grid-3 {

    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}

.settings-grid-3 .icon-btn {

    /* intrinsic size; centered via justify-items on the grid */
}

.settings-icon {

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;

    opacity: .8;

    pointer-events: none;
}

.settings-menu .icon-btn {

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-menu .voice-select {
    min-width: 0;
    max-width: none;
    flex: 1;
    font-size: 12px;
    max-height: 150px;
}

.speech-label {
    text-align: center;
    user-select: none;
}

.settings-grid-select {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 6px;
}

/* highlighted paragraph during TTS (injected into iframe via JS, kept here for reference) */

.settings-menu > .settings-speech-row.settings-menu-row {
    border-top: none;
    padding-top: 0;
}

[data-theme="dark"] .settings-menu > .settings-speech-row.settings-menu-row {
    border-top: none;
}

.settings-speech-row .icon-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 18px;
}

.speech-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.toggle-row input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 32px;
    height: 18px;
    background: rgba(127, 127, 127, 0.35);
    border-radius: 18px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-row input:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-row input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

.toggle-label-text {
    flex: 1;
    font-size: 12px;
}

/* section-nav-start */
.section-nav {
    display: flex;
    gap: 12px;
    padding: 20px 0;
}

.section-nav-top {
    justify-content: flex-start;
}

.section-nav-bottom {
    justify-content: flex-end;
}

.section-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    background: rgba(127, 127, 127, 0.08);
}

/* section-nav-end */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: var(--text);

    cursor: pointer;
    user-select: none;

    transition:
        background 0.15s ease,
        transform 0.08s ease;
}

.icon-btn:hover {
    background: rgba(127, 127, 127, 0.14);
}

.icon-btn:active {
    transform: scale(0.96);
}

.icon-btn:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: 2px;
}

/* Disabled toolbar buttons (no open book / no adjacent chapter):
   faded, non-interactive and excluded from keyboard focus. */
.icon-btn:disabled,
.icon-btn:disabled:hover,
.icon-btn:disabled:active {
    opacity: 0.4;
    background: transparent;
    transform: none;
    cursor: not-allowed;
}

#bookTitleDisplay {
    font-size: 13px;
    opacity: 0.8;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1;

    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    font-feature-settings: 'liga';
}

.toolbar-logo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin-right: 10px;

    border: none;
    background: transparent;
    cursor: pointer;

    flex-shrink: 0;

    color: var(--text);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.toolbar-logo-button:hover {
    opacity: 0.85;
}

.toolbar-logo-button:active {
    transform: scale(0.97);
}

.toolbar-logo-image {
    display: block;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    color: inherit;

    user-select: none;
    -webkit-user-drag: none;

    transform: translateY(-0.5px);
}

/* translated-paragraph-start */

:root {
    --translated-paragraph-marker: #111;
}

[data-theme="dark"] {
    --translated-paragraph-marker: #fff;
}

.translated-paragraph {
    position: relative;
}

.translated-paragraph::before {
    content: "";

    position: absolute;

    top: 0.12em;
    bottom: 0.12em;
    left: -10px;

    width: 3px;
    border-radius: 999px;

    background: var(--translated-paragraph-marker);

    opacity: 0.95;
    pointer-events: none;
}

/* translated-paragraph-end */

/* ── Auth toast ────────────────────────────────────────── */
.auth-toast {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--btn-bg);
    color: var(--btn-color);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
}

.auth-toast:hover {
    background: var(--btn-hover);
}

/* ── Auth settings section ────────────────────────────── */
.auth-status {
    font-size: 13px;
    color: var(--text);
    opacity: 0.7;
}

/* ── Auth / profile menu ─────────────────────────────── */
.auth-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.auth-row .auth-status {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auth/profile dropdown sizes to its content (single login + controls). The
   shared .settings-menu defaults to a fixed 320px min-width; override it so the
   auth window hugs the logged-in row instead of stretching. */
#authMenu.settings-menu {
    min-width: 0;
    width: max-content;
    max-width: min(90vw, 320px);
}

.auth-login-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Compact Yandex ID logo button (authenticated state) */
.ya-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    transition:
        background 0.15s ease,
        transform 0.08s ease;
}

.ya-icon-btn:hover {
    background: rgba(127, 127, 127, 0.14);
}

.ya-icon-btn:active {
    transform: scale(0.96);
}

.ya-icon-btn:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: 2px;
}

.ya-icon-btn__logo {
    display: block;
    width: 24px;
    height: 24px;
}

/* Full-size official Yandex ID button (anonymous state).
   Uses the official logo/colors/text from the Yandex ID design guide. */
.ya-id-btn {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: transform 0.08s ease;
}

.ya-id-btn:hover {
    filter: brightness(1.08);
}

.ya-id-btn:active {
    transform: scale(0.99);
}

.ya-id-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ya-id-btn__svg {
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto;
}

.quota-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.quota-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 4px;
}

.quota-bar-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.quota-bar-fill.exceeded {
    background: #f44336;
}

.secondary-btn {
    cursor: pointer;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--text);
    background: transparent;
    color: var(--text);
    opacity: 0.7;
}

.secondary-btn:hover {
    opacity: 1;
}

/* ── In-app log console ─────────────────────────────── */
#logConsole {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 33vh;
    min-height: 120px;
    max-height: calc(100vh - 60px);
    background: var(--panel);
    border-top: 1px solid var(--popup-border);
    box-shadow: var(--popup-shadow);
    z-index: 90;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
}
#logConsole.collapsed {
    height: auto !important;
}
#logConsole[hidden] {
    display: none;
}

.log-console-resize {
    height: 10px;
    flex: 0 0 auto;
    cursor: ns-resize;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.log-console-resize::before {
    content: "";
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.4);
}
.log-console-resize:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: -2px;
}
body.log-resizing {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.log-console-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
#logConsole.collapsed .log-console-toolbar {
    flex-wrap: nowrap;
}
#logConsole.collapsed .log-console-levels,
#logConsole.collapsed .log-console-filter,
#logConsole.collapsed #logConsoleList,
#logConsole.collapsed #logConsoleJump {
    display: none;
}

.log-console-title {
    font-size: 18px;
    color: var(--text);
    opacity: 0.8;
}
.log-console-title-text {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
}

.log-console-levels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.log-chip {
    font-size: 10px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}
.log-chip:hover {
    background: var(--hover);
}
.log-chip[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
}
.log-chip:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: 2px;
}
.log-console-spacer {
    flex: 1 1 auto;
}
#logConsole .icon-btn {
    min-width: 30px;
    height: 30px;
    font-size: 18px;
}

.log-console-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 6px;
    flex: 0 0 auto;
}
.log-console-filter-icon {
    font-size: 16px;
    opacity: 0.5;
}
.log-console-filter-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
#logConsoleFilterText {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    padding: 6px 26px 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}
#logConsoleFilterText:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: 0;
}
.log-console-filter-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 16px;
    border: none;
    background: transparent;
    color: var(--text);
    opacity: 0.55;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}
.log-console-filter-clear:hover,
.log-console-filter-clear:focus-visible {
    opacity: 1;
    background: rgba(127, 127, 127, 0.14);
}
.log-console-filter-clear[hidden] {
    display: none;
}
.log-console-invert {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.log-console-invert input {
    margin: 0;
    accent-color: var(--accent);
}

#logConsoleList {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 6px 6px;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.log-entry {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 4px;
    word-break: break-word;
}
.log-entry:hover {
    background: var(--hover);
}
.log-badge {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
}
.log-level-error .log-badge { background: var(--error); }
.log-level-warn .log-badge { background: #b26a00; }
.log-level-info .log-badge { background: var(--accent); }
.log-level-log .log-badge { background: #607d8b; }
.log-level-debug .log-badge { background: #7b6c8f; }

.log-level-error { color: var(--error); }
.log-level-warn { color: #b26a00; }
.log-level-info { color: var(--accent); }
.log-level-log { color: #607d8b; }
.log-level-debug { color: #7b6c8f; }

.log-time {
    flex: 0 0 auto;
    opacity: 0.55;
}
.log-source {
    flex: 0 0 auto;
    opacity: 0.7;
    font-weight: 600;
}
.log-body {
    flex: 1 1 auto;
    min-width: 0;
}
.log-data {
    opacity: 0.7;
}
.log-stack {
    display: block;
    width: 100%;
    padding-left: 14px;
    opacity: 0.6;
    white-space: pre-wrap;
    word-break: break-word;
}

#logConsoleJump {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
}
#logConsoleJump[hidden] {
    display: none;
}

/* Dark theme level colors (better contrast on dark backgrounds) */
[data-theme="dark"] .log-level-warn { color: #ffb74d; }
[data-theme="dark"] .log-level-info { color: #4a9eff; }
[data-theme="dark"] .log-level-log { color: #b0bec5; }
[data-theme="dark"] .log-level-debug { color: #b39ddb; }
[data-theme="dark"] .log-level-warn .log-badge { background: #f57c00; }
[data-theme="dark"] .log-level-log .log-badge { background: #78909c; }
[data-theme="dark"] .log-level-debug .log-badge { background: #9575cd; }

/* ── Settings: log console row ──────────────────────── */
.settings-row-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
}
.settings-row-btn:hover {
    background: var(--hover);
}
.settings-row-btn:focus-visible {
    outline: 2px solid rgba(127, 127, 127, 0.45);
    outline-offset: 2px;
}
.settings-row-chevron {
    margin-left: auto;
    opacity: 0.5;
    font-size: 18px;
}

/* Row that pairs a full-width settings button (Log Console) with an inline
   action icon next to it. The chevron keeps pushing to the right edge of the
   button, and the icon button (36px variant from .icon-btn) sits beside it. */
.settings-row-action {
    display: flex;
    align-items: center;
    gap: 4px;
}
.settings-row-action .settings-row-btn {
    flex: 1;
    width: auto;
}

/* Visually hidden region for screen-reader announcements */
.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;
}

/* ── Notifications ──────────────────────────────────────────────── */

#notificationsMenu.settings-menu {
    min-width: 340px;
    max-width: 380px;
}

#notificationsList {
    flex-direction: column;
    gap: 4px;
}

.notifications-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 6px;
}

.notifications-title {
    font-size: 12px;
    font-weight: 600;
}

.notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.notifications-header-actions .icon-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
}

.notifications-list {
    display: flex;
}

.notifications-empty {
    padding: 18px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text);
    opacity: 0.6;
}

.notification-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 8px;
}

.notification-item-unread {
    background: var(--hover);
}

.notification-item-main {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px 6px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
}

.notification-item-main:hover {
    background: var(--hover);
}

.notification-item-main:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.notification-item-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.notification-item-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-item-title {
    font-size: 12px;
    font-weight: 600;
}

.notification-item-body {
    font-size: 12px;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
}

.notification-item-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 4px 4px 0 0;
    align-self: flex-start;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    opacity: 0.6;
    cursor: pointer;
}

.notification-item-close:hover {
    opacity: 1;
    background: var(--hover);
}

.notification-item-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    #toc, #historyPanel, #searchPanel {
        transition: none !important;
    }
    #popup.popup-closing {
        animation: none !important;
        display: none !important;
    }
}