/**
 * Kai Leeshulp Widget — Toegankelijke leeshulp UI
 * Brand: Kai Leeshulp (#1594C8 cyan / #23304C navy)
 * Lettertype: Atkinson Hyperlegible (toegankelijkheidsfont)
 */

/* ══════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════ */
#basistaal-root,
.bt-toolbar,
.bt-word-tooltip,
.bt-feedback-modal,
.bt-instruction-banner {
    --bt-primary: #1594C8;
    --bt-primary-light: #4FB3DB;
    --bt-primary-hover: #117AA6;
    --bt-primary-soft: rgba(21, 148, 200, 0.08);
    --bt-primary-ring: rgba(21, 148, 200, 0.25);
    --bt-accent: #23304C;
    --bt-accent-light: #3B4D75;
    --bt-accent-hover: #1A243A;
    --bt-accent-soft: rgba(35, 48, 76, 0.1);
    --bt-warning: #FFBC7D;
    --bt-warning-soft: rgba(255, 188, 125, 0.25);
    --bt-text: #131313;
    --bt-text-light: #4A5568;
    --bt-text-muted: #8A94A6;
    --bt-bg: #FFFFFF;
    --bt-bg-hover: #F4F9FC;
    --bt-bg-subtle: #EAF4FA;
    --bt-border: #D6E4EC;
    --bt-border-light: #EAF4FA;
    --bt-radius: 14px;
    --bt-radius-sm: 10px;
    --bt-radius-xs: 6px;
    --bt-radius-pill: 999px;
    --bt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bt-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --bt-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --bt-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    --bt-font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --bt-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--bt-font);
    line-height: 1.5;
    box-sizing: border-box;
    z-index: 99990;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#basistaal-root *, #basistaal-root *::before, #basistaal-root *::after,
.bt-toolbar *, .bt-toolbar *::before, .bt-toolbar *::after {
    box-sizing: border-box;
}

/* Enforce Atkinson Hyperlegible across the widget (override host-theme fonts) */
#basistaal-root, #basistaal-root *,
.bt-toolbar, .bt-toolbar *,
.bt-panel, .bt-panel *,
.bt-word-tooltip, .bt-word-tooltip *,
.bt-instruction-banner, .bt-instruction-banner *,
.bt-feedback-modal, .bt-feedback-modal *,
.bt-floating-btn {
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

body.bt-dyslexia-on #basistaal-root, body.bt-dyslexia-on #basistaal-root *,
body.bt-dyslexia-on .bt-toolbar, body.bt-dyslexia-on .bt-toolbar *,
body.bt-dyslexia-on .bt-panel, body.bt-dyslexia-on .bt-panel *,
body.bt-dyslexia-on .bt-word-tooltip, body.bt-dyslexia-on .bt-word-tooltip *,
body.bt-dyslexia-on .bt-instruction-banner, body.bt-dyslexia-on .bt-instruction-banner *,
body.bt-dyslexia-on .bt-feedback-modal, body.bt-dyslexia-on .bt-feedback-modal *,
body.bt-dyslexia-on .bt-floating-btn {
    font-family: 'OpenDyslexic', "Atkinson Hyperlegible", sans-serif !important;
}

/* ══════════════════════════════════════════
   TOOLBAR — Frosted floating bar
   ══════════════════════════════════════════ */
.bt-toolbar--buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border-light);
    border-radius: var(--bt-radius-pill);
    box-shadow: 0 2px 8px rgba(35, 48, 76, 0.05), 0 1px 2px rgba(35, 48, 76, 0.04);
    padding: 8px 12px;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto;
    flex-wrap: wrap;
}

.bt-toolbar--align-center { margin-left: auto; margin-right: auto; }
.bt-toolbar--align-left   { margin-left: 0; margin-right: auto; }
.bt-toolbar--align-right  { margin-left: auto; margin-right: 0; }

.bt-toolbar-wrapper {
    width: 100%;
    min-width: 500px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.bt-toolbar--single {
    display: flex;
    justify-content: center;
    margin: 16px auto;
}

/* ══════════════════════════════════════════
   BUTTONS — Pill-shaped, soft
   ══════════════════════════════════════════ */
.bt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-text);
    font-family: var(--bt-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bt-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.3;
    min-height: 35px;
    letter-spacing: -0.01em;
}

.bt-btn:hover {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
}

.bt-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 2px;
}

.bt-btn:active {
    transform: scale(0.97);
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
}

.bt-btn--circle {
    width: 35px;
    height: 35px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 12px var(--bt-primary-ring);
}

.bt-btn--circle:hover {
    background: var(--bt-primary-hover);
    border-color: var(--bt-primary-hover);
    box-shadow: 0 4px 20px var(--bt-primary-ring);
    transform: scale(1.05);
}

.bt-btn--secondary {
    background: var(--bt-bg-subtle);
    border-color: transparent;
    color: var(--bt-text-light);
}

.bt-btn--secondary:hover {
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
}

.bt-btn--small {
    padding: 7px 14px;
    font-size: 13px;
    margin-top: 10px;
    min-height: 36px;
}

.bt-btn--tiny {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg-subtle);
    cursor: pointer;
    margin-left: 6px;
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bt-primary);
    transition: color var(--bt-transition);
}

.bt-btn__icon svg {
    height: 18px;
    width: auto;
    max-width: 24px;
    display: block;
}

.bt-btn:hover .bt-btn__icon,
.bt-btn:active .bt-btn__icon,
.bt-btn--active .bt-btn__icon {
    color: #fff;
}

.bt-btn--circle .bt-btn__icon {
    color: #fff;
}

.bt-btn--circle .bt-btn__icon svg {
    height: 20px;
    max-width: 22px;
}

.bt-btn--active {
    background: var(--bt-primary);
    color: #fff;
    border-color: var(--bt-primary);
}

/* ══════════════════════════════════════════
   INSTRUCTION BANNER — Compact bottom bar
   ══════════════════════════════════════════ */
.bt-instruction-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
    z-index: 99993;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: #131313;
    animation: bt-slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bt-instruction-banner__content { flex: 1; min-width: 0; }
.bt-instruction-banner__message { display: block; font-weight: 600; margin-bottom: 2px; }

.bt-instruction-banner__readtext {
    display: block;
    font-size: 13px;
    color: var(--bt-text-light);
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--bt-bg-subtle);
    border-radius: var(--bt-radius-xs);
    border-left: 3px solid var(--bt-primary);
}

@keyframes bt-slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.bt-instruction-banner__close {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-text-light);
    font-family: var(--bt-font);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--bt-transition);
    min-height: 44px;
    min-width: 44px;
}

.bt-instruction-banner__close:hover { background: var(--bt-bg-subtle); color: var(--bt-text); }

/* ══════════════════════════════════════════
   TTS CONTROLS — Speed, sentence display
   ══════════════════════════════════════════ */
/* TTS Player row - centered play controls */
.bt-tts-player-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* TTS Settings row - speed, voice, gear below player */
.bt-tts-settings-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.bt-tts-settings-row select {
    padding: 8px 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 13px;
    background: var(--bt-bg);
    cursor: pointer;
    appearance: auto;
    min-height: 36px;
    color: var(--bt-text);
}

.bt-tts-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg);
    cursor: pointer;
    color: var(--bt-text-light);
    transition: all var(--bt-transition);
    padding: 0;
}

.bt-tts-settings-btn:hover {
    background: var(--bt-bg-subtle);
    color: var(--bt-text);
    border-color: var(--bt-primary-light);
}

.bt-tts-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* Legacy speed class (keep for backwards compat) */
.bt-tts-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--bt-text-light);
}

.bt-tts-speed select {
    padding: 8px 12px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 13px;
    background: var(--bt-bg);
    cursor: pointer;
    appearance: auto;
    min-height: 36px;
}

.bt-tts-sentence {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bt-text-light);
    text-align: center;
    padding: 16px 24px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt-tts-sentence:empty { display: none; }

/* ══════════════════════════════════════════
   SIMPLIFY CONTENT
   ══════════════════════════════════════════ */
.bt-simplify-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bt-simplify-content ul { list-style: disc; padding-left: 20px; margin: 0; }
.bt-simplify-content li { margin-bottom: 10px; font-size: inherit; line-height: 1.7; }
.bt-simplify-content p { font-size: inherit; margin: 0 0 10px 0; }

/* ══════════════════════════════════════════
   SINGLE BUTTON
   ══════════════════════════════════════════ */
.bt-single-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-pill);
    background: var(--bt-bg);
    color: var(--bt-primary);
    font-family: var(--bt-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bt-transition);
    box-shadow: var(--bt-shadow-xs);
}

.bt-single-btn:hover {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary-light);
    box-shadow: var(--bt-shadow);
}

/* ══════════════════════════════════════════
   FLOATING BUTTON — Pulsing glow
   ══════════════════════════════════════════ */
.bt-floating-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--bt-primary);
    color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99991;
    box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 0 var(--bt-primary-ring);
    animation: bt-pulse 3s ease-in-out infinite;
    font-family: inherit;
}

.bt-floating-btn--circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
}

.bt-floating-btn--pill {
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.bt-floating-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-floating-btn__label {
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Corner positioning — overrides the default bottom/right above */
.bt-floating-btn--bottom-right { bottom: 28px; right: 28px; top: auto; left: auto; }
.bt-floating-btn--bottom-left  { bottom: 28px; left: 28px; top: auto; right: auto; }
.bt-floating-btn--top-right    { top: 28px; right: 28px; bottom: auto; left: auto; }
.bt-floating-btn--top-left     { top: 28px; left: 28px; bottom: auto; right: auto; }

@keyframes bt-pulse {
    0%, 100% { box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 0 var(--bt-primary-ring); }
    50% { box-shadow: 0 4px 20px var(--bt-primary-ring), 0 0 0 8px rgba(21, 148, 200, 0); }
}

.bt-floating-btn:hover {
    transform: scale(1.08);
    background: var(--bt-primary-hover);
    box-shadow: 0 8px 32px var(--bt-primary-ring);
    animation: none;
}

.bt-floating-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 4px;
}

.bt-floating-btn svg { width: 22px; height: 22px; }
.bt-floating-btn--circle svg { width: 26px; height: 26px; }

/* Inline placeholder (shortcode) */
.bt-inline-placeholder { width: 100%; margin: 20px 0; }
.bt-inline-placeholder .bt-toolbar { margin: 0 auto; }

/* ══════════════════════════════════════════
   PANEL — Slide-up with soft edges
   ══════════════════════════════════════════ */
.bt-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    max-width: 590px;
    max-height: 85vh;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border-light);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 60px rgba(15, 23, 42, 0.18), 0 -4px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99992;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.bt-panel--open { transform: translate(-50%, 0); }

/* OpenDyslexic glyphs are noticeably wider — give the panel more room
   so labels and grids don't wrap or clip. */
body.bt-dyslexia-on .bt-panel { max-width: 720px; }

/* Backdrop / scrim — solid darkening, no blur (better contrast & a11y) */
.bt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99991;
}
.bt-backdrop--visible { opacity: 1; pointer-events: auto; }

/* Panel header: back-chevron (or spacer) | centered title | close × */
.bt-panel__header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bt-border-light);
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 1;
    min-height: 64px;
}

.bt-panel__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.bt-panel__spacer { display: block; width: 44px; height: 44px; }

.bt-panel__back,
.bt-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    font-family: var(--bt-font) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    color: var(--bt-text-light) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    font-weight: normal !important;
    font-size: 0 !important;
}

.bt-panel__back svg,
.bt-panel__close svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.bt-panel__back { color: var(--bt-primary) !important; justify-self: start; }
.bt-panel__close { justify-self: end; color: var(--bt-text-light) !important; }

.bt-panel__back:hover,
.bt-panel__back:focus-visible {
    background: var(--bt-primary-soft) !important;
    border-color: var(--bt-primary-light) !important;
    color: var(--bt-primary) !important;
}

.bt-panel__close:hover,
.bt-panel__close:focus-visible {
    background: var(--bt-bg-subtle) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-accent) !important;
}

.bt-panel__body {
    padding: 20px 24px 28px;
    min-height: 120px;
}

/* ══════════════════════════════════════════
   MENU GRID — Card tiles with hover lift
   ══════════════════════════════════════════ */
.bt-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 4px;
}

@media (max-width: 820px) {
    .bt-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

.bt-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 12px 20px;
    border: 1px solid var(--bt-border-light);
    border-radius: 18px;
    background: var(--bt-bg);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--bt-font);
    text-align: center;
    min-height: 128px;
    box-shadow: 0 1px 2px rgba(35, 48, 76, 0.04),
                0 2px 8px rgba(35, 48, 76, 0.05);
    color: var(--bt-accent);
}

.bt-menu-item:hover {
    border-color: var(--bt-primary-light);
    background: var(--bt-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(21, 148, 200, 0.14),
                0 2px 6px rgba(35, 48, 76, 0.06);
}

.bt-menu-item:focus-visible {
    outline: 3px solid var(--bt-primary-ring);
    outline-offset: 3px;
}

.bt-menu-item:active { transform: translateY(-1px) scale(0.98); }

.bt-menu-item[aria-pressed="true"] {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary);
    box-shadow: 0 4px 16px rgba(21, 148, 200, 0.2);
}

.bt-menu-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    color: var(--bt-primary);
    line-height: 1;
}

.bt-menu-item__icon svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 48px;
    display: block;
}

.bt-menu-item__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--bt-accent);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ══════════════════════════════════════════
   TTS PLAYER — Spotify-inspired
   ══════════════════════════════════════════ */
.bt-tts-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.bt-tts-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bt-tts-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--bt-border) !important;
    background: var(--bt-bg) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--bt-transition) !important;
    color: var(--bt-text-light) !important;
    padding: 0 !important;
}

.bt-tts-btn svg { width: 20px !important; height: 20px !important; fill: var(--bt-text-light) !important; }

.bt-tts-btn:hover {
    border-color: var(--bt-primary-light) !important;
    background: var(--bt-primary-soft) !important;
    color: var(--bt-primary) !important;
}

.bt-tts-btn:hover svg { fill: var(--bt-primary) !important; }

.bt-tts-btn:focus-visible { outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 2px !important; }

.bt-tts-btn--play {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    background: var(--bt-accent) !important;
    border-color: var(--bt-accent) !important;
    color: #fff !important;
    font-size: 24px !important;
    box-shadow: 0 4px 16px var(--bt-accent-soft), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.bt-tts-btn--play svg { width: 28px !important; height: 28px !important; fill: #fff !important; }

.bt-tts-btn--play:hover {
    background: var(--bt-accent-hover) !important;
    border-color: var(--bt-accent-hover) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 8px 24px var(--bt-accent-soft) !important;
}

.bt-tts-status {
    font-size: 13px;
    color: var(--bt-text-muted);
    min-height: 20px;
    text-align: center;
    font-weight: 500;
}

/* ══════════════════════════════════════════
   TTS PROGRESS BAR
   ══════════════════════════════════════════ */
.bt-tts-progress {
    width: 100%;
    height: 4px;
    background: var(--bt-bg-subtle);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.bt-tts-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bt-primary), var(--bt-primary-light));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ══════════════════════════════════════════
   LANGUAGE GRID
   ══════════════════════════════════════════ */
.bt-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.bt-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    background: var(--bt-bg);
    cursor: pointer;
    transition: all var(--bt-transition);
    font-family: var(--bt-font);
    text-align: left;
    min-height: 44px;
}

.bt-lang-btn:hover {
    border-color: var(--bt-primary-light);
    background: var(--bt-primary-soft);
}

.bt-lang-flag { font-size: 20px; }
.bt-lang-name strong { font-size: 13px; color: var(--bt-text); }
.bt-lang-name small { font-size: 11px; color: var(--bt-text-muted); }

/* ══════════════════════════════════════════
   FONT SIZE GRID
   ══════════════════════════════════════════ */
.bt-fontsize-grid { display: flex; gap: 12px; justify-content: center; }

.bt-fontsize-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 28px;
    border: 1.5px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    background: var(--bt-bg);
    cursor: pointer;
    font-family: var(--bt-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-text);
    transition: all var(--bt-transition);
    min-height: 44px;
}

.bt-fontsize-btn--active {
    border-color: var(--bt-primary);
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
}

.bt-fontsize-btn:hover { border-color: var(--bt-primary-light); background: var(--bt-primary-soft); }
.bt-fontsize-letter { font-weight: 700; color: var(--bt-text); }
.bt-fontsize-btn--active .bt-fontsize-letter { color: var(--bt-primary); }

/* ══════════════════════════════════════════
   WORD TOOLTIP — Floating card
   ══════════════════════════════════════════ */
.bt-word-tooltip {
    position: fixed;
    width: 360px;
    max-width: 90vw;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    z-index: 99999;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: bt-fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #131313;
    overflow: hidden;
}

@keyframes bt-fadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.bt-word-tooltip__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 17px;
    font-weight: 700;
    color: #1594C8;
    background: #EAF4FA;
}

.bt-word-tooltip__close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--bt-text-muted);
    padding: 4px 8px;
    border-radius: var(--bt-radius-xs);
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--bt-transition);
}

.bt-word-tooltip__close:hover { background: var(--bt-bg-hover); color: var(--bt-text); }

.bt-word-tooltip__body {
    padding: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bt-text);
}

/* ══════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════ */
.bt-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--bt-border-light);
    font-size: 15px;
    color: var(--bt-text);
    cursor: pointer;
}

.bt-setting-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--bt-primary);
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}

.bt-setting-info { display: flex; flex-direction: column; gap: 3px; }
.bt-setting-label { font-weight: 600; font-size: 15px; }
.bt-setting-desc { font-size: 13px; color: var(--bt-text-muted); }

/* ══════════════════════════════════════════
   CONTENT STATES
   ══════════════════════════════════════════ */
.bt-loading { text-align: center; padding: 32px; color: var(--bt-text-muted); font-size: 15px; }
.bt-error { text-align: center; padding: 20px; color: #EF4444; font-size: 14px; font-weight: 500; }
.bt-success { text-align: center; padding: 20px; }
.bt-success p { margin-bottom: 12px; font-size: 15px; color: var(--bt-accent); font-weight: 600; }

.bt-disclaimer {
    margin-top: 16px;
    padding: 12px 16px;
    background: #FFFBEB;
    border-radius: var(--bt-radius-xs);
    font-size: 13px;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.bt-simplify-content { font-size: 16px; line-height: 1.8; color: var(--bt-text); }

/* ══════════════════════════════════════════
   READING HIGHLIGHTS
   ══════════════════════════════════════════ */
.bt-highlight-reading {
    background: var(--bt-primary-soft) !important;
    border-radius: 4px;
    outline: 2px solid var(--bt-primary-ring);
    outline-offset: 2px;
    transition: all 0.3s ease;
}

/* Choose-and-listen mode */
body.bt-choose-listen-mode p,
body.bt-choose-listen-mode li,
body.bt-choose-listen-mode h1, body.bt-choose-listen-mode h2,
body.bt-choose-listen-mode h3, body.bt-choose-listen-mode h4,
body.bt-choose-listen-mode h5, body.bt-choose-listen-mode h6,
body.bt-choose-listen-mode td, body.bt-choose-listen-mode th,
body.bt-choose-listen-mode blockquote,
body.bt-choose-listen-mode figcaption {
    cursor: pointer !important;
}

body.bt-choose-listen-mode p:hover,
body.bt-choose-listen-mode li:hover,
body.bt-choose-listen-mode h1:hover, body.bt-choose-listen-mode h2:hover,
body.bt-choose-listen-mode h3:hover, body.bt-choose-listen-mode h4:hover,
body.bt-choose-listen-mode h5:hover, body.bt-choose-listen-mode h6:hover,
body.bt-choose-listen-mode td:hover, body.bt-choose-listen-mode th:hover,
body.bt-choose-listen-mode blockquote:hover,
body.bt-choose-listen-mode figcaption:hover {
    background: var(--bt-primary-soft) !important;
    border-radius: 6px;
}

/* Word highlight in explain mode */
.bt-word-highlight {
    background: rgba(21, 148, 200, 0.15);
    border-radius: 3px;
    padding: 1px 3px;
    transition: background 0.2s ease;
}

/* Explain mode underlines */
.bt-explain-active p, .bt-explain-active li,
.bt-explain-active td, .bt-explain-active th,
.bt-explain-active h1, .bt-explain-active h2,
.bt-explain-active h3, .bt-explain-active h4,
.bt-explain-active h5, .bt-explain-active h6,
.bt-explain-active a {
    cursor: help !important;
}

body.bt-explain-mode .bt-explain-active *:not(button):not(.bt-btn):not(.bt-toolbar):not(.bt-panel) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--bt-primary-light);
    text-underline-offset: 4px;
}

body.bt-explain-mode .bt-explain-active a { pointer-events: auto; cursor: help !important; }
body.bt-no-underline .bt-explain-active * { text-decoration: none !important; }

/* Prevent zoom from affecting our UI elements */
body.bt-zoom-active .bt-panel,
body.bt-zoom-active .bt-toolbar,
body.bt-zoom-active .bt-floating-btn,
body.bt-zoom-active .bt-instruction-banner,
body.bt-zoom-active .bt-word-tooltip,
body.bt-zoom-active .bt-feedback-modal {
    zoom: 1 !important;
}

/* Dyslexia — high-specificity override to beat theme rules like
   `.entry-content p { font-family: ... !important }`. The class is
   repeated to raise specificity to (0,2,1) without needing `html`. */
body.bt-dyslexia-on.bt-dyslexia-on,
body.bt-dyslexia-on.bt-dyslexia-on *:not(.fa):not([class*="fa-"]):not(.dashicons):not([class*="dashicons-"]):not(i) {
    font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* ══════════════════════════════════════════
   TTS SENTENCE & WORD HIGHLIGHTING
   ══════════════════════════════════════════ */
.bt-tts-sentence-active {
    background: var(--bt-warning-soft) !important;
    border-radius: 6px;
    padding: 2px 4px !important;
    transition: background 0.2s ease;
}

.bt-tts-word-active {
    background: rgba(245, 158, 11, 0.35) !important;
    border-radius: 3px;
    padding: 1px 1px;
    transition: background 0.1s ease;
}

.bt-word-span { transition: background 0.15s ease; }

@keyframes bt-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bt-spin { animation: bt-spin 1s linear infinite; }

/* Bold border mode */
body.bt-bold-border .bt-highlight-reading {
    outline-width: 3px !important;
    outline-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 3px var(--bt-primary-ring) !important;
}

body.bt-bold-border .bt-tts-sentence-active {
    box-shadow: 0 0 0 2px var(--bt-warning) !important;
}

body.bt-bold-border .bt-tts-word-active {
    outline: 2px solid var(--bt-warning) !important;
}

/* ══════════════════════════════════════════
   CONTACT, TOOLTIPS ACTIONS, FEEDBACK
   ══════════════════════════════════════════ */
.bt-contact-list { display: flex; flex-direction: column; gap: 10px; }

.bt-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    color: var(--bt-primary);
    text-decoration: none;
    font-size: 15px;
    font-family: var(--bt-font);
    transition: all var(--bt-transition);
    cursor: pointer;
    font-weight: 500;
}

.bt-contact-item:hover {
    background: var(--bt-primary-soft);
    border-color: var(--bt-primary-light);
    text-decoration: underline;
}

.bt-contact-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--bt-primary);
}

.bt-contact-item__icon svg {
    height: 22px;
    width: auto;
    max-width: 24px;
    display: block;
}

.bt-tooltip-lang-select {
    padding: 6px 10px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 12px;
    background: var(--bt-bg);
    cursor: pointer;
}

.bt-word-tooltip__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bt-border-light);
}

.bt-word-tooltip__explanation { font-size: 15px; line-height: 1.7; }

.bt-feedback-links {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--bt-border-light);
    font-size: 12px;
    color: var(--bt-text-muted);
}

.bt-feedback-links a { color: var(--bt-primary); text-decoration: underline; cursor: pointer; }
.bt-feedback-links a:hover { color: var(--bt-primary-hover); }

/* ══════════════════════════════════════════
   FEEDBACK MODAL
   ══════════════════════════════════════════ */
.bt-feedback-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: bt-fadeIn 0.2s ease;
}

.bt-feedback-modal__content {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.bt-feedback-modal__content h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--bt-text); }
.bt-feedback-modal__content p { font-size: 15px; line-height: 1.6; margin-bottom: 6px; color: var(--bt-text); }
.bt-feedback-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bt-feedback-options label { font-size: 14px; cursor: pointer; color: var(--bt-text); }

.bt-feedback-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-xs);
    font-family: var(--bt-font);
    font-size: 14px;
    resize: vertical;
    transition: border-color var(--bt-transition);
}

.bt-feedback-textarea:focus { border-color: var(--bt-primary); outline: 3px solid var(--bt-primary-ring); }

/* ══════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ══════════════════════════════════════════ */
.bt-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;
}

.bt-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100001;
    padding: 12px 24px;
    background: var(--bt-primary);
    color: #fff;
    font-family: var(--bt-font);
    font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 var(--bt-radius-xs) var(--bt-radius-xs);
    text-decoration: none;
    transition: top 0.2s ease;
}

.bt-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; }

/* High contrast */
body.bt-high-contrast #basistaal-root,
body.bt-high-contrast .bt-toolbar,
body.bt-high-contrast .bt-panel,
body.bt-high-contrast .bt-word-tooltip,
body.bt-high-contrast .bt-instruction-banner {
    --bt-primary: #0056b3;
    --bt-text: #000;
    --bt-text-light: #333;
    --bt-bg: #fff;
    --bt-bg-hover: #e6e6e6;
    --bt-border: #000;
}

body.bt-high-contrast .bt-btn { border-width: 3px; font-weight: 700; }
body.bt-high-contrast .bt-btn:hover, body.bt-high-contrast .bt-btn:focus-visible { outline-width: 4px; outline-color: #000; }
body.bt-high-contrast .bt-menu-item { border-width: 3px; }
body.bt-high-contrast .bt-menu-item:hover, body.bt-high-contrast .bt-menu-item:focus-visible { border-color: #000; outline: 3px solid #000; }
body.bt-high-contrast .bt-panel__header { border-bottom-width: 3px; border-bottom-color: #000; }
body.bt-high-contrast .bt-word-tooltip { border-width: 3px; border-color: #000; }
body.bt-high-contrast .bt-error { color: #a00000; font-weight: 700; }

/* Focus ring for all interactive elements
   Reset theme :focus styles (outline + box-shadow) to prevent bleed-through,
   then apply our own ring on :focus-visible. */
#basistaal-root :focus,
.bt-toolbar :focus,
.bt-panel :focus,
.bt-word-tooltip :focus,
.bt-instruction-banner :focus,
.bt-feedback-modal :focus,
.bt-floating-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Theme's bare :focus (pink/brand) bleed through when focus returns to a
   trigger after closing a popup. Restore our base styles on non-keyboard,
   non-hovered focus (the :not(:hover) clause keeps hover styling intact). */
.bt-btn:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-bg) !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-text) !important;
}
.bt-btn--primary:focus:not(:focus-visible):not(:hover),
.bt-btn.bt-btn--active:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}
.bt-icon-btn:focus:not(:focus-visible):not(:hover) {
    background: #FFFFFF !important;
    border-color: var(--bt-border) !important;
    color: var(--bt-primary) !important;
}
.bt-icon-btn.bt-icon-btn--active:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}
.bt-floating-btn:focus:not(:focus-visible):not(:hover) {
    background: var(--bt-primary) !important;
    color: #fff !important;
}
#basistaal-root :focus-visible,
.bt-toolbar :focus-visible,
.bt-panel :focus-visible,
.bt-word-tooltip :focus-visible,
.bt-instruction-banner :focus-visible,
.bt-feedback-modal :focus-visible,
.bt-floating-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Neutralize theme button:focus/hover color overrides on plugin buttons.
   Themes often target bare `button:focus` / `button:hover` with their brand
   colors; we reclaim background/border/color for our own button states. */
.bt-btn:hover,
.bt-btn:focus-visible,
.bt-floating-btn:hover,
.bt-floating-btn:focus-visible,
.bt-icon-btn:hover,
.bt-icon-btn:focus-visible {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 600px) {
    .bt-toolbar--buttons { flex-wrap: wrap; justify-content: center; }
    .bt-btn__label { display: none; }
    .bt-btn { padding: 10px 12px; }
    .bt-panel { max-height: 85vh; border-radius: 16px 16px 0 0; }
    .bt-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .bt-lang-grid { grid-template-columns: repeat(2, 1fr); }
    .bt-fontsize-grid { flex-direction: column; align-items: stretch; }
    .bt-fontsize-btn { flex-direction: row; justify-content: center; }
    .bt-floating-btn--circle { width: 52px; height: 52px; }
    .bt-floating-btn--pill { padding: 12px 18px; font-size: 15px; }
    .bt-floating-btn--bottom-right { bottom: 18px; right: 18px; }
    .bt-floating-btn--bottom-left  { bottom: 18px; left: 18px; }
    .bt-floating-btn--top-right    { top: 18px; right: 18px; }
    .bt-floating-btn--top-left     { top: 18px; left: 18px; }
    .bt-panel__body { padding: 16px 16px 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bt-panel { transition: none; }
    .bt-floating-btn { animation: none; }
    .bt-floating-btn:hover { transform: none; }
    @keyframes bt-fadeIn { from { opacity: 1; } to { opacity: 1; } }
}

/* Print */
@media print {
    #basistaal-root { display: none !important; }
}

/* ══════════════════════════════════════════
   PANEL BODY CONTENT PRIMITIVES (v1.9)
   ══════════════════════════════════════════ */
.bt-panel__body { padding: 22px 24px 32px !important; }
.bt-panel__intro {
    margin: 0 0 16px !important;
    color: var(--bt-text-light) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.bt-divider {
    height: 1px;
    background: var(--bt-border-light);
    margin: 22px 0 18px;
    border: 0;
}

.bt-section-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bt-text-muted) !important;
    margin: 20px 0 10px !important;
}

.bt-field-group { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 100%; }
.bt-field-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 !important;
}

/* Chip group (speed/popular) */
.bt-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bt-chip {
    appearance: none;
    background: var(--bt-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: var(--bt-radius-pill) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    min-height: 40px;
    line-height: 1.2;
    font-family: var(--bt-font) !important;
    transition: all var(--bt-transition);
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-chip:hover { border-color: var(--bt-primary-light) !important; background: var(--bt-primary-soft) !important; color: var(--bt-primary) !important; }
.bt-chip--active { background: var(--bt-primary) !important; border-color: var(--bt-primary) !important; color: #fff !important; }
.bt-chip--active:hover { background: var(--bt-primary-hover) !important; border-color: var(--bt-primary-hover) !important; color: #fff !important; }

/* Native select, restyled */
.bt-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    background: var(--bt-bg) !important;
    padding: 10px 40px 10px 14px !important;
    font-size: 15px !important;
    font-family: var(--bt-font) !important;
    color: var(--bt-text) !important;
    min-height: 44px;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;
}
.bt-select:focus-visible { border-color: var(--bt-primary) !important; outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 1px; }

/* Link button (secondary textual action) */
.bt-link-btn {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 8px 12px !important;
    font-family: var(--bt-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bt-primary) !important;
    cursor: pointer !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--bt-radius-xs) !important;
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-link-btn:hover { background: var(--bt-primary-soft) !important; color: var(--bt-primary-hover) !important; }
.bt-link-btn svg { width: 16px; height: 16px; }

/* TTS: secondary row */
.bt-tts-secondary {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* TTS sentence card: idle hint + preview */
.bt-tts-sentence {
    padding: 18px 22px !important;
    text-align: left !important;
    flex-direction: column;
    gap: 6px !important;
    align-items: stretch !important;
}
.bt-tts-sentence__hint {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.bt-tts-sentence__preview {
    display: block;
    font-size: 16px;
    color: var(--bt-text);
    line-height: 1.5;
    font-weight: 500;
}

/* Toggle switch */
.bt-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 32px;
}
.bt-switch input { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; margin: 0; }
.bt-switch__track {
    display: block;
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--bt-border);
    position: relative;
    transition: background 0.2s ease;
}
.bt-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: left 0.2s ease;
}
.bt-switch input:checked + .bt-switch__track { background: var(--bt-primary); }
.bt-switch input:checked + .bt-switch__track .bt-switch__thumb { left: 23px; }
.bt-switch input:focus-visible + .bt-switch__track { outline: 3px solid var(--bt-primary-ring); outline-offset: 3px; }

.bt-setting-row { gap: 16px; }
.bt-setting-row input[type="checkbox"]:not(.bt-switch input) { width: 22px; height: 22px; }

/* Radio card (font picker) */
.bt-radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bt-radio-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid var(--bt-border);
    border-radius: 12px;
    background: var(--bt-bg);
    cursor: pointer;
    transition: all var(--bt-transition);
    min-height: 64px;
}
.bt-radio-card:hover { border-color: var(--bt-primary-light); background: var(--bt-primary-soft); }
.bt-radio-card--active { border-color: var(--bt-primary); background: var(--bt-primary-soft); box-shadow: 0 0 0 3px var(--bt-primary-ring); }
.bt-radio-card input { accent-color: var(--bt-primary); width: 22px; height: 22px; flex-shrink: 0; }
.bt-radio-card__body { display: flex; flex-direction: column; gap: 2px; }
.bt-radio-card__label { font-size: 16px; font-weight: 700; color: var(--bt-accent); }
.bt-radio-card__desc { font-size: 13px; color: var(--bt-text-light); }

/* Settings sections */
.bt-settings-section { margin-top: 22px; margin-bottom: 4px; }
.bt-settings-section__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bt-accent) !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.01em;
}
.bt-settings-section__desc {
    font-size: 13px !important;
    color: var(--bt-text-light) !important;
    margin: 0 0 12px !important;
    line-height: 1.5 !important;
}

/* Shortcut list */
.bt-shortcut-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 !important; padding: 0 !important; }
.bt-shortcut-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--bt-border-light); }
.bt-shortcut-row:last-child { border-bottom: 0; }
.bt-shortcut-row dt { margin: 0; flex-shrink: 0; min-width: 80px; }
.bt-shortcut-row dd { margin: 0; color: var(--bt-text); font-size: 14px; }
.bt-shortcut-list kbd {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-family: var(--bt-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-accent);
}

.bt-settings-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bt-border-light); display: flex; justify-content: flex-start; }
.bt-btn--primary { background: var(--bt-primary) !important; color: #fff !important; border-color: var(--bt-primary) !important; }
.bt-btn--primary:hover { background: var(--bt-primary-hover) !important; border-color: var(--bt-primary-hover) !important; color: #fff !important; }

/* Search input */
.bt-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0 16px;
}
.bt-search__icon {
    position: absolute;
    left: 14px;
    color: var(--bt-text-muted);
    pointer-events: none;
    display: inline-flex;
}
.bt-search__input {
    width: 100%;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    padding: 11px 14px 11px 44px !important;
    font-family: var(--bt-font) !important;
    font-size: 15px !important;
    color: var(--bt-text) !important;
    background: var(--bt-bg) !important;
    min-height: 44px;
}
.bt-search__input:focus-visible { border-color: var(--bt-primary) !important; outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 1px; }

/* Language buttons: more room, name+native stacked */
.bt-lang-grid { gap: 10px; }
.bt-lang-btn {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
    font-weight: 500;
}
.bt-lang-btn .bt-lang-flag { font-size: 22px; flex-shrink: 0; }
.bt-lang-btn .bt-lang-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.bt-lang-btn .bt-lang-name strong { font-size: 14px; color: var(--bt-accent); font-weight: 700; }
.bt-lang-btn .bt-lang-name small { font-size: 12px; color: var(--bt-text-muted); }

/* Active translated language (in popular grid) */
.bt-lang-btn--active { border-color: var(--bt-primary) !important; background: var(--bt-primary-soft) !important; }

/* Notice (translate restore etc.) */
.bt-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bt-bg-subtle);
    border: 1px solid var(--bt-border);
    border-left: 4px solid var(--bt-primary);
    border-radius: 10px;
    margin-bottom: 16px;
}
.bt-notice__text { flex: 1; font-size: 14px; color: var(--bt-accent); font-weight: 500; }

/* Success card */
.bt-success--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px 24px !important;
    text-align: center;
    background: var(--bt-primary-soft);
    border-radius: 16px;
    border: 1px solid var(--bt-primary-light);
}
.bt-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bt-primary);
    color: #fff;
    margin-bottom: 4px;
}
.bt-success__icon svg { width: 28px; height: 28px; }
.bt-success--card h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--bt-accent) !important; margin: 0 !important; }
.bt-success--card p { font-size: 15px !important; color: var(--bt-text-light) !important; margin: 0 !important; }
.bt-success__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }

/* Menu-item active state (toggle aan) */
.bt-menu-item--active {
    border-color: var(--bt-primary) !important;
    background: var(--bt-primary-soft) !important;
    box-shadow: 0 0 0 3px var(--bt-primary-ring), 0 4px 14px rgba(21, 148, 200, 0.15) !important;
    position: relative;
}
.bt-menu-item__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bt-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Font-choice helper classes on body */
body.bt-font-system, body.bt-font-system * { font-family: inherit !important; }
body.bt-high-contrast { background: #fff; }

/* Keep TTS progress bar styling but place above the player */
.bt-tts-progress { width: 100%; }

/* ── Icon button (for tooltip / simplify action bars) ──
   Specificity is doubled (.bt-icon-btn.bt-icon-btn) so host-theme button resets
   like `button { color: #fff }` can't override. */
.bt-icon-btn.bt-icon-btn,
.bt-word-tooltip .bt-icon-btn,
.bt-panel .bt-icon-btn,
#basistaal-root .bt-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--bt-primary) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    box-shadow: none !important;
    font-family: var(--bt-font) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0;
    text-shadow: none !important;
    text-transform: none !important;
}
.bt-icon-btn svg,
.bt-word-tooltip .bt-icon-btn svg,
.bt-panel .bt-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
}
.bt-icon-btn:hover, .bt-icon-btn.bt-icon-btn:hover,
.bt-word-tooltip .bt-icon-btn:hover,
.bt-panel .bt-icon-btn:hover {
    background: var(--bt-primary-soft) !important;
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary-hover) !important;
}
.bt-icon-btn:active { transform: scale(0.96) !important; }
.bt-icon-btn:focus-visible {
    outline: 3px solid var(--bt-primary-ring) !important;
    outline-offset: 2px;
}
.bt-icon-btn.bt-icon-btn--active,
.bt-word-tooltip .bt-icon-btn--active,
.bt-panel .bt-icon-btn--active {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
.bt-icon-btn.bt-icon-btn--active:hover,
.bt-word-tooltip .bt-icon-btn--active:hover {
    background: var(--bt-primary-hover) !important;
    border-color: var(--bt-primary-hover) !important;
    color: #FFFFFF !important;
}

/* ── Action card (TTS "of klik zelf een stuk tekst aan") ── */
.bt-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px !important;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 14px !important;
    background: var(--bt-bg) !important;
    background-image: none !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    text-align: left;
    font-family: var(--bt-font) !important;
    transition: all var(--bt-transition);
    box-shadow: none !important;
    text-transform: none !important;
}
.bt-action-card:hover {
    border-color: var(--bt-primary) !important;
    background: var(--bt-primary-soft) !important;
    transform: translateY(-1px);
}
.bt-action-card:focus-visible { outline: 3px solid var(--bt-primary-ring) !important; outline-offset: 2px; }
.bt-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bt-primary-soft);
    color: var(--bt-primary);
    flex-shrink: 0;
}
.bt-action-card__icon svg { width: 22px; height: 22px; }
.bt-action-card:hover .bt-action-card__icon { background: var(--bt-primary); color: #fff; }
.bt-action-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-action-card__title { font-size: 15px; font-weight: 700; color: var(--bt-accent); }
.bt-action-card__desc { font-size: 13px; color: var(--bt-text-light); line-height: 1.4; }

/* Tooltip / simplify action bars */
.bt-word-tooltip__actions, .bt-simplify-actions {
    align-items: center;
    gap: 10px !important;
}

/* Tooltip language select restyle */
.bt-tooltip-lang-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--bt-border) !important;
    border-radius: 8px !important;
    padding: 8px 28px 8px 12px !important;
    font-size: 13px !important;
    background: var(--bt-bg) !important;
    color: var(--bt-text) !important;
    cursor: pointer !important;
    min-height: 40px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    margin-left: auto;
}