/* Keep the active read-aloud player between the chat navigation and mode switch. */
#chatHeader > .tts-header-controls-host[hidden] {
    display: none !important;
}

#chatHeader > .tts-header-controls-host:not([hidden]) {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    z-index: 3004 !important;
    display: flex !important;
    height: 64px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
}

#chatHeader .tts-header-player {
    gap: 4px;
    padding: 3px 5px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    background: var(--bg-dark, var(--bg-primary, #20201f));
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

#chatHeader .tts-header-player .tts-player-stop {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

#chatHeader .tts-header-player .tts-player-stop svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 768px) {
    #chatHeader.tts-active.chat-header {
        flex: 0 0 calc(104px + var(--mobile-safe-top, 0px)) !important;
        height: calc(104px + var(--mobile-safe-top, 0px)) !important;
        min-height: calc(104px + var(--mobile-safe-top, 0px)) !important;
        max-height: none !important;
    }

    #chatHeader > .tts-header-controls-host:not([hidden]) {
        top: calc(56px + var(--mobile-safe-top, 0px)) !important;
        height: 40px !important;
    }

    #chatHeader.tts-active #chatSearchWrapper {
        top: calc(110px + var(--mobile-safe-top, 0px)) !important;
    }

    #chatHeader.has-project-tabs.tts-active #chatSearchWrapper {
        top: calc(156px + var(--mobile-safe-top, 0px)) !important;
    }

    #chatHeader.has-project-tabs.tts-active.chat-header {
        flex: 0 0 calc(150px + var(--mobile-safe-top, 0px)) !important;
        height: calc(150px + var(--mobile-safe-top, 0px)) !important;
        min-height: calc(150px + var(--mobile-safe-top, 0px)) !important;
    }

    #chatHeader.has-project-tabs > .tts-header-controls-host:not([hidden]) {
        top: calc(102px + var(--mobile-safe-top, 0px)) !important;
    }
}