/* Phone and tablet layouts. Desktop styles stay in their existing modules. */
@media (max-width: 980px) {
    .medgpt-body { min-height: 100dvh; }
    .qa-shell { height: var(--mobile-viewport-height, 100dvh); min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
    .qa-statusbar { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; }
    .qa-session-meta { flex: 1; flex-wrap: wrap; gap: 3px 12px; white-space: normal; }
    .qa-session-meta > span { overflow: visible; overflow-wrap: anywhere; }
    .qa-header-actions { flex-shrink: 0; }
    .qa-header-button { min-height: 44px; }
    .app-body, .nav-collapsed .app-body {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 52px minmax(0, 1fr);
        overflow: hidden;
        transition: none;
    }
    .app-nav, .nav-collapsed .app-nav {
        z-index: 30;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        overflow: hidden;
    }
    .app-nav > a, .app-nav > .app-nav-settings { display: none; }
    .app-nav > a.active:not(.app-nav-logo) { display: flex; grid-column: 2; grid-row: 1; }
    .app-nav .app-nav-toggle { width: 44px; height: 44px; margin: 0; grid-column: 1; grid-row: 1; }
    .app-nav > .app-nav-settings { display: flex; grid-column: 3; grid-row: 1; margin: 0; padding: 0; justify-content: center; }
    .app-nav > .app-nav-settings .nav-item-label { display: none; }
    .app-nav .nav-item-label { display: block; }
    .app-nav > a, .app-nav-settings { min-height: 44px; }
    .mobile-nav-open .app-nav {
        position: absolute;
        inset: 0 auto 0 0;
        width: min(280px, calc(100% - 44px));
        box-sizing: border-box;
        display: flex;
        align-items: stretch;
        overflow-y: auto;
        scrollbar-gutter: stable;
        padding: 8px;
        box-shadow: var(--app-modal-shadow);
    }
    .mobile-nav-open .app-nav > a:not([hidden]),
    .mobile-nav-open .app-nav > .app-nav-settings { display: flex; justify-content: flex-start; padding: 0 10px; flex-shrink: 0; }
    .mobile-nav-open .app-nav .nav-item-label { display: block; }
    .mobile-nav-open .app-nav > .app-nav-settings { margin-top: auto; }
    .mobile-nav-open .app-nav > .app-nav-logo { padding: 8px; }
    .mobile-nav-open .app-body::after { content: ""; position: absolute; inset: 0; z-index: 29; background: rgba(10, 25, 40, .55); }
    .welcome-page { overflow-y: auto; padding: 20px; }
    .welcome-panel { width: 100%; padding: 0; transform: none; }
    .welcome-panel h1 { overflow-wrap: anywhere; }
    .panel-splitter { display: none; }
    .app-page { min-width: 0; min-height: 0; }

    .report-workspace { display: block; overflow-y: auto; scrollbar-gutter: stable; padding: 8px; }
    .report-source-panel { height: clamp(180px, 30dvh, 300px); min-height: 0; margin-bottom: 10px; }
    .report-output-panel { min-height: 300px; overflow: visible; }
    .report-output-tabs-bar { min-height: 0; padding: 4px 0 0; }
    .report-output-tabs { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; }
    .report-output-tabs button { flex: 1 1 140px; height: auto; min-height: 48px; font-size: 13px; padding: 8px !important; }
    .report-output-tabs button span { white-space: normal; overflow-wrap: anywhere; }
    .report-output-tabs button svg { display: none; }
    .report-tab-view.active { display: block; overflow: visible; }
    .parsed-report, #quality-output { overflow: visible; padding: 10px 0; scrollbar-gutter: auto; }
    .parsed-report .report-card { min-width: 0; }
    .report-field, .medical-coding-table td { overflow-wrap: anywhere; }
    .medical-coding-table { table-layout: auto; }
    .medical-coding-table:has(th:nth-child(4)) { min-width: 480px; }
    .medical-coding-table :is(th, td):not(:first-child) { overflow-wrap: normal; }
    .medical-coding-table th { overflow-wrap: normal; }
    .quality-landmark-panel { overflow-x: auto; }
    .quality-landmark-panel table { table-layout: auto; }
    .quality-landmark-panel th { overflow-wrap: normal; }
    .medical-coding-table th:first-child, .medical-coding-table td:first-child { width: 55%; }
    .medical-coding-table label { padding: 6px 0; }
    .gi-results-grid { grid-template-columns: minmax(0, 1fr); }
    .gi-scoring-output { --gi-actions-width: 108px; }
    .gi-detail-button { width: 36px; height: 40px; }
    .gi-criteria-dialog { box-sizing: border-box; }
    .gi-criteria-dialog .sidebar-settings-heading { align-items: flex-start; }
    .gi-criteria-dialog h2 { overflow-wrap: anywhere; }
    .report-progress { position: fixed; right: 8px; bottom: max(12px, env(safe-area-inset-bottom)); width: 120px; }
    .report-progress img { width: 56px; height: 56px; }

    .qa-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; gap: 8px; padding: 8px; }
    .qa-sidebar { display: block; min-height: 0; max-height: calc(var(--mobile-viewport-height, 100dvh) * .28); overflow-y: auto; scrollbar-gutter: stable; padding: 8px; }
    .qa-brand { display: none; }
    .qa-sidebar .docs-panel { margin-top: 8px; }
    .qa-sidebar .doc-list { max-height: 120px; overflow-y: auto; }
    .qa-sidebar .panel-heading h2 { font-size: 15px; }
    .qa-chat-panel { min-height: 0; }
    .qa-chat-history { min-height: 0; padding: 10px; }
    .qa-composer { grid-template-columns: minmax(0, 1fr) 44px 44px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); gap: 6px; }
    .qa-composer-integration { grid-template-columns: minmax(0, 1fr) 44px; }
    .qa-send, .composer-icon-button { width: 44px; height: 44px; }
    .qa-composer textarea { min-width: 0; }
    .message-bubble { max-width: 100%; overflow-wrap: anywhere; }
    .message-bubble pre { max-width: 100%; overflow-x: auto; }
    .message-bubble table { display: block; max-width: 100%; overflow-x: auto; }
    .qa-answer-overlay { right: 12px; bottom: 80px; width: 64px; height: 64px; }
    .qa-loading-inner { box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; }
    .endospeech-widget[data-placement="floating"] { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); }

    .image-capture-workspace { display: flex; flex-direction: column; overflow-y: auto; scrollbar-gutter: stable; padding: 8px; }
    .capture-camera-stage { flex: 0 0 auto; min-height: 0; width: 100%; aspect-ratio: 4 / 3; box-sizing: border-box; }
    .capture-side-panel { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; overflow: visible; }
    .capture-button { order: 0; flex-shrink: 0; }
    .capture-entry-box { order: 1; }
    .capture-list { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; scrollbar-gutter: auto; }
    .capture-card { min-width: 0; margin: 0; }
    .capture-label-field, .capture-location-field { height: 32px; line-height: 1.3; }
    .capture-label-popup { right: 12px; top: 12px; width: min(300px, calc(100% - 24px)); box-sizing: border-box; }
    .capture-mic-indicator { pointer-events: auto; cursor: pointer; width: 44px; height: 44px; padding: 6px 10px; box-sizing: border-box; border-radius: 8px; }
    .capture-mic-indicator:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
    .embedded-app-page { padding: 8px; }

    #sidebar-settings-dialog { width: calc(100% - 16px); height: calc(var(--mobile-viewport-height, 100dvh) - 16px); max-height: calc(var(--mobile-viewport-height, 100dvh) - 16px); }
    #sidebar-settings-dialog > .sidebar-settings-panel { padding: 12px; }

    #sidebar-settings-dialog .settings-card { overflow: visible; scrollbar-gutter: auto; padding: 12px; }
    #sidebar-settings-dialog .settings-card label { min-height: 36px; }
    #settings-general-panel .settings-preference-row select { height: 44px; padding: 6px; }
    .settings-tabs { margin: 12px 0; }
    #sidebar-settings-dialog .sidebar-settings-actions button { height: 44px; }
    #sidebar-settings-confirm { height: min(260px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); box-sizing: border-box; }
    #sidebar-settings-confirm h2 { height: auto; overflow: visible; }
    #sidebar-settings-confirm p { overflow: visible; }
    #sidebar-settings-confirm .sidebar-settings-actions button { min-width: 0; height: auto; min-height: 48px; overflow: visible; }
    .shortcuts-table { min-width: 0; }
    .admin-commands .commands-table { min-width: 0; }
    .shortcuts-table thead { display: none; }
    .shortcuts-table, .shortcuts-table tbody { display: block; }
    .shortcuts-table tr { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
    .shortcuts-table th, .shortcuts-table td { display: block; width: auto; box-sizing: border-box; }
    .shortcuts-table input { min-width: 0; box-sizing: border-box; }
    .shortcut-row-actions { display: flex !important; flex-wrap: wrap; gap: 8px; white-space: normal; }
    .shortcut-row-actions button { flex: 1; width: auto; height: auto; min-height: 44px; }
    .command-cell-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
    .settings-tabs:has(#settings-endospeech-tab) { height: auto; min-height: 48px; }
    #sidebar-settings-dialog .settings-tabs:has(#settings-endospeech-tab) button { flex: 1 1 0; min-width: 0; height: 56px; min-height: 56px; padding: 4px 6px; white-space: normal; line-height: 1.2; }

    html:has(.auth-body) { scrollbar-gutter: stable; }
    .auth-shell { min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); overflow: visible; }
    .auth-brand-panel { padding: 68px 20px 24px; }
    .auth-logo { width: 180px; }
    .auth-form-panel { min-height: 0; padding: 24px 20px 30px; gap: 24px; }
    .auth-footer.auth-translation-box { height: auto; flex-wrap: wrap; }
    .auth-footer.auth-translation-box span { white-space: normal; overflow: visible; }
    .auth-copy h2.auth-translation-box { height: auto; white-space: normal; overflow: visible; }
    .auth-language-control { right: 16px; top: 12px; }
    .auth-language-control select { height: 40px; }
    .auth-links:is(.auth-text-links, .single) :is(a, button) { display: inline-block; min-height: 36px; align-content: center; }
    .auth-version, .qa-version { pointer-events: none; }
    .admin-content { padding: 10px 8px 24px; }
    .admin-panel { padding: 12px; }
    .admin-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-url-field { grid-template-columns: minmax(0, 1fr) 44px; }
    .admin-web-app-url { grid-template-columns: 18px minmax(0, 1fr) 44px; }
    .admin-reset-url, .admin-urls input { height: 44px; }
    .admin-reset-url { width: 44px; }
    .admin-options label { min-height: 44px; }

    /* Avoid mobile input zoom and keep editing controls readable. */
    .auth-form input, .medgpt-body textarea, .medgpt-body input:not([type="checkbox"]):not([type="radio"]),
    .medgpt-body select, .procedure-field { font-size: 16px; }
}

@media (max-width: 600px) {
    #sidebar-settings-dialog .settings-tabs:has(#settings-voice-cheatsheet-tab) { grid-template-rows: repeat(2, 56px); height: 116px; }
}

@media (max-width: 480px) {
    .qa-sidebar { max-height: calc(var(--mobile-viewport-height, 100dvh) * .24); }
    .qa-session-meta { font-size: 12px; }
    .qa-composer textarea { min-height: 64px; padding-inline: 10px; }
    .admin-header { flex-wrap: wrap; }
    .admin-header h1, .admin-header .qa-header-actions { flex-basis: 100%; }
    .admin-header .qa-header-actions form { flex: 1; min-width: 0; }
    .admin-header .qa-header-button { width: 100%; padding: 6px 8px; overflow-wrap: anywhere; }
}

@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
    .image-capture-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 30%); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
    .capture-camera-stage { height: 100%; aspect-ratio: auto; }
    .capture-side-panel { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
    .capture-entry-box textarea { min-height: 56px; max-height: 80px; }
    .capture-list { overflow-y: auto; scrollbar-gutter: stable; }
}

@media (max-width: 980px) and (max-height: 500px) {
    .qa-sidebar { max-height: 100px; }
    .auth-brand-panel { padding: 20px; }
    .auth-logo { width: 120px; }
    .auth-body:has(.auth-language-control) .auth-brand-panel { padding-top: 60px; }
}