/* Mobile release layer.
   Loaded last so every mobile surface shares one viewport and scroll model. */

@media (max-width: 768px) {
    :root {
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-left: env(safe-area-inset-left, 0px);
        --mobile-safe-right: env(safe-area-inset-right, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-gutter: 14px;
        --mobile-control: 42px;
    }

    html,
    body {
        width: 100%;
        height: var(--app-height, 100dvh);
        min-height: var(--app-height, 100dvh);
        max-width: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    body,
    body * {
        touch-action: manipulation;
    }

    body :where(.chat-messages,
        .side-chat-messages,
        .chat-history-list,
        .library-content,
        .chats-list-content,
        .projects-list,
        .settings-tabs,
        .settings-panels,
        .settings-tab-content,
        .study-module-shell,
        .new-mindmap-view,
        .interrog-view) {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    body :where(.chat-messages,
        .side-chat-messages,
        .chat-history-list,
        .library-content,
        .chats-list-content,
        .projects-list,
        .settings-tabs,
        .settings-panels,
        .settings-tab-content,
        .study-module-shell,
        .new-mindmap-view,
        .interrog-view) * {
        touch-action: pan-y;
    }

    body :where(button, input, textarea, select) {
        touch-action: manipulation;
    }

    body :where(input, textarea, select) {
        font-size: 16px !important;
    }

    #mainContent,
    .main-content {
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.helper-open .main-content,
    body.side-chat-open .main-content,
    .main-content.side-chat-open {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Primary navigation is a left drawer on every mobile view. */
    body .sidebar {
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: min(86vw, 340px) !important;
        min-width: min(86vw, 340px) !important;
        max-width: 340px !important;
        height: var(--app-height, 100dvh) !important;
        max-height: var(--app-height, 100dvh) !important;
        padding-top: var(--mobile-safe-top) !important;
        border-radius: 0 18px 18px 0 !important;
        transform: translate3d(-105%, 0, 0) !important;
        z-index: 4200 !important;
        transition: transform 280ms cubic-bezier(.22, 1, .36, 1) !important;
        will-change: transform;
    }

    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    body.sidebar-open .mobile-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 4150 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body .sidebar .tools-section,
    body .sidebar .chat-history-section,
    body .sidebar .chat-history-list {
        min-height: 0 !important;
    }

    body.sidebar-open .sidebar .tools-section,
    body.sidebar-open .sidebar .chat-history-section,
    body.sidebar-open .sidebar .chat-history-list {
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body.sidebar-open .sidebar .sidebar-footer {
        flex: 0 0 auto !important;
        padding-bottom: calc(12px + var(--mobile-safe-bottom)) !important;
    }

    body .mobile-sidebar-btn {
        display: flex !important;
        position: fixed !important;
        top: calc(10px + var(--mobile-safe-top)) !important;
        left: calc(12px + var(--mobile-safe-left)) !important;
        right: auto !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        z-index: 4100 !important;
        transform: none !important;
    }

    body .mobile-sidebar-btn:active,
    body .mobile-sidebar-btn:focus-visible {
        background: var(--bg-hover) !important;
        color: var(--text-primary) !important;
        outline: none !important;
    }

    body.sidebar-open .mobile-sidebar-btn {
        display: none !important;
    }

    /* Keep the chat header compact and give search/menu their own stable lanes. */
    #chatView,
    #chatView .chat-main-area {
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
    }

    #chatView .chat-main-area {
        display: flex !important;
    }

    #chatView .chat-header,
    #chatHeader {
        flex: 0 0 auto !important;
        min-height: 60px !important;
        height: auto !important;
        padding: calc(8px + var(--mobile-safe-top)) 52px 8px 56px !important;
        gap: 8px !important;
        z-index: 3050 !important;
        overflow: visible !important;
    }

    #chatView .header-left-group {
        min-width: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    #chatView .chat-menu {
        right: calc(8px + var(--mobile-safe-right)) !important;
        top: calc(10px + var(--mobile-safe-top)) !important;
        z-index: 4120 !important;
    }

    #chatView .chat-menu .menu-btn,
    #chatView .chat-sidebar-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #chatView #chatSearchWrapper {
        position: absolute !important;
        left: var(--mobile-gutter) !important;
        right: auto !important;
        top: calc(68px + var(--mobile-safe-top)) !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: calc(100vw - 28px) !important;
        height: 38px !important;
        z-index: 3060 !important;
        overflow: hidden !important;
        transition: width 220ms cubic-bezier(.22, 1, .36, 1) !important;
    }

    #chatView #chatSearchWrapper:hover,
    #chatView #chatSearchWrapper:focus-within,
    #chatView #chatSearchWrapper.is-expanded,
    #chatView #chatSearchWrapper:not(.collapsed) {
        width: min(238px, calc(100vw - 28px)) !important;
    }

    #chatView #chatSearchWrapper .header-search-input,
    #chatView #chatSearchWrapper input {
        min-width: 0 !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* Chat content owns the only scroll position. */
    #chatView .chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px 0 calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom)) !important;
        scroll-padding-top: 12px;
        scroll-padding-bottom: calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom));
    }

    #chatView .chat-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 76px var(--mobile-gutter) calc(190px + var(--mobile-safe-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #chatView .chat-messages :where(.message-wrapper, .message-inner) {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #chatView .message-wrapper {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    #chatView .message-content,
    #chatView .message-bubble,
    #chatView .message-inner {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    #chatView .message-content :where(pre, table, .table-wrapper, .code-block) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #chatView .message-content img,
    #chatView .message-content video,
    #chatView .generated-image {
        max-width: 100% !important;
        height: auto !important;
    }

    #chatView .message-actions {
        opacity: 1 !important;
        min-height: 40px !important;
        gap: 2px !important;
    }

    #chatView .message-actions button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Composer: fixed to the visual viewport, with one row of controls. */
    #chatView .input-container,
    #chatView .chat-main-area.is-empty .input-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--keyboard-offset, 0px) + var(--mobile-safe-bottom) + 6px) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px var(--mobile-gutter) !important;
        z-index: 4100 !important;
        transform: translateZ(0) !important;
    }

    #chatView .attachment-preview-wrap {
        max-height: min(28dvh, 220px) !important;
        overflow-y: auto !important;
        margin-bottom: 6px !important;
    }

    #chatView .chat-input-area {
        width: 100% !important;
        min-height: 54px !important;
        height: auto !important;
        padding: 7px 8px !important;
        gap: 4px !important;
        border-radius: 28px !important;
        overflow: visible !important;
    }

    #chatView .chat-input-area #chatInput {
        min-width: 0 !important;
        min-height: 38px !important;
        max-height: 220px !important;
        padding: 8px 4px !important;
        line-height: 1.35 !important;
        overflow-y: hidden;
        resize: none !important;
    }

    #chatView .chat-input-area :where(.attach-btn, .voice-btn, .send-btn, .stop-btn),
    #chatView .response-speed-btn {
        flex: 0 0 var(--mobile-control) !important;
        width: var(--mobile-control) !important;
        height: var(--mobile-control) !important;
        min-width: var(--mobile-control) !important;
        min-height: var(--mobile-control) !important;
        padding: 0 !important;
    }

    #chatView .response-speed-control {
        flex: 0 0 var(--mobile-control) !important;
        width: var(--mobile-control) !important;
        min-width: var(--mobile-control) !important;
    }

    #chatView .response-speed-btn .response-speed-label,
    #chatView .response-speed-btn .speed-label,
    #chatView .response-speed-btn [data-speed-label] {
        display: none !important;
    }

    #chatView .attach-menu-popover,
    #chatView .response-speed-menu,
    #chatView .chat-menu-dropdown {
        max-width: calc(100vw - 24px) !important;
        max-height: min(68dvh, 460px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 4300 !important;
    }

    #chatView .attach-menu-popover {
        left: 0 !important;
        right: auto !important;
        bottom: calc(100% + 8px) !important;
    }

    #chatView .response-speed-menu {
        left: auto !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        width: min(320px, calc(100vw - 24px)) !important;
        transform-origin: bottom right !important;
    }

    #chatView :where(.attach-menu-popover button, .response-speed-menu button, .chat-menu-dropdown button) {
        min-height: 44px !important;
    }

    /* Saved chats remain a left drawer; the main menu stays independent. */
    #chatView .chat-secondary-sidebar {
        width: min(86vw, 340px) !important;
        max-width: 340px !important;
        height: var(--app-height, 100dvh) !important;
        padding-top: var(--mobile-safe-top) !important;
        border-radius: 0 18px 18px 0 !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    body.sidebar-open #chatView .chat-secondary-sidebar {
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(-106%, 0, 0) !important;
    }

    /* Clarification is a true drawer, never a second page underneath chat. */
    .side-chat-panel {
        inset: 0 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        max-height: var(--app-height, 100dvh) !important;
        border-radius: 18px 0 0 18px !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: var(--mobile-safe-top) !important;
    }

    .side-chat-panel .side-chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding-bottom: calc(10px + var(--mobile-safe-bottom)) !important;
        overscroll-behavior: contain;
    }

    .side-chat-panel .side-chat-input-area {
        flex: 0 0 auto !important;
        margin-bottom: calc(10px + var(--mobile-safe-bottom)) !important;
        max-width: calc(100% - 24px) !important;
    }

    /* App views and study tools each get one bounded scroll region. */
    #chatsListView,
    #libraryView,
    #projectsView,
    #studyHubView,
    #mindMapView,
    #quizView,
        #noteView,
        #interrogationView,
    #reportGeneratorView {
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        flex-direction: column;
    }

    #projectsView[style*="display: block"],
    #learningView[style*="display: block"],
    #learningView[style*="display: flex"] {
        display: flex !important;
    }

    #projectsView .projects-header {
        flex: 0 0 auto !important;
        min-height: 82px !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) 12px !important;
    }

    #projectsView .projects-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px var(--mobile-gutter) calc(20px + var(--mobile-safe-bottom)) !important;
    }

    #learningView .learning-shell {
        display: grid !important;
        grid-template-columns: minmax(132px, 34vw) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: calc(12px + var(--mobile-safe-top)) var(--mobile-gutter) calc(16px + var(--mobile-safe-bottom)) !important;
        overflow: hidden !important;
    }

    #learningView .learning-sidebar,
    #learningView .learning-main {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #learningView .learning-sidebar {
        padding: 10px 8px !important;
    }

    #learningView .learning-nav-btn,
    #learningView .learning-card {
        min-height: 48px !important;
    }

    #learningView .learning-main {
        padding: 16px var(--mobile-gutter) calc(20px + var(--mobile-safe-bottom)) !important;
    }

    :where(#chatsListView, #libraryView, #projectsView, #studyHubView) .library-header,
    :where(#chatsListView, #libraryView, #projectsView, #studyHubView) .projects-header {
        flex: 0 0 auto !important;
        min-height: 82px !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) 12px !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    :where(#chatsListView, #libraryView, #projectsView, #studyHubView) .library-content,
    :where(#chatsListView, #libraryView, #projectsView, #studyHubView) .chats-list-content,
    :where(#chatsListView, #libraryView, #projectsView, #studyHubView) .projects-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px var(--mobile-gutter) calc(20px + var(--mobile-safe-bottom)) !important;
    }

    /* Keep Chats and Library actions centered as one compact two-button group.
       Their titles get left breathing room for the primary menu trigger. */
    #chatsListView > .library-header,
    #libraryView > .library-header {
        align-items: stretch !important;
    }

    #chatsListView > .library-header > div:first-child,
    #libraryView > .library-header > div:first-child {
        padding-left: 50px !important;
    }

    #chatsListView .library-actions,
    #libraryView .library-actions {
        width: min(100%, 360px) !important;
        margin: 8px auto 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    #chatsListView .library-actions .upload-first-btn,
    #chatsListView .library-actions .library-folder-btn,
    #libraryView .library-actions .upload-first-btn,
    #libraryView .library-actions .library-folder-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding-inline: 8px !important;
        text-align: center !important;
        white-space: nowrap;
    }

    :where(#chatsListView, #libraryView) .library-search-bar {
        max-width: calc(100vw - 28px) !important;
    }

    :where(#chatsListView, #libraryView) .library-search-bar.is-expanded,
    :where(#chatsListView, #libraryView) .library-search-bar:focus-within {
        width: min(238px, calc(100vw - 28px)) !important;
    }

    :where(#chatsListView, #libraryView) .document-grid,
    :where(#chatsListView, #libraryView) .folders-grid,
    :where(#chatsListView, #libraryView) .library-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
        gap: 12px !important;
    }

    :where(#chatsListView, #libraryView) :where(.history-item, .chat-list-item, .document-card, .folder-card) {
        min-height: 58px !important;
        margin-bottom: 8px !important;
    }

    .selection-toolbar,
    .library-selection-toolbar {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .selection-toolbar::-webkit-scrollbar,
    .library-selection-toolbar::-webkit-scrollbar {
        display: none;
    }

    :where(#mindMapView, #quizView, #noteView, #interrogationView, #reportGeneratorView) > * {
        min-height: 0 !important;
        max-width: 100% !important;
    }

    :where(.study-module-shell, .new-mindmap-view, .interrog-view) {
        flex: 1 1 auto !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: calc(12px + var(--mobile-safe-top)) var(--mobile-gutter) calc(24px + var(--mobile-safe-bottom)) !important;
    }

    :where(.study-module-header-block, .study-module-header, .study-header) {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    :where(.study-input-container-card, .mindmap-input-section, .quiz-input-section) {
        width: 100% !important;
        max-width: 100% !important;
    }

    :where(.study-textarea-input, .study-module-shell textarea, .new-mindmap-view textarea) {
        min-height: 110px !important;
        max-width: 100% !important;
        resize: vertical !important;
    }

    :where(.study-generate-btn, .generate-mindmap-btn, .study-library-picker-btn, .study-dropdown-toggle-btn) {
        min-height: 44px !important;
    }

    /* Settings is a bottom sheet with fixed navigation and a single scrollable panel. */
    #settingsView {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        max-height: var(--app-height, 100dvh) !important;
        padding: var(--mobile-safe-top) 0 var(--mobile-safe-bottom) !important;
        overflow: hidden !important;
        z-index: 5000 !important;
    }

    #settingsView .settings-window {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(132px, 38vw) minmax(0, 1fr) !important;
        overflow: hidden !important;
        border-radius: 18px 0 0 18px !important;
    }

    #settingsView .settings-tabs {
        min-width: 0 !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 14px 8px calc(18px + var(--mobile-safe-bottom)) !important;
    }

    #settingsView .settings-panels {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) calc(24px + var(--mobile-safe-bottom)) !important;
    }

    #settingsView .settings-tab-btn,
    #settingsView .settings-tabs-pills .settings-tab-btn {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 2px 0 !important;
        padding: 8px 9px !important;
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: none !important;
    }

    #settingsView :where(.settings-card, .ai-settings-panel, .notification-settings-panel) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #settingsView :where(.settings-row, .ai-settings-row, .notification-row) {
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    #settingsView :where(.settings-row > :last-child, .ai-settings-row > :last-child, .notification-row > :last-child) {
        max-width: 100% !important;
    }

    /* All modal surfaces stay inside the visual viewport and remain thumb-friendly. */
    body .modal-overlay {
        position: fixed !important;
        inset: 0 !important;
        padding: calc(12px + var(--mobile-safe-top)) var(--mobile-gutter) calc(12px + var(--mobile-safe-bottom)) !important;
        align-items: center !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body .modal-overlay > .modal,
    body .modal-overlay > .modal-settings,
    body .modal-overlay > .ai-voice-modal-card,
    body .modal-overlay .modal,
    body .modal-overlay .modal-settings {
        width: 100% !important;
        max-width: 520px !important;
        max-height: calc(var(--app-height, 100dvh) - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom)) !important;
        overflow-y: auto !important;
        margin: auto !important;
        border-radius: 16px !important;
    }

    body .modal-overlay :where(button, .close-modal, .settings-close-btn) {
        min-width: 42px;
        min-height: 42px;
    }
}

/* Touch devices have no hover state, so chat actions stay discoverable. */
@media (max-width: 768px) {
    #chatsListGrid .project-chat-card .chat-menu-btn {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* The mobile-only settings page starts below tablet width; iPad keeps the popup. */
#settingsView .settings-mobile-nav-btn {
    display: none;
}

/* Mobile Settings: a dedicated full-screen page with an on-demand section drawer. */
@media (max-width: 600px) {
    #settingsView {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        max-height: none !important;
        padding: 0 !important;
        display: none;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        z-index: 5000 !important;
        background: var(--bg-primary, #20201f) !important;
    }

    #settingsView[style*="display: flex"],
    #settingsView[style*="display:flex"] {
        display: block !important;
    }

    #settingsView .settings-backdrop {
        display: none !important;
        pointer-events: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #settingsView .settings-window {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--bg-primary, #20201f) !important;
        box-shadow: none !important;
        animation: none !important;
        contain: layout paint !important;
    }

    #settingsView .settings-close-btn,
    #settingsView .settings-mobile-nav-btn {
        position: absolute !important;
        top: calc(10px + var(--mobile-safe-top, 0px)) !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
        z-index: 8 !important;
    }

    #settingsView .settings-close-btn {
        right: calc(10px + var(--mobile-safe-right, 0px)) !important;
    }

    #settingsView .settings-mobile-nav-btn {
        display: flex !important;
        left: calc(10px + var(--mobile-safe-left, 0px)) !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    #settingsView .settings-close-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    #settingsView .settings-close-btn svg,
    #settingsView .settings-mobile-nav-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 1.8 !important;
    }

    #settingsView .settings-close-btn:active,
    #settingsView .settings-close-btn:focus-visible,
    #settingsView .settings-mobile-nav-btn:active,
    #settingsView .settings-mobile-nav-btn:focus-visible {
        color: var(--text-primary) !important;
        background: var(--bg-hover, rgba(255, 255, 255, 0.08)) !important;
    }

    #settingsView .settings-tabs {
        position: absolute !important;
        inset: 0 auto 0 0 !important;
        display: block !important;
        width: min(82vw, 310px) !important;
        min-width: 0 !important;
        max-width: 310px !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: calc(66px + var(--mobile-safe-top, 0px)) 14px calc(18px + var(--mobile-safe-bottom, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform 240ms cubic-bezier(.22, 1, .36, 1) !important;
        background: var(--bg-sidebar, #191918) !important;
        border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
        box-shadow: 14px 0 34px rgba(0, 0, 0, 0.24) !important;
        z-index: 7 !important;
    }

    #settingsView .settings-tabs::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.settings-mobile-nav-open #settingsView .settings-tabs {
        transform: translate3d(0, 0, 0) !important;
    }

    #settingsView .settings-profile-entry {
        display: flex !important;
        width: 100% !important;
        min-height: 92px !important;
        margin: 0 0 18px !important;
        padding: 0 8px 18px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    }

    #settingsView .settings-nav-divider {
        display: none !important;
    }

    #settingsView .settings-tabs-pills {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;
    }

    #settingsView .settings-tab-pill {
        display: none !important;
    }

    #settingsView .settings-tabs-pills .settings-tab-btn,
    #settingsView .settings-tabs-pills .settings-tab-btn:hover,
    #settingsView .settings-tabs-pills .settings-tab-btn:focus,
    #settingsView .settings-tabs-pills .settings-tab-btn:focus-visible,
    #settingsView .settings-tabs-pills .settings-tab-btn.active {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
        font-size: 15px !important;
        line-height: 1 !important;
        text-align: left !important;
        transform: none !important;
        transition: background-color 140ms ease, color 140ms ease !important;
    }

    #settingsView .settings-tabs-pills .settings-tab-btn.active {
        background: var(--bg-hover, rgba(255, 255, 255, 0.09)) !important;
        color: var(--text-primary) !important;
    }

    #settingsView .settings-tabs-pills .settings-tab-btn.active::before {
        content: "" !important;
        position: absolute !important;
        top: 10px !important;
        bottom: 10px !important;
        left: 0 !important;
        width: 2px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--accent-color, #f59e0b) !important;
        pointer-events: none !important;
    }

    #settingsView .settings-tabs-pills .settings-tab-btn .tab-icon,
    #settingsView .settings-tabs-pills .settings-tab-btn svg {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    #settingsView .settings-panels {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: calc(66px + var(--mobile-safe-top, 0px)) var(--mobile-gutter, 16px) calc(28px + var(--mobile-safe-bottom, 0px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable !important;
        background: transparent !important;
        z-index: 1 !important;
    }

    #settingsView .settings-tab-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #settingsView .settings-tab-content:not(.active) {
        display: none !important;
    }

    #settingsView .settings-tab-content.active {
        display: block !important;
    }

    /* The main drawer remains an independent gesture-driven layer over Settings. */
    body.settings-open.sidebar-open .sidebar {
        z-index: 6200 !important;
    }

    body.settings-open.sidebar-open .mobile-sidebar-backdrop {
        z-index: 6150 !important;
    }
}

@media (max-width: 420px) {
    #settingsView .settings-panels {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #settingsView .settings-tabs {
        width: min(86vw, 300px) !important;
    }
}

/* Settings owns the phone viewport. Keep the global primary-sidebar trigger
   out of this page so its close action cannot be mistaken for the settings X. */
@media (max-width: 600px) {
    body.settings-open .mobile-sidebar-btn,
    body.settings-open .mobile-sidebar-backdrop {
        display: none !important;
        pointer-events: none !important;
    }

    #settingsView .settings-close-btn {
        display: flex !important;
        position: absolute !important;
        top: calc(10px + var(--mobile-safe-top, 0px)) !important;
        right: calc(10px + var(--mobile-safe-right, 0px)) !important;
        z-index: 40 !important;
        transform: none !important;
    }

    #settingsView .settings-close-btn:hover,
    #settingsView .settings-close-btn:active,
    #settingsView .settings-close-btn:focus-visible {
        transform: none !important;
    }

    #settingsView #settings-tab-appearance .theme-card-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 10px !important;
    }

    #settingsView #settings-tab-appearance .theme-card.theme-card-skeleton {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 5px !important;
        border-radius: 17px !important;
    }

    #settingsView #settings-tab-appearance .theme-card.theme-card-skeleton.active {
        padding: 4px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 24% minmax(0, 1fr) !important;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        border-radius: 12px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-sidebar {
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-dot {
        flex: 0 0 12px !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 2px 0 0 !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-sidebar .theme-skeleton-line {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 5px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-sidebar .theme-skeleton-line-short {
        flex: 0 1 22% !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-main {
        gap: 7px !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-toolbar {
        width: 42% !important;
        height: 6px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-message {
        height: 14px !important;
        border-radius: 5px !important;
    }

    #settingsView #settings-tab-appearance .theme-skeleton-composer {
        height: 18px !important;
        border-radius: 6px !important;
    }
}

/* Login has its own mobile shell: the auth surface never follows the vision scroll. */
@media (max-width: 1100px) {
    html:has(.login-shell),
    body:has(.login-shell) {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    body:has(.login-shell) .login-shell {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        display: block;
    }

    body:has(.login-shell) .brand-panel {
        display: none !important;
    }

    body:has(.login-shell) .auth-panel {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        align-items: flex-start;
    }

    body:has(.login-shell) .login-container {
        width: 100%;
        min-height: 100%;
        align-items: flex-start;
    }

    body:has(.login-shell) .login-card {
        width: 100%;
        max-width: 560px;
        min-height: 0;
        max-height: none;
        height: auto;
        margin: auto;
        padding: 26px 20px 22px;
        overflow: visible;
    }

    body:has(.login-shell) :where(.google-btn, .submit-btn, .tab-btn, .toggle-password) {
        min-height: 46px;
    }

    body:has(.login-shell) :where(.form-group input, .password-input-wrapper input) {
        min-height: 46px;
    }
}

@media (max-width: 480px) {
    body:has(.login-shell) .auth-panel {
        padding-left: 10px;
        padding-right: 10px;
    }

    body:has(.login-shell) .login-card {
        padding: 22px 16px 18px;
        border-radius: 16px;
    }

    body:has(.login-shell) .logo-image {
        width: 78px;
        height: 78px;
    }

    body:has(.login-shell) .logo-section h1 {
        font-size: 28px;
    }
}

/* Keep both auth forms fully visible within the viewport. */
html:has(.login-shell),
body:has(.login-shell),
body:has(.login-shell) .login-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden !important;
}

body:has(.login-shell) .auth-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body:has(.login-shell) .login-container {
    height: 100%;
    min-height: 0;
}

body:has(.login-shell) .login-card {
    max-height: calc(100dvh - 36px);
    min-height: 0;
    overflow: hidden;
    margin: auto;
}

@media (max-width: 1100px) {
    body:has(.login-shell) .auth-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        align-items: center;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    body:has(.login-shell) .login-container {
        height: 100%;
        min-height: 0;
        align-items: center;
    }

    body:has(.login-shell) .login-card {
        max-height: 100%;
    }

    body:has(.login-shell) #signupForm.active {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
    }

    body:has(.login-shell) #signupForm .form-group:first-child,
    body:has(.login-shell) #signupForm .error-message,
    body:has(.login-shell) #signupForm .submit-btn {
        grid-column: 1 / -1;
    }
}

@media (max-height: 760px) {
    body:has(.login-shell) .login-card {
        padding: clamp(10px, 2vh, 16px) clamp(14px, 2.5vw, 22px);
    }

    body:has(.login-shell) .logo-section {
        margin-bottom: clamp(6px, 1.2vh, 10px);
    }

    body:has(.login-shell) .logo-image {
        width: clamp(42px, 7vh, 58px);
        height: clamp(42px, 7vh, 58px);
        margin-bottom: 4px;
    }

    body:has(.login-shell) .logo-section h1 {
        font-size: clamp(21px, 3.2vh, 26px);
        margin-bottom: 2px;
    }

    body:has(.login-shell) .tagline {
        font-size: 12px;
    }

    body:has(.login-shell) .auth-tabs {
        margin-bottom: 8px;
    }

    body:has(.login-shell) .divider {
        margin: 8px 0;
    }

    body:has(.login-shell) .google-btn {
        margin-bottom: 8px;
    }

    body:has(.login-shell) .form-group {
        margin-bottom: 8px;
    }

    body:has(.login-shell) .form-group label {
        margin-bottom: 3px;
        font-size: 12px;
    }

    body:has(.login-shell) :where(.form-group input, .password-input-wrapper input) {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body:has(.login-shell) .submit-btn,
    body:has(.login-shell) .google-btn,
    body:has(.login-shell) .tab-btn {
        min-height: 40px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .sidebar,
    body .mobile-sidebar-btn,
    body #chatSearchWrapper {
        transition-duration: 1ms !important;
    }
}

/* Final mobile chat geometry: the header must not reserve a hidden separator row. */
@media (max-width: 768px) {
    #mainContent {
        display: flex !important;
        flex-direction: column !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #chatHeader,
    #chatHeader.chat-header {
        position: relative !important;
        top: auto !important;
        flex: 0 0 64px !important;
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        box-sizing: border-box !important;
        padding: calc(8px + var(--mobile-safe-top)) 52px 0 !important;
        border: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #chatHeader::before,
    #chatHeader::after,
    #chatHeader.chat-header::before,
    #chatHeader.chat-header::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* The view fills only the space left by the compact header. */
    #chatView {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    #chatView .chat-main-area {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
    }

    /* Keep the left group independent from the mode and overflow controls. */
    #chatHeader .header-left-group,
    #chatView #chatHeader .header-left-group {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 58px !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        pointer-events: none !important;
        transform: none !important;
    }

    #chatHeader .header-left-group > * {
        pointer-events: auto !important;
    }

    #chatHeader .header-back-btn {
        display: none !important;
    }

    #chatHeader #headerModeToggle,
    #chatHeader .header-mode-switch {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: min(238px, calc(100vw - 112px)) !important;
        min-width: min(238px, calc(100vw - 112px)) !important;
        max-width: calc(100vw - 112px) !important;
        height: 42px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    #chatHeader .chat-menu {
        top: calc(8px + var(--mobile-safe-top)) !important;
        right: calc(14px + var(--mobile-safe-right)) !important;
        height: 44px !important;
    }

    /* Search floats over the first message row instead of pushing or clipping it. */
    #chatHeader #chatSearchWrapper {
        position: absolute !important;
        top: calc(66px + var(--mobile-safe-top)) !important;
        left: var(--mobile-gutter) !important;
        right: auto !important;
        z-index: 3060 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #chatHeader #chatSearchWrapper .search-trigger,
    #chatHeader #chatSearchWrapper .search-input-container {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    #chatHeader #chatSearchWrapper.is-open,
    #chatHeader #chatSearchWrapper:focus-within,
    #chatHeader #chatSearchWrapper:not(.collapsed) {
        background: color-mix(in srgb, var(--bg-dark, #20201f) 94%, transparent) !important;
        border-radius: 999px !important;
    }

    #chatHeader #chatSearchWrapper.is-open .search-input-container,
    #chatHeader #chatSearchWrapper:focus-within .search-input-container,
    #chatHeader #chatSearchWrapper:not(.collapsed) .search-input-container {
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--bg-dark, #20201f) 96%, transparent) !important;
    }

    /* Remove the black saved-chat backdrop/tile while keeping outside-tap dismissal. */
    #chatView.chat-sidebar-open::before {
        content: none !important;
        display: none !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    body.sidebar-open .mobile-sidebar-backdrop {
        display: block !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #chatView .chat-sidebar-toggle-btn {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Keep the primary drawer on the left even when older mobile rules are active. */
    body .sidebar,
    body.sidebar-open .sidebar {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }

    body:has(#chatView:not([style*="display: none"])) .mobile-sidebar-btn,
    body:has(#chatView:not([style*="display:none"])) .mobile-sidebar-btn {
        display: flex !important;
        left: calc(12px + var(--mobile-safe-left)) !important;
        right: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.sidebar-open .mobile-sidebar-btn {
        display: none !important;
    }

    /* Fixed composers must not inherit a transformed ancestor or lose to the keyboard. */
    body #chatView .input-container,
    body #chatView .chat-main-area.is-empty .input-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--keyboard-offset, 0px) + var(--mobile-safe-bottom) + 6px) !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 4600 !important;
    }

    body.keyboard-open #chatView .input-container,
    body.keyboard-open #chatView .chat-main-area.is-empty .input-container {
        bottom: calc(var(--keyboard-offset, 0px) + var(--mobile-safe-bottom) + 4px) !important;
    }

    body #chatView .input-container .input-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body #chatView .chat-messages {
        padding-top: 0 !important;
        padding-bottom: calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom)) !important;
        scroll-padding-top: 8px !important;
        scroll-padding-bottom: calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom)) !important;
    }
}

/* Library mobile pass: keep Select beside the search control and keep the file
   grid inside the one scrollable surface. */
@media (max-width: 768px) {
    #libraryView {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #libraryView > .library-header {
        flex: 0 0 auto !important;
        min-height: 82px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) 12px !important;
        box-sizing: border-box !important;
    }

    #libraryView > .library-content {
        position: relative !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px var(--mobile-gutter) calc(20px + var(--mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #libraryView .library-content > #librarySearchBar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        align-self: flex-start !important;
        flex: 0 0 32px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        margin: 0 0 12px !important;
        z-index: 8 !important;
    }

    #libraryView .library-content > #librarySearchBar.is-open,
    #libraryView .library-content > #librarySearchBar:focus-within {
        width: min(224px, calc(100vw - 110px)) !important;
        min-width: min(224px, calc(100vw - 110px)) !important;
        max-width: min(224px, calc(100vw - 110px)) !important;
    }

    #libraryView #librarySelectionToolbar {
        position: absolute !important;
        top: 12px !important;
        right: var(--mobile-gutter) !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        margin: 0 !important;
        z-index: 9 !important;
    }

    #libraryView #librarySelectionToggle {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
    }

    #libraryView #librarySelectionActions {
        max-width: calc(100vw - 28px) !important;
        height: 32px !important;
        min-height: 32px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    #libraryView #librarySelectionActions::-webkit-scrollbar {
        display: none !important;
    }

    #libraryView #documentsGrid {
        display: grid !important;
        flex: 0 0 auto !important;
        align-content: start !important;
        align-items: start !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    #libraryView #documentsGrid > .document-card,
    #libraryView #documentsGrid > .folder-card {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 132px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #libraryView #documentsGrid > .document-card .document-thumbnail {
        width: 100% !important;
        min-height: 132px !important;
        height: 132px !important;
    }

    #libraryView #documentsGrid > .document-card .document-name,
    #libraryView #documentsGrid > .folder-card .document-name {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 560px) and (max-width: 768px) {
    #libraryView #documentsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Study Helper mobile stabilization: one column, one scroll owner, and no
   fixed-width legacy shells fighting with the active module. */
@media (max-width: 768px) {
    #studyHubView[style*="display: block"],
    #studyHubView[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #studyHubView > .library-header {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) 12px !important;
        box-sizing: border-box !important;
    }

    #studyHubView > .library-content {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px var(--mobile-gutter) calc(24px + var(--mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #studyHubView .study-hub-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #studyHubView .study-tool-card {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 104px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active #studyHelperTabBar.browser-tabs-container,
    body.media-workspace-active #mediaTabBar.browser-tabs-container {
        position: relative !important;
        display: flex !important;
        flex: 0 0 56px !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 0 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active #studyHelperTabBar .study-browser-tab-strip,
    body.media-workspace-active #mediaTabBar .study-browser-tab-strip {
        display: flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 56px !important;
        height: 56px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.study-workspace-active #studyHelperTabBar .study-browser-tab-strip::-webkit-scrollbar,
    body.media-workspace-active #mediaTabBar .study-browser-tab-strip::-webkit-scrollbar {
        display: none !important;
    }

    body.study-workspace-active #studyHelperTabBar .browser-tab,
    body.media-workspace-active #mediaTabBar .browser-tab {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    body.study-workspace-active #quizView,
    body.study-workspace-active #noteView,
    body.study-workspace-active #interrogationView,
    body.study-workspace-active #mindMapView {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        min-width: 0 !important;
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) calc(28px + var(--mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active #quizEditor,
    body.study-workspace-active #noteEditor,
    body.study-workspace-active #mindMapView > .new-mm-container,
    body.study-workspace-active #interrogationView > .interrog-shell,
    body.study-workspace-active #interrogationView > .interrog-shell {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active #quizEditor,
    body.study-workspace-active #noteEditor {
        overflow: visible !important;
    }

    body.study-workspace-active .new-mindmap-view,
    body.study-workspace-active .interrog-view {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* These two IDs are also tagged as legacy inner views. Keep their page
       gutter on the outer scroll surface; only their children are reset. */
    body.study-workspace-active #mindMapView,
    body.study-workspace-active #interrogationView {
        padding: calc(14px + var(--mobile-safe-top)) var(--mobile-gutter) calc(28px + var(--mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.study-workspace-active .study-module-header-block {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 0 16px !important;
        padding: 0 0 16px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active .study-module-header-block .header-left {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    body.study-workspace-active .study-module-header-block .header-icon-badge {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 11px !important;
    }

    body.study-workspace-active .study-module-header-block .header-info {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 4px !important;
    }

    body.study-workspace-active .study-module-header-block .header-title {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 21px !important;
        line-height: 1.2 !important;
    }

    body.study-workspace-active .study-module-header-block .header-subtitle {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    body.study-workspace-active .study-module-header-block .header-size-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.study-workspace-active .study-module-header-block .header-size-row::-webkit-scrollbar {
        display: none !important;
    }

    body.study-workspace-active .study-module-header-block .header-size-row > div {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    body.study-workspace-active .study-module-header-block .header-right-mode {
        display: flex !important;
        align-self: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.study-workspace-active .clean-segmented-switch.size-segmented-switch,
    body.study-workspace-active .clean-segmented-switch.control-segmented-switch {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.study-workspace-active .study-input-container-card {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active .study-input-container-card .study-library-picker-wrap {
        position: static !important;
        align-self: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.study-workspace-active .study-upload-dropzone,
    body.study-workspace-active .interrog-drop-zone {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 132px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 20px 14px !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active .study-textarea-input,
    body.study-workspace-active #quizTopicInput,
    body.study-workspace-active #noteTopicInput,
    body.study-workspace-active #interrogTopicInput,
    body.study-workspace-active #newMmPromptInput {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 112px !important;
        max-height: 240px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        resize: vertical !important;
    }

    body.study-workspace-active .study-generate-btn,
    body.study-workspace-active .new-mm-generate,
    body.study-workspace-active #interrogStartBtn {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px !important;
        margin: 14px 0 0 !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active #quizStatusArea,
    body.study-workspace-active #quizResultContainer,
    body.study-workspace-active #noteResultContainer,
    body.study-workspace-active #newMmResultArea {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.study-workspace-active .interrog-session-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    body.study-workspace-active .interrog-main-hub {
        margin-bottom: 24px !important;
    }

    body.study-workspace-active .interrog-question-text {
        max-width: 100% !important;
        font-size: 19px !important;
    }

    body.study-workspace-active .interrog-transcript-container {
        height: 220px !important;
        max-height: 35vh !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* The legacy landing remains a safe fallback for older navigation paths. */
    #learningView[style*="display: block"],
    #learningView[style*="display: flex"] {
        display: flex !important;
        width: 100% !important;
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #learningView .learning-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        gap: 10px !important;
        padding: calc(12px + var(--mobile-safe-top)) var(--mobile-gutter) calc(16px + var(--mobile-safe-bottom)) !important;
        overflow: hidden !important;
    }

    #learningView .learning-sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    #learningView .learning-nav-btn {
        display: inline-flex !important;
        width: auto !important;
        min-height: 44px !important;
    }

    #learningView .learning-main {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 14px var(--mobile-gutter) calc(20px + var(--mobile-safe-bottom)) !important;
    }
}

/* Extend the mobile composer scrim to the viewport edge so the last chat
   lines never show through below the input surface. */
@media (max-width: 768px) {
    body #chatView .input-container {
        isolation: isolate !important;
        overflow: visible !important;
    }

    body #chatView .input-container::before {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: calc(-1 * var(--keyboard-offset, 0px) - var(--mobile-safe-bottom) - 6px) !important;
        left: 0 !important;
        background: color-mix(in srgb, var(--bg-dark, #20201f) 92%, transparent) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        pointer-events: none !important;
    }

    body #chatView .input-container > .input-wrapper {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* Final mobile empty-chat polish: keep the brand clear of the header layer
   and make the Study/Balanced control a centered, readable selector. */
@media (max-width: 768px) {
    #chatView .chat-main-area.is-empty {
        position: relative !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: calc(82px + var(--mobile-safe-top)) var(--mobile-gutter) calc(190px + var(--mobile-safe-bottom)) !important;
        overflow: hidden !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: calc(8px + var(--mobile-safe-top)) 52px 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 30 !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-left-group {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-left-group > * {
        pointer-events: auto !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: min(226px, calc(100vw - 48px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 48px) !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 auto !important;
        padding: 3px !important;
        align-items: center !important;
        justify-content: stretch !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 999px !important;
        background: var(--input-bg) !important;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch .mode-switch-btn {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        color: var(--text-secondary) !important;
        font-size: 13.5px !important;
        font-weight: 650 !important;
        z-index: 2 !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch .mode-switch-btn.selected {
        color: var(--accent-text) !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch .segmented-switch-pill {
        top: 3px !important;
        left: 3px !important;
        width: calc((100% - 6px) / 2) !important;
        height: 36px !important;
        border-radius: 999px !important;
        background: var(--accent-color) !important;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 34%, transparent) !important;
        z-index: 1 !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch[data-active="study"] .segmented-switch-pill {
        transform: translateX(0) !important;
    }

    #chatView .chat-main-area.is-empty #chatHeader .header-mode-switch[data-active="balanced"] .segmented-switch-pill {
        /* The pill already starts at left: 3px; move it by exactly one
           segment so the right edge keeps the same 3px inset. */
        transform: translateX(100%) !important;
    }

    #chatView .chat-main-area.is-empty #chatMessages {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 680px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    #chatView .chat-main-area.is-empty #chatMessages .empty-chat-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 680px !important;
        min-width: 0 !important;
    }

    #chatView .chat-main-area.is-empty .empty-chat-logo {
        position: relative !important;
        z-index: 31 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 88px !important;
        height: 88px !important;
        margin: 0 auto 16px !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

#chatView .chat-main-area.is-empty .empty-chat-logo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* Final cascade guard: later chat-specific mobile rules must not bring the
   primary sidebar trigger back over the full-screen settings page. */
@media (max-width: 600px) {
    body.settings-open .mobile-sidebar-btn,
    body.settings-open .mobile-sidebar-backdrop {
        display: none !important;
        pointer-events: none !important;
    }
}

/* The visual viewport already shrinks when the phone keyboard opens. Anchor
   the composer to the chat surface instead of adding the keyboard height a
   second time, which could push the input completely off-screen on focus. */
@media (max-width: 768px) {
    #chatView,
    #chatView .chat-main-area {
        height: var(--app-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #chatView .chat-main-area {
        position: relative !important;
        overflow: hidden !important;
    }

    body #chatView .input-container,
    body #chatView .chat-main-area.is-empty .input-container {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--mobile-safe-bottom, 0px) + 6px) !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 4600 !important;
    }

    body.keyboard-open #chatView .input-container,
    body.keyboard-open #chatView .chat-main-area.is-empty .input-container {
        bottom: calc(var(--mobile-safe-bottom, 0px) + 4px) !important;
    }

    body #chatView .chat-messages,
    body #chatView .chat-main-area.is-empty #chatMessages {
        padding-bottom: calc(184px + var(--mobile-safe-bottom, 0px)) !important;
        scroll-padding-bottom: calc(184px + var(--mobile-safe-bottom, 0px)) !important;
    }

    #chatView .chat-main-area.is-empty #chatMessages {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-height: 0 !important;
    }

    #chatView .chat-main-area.is-empty #chatMessages .empty-chat-layout {
        flex: 0 0 auto !important;
        justify-content: center !important;
    }

    /* Remove the legacy secondary-chat toggle from mobile. The primary
       navigation remains available through the left-side menu/gesture. */
    #chatView > .chat-sidebar-toggle-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Keep the textarea bottom-anchored: every extra line grows upward until
       the shared JS limit, then the textarea itself becomes scrollable. */
    #chatView .chat-input-area #chatInput {
        height: var(--logicum-chat-input-height, 40px) !important;
        min-height: 40px !important;
        max-height: 220px !important;
        box-sizing: border-box !important;
        overflow-y: hidden !important;
    }

    #chatView .chat-input-area #chatInput.logicum-input-scrollable {
        overflow-y: auto !important;
    }
}

/* Keyboard-open empty state: make room for the persistent header, then keep
   the greeting comfortably above the composer. The browser owns the keyboard
   animation; this layer deliberately has no competing CSS transition. */
@media (max-width: 768px) {
    body #chatView .input-container,
    body #chatView .chat-main-area.is-empty .input-container {
        transition: none !important;
        will-change: auto !important;
    }

    body.keyboard-open #chatView .chat-main-area.is-empty #chatMessages {
        justify-content: center !important;
        padding-top: 52px !important;
        padding-bottom: calc(162px + var(--mobile-safe-bottom, 0px)) !important;
    }

    body.keyboard-open #chatView .chat-main-area.is-empty #chatMessages .empty-chat-layout {
        transform: translate3d(0, var(--logicum-empty-keyboard-shift, 32px), 0) !important;
        transition: none !important;
        will-change: transform;
    }

    body.keyboard-open #chatView .chat-main-area.is-empty .empty-chat-logo {
        width: 72px !important;
        height: 72px !important;
        margin-bottom: 12px !important;
    }

    body.keyboard-open #chatView .chat-main-area.is-empty .empty-chat-title {
        font-size: clamp(21px, 6.4vw, 27px) !important;
        line-height: 1.2 !important;
    }

    body.keyboard-open #chatView .chat-main-area.is-empty .empty-chat-subtitle {
        margin-top: 8px !important;
    }
}

/* One mobile geometry for the header mode control. After the first message
   the empty-chat selectors no longer match, so keeping the switch inside the
   right-side menu made its pill inherit desktop measurements. Make the menu a
   transparent positioning layer and anchor each control to the header itself. */
@media (max-width: 768px) {
    #chatHeader .chat-menu,
    #chatView #chatHeader .chat-menu {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        pointer-events: none !important;
        z-index: 3002 !important;
    }

    #chatHeader .chat-menu .header-mode-switch,
    #chatView #chatHeader .chat-menu .header-mode-switch,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch {
        position: absolute !important;
        top: calc(8px + var(--mobile-safe-top, 0px)) !important;
        left: 50% !important;
        right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
        width: min(226px, calc(100vw - 112px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 112px) !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 3px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 999px !important;
        background: var(--input-bg) !important;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        transform: translate3d(-50%, 0, 0) !important;
        pointer-events: auto !important;
    }

    #chatHeader .chat-menu .header-mode-switch .mode-switch-btn,
    #chatView #chatHeader .chat-menu .header-mode-switch .mode-switch-btn,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch .mode-switch-btn {
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        color: var(--text-secondary) !important;
        font-size: 13.5px !important;
        font-weight: 650 !important;
        z-index: 2 !important;
    }

    #chatHeader .chat-menu .header-mode-switch .mode-switch-btn.selected,
    #chatView #chatHeader .chat-menu .header-mode-switch .mode-switch-btn.selected,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch .mode-switch-btn.selected {
        color: var(--accent-text) !important;
    }

    #chatHeader .chat-menu .header-mode-switch .segmented-switch-pill,
    #chatView #chatHeader .chat-menu .header-mode-switch .segmented-switch-pill,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch .segmented-switch-pill {
        top: 3px !important;
        left: 3px !important;
        width: calc((100% - 6px) / 2) !important;
        height: 36px !important;
        border-radius: 999px !important;
        background: var(--accent-color) !important;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 34%, transparent) !important;
        z-index: 1 !important;
    }

    #chatHeader .chat-menu .header-mode-switch[data-active="study"] .segmented-switch-pill,
    #chatView #chatHeader .chat-menu .header-mode-switch[data-active="study"] .segmented-switch-pill,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch[data-active="study"] .segmented-switch-pill {
        transform: translate3d(0, 0, 0) !important;
    }

    #chatHeader .chat-menu .header-mode-switch[data-active="balanced"] .segmented-switch-pill,
    #chatView #chatHeader .chat-menu .header-mode-switch[data-active="balanced"] .segmented-switch-pill,
    #chatView .chat-main-area.is-empty #chatHeader .chat-menu .header-mode-switch[data-active="balanced"] .segmented-switch-pill {
        transform: translate3d(100%, 0, 0) !important;
    }

    #chatHeader .chat-menu .menu-btn,
    #chatView #chatHeader .chat-menu .menu-btn {
        position: absolute !important;
        top: calc(14px + var(--mobile-safe-top, 0px)) !important;
        right: calc(14px + var(--mobile-safe-right, 0px)) !important;
        pointer-events: auto !important;
    }

    #chatHeader .chat-menu .chat-menu-dropdown,
    #chatView #chatHeader .chat-menu .chat-menu-dropdown {
        position: absolute !important;
        top: calc(54px + var(--mobile-safe-top, 0px)) !important;
        right: calc(12px + var(--mobile-safe-right, 0px)) !important;
        pointer-events: auto !important;
    }
}