/* Mobile web shell. Phone rules follow responsive.css; shared banners come first. */

/* ── Connection / update banners ─────────────────────────────────────── */
/* Not phone-only: a desktop tab can lose its connection or outlive a deploy
   too. They are transient overlays, never part of the layout flow. */

.mk-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-modal) + 1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: calc(var(--space-2) + var(--safe-area-top)) calc(var(--space-3) + var(--safe-area-right))
        var(--space-2) calc(var(--space-3) + var(--safe-area-left));
    font-size: var(--font-sm);
    line-height: 1.35;
    box-shadow: var(--shadow-2);
}

.mk-banner[hidden] {
    display: none;
}

.mk-banner .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mk-banner > span {
    flex: 1 1 auto;
    min-width: 0;
}

.mk-banner--offline {
    background: var(--warning-bg, var(--bg-secondary));
    color: var(--warning-text, var(--text-primary));
    border-bottom: 1px solid var(--warning-border, var(--border-color));
}

.mk-banner--update {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-bottom: 1px solid var(--border-color);
}

.mk-banner__action {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-pill);
    background: var(--accent-color);
    color: var(--accent-contrast);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.mk-banner__action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mk-banner__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mk-banner__close:hover {
    background: var(--hover-overlay);
}

.mk-banner__close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mk-banner__close .icon {
    width: 16px;
    height: 16px;
}

/* ── Phone chrome ─────────────────────────────────────────────────────── */

/* The bottom navigation is only for the browser/web app. A packaged Desktop
   window is never a phone; hide it there even if the window is narrow. */
.mk-mobile-nav {
    display: none;
}

/* "Best on a larger screen" notices are a phone-only affordance. */
.mk-mobile-notice {
    display: none;
}

@media (max-width: 768px) {
    :root {
        /* Height of the fixed bottom navigation, excluding the safe-area inset. */
        --mk-mobile-nav-h: var(--mobile-nav-height);
    }

    .mk-mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-mobile-nav);
        padding: 0 var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        box-shadow: var(--shadow-2);
    }

    .desktop-mode .mk-mobile-nav,
    .mk-mobile-nav[hidden] {
        display: none;
    }

    .mk-mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: var(--mk-mobile-nav-h);
        padding: var(--space-1) 2px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: var(--font-xs);
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mk-mobile-nav__item .icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mk-mobile-nav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mk-mobile-nav__item.is-active {
        color: var(--accent-text);
    }

    .mk-mobile-nav__item.is-active::after {
        content: "";
        position: absolute;
        top: 0;
        width: 28px;
        height: 2px;
        border-radius: var(--radius-pill);
        background: var(--accent-color);
    }

    .mk-mobile-nav__item {
        position: relative;
    }

    .mk-mobile-nav__item:focus-visible {
        outline: none;
        box-shadow: inset var(--focus-ring);
        border-radius: var(--radius-sm);
    }

    /* ── More sheet ──────────────────────────────────────────────────── */

    .mk-mobile-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-mobile-nav) + 1);
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        max-height: min(70dvh, 34rem);
        max-height: min(70vh, 34rem);
        padding: var(--space-3) calc(var(--space-3) + var(--safe-area-right))
            calc(var(--space-3) + var(--safe-area-bottom))
            calc(var(--space-3) + var(--safe-area-left));
        overflow-y: auto;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: var(--shadow-3);
    }

    .mk-mobile-sheet[hidden] {
        display: none;
    }

    .mk-mobile-sheet__handle {
        width: 40px;
        height: 4px;
        margin: 0 auto var(--space-2);
        border-radius: var(--radius-pill);
        background: var(--border-color);
        flex-shrink: 0;
    }

    .mk-mobile-sheet__title {
        margin: 0 var(--space-2) var(--space-1);
        color: var(--text-muted);
        font-size: var(--font-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mk-mobile-sheet__item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-primary);
        font-family: inherit;
        font-size: var(--font-base);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .mk-mobile-sheet__item .icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--text-secondary);
    }

    .mk-mobile-sheet__item:hover {
        background: var(--hover-overlay);
    }

    .mk-mobile-sheet__item:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .mk-mobile-sheet__item[hidden] {
        display: none;
    }

    .mk-mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--z-mobile-nav);
        background: var(--modal-backdrop);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mk-mobile-sheet-backdrop[hidden] {
        display: none;
    }

    /* The page scroller must clear the fixed bottom navigation. */
    .main-content {
        padding-bottom: calc(var(--mk-mobile-nav-h) + var(--safe-area-bottom) + var(--space-3));
        overflow-x: hidden;
    }

    /* Chrome at the top edge respects the notch. */
    .header {
        padding-top: calc(var(--space-2) + var(--safe-area-top));
        padding-left: calc(var(--space-3) + var(--safe-area-left));
        padding-right: calc(var(--space-3) + var(--safe-area-right));
    }

    .sidebar {
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
        /* The drawer ends above the bottom navigation so its last row (Docs)
           is never hidden under the fixed bar. */
        height: calc(100vh - var(--safe-area-top) - var(--mk-mobile-nav-h) - var(--safe-area-bottom));
        height: calc(100dvh - var(--safe-area-top) - var(--mk-mobile-nav-h) - var(--safe-area-bottom));
    }

    /* The assistant FAB must float above the bottom navigation, not under it.
       The JS writes INLINE right/bottom (the bubble is draggable on desktop),
       which would beat an ordinary media rule — hence !important. The JS also
       measures the nav and writes the same offset; this is the CSS fallback. */
    .floating-chat-button {
        bottom: calc(var(--mk-mobile-nav-h) + var(--safe-area-bottom) + var(--space-3)) !important;
        right: calc(var(--space-3) + var(--safe-area-right)) !important;
    }

    /* Momentum scrolling on the two chat scrollers. Chrome/Android scrolls
       natively; iOS needs the explicit opt-in, and the messenger is the one
       long surface where "sticky" scrolling is immediately noticeable. */
    .discussions-dock__messages,
    .discussions-dock__list,
    .floating-chat-window-messages {
        -webkit-overflow-scrolling: touch;
    }

    /* ── Chat: full-screen surface on a phone ────────────────────────── */

    .floating-chat-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        resize: none;
        z-index: var(--z-modal);
        padding-top: var(--safe-area-top);
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }

    .floating-chat-window-header {
        flex-shrink: 0;
        cursor: default;
    }

    .floating-chat-window-messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .floating-chat-window-input-container {
        flex-shrink: 0;
        padding-bottom: calc(var(--space-2) + var(--safe-area-bottom));
    }

    .floating-chat-window-input {
        min-width: 0;
    }

    /* Threads (chat tabs) stay reachable and touch-sized. */
    .floating-chat-window .chat-tabs-container,
    .floating-chat-modal .chat-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .floating-chat-window .chat-tabs-container::-webkit-scrollbar,
    .floating-chat-modal .chat-tabs-container::-webkit-scrollbar {
        display: none;
    }

    .floating-chat-window .chat-tab,
    .floating-chat-modal .chat-tab {
        min-height: 44px;
    }

    /* Attachments / media: a sheet that slides over the conversation instead
       of permanently eating the message list. */
    .floating-chat-media-tools {
        max-height: min(50dvh, 24rem);
        max-height: min(50vh, 24rem);
        border-top: 1px solid var(--border-color);
        background: var(--bg-secondary);
    }

    .floating-chat-media-tools > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: var(--space-3) var(--space-4);
    }

    .floating-chat-media-tools[open] > summary {
        border-bottom: 1px solid var(--border-color);
    }

    /* The docked/expanded assistant also owns the whole screen on a phone. */
    .floating-chat-content,
    .floating-chat-modal {
        max-width: 100%;
    }

    .floating-chat-content {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }

    /* ── Tables → cards where a horizontal table cannot work ─────────── */

    .admin-table-container:has(> .mk-table-cards) {
        overflow-x: visible;
    }

    table.mk-table-cards {
        display: block;
        width: 100%;
        border-collapse: separate;
    }

    table.mk-table-cards thead {
        display: none;
    }

    table.mk-table-cards tbody {
        display: block;
        width: 100%;
    }

    table.mk-table-cards tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        overflow: hidden;
    }

    table.mk-table-cards tr:hover {
        background: var(--bg-secondary);
    }

    table.mk-table-cards td {
        display: grid;
        grid-template-columns: minmax(84px, 38%) minmax(0, 1fr);
        gap: var(--space-2);
        align-items: center;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: 0;
        border-bottom: 1px solid var(--border-color);
        font-size: var(--font-sm);
        text-align: left;
        word-break: break-word;
    }

    table.mk-table-cards td:last-child {
        border-bottom: 0;
        /* admin.css pins action cells to nowrap; a card's value must wrap. */
        white-space: normal;
    }

    /* Direct children share the value column; a cell with several controls
       stacks them under the first value instead of pushing them under the
       label. textContent-only cells are unaffected (anonymous grid items). */
    table.mk-table-cards td > * {
        grid-column: 2;
        min-width: 0;
    }

    table.mk-table-cards td::before {
        content: attr(data-label);
        min-width: 0;
        color: var(--text-muted);
        font-size: var(--font-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    table.mk-table-cards td[data-label=""]::before,
    table.mk-table-cards td[data-label]:empty::before {
        content: "";
    }

    /* A row that spans the whole table is a message (loading / empty), not a
       record — give it a normal paragraph shape. */
    table.mk-table-cards td[colspan] {
        display: block;
        padding: var(--space-3);
        text-align: center;
    }

    table.mk-table-cards td[colspan]::before {
        content: "";
        display: none;
    }

    /* ── Messenger: a full-screen surface on a phone ──────────────────── */
    /* The desktop dock is a 416px floating window. On a phone that is a
       postage stamp: the messenger is the app (Android parity), so the same
       DOM becomes the whole screen — thread list ⇄ conversation, the Slack
       thread view, the sticker picker and the composer all get real space.
       An in-call dock (--call-full) already owns the screen; leave it. */
    #discussionsDock:not(.discussions-dock--call-full) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        resize: none;
        padding-top: var(--safe-area-top);
        padding-right: var(--safe-area-right);
        padding-bottom: var(--safe-area-bottom);
        padding-left: var(--safe-area-left);
        /* Above the bottom navigation: the messenger takes the screen, and
           the X in its header is the way back to the app chrome. */
        z-index: var(--z-modal);
    }

    #discussionsDock .discussions-dock__header {
        flex-wrap: nowrap;
        gap: 2px;
        min-height: 48px;
    }

    /* 44px touch targets for every header action (the desktop sizes are
       30–34px, which misses even the loosest phone guideline). */
    #discussionsDock .discussions-dock__hbtn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    #discussionsDock .discussions-dock__title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #discussionsDock .discussions-composer {
        padding-bottom: calc(var(--space-2) + var(--safe-area-bottom));
    }

    #discussionsDock .discussions-composer__btn,
    #discussionsDock .discussions-composer__send {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    /* Composer textarea: 16px stops iOS Safari from zooming the whole page on
       focus (a 14px field silently zooms and never zooms back). */
    #discussionsDock #ddInput {
        font-size: 16px;
        max-height: 34dvh;
    }

    /* Emoji & sticker picker: a phone-sized sheet, not a 360px slab that eats
       the composer. Three sticker columns keep each tile thumb-sized. */
    #discussionsDock .discussions-emoji-picker {
        max-height: min(52dvh, 420px);
        max-height: min(52vh, 420px);
        left: 4px;
        right: 4px;
    }

    #discussionsDock .discussions-emoji-picker__item {
        min-height: 40px;
        line-height: 38px;
        font-size: 22px;
    }

    #discussionsDock .discussions-sticker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #discussionsDock .discussions-sticker {
        min-height: 64px;
    }

    #discussionsDock .discussions-sticker img {
        height: 56px;
    }

    /* Slack thread view: the root + replies get the full width; the reply
       count separator stays visible so the reader knows what they entered. */
    #discussionsDock .discussions-thread-view__sep {
        margin: var(--space-2) var(--space-3);
    }

    #discussionsDock .discussions-dock__messages {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    /* Video circles scale with the phone instead of overflowing a 360px
       screen: 200px is the design size, 58vw is the honest ceiling. */
    #discussionsDock .discussions-vnote {
        width: min(200px, 58vw);
        height: min(200px, 58vw);
    }

    /* Voice-note player: full width so the scrubber is thumb-reachable. */
    #discussionsDock .mk-audio {
        max-width: 100%;
    }

    /* Recording bar: the preview, timer and the two controls must all fit a
       360px screen without pushing the approve button off-screen. */
    #discussionsDock .discussions-recording video {
        width: 56px;
        height: 56px;
    }

    #discussionsDock .discussions-recording__timer {
        min-width: 0;
    }

    /* ── API Tester: Collections as a drawer instead of a 200px strip ── */

    #apiTesterPage {
        height: calc(var(--vh100) - 80px - var(--mk-mobile-nav-h) - var(--safe-area-bottom));
    }

    .mk-collections-toggle {
        flex-shrink: 0;
    }

    .mk-collections-toggle[hidden] {
        display: none;
    }

    .api-tester-container.mk-collections-ready .api-tester-sidebar {
        position: fixed;
        top: 0;
        bottom: calc(var(--mk-mobile-nav-h) + var(--safe-area-bottom));
        left: 0;
        width: min(86vw, 22.5rem);
        min-width: 0;
        max-width: none;
        max-height: none;
        padding-top: var(--safe-area-top);
        border-right: 1px solid var(--border-color);
        background: var(--bg-primary);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: var(--z-dock);
    }

    .api-tester-container.mk-collections-ready.mk-collections-open .api-tester-sidebar {
        transform: translateX(0);
    }

    .mk-collections-overlay {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-dock) - 1);
        background: var(--modal-backdrop);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mk-collections-overlay[hidden] {
        display: none;
    }

    .api-tester-container.mk-collections-ready .api-tester-main {
        order: 1;
        min-height: 0;
    }

    /* ── Dense list surfaces: touch-sized rows, no horizontal drift ───── */

    /* Page-scoped sheets load after this one, so these wrappers are deepened
       with `body`; at equal specificity the later page rule would re-enable
       wrapping and push the tab strip onto two rows. */
    body .missions-tabs,
    body .workplace-primary-tabs,
    body .tab-list,
    body .tabs,
    body .nav-tabs,
    body .admin-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    body .missions-tabs::-webkit-scrollbar,
    body .workplace-primary-tabs::-webkit-scrollbar,
    body .tab-list::-webkit-scrollbar,
    body .tabs::-webkit-scrollbar,
    body .nav-tabs::-webkit-scrollbar,
    body .admin-tabs::-webkit-scrollbar {
        display: none;
    }

    .missions-tabs .missions-tab,
    .admin-tabs .admin-tab,
    .tab-list .tab,
    .tabs .tab,
    .nav-tabs .tab {
        min-height: 44px;
        white-space: nowrap;
    }

    /* A tab keeps its label: the STRIP scrolls, the tab does not shrink and
       clip (the five missions tabs used to compress to 64–80px and cut
       "Automations"/"Knowledge" mid-word). */
    body .missions-tabs > .missions-tab,
    body .workplace-tools-tabs > .missions-tab {
        flex: 0 0 auto;
    }

    .mission-row {
        min-height: 44px;
    }

    .mission-row .mission-goal {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The constructor sizes its panels from vh100 - chrome (constructor.css
       loads after this sheet, so the selector is deepened on purpose). The
       phone bottom bar and safe area are part of that chrome. */
    .main-content .constructor-layout .constructor-panel,
    .main-content .constructor-layout .json-panel {
        --ctor-chrome: calc(4.25rem + var(--space-3) + var(--mk-mobile-nav-h) + var(--safe-area-bottom));
    }

    /* Settings sections: one column, controls at full width. */
    .form-grid,
    .notif-channels-grid,
    .ns-int-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Modals fill the phone but keep their own scroll and safe areas — see
       the "Dialogs" block in the phone interaction system below. */

    /* Honest "best on a larger screen" notice. Hidden on desktop; a surface
       that cannot be edited well on a phone says so instead of pretending. */
    .mk-mobile-notice {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        margin: 0 0 var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--warning-border, var(--border-color));
        border-radius: var(--radius-md);
        background: var(--warning-bg, var(--bg-secondary));
        color: var(--warning-text, var(--text-primary));
        font-size: var(--font-sm);
    }

    .mk-mobile-notice .icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* Phone controls share the touch, spacing and stacking tokens. */

    /* Keep compact controls touch-sized and fields at 16px to prevent iOS focus zoom. */
    .form-input,
    .form-select,
    .form-textarea,
    .form-input-sm,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    select:not([multiple]):not([size]),
    textarea {
        /* Override page-specific field sizes set by ID. */
        min-height: var(--touch-target) !important;
        font-size: 16px !important;
    }

    /* File inputs size themselves from their content; only the type floor. */
    input[type="file"].form-input {
        font-size: 16px;
    }

    /* Preserve the measured hidden textarea used for the editor IME cursor. */
    .CodeMirror textarea,
    .cm-editor textarea,
    .monaco-editor textarea {
        min-height: 0 !important;
    }

    /* Primary actions fill the row; secondary actions wrap. */
    .btn,
    a.btn,
    button.btn {
        min-height: var(--touch-target);
    }

    .modal-footer,
    .modal-content .modal-footer,
    .form-actions,
    .panel-actions,
    .action-bar,
    .empty-state-actions,
    .today-empty-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--space-2);
    }

    .modal-footer > .btn,
    .form-actions > .btn,
    .panel-actions > .btn,
    .today-empty-actions > .btn {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .modal-footer > .btn-primary,
    .form-actions > .btn-primary,
    .panel-actions > .btn-primary,
    .today-empty-actions > .btn-primary,
    .modal-footer > .btn.btn-primary {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    /* Icon-only header controls: 44×44 even where a page pinned 24/26px. */
    .header-btn,
    .nc-bell-btn,
    #themeToggle,
    #nsFavToggle,
    .user-menu-trigger,
    .mk-banner__action,
    #mkLicenseBannerContact,
    #mkLicenseBannerDismiss {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    #nsFavToggle {
        width: var(--touch-target);
        height: var(--touch-target);
        padding: 0;
    }

    /* Keep controls above the home indicator and contain dialog scrolling. */
    .modal-content {
        padding-top: var(--safe-area-top);
        padding-bottom: calc(var(--space-3) + var(--safe-area-bottom));
        max-height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom));
        overscroll-behavior: contain;
    }

    .modal-content .modal-body {
        overscroll-behavior: contain;
    }

    .modal-content .modal-close {
        width: var(--touch-target);
        height: var(--touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile chat fills the content column before JS clears saved Desktop geometry. */
    .chat-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg);
        height: calc(100dvh - var(--mk-mobile-nav-h) - var(--safe-area-bottom) - 12rem);
        min-height: 18rem;
    }

    .chat-header-drag-handle {
        display: none;
    }

    .chat-header-controls {
        flex-wrap: wrap;
        min-width: 0;
    }

    .chat-auto-approve-select {
        max-width: 100%;
    }

    .chat-input-wrapper {
        gap: var(--space-2);
    }

    #chatInput {
        min-width: 0;
        font-size: 16px;
    }

    /* Use the Send icon on phones; the selector outranks the later page style. */
    html body .chat-send-btn {
        width: var(--touch-target);
        min-width: var(--touch-target);
        padding: 0;
        justify-content: center;
    }

    html body .chat-send-btn .chat-send-label {
        display: none;
    }

    .chat-send-btn .icon {
        width: 18px;
        height: 18px;
    }

    .chat-input-container {
        padding-bottom: calc(var(--space-3) + var(--safe-area-bottom));
    }

    /* ── Assistant floating window: phone-sized chrome ──────────────── */
    .floating-chat-window-btn,
    .floating-chat-window-icon-btn,
    .floating-chat-window .floating-chat-send-btn {
        width: var(--touch-target);
        min-width: var(--touch-target);
        height: var(--touch-target);
        flex-shrink: 0;
    }

    .floating-chat-window-input {
        min-width: 0;
        font-size: 16px;
    }

    /* ── Messenger: touch-sized list chrome + readable composer ─────── */
    .discussions-group-header {
        min-height: var(--touch-target);
    }

    .discussions-composer textarea {
        font-size: 16px;
    }

    .discussions-quickbar__btn,
    .discussions-folder-chip {
        min-height: var(--touch-target);
    }

    /* Hide the floating assistant while the More or Collections sheet is open. */
    body:has(#mkMobileMore:not([hidden])) .floating-chat-button,
    body:has(.api-tester-container.mk-collections-open) .floating-chat-button {
        display: none !important;
    }

    /* Keep sign-in scrollable when the keyboard shrinks the viewport. */
    /* `html body` is required: the login page's own <style> is later in the
       head and pins `.login-container { padding: 40px; max-width: 420px }`. */
    html body .login-container {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
        padding: calc(var(--space-6) + var(--safe-area-top))
            calc(var(--space-4) + var(--safe-area-right))
            calc(var(--space-6) + var(--safe-area-bottom))
            calc(var(--space-4) + var(--safe-area-left));
    }

    /* Constrain the More summary; these selectors outrank the later page sheet. */
    body .workplace-navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 0;
        max-width: 100%;
    }

    body .workplace-navigation .workplace-more-views,
    body .workplace-navigation .workplace-more-views > summary {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Allow the tab scroller to shrink below the tabs’ min-content width. */
    body .missions-tabs,
    body .workplace-tools-tabs {
        min-width: 0;
        max-width: 100%;
    }

    body .workplace-navigation .workplace-more-views > summary,
    body .workplace-tools-tabs .missions-tab {
        min-height: var(--touch-target);
    }

    /* Small icon clusters in a page toolbar: 40px is the compact floor (the
       44px control rule stays for primary/secondary actions). */
    .btn-icon-circle.sm {
        min-width: var(--touch-target-compact);
        min-height: var(--touch-target-compact);
    }

    #missionsProductBtn,
    .missions-product-pick {
        min-height: var(--touch-target);
    }
}

/* Very narrow phones: the label under a nav icon is the first thing to give
   up, but the icon and the 44px target stay. */
@media (max-width: 360px) {
    .mk-mobile-nav__item .mk-mobile-nav__label {
        display: none;
    }

    .mk-mobile-nav__item {
        min-height: var(--mk-mobile-nav-h);
    }
}

@media print {
    .mk-mobile-nav,
    .mk-mobile-sheet,
    .mk-mobile-sheet-backdrop {
        display: none !important;
    }
}

/* Web push (W-048). Same shape as the other banners, themed from tokens: the base .mk-banner is
   transparent and fixed, so a variant without a background would cover the page. */
.mk-banner--push {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* The optional push invitation shares the fixed top edge. Let the existing
   license, connection or update notice finish before offering notifications. */
body.license-banner-visible .mk-banner--push,
body:has(:is(#mkOfflineBanner, #mkUpdateBanner):not([hidden])) .mk-banner--push {
    display: none;
}