/* Mobile refinement layer. Loaded after each page's local styles so the
   responsive shell stays consistent without changing page behaviour. */
.tools-mobile-menu-button,
.tools-mobile-nav,
.tools-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 820px) {
    :root {
        --mobile-gutter: 12px;
        --mobile-topbar: 56px;
        --mobile-control: 42px;
        --mobile-radius: 12px;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.has-sidebar:not(.gpt-page) {
        padding: 0 !important;
        background: #f5f7fa;
    }

    body.has-sidebar:not(.gpt-page) .sidebar {
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--mobile-topbar) !important;
        padding: 0 var(--mobile-gutter) !important;
        border: 0 !important;
        border-bottom: 1px solid #e8edf3 !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 3px 16px rgba(15, 23, 42, .06) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 500;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-top {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-logo {
        width: auto !important;
        height: 40px !important;
        margin: 0 !important;
        gap: 9px !important;
        color: #172033 !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-logo svg,
    body.has-sidebar:not(.gpt-page) .sidebar-logo img {
        width: 30px !important;
        height: 30px !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-brand-name {
        display: block !important;
        color: #172033;
        font-size: .9rem;
        font-weight: 800;
        white-space: nowrap;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-bottom {
        display: none !important;
    }

    body.has-sidebar:not(.gpt-page) .home-mobile-menu-button,
    body.has-sidebar:not(.gpt-page) .admin-mobile-menu-button,
    body.has-sidebar:not(.gpt-page) .tools-mobile-menu-button {
        display: grid !important;
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px;
        place-items: center;
        padding: 0 !important;
        border: 1px solid #dfe6ee !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #344054 !important;
        cursor: pointer;
    }

    body.has-sidebar:not(.gpt-page) .home-mobile-menu-button svg,
    body.has-sidebar:not(.gpt-page) .admin-mobile-menu-button svg,
    body.has-sidebar:not(.gpt-page) .tools-mobile-menu-button svg {
        width: 20px;
        height: 20px;
    }

    body.has-sidebar:not(.gpt-page) .home-mobile-menu-button .menu-close-icon,
    body.has-sidebar:not(.gpt-page) .admin-mobile-menu-button .menu-close-icon,
    body.has-sidebar:not(.gpt-page) .tools-mobile-menu-button .menu-close-icon {
        display: none !important;
    }

    body.has-sidebar:not(.gpt-page).mobile-menu-open .home-mobile-menu-button .menu-open-icon,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .admin-mobile-menu-button .menu-open-icon,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .tools-mobile-menu-button .menu-open-icon {
        display: none !important;
    }

    body.has-sidebar:not(.gpt-page).mobile-menu-open .home-mobile-menu-button .menu-close-icon,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .admin-mobile-menu-button .menu-close-icon,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .tools-mobile-menu-button .menu-close-icon {
        display: block !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-nav {
        position: fixed !important;
        top: 64px !important;
        right: var(--mobile-gutter) !important;
        left: auto !important;
        display: none !important;
        width: min(286px, calc(100% - 24px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 76px);
        overflow: auto;
        padding: 8px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        border: 1px solid #e1e7ef !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .16) !important;
        z-index: 502;
    }

    body.tools-page .tools-mobile-nav {
        position: fixed;
        top: 64px;
        right: var(--mobile-gutter);
        z-index: 502;
        display: none;
        width: min(286px, calc(100% - 24px));
        max-height: calc(100dvh - 76px);
        overflow: auto;
        padding: 8px;
        border: 1px solid #e1e7ef;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    }

    body.tools-page.mobile-menu-open .tools-mobile-nav {
        display: grid;
        gap: 4px;
    }

    body.tools-page .tools-mobile-nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 9px;
        color: #475467;
        font-size: .84rem;
        font-weight: 700;
        text-decoration: none;
    }

    body.tools-page .tools-mobile-nav a:hover,
    body.tools-page .tools-mobile-nav a:focus-visible {
        background: #eef2ff;
        color: #4338ca;
    }

    body.has-sidebar:not(.gpt-page).mobile-menu-open .sidebar-nav {
        display: flex !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
        color: #475467 !important;
        font-size: .84rem;
        font-weight: 700;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link svg,
    body.has-sidebar:not(.gpt-page) .sidebar-link img {
        flex: 0 0 20px;
        width: 20px !important;
        height: 20px !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link-label {
        display: block !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link.active {
        background: #f3f4f6 !important;
        color: #667085 !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link::after,
    body.has-sidebar:not(.gpt-page) .sidebar-user-btn::after {
        display: none !important;
    }

    body.has-sidebar:not(.gpt-page) .home-mobile-menu-backdrop,
    body.has-sidebar:not(.gpt-page) .admin-mobile-menu-backdrop,
    body.has-sidebar:not(.gpt-page) .tools-mobile-menu-backdrop {
        position: fixed !important;
        inset: var(--mobile-topbar) 0 0 !important;
        display: none;
        width: 100% !important;
        height: calc(100dvh - var(--mobile-topbar)) !important;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(15, 23, 42, .28) !important;
        cursor: default;
        z-index: 499;
    }

    body.has-sidebar:not(.gpt-page).mobile-menu-open .home-mobile-menu-backdrop,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .admin-mobile-menu-backdrop,
    body.has-sidebar:not(.gpt-page).mobile-menu-open .tools-mobile-menu-backdrop {
        display: block;
    }

    body.has-sidebar:not(.gpt-page) .page-content {
        width: 100% !important;
        min-height: calc(100dvh - var(--mobile-topbar));
        margin-left: 0 !important;
        padding-top: var(--mobile-topbar) !important;
    }

    body.home-page .page-content > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px var(--mobile-gutter) 30px !important;
    }

    body.home-page .topbar {
        min-height: 38px;
        padding: 2px 0 8px !important;
    }

    body.home-page .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }

    body.home-page .main {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.home-page .form-section,
    body.home-page .preview-section .preview-empty,
    body.home-page .preview-section .preview-content {
        padding: 16px !important;
        border: 1px solid #e9edf2;
        border-radius: var(--mobile-radius) !important;
        box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
    }

    body.home-page .task-options {
        gap: 7px !important;
    }

    body.home-page .task-opt {
        min-height: 40px !important;
        padding: 8px 9px !important;
        border-radius: 9px;
        font-size: .82rem !important;
    }

    body.home-page .select,
    body.home-page .textarea,
    body.home-page .sf-input,
    body.home-page select,
    body.home-page textarea,
    body.home-page input[type="text"] {
        font-size: 16px !important;
    }

    body.home-page .upload {
        border-radius: 11px;
    }

    body.home-page .upload-empty {
        min-height: 154px;
        padding: 24px 14px !important;
    }

    body.home-page .btn-submit {
        min-height: 44px;
        border-radius: 10px;
    }

    /* Studio: make the first action area scan like a compact mobile tool. */
    body.home-page .studio-page-heading {
        gap: 5px !important;
        margin-bottom: 12px !important;
    }

    body.home-page .studio-page-heading h2 {
        font-size: 1.18rem !important;
        line-height: 1.3;
    }

    body.home-page .studio-page-heading p {
        max-width: 32em;
        font-size: .76rem;
        line-height: 1.45;
    }

    body.home-page .studio-page-nav-row {
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    body.home-page .studio-page-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    body.home-page .studio-page-action {
        min-width: 0;
        min-height: 38px;
        padding: 0 8px;
        border-radius: 9px;
        font-size: .74rem;
    }

    body.home-page .studio-mobile-mode {
        margin-bottom: 12px !important;
    }

    body.home-page .studio-mobile-mode select,
    body.home-page .size-mode-mobile select {
        min-height: var(--mobile-control);
        border-radius: 9px;
        font-weight: 700;
    }

    body.home-page .studio-layout {
        gap: 12px !important;
    }

    body.home-page .studio-panel,
    body.home-page .studio-preview {
        border-radius: var(--mobile-radius) !important;
    }

    body.home-page .studio-panel {
        padding: 14px !important;
        box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
    }

    body.home-page .sf-label {
        font-size: .75rem;
    }

    body.home-page .sf-input,
    body.home-page .sf-textarea,
    body.home-page .sf-select {
        border-radius: 9px;
    }

    body.home-page .sf-textarea {
        min-height: 132px;
    }

    body.home-page .sf-submit {
        min-height: 44px;
        border-radius: 10px;
    }

    /* Admin: compact the overview while keeping every action reachable. */
    body.has-sidebar:not(.gpt-page) .admin-header {
        gap: 9px !important;
        margin-bottom: 14px !important;
    }

    body.has-sidebar:not(.gpt-page) .admin-header h1 {
        font-size: 1.18rem !important;
    }

    body.has-sidebar:not(.gpt-page) .admin-header p {
        font-size: .75rem;
    }

    body.has-sidebar:not(.gpt-page) .admin-header .btn {
        min-height: 40px;
        border-radius: 9px;
    }

    body.has-sidebar:not(.gpt-page) .stats-row {
        gap: 7px !important;
        margin-bottom: 13px !important;
    }

    body.has-sidebar:not(.gpt-page) .stat-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    body.has-sidebar:not(.gpt-page) .stat-val {
        font-size: 1.22rem !important;
    }

    body.has-sidebar:not(.gpt-page) .image-lane-board {
        margin-bottom: 14px !important;
        border-radius: 11px !important;
    }

    body.has-sidebar:not(.gpt-page) .image-lane-board-head {
        padding: 13px !important;
    }

    body.has-sidebar:not(.gpt-page) .image-lane-board-head strong {
        font-size: .88rem;
    }

    body.has-sidebar:not(.gpt-page) .image-lane-grid {
        gap: 8px !important;
        padding: 10px !important;
    }

    body.has-sidebar:not(.gpt-page) .image-lane-card {
        min-width: 0;
        padding: 10px !important;
        border-radius: 9px !important;
    }

    body.has-sidebar:not(.gpt-page) .sub-card {
        margin-bottom: 10px !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    body.has-sidebar:not(.gpt-page) .sub-actions button,
    body.has-sidebar:not(.gpt-page) .sub-actions a {
        min-height: 38px !important;
        border-radius: 8px;
    }

    /* Tools: keep the operation surface full width below the mobile header. */
    body.tools-page .tools-container {
        width: 100% !important;
        padding: 14px var(--mobile-gutter) 30px !important;
    }

    body.tools-page .tools-header {
        gap: 4px !important;
        margin-bottom: 13px !important;
    }

    body.tools-page .tools-header h1 {
        font-size: 1.18rem !important;
    }

    body.tools-page .tools-header p {
        font-size: .75rem;
    }

    body.tools-page .tools-count {
        font-size: .7rem;
    }

    body.tools-page .tools-workspace,
    body.tools-page .tools-workspace.pdf-active,
    body.tools-page .tools-workspace.sif-active {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.tools-page .tool-operations,
    body.tools-page .tool-catalog {
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 11px !important;
    }

    body.tools-page .tool-panel-title {
        margin-bottom: 13px;
    }

    body.tools-page .tool-field {
        margin-bottom: 12px;
    }

    body.tools-page .tool-input,
    body.tools-page .tool-select {
        min-height: var(--mobile-control);
        font-size: 16px;
        border-radius: 9px;
    }

    body.tools-page .tool-actions {
        grid-template-columns: minmax(0, 1fr) minmax(70px, .32fr);
    }

    body.tools-page .tool-grid {
        gap: 8px;
        padding: 12px 0 0;
    }

    body.tools-page .tool-card {
        min-height: 92px;
        padding: 12px;
        border-radius: 10px;
    }

    /* Chat: reserve a predictable input area and reduce top chrome. */
    body.gpt-page .gpt-topbar {
        min-height: 56px !important;
        padding: 0 10px !important;
    }

    body.gpt-page .gpt-model-switch {
        max-width: calc(100vw - 72px);
        padding: 6px 7px;
        font-size: .9rem;
    }

    body.gpt-page .gpt-messages {
        width: calc(100% - 20px) !important;
        padding: 16px 0 136px !important;
    }

    body.gpt-page .gpt-composer-wrap {
        padding: 7px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    }

    body.gpt-page .gpt-context-meter {
        width: min(164px, 100%);
    }

    body.gpt-page .gpt-composer {
        width: 100%;
        border-radius: 18px;
    }

    body.gpt-page .gpt-textarea {
        min-height: 42px;
        font-size: 16px !important;
    }

    body.gpt-page .gpt-upload-dialog,
    body.gpt-page .gpt-file-preview-dialog {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 480px) {
    body.has-sidebar:not(.gpt-page) .page-content {
        padding-top: var(--mobile-topbar) !important;
    }

    body.home-page .page-content > .container,
    body.tools-page .tools-container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.has-sidebar:not(.gpt-page) .sidebar-link {
        min-height: 42px !important;
        height: 42px !important;
    }
}