.positionable-container {
    touch-action: none;
    position: absolute;
    resize: both;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    min-width: 25vw;
    min-height: 50vh;
    user-select: none;
    --font-scale: var(--awb-scale-default);
    font-size: calc(1rem * var(--font-scale)) !important;
    pointer-events: auto;
}

    .positionable-container .positionable-header {
        padding: 1rem 1rem;
        cursor: grab;
    }

    .positionable-container[expanded] {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: default !important;
        resize: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
    }

    .positionable-container[fullview] {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        cursor: default !important;
        resize: none !important;
        z-index: 20000;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }

        .positionable-container[fullview] .positionable-header,
        .positionable-container[expanded] .positionable-header {
            cursor: default !important;
        }

        .positionable-container[fullview] .positionable-body,
        .positionable-container[expanded] .positionable-body {
            overflow-y: auto;
            overflow-x: hidden;
        }

    .positionable-container .positionable-body {
        cursor: default;
        user-select: none;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .positionable-container[resizing] .positionable-body {
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .positionable-container .positionable-footer {
        cursor: default;
        user-select: none;
        opacity: 1;
    }

    .positionable-container p {
        font-size: calc(var(--awb-fs-default) * var(--font-scale)) !important;
    }

    .positionable-container h1 {
        font-size: calc(var(--awb-fs-8) * var(--font-scale));
    }

    .positionable-container h2 {
        font-size: calc(var(--awb-fs-7) * var(--font-scale));
    }

    .positionable-container h3 {
        font-size: calc(var(--awb-fs-6) * var(--font-scale)) !important;
    }

    .positionable-container h4 {
        font-size: calc(var(--awb-fs-5) * var(--font-scale));
    }

    .positionable-container[data-scale="0"] {
        --font-scale: var(--awb-scale-0);
    }

    .positionable-container[data-scale="1"] {
        --font-scale: var(--awb-scale-1);
    }

    .positionable-container[data-scale="2"] {
        --font-scale: var(--awb-scale-2);
    }

    .positionable-container[data-scale="3"] {
        --font-scale: var(--awb-scale-3);
    }

    .positionable-container[data-scale="4"] {
        --font-scale: var(--awb-scale-4);
    }

    .positionable-container[data-scale="5"] {
        --font-scale: var(--awb-scale-5);
    }

    .positionable-container[data-scale="6"] {
        --font-scale: var(--awb-scale-6);
    }

    .positionable-container[data-scale="7"] {
        --font-scale: var(--awb-scale-7);
    }

    .positionable-container[data-scale="8"] {
        --font-scale: var(--awb-scale-8);
    }

    .positionable-container[data-scale="9"] {
        --font-scale: var(--awb-scale-9);
    }

.modal-open .positionable-container {
    cursor: default !important;
    z-index: 0 !important;
}

html[data-mode="restricted"] .positionable-container,
html[data-mode="student"] .positionable-container,
.positionable-container[data-fullscreen="true"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    resize: none !important;
    overflow: auto !important;
    pointer-events: auto !important;
    z-index: 15000 !important;
    transition: none !important;
}

html[data-mode="restricted"] .positionable-container,
html[data-mode="student"] .positionable-container,
.positionable-container[data-fullscreen="true"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    resize: none !important;
    z-index: 20010 !important;
    overflow-y: auto !important;
}

    html[data-mode="restricted"] .positionable-container .card,
    html[data-mode="student"] .positionable-container .card,
    html[data-mode="restricted"] .positionable-container + .card,
    html[data-mode="student"] .positionable-container + .card {
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        height: 100% !important;
        transition: none !important;
    }

    html[data-mode="restricted"] .positionable-container .positionable-footer,
    html[data-mode="student"] .positionable-container .positionable-footer {
        opacity: 0;
    }

/* Positionable Control States */

.positionable-controls {
    display: flex;
    font-size: 1.0rem;
    gap: 0.4rem;
    padding: 0.5rem;
}

/*
    Disable controls of a particular type
    
        if (in student mode) then (hide all admin controls except those that are student controls)
    
*/

html[data-mode="student"] .admin-control:not(.student-control) {
    display: none !important;
    pointer-events: none;
}

/*
    Ensure controls are active in student mode
*/

html[data-mode="student"] .student-control {
    pointer-events: auto;
    position: relative;
    z-index: 20010;
}

/*
    Disable elements with a particular action
    
        if (a given action is not enable) then (hide all things having that action)

*/

[data-action-toggle-ai-notice-enabled="false"] [data-action="toggle-ai-notice"] {
    display: none;
    pointer-events: none;
}

/*
    Reader Word Highlighting
*/

.reader-container,
.positionable-body {
    position: relative; /* Required so overlay can be absolutely positioned */
}

/* -------------------------------------------------------
   Overlay Layer (geometry only)
   ----------------------------------------------------- */
.reader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* Overlay must not block clicks or selection */
    z-index: 5; /* Above text, below UI controls */
}

/* -------------------------------------------------------
   Highlight Rectangles
   ----------------------------------------------------- */
.reader-highlight-line {
    position: absolute;
    background: rgba(0,0,255, 0.25);
    border-radius: 4px;
    transition: all 80ms linear; /* Smooth movement */
}

.reader-highlight-word {
    position: absolute;
    background: rgba(255, 255, 0, 0.6);
    border-radius: 4px;
    transition: all 80ms linear;
}

/* -------------------------------------------------------
   Token Layer (word spans)
   ----------------------------------------------------- */
.reader-word {
    white-space: pre; /* Prevent collapsing spaces */
    position: relative; /* Allows future inline decorations if needed */
}

    /* Optional: highlight fallback if overlay fails */
    .reader-word.reader-highlight {
        background: rgba(255, 255, 0, 0.4);
    }

/* -------------------------------------------------------
   Active line fallback (if overlay disabled)
   ----------------------------------------------------- */
.reader-line-active {
    background: rgba(0,0,255, 0.15);
}

/*
    Indicators

        indicators are elements with no event handlers, that is, display only
        indicators are typically icons or animations
        indicators are typically triggered (displayed or, displayed and animated) by a particular application state
        indicators typically have a default (not displayed, or displayed but not animated) state
        indicators typically have an active (displayed only or, displayed and animated) state
*/

.indicator {
    display: none;
    pointer-events: none;
    cursor: default;
}

.indicator-active {
    display: inline-block;
    pointer-events: none;
    cursor: default;
}

@layer equalizer-indicator {

    .equalizer-indicator-active {
        position: relative;
        display: inline-block;
        width: 14px; /* adjust as needed */
        height: 14px;
    }

        .equalizer-indicator-active .bar-1,
        .equalizer-indicator-active .bar-2,
        .equalizer-indicator-active .bar-3,
        .equalizer-indicator-active .bar-4,
        .equalizer-indicator-active .bar-5 {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0.11rem;
            background: currentColor;
            border-radius: 1px;
            transform-origin: center;
        }

        /* Bar positions */
        .equalizer-indicator-active .bar-1 {
            left: 0;
        }

        .equalizer-indicator-active .bar-2 {
            left: 3px;
        }

        .equalizer-indicator-active .bar-3 {
            left: 6px;
        }

        .equalizer-indicator-active .bar-4 {
            left: 9px;
        }

        .equalizer-indicator-active .bar-5 {
            left: 12px;
        }

        /* Animation speeds (different for each bar) */
        .equalizer-indicator-active .bar-1 {
            animation: eqBar1 0.5s infinite ease-in-out;
        }

        .equalizer-indicator-active .bar-2 {
            animation: eqBar2 1.2s infinite ease-in-out;
        }

        .equalizer-indicator-active .bar-3 {
            animation: eqBar3 0.7s infinite ease-in-out;
        }

        .equalizer-indicator-active .bar-4 {
            animation: eqBar4 1.3s infinite ease-in-out;
        }

        .equalizer-indicator-active .bar-5 {
            animation: eqBar5 0.8s infinite ease-in-out;
        }

    @keyframes eqBar1 {
        0%, 100% {
            height: 2px;
        }

        50% {
            height: 6px;
        }
    }

    @keyframes eqBar2 {
        0%, 100% {
            height: 0px;
        }

        50% {
            height: 8px;
        }
    }

    @keyframes eqBar3 {
        0%, 100% {
            height: 3px;
        }

        50% {
            height: 12px;
        }
    }

    @keyframes eqBar4 {
        0%, 100% {
            height: 5px;
        }

        50% {
            height: 10px;
        }
    }

    @keyframes eqBar5 {
        0%, 100% {
            height: 4px;
        }

        50% {
            height: 8px;
        }
    }
}

@layer pulse-indicator {
    .pulse-indicator-active {
        animation: pulse 1.0s infinite ease-in-out;
        transform-origin: center;
    }

    @keyframes pulse {
        0% {
            opacity: 0.6;
            transform: scale(1);
        }

        25% {
            opacity: 0.8;
            transform: scale(1.5);
        }

        50% {
            opacity: 1.0;
            transform: scale(2.0);
        }

        75% {
            opacity: 0.8;
            transform: scale(1.5);
        }

        100% {
            opacity: 0.6;
            transform: scale(1);
        }
    }
}