/* ============================================================
   Mobile — Responsive styles for tablet and mobile viewports
   ============================================================ */

/* ── Tablet Sidebar Toggle ────────────────────────────────── */

.tablet-sidebar-toggle {
    display: none !important;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    align-items: center;
    margin-right: 4px;
    transition: color 0.15s, background 0.15s;
}

.tablet-sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ── Mobile Bottom Tab Bar ────────────────────────────────── */

.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding: 0;
    justify-content: space-around;
    align-items: center;
}

.mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    flex: 1;
    font-size: 0.625rem;
    font-family: inherit;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tab svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
}

.mobile-tab.active {
    color: var(--accent);
}

.mobile-tab:active {
    color: var(--accent);
}

/* Badge on mobile tab */

/* ── Mobile-only overflow menu items (hidden on desktop) ── */

/* ── Mobile Send Button (hidden on desktop) ──────────────── */

.mobile-send-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--accent-dim);   /* white on the dark theme's light accent was 2.5:1; the dim accent is 5:1 or better (#4023) */
    color: var(--text-on-accent);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mobile-send-btn:active {
    opacity: 0.8;
    transform: scale(0.95);
}

/* Send with a team reminder (#3152: was a cryptic "+T"). */
.mobile-send-team-btn {
    margin-right: 4px;
    opacity: 0.75;
}
.mobile-send-team-btn .material-icons {
    font-size: 1.125rem;
}

/* ── Mobile Agent List (full screen) ──────────────────────── */

.mobile-agent-list {
    display: none;
    flex-direction: column;
    /* Shares the main area with the banners above it (#3729), where 100% pushed them below the fold. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-agent-list .session-list {
    padding-bottom: 16px;
}

/* ── Mobile Back Button ───────────────────────────────────── */

.mobile-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    font-size: 1.125rem;
    line-height: 1;
    margin-right: 4px;
}

/* ── Tablet: ≤ 1023px ─────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Hide agentic state panel + resize handles on tablet */
    .task-bar-resize-handle,
.board-chat-resize-handle {
        display: none !important;
    }

    /* Agentic tabs: allow horizontal scroll on narrow panels */
    .agentic-state-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .agentic-state-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Board chat input pane: shorter on tablet */
    .board-chat-input-pane {
        height: 160px;
        min-height: 80px;
    }

    /* Sidebar collapsible overlay on tablet */
    .sidebar {
        width: 280px;
        min-width: 280px;
        position: fixed;
        top: var(--top-bar-height, 49px);
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
    }

    .sidebar.tablet-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(var(--black-rgb), 0.3);
    }

    /* Hide resize handle on tablet */
    .sidebar-resize-handle {
        display: none !important;
    }

    /* Show hamburger toggle on tablet */
    .tablet-sidebar-toggle {
        display: flex !important;
    }

    /* Overlay backdrop when sidebar is open */
    .tablet-sidebar-backdrop {
        display: none;
        position: fixed;
        top: var(--top-bar-height, 49px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(var(--black-rgb), 0.4);
        z-index: 49;
    }

    .tablet-sidebar-backdrop.active {
        display: block;
    }

    /* Command pane more compact */
    .command-pane {
        height: 200px !important;
    }
}

/* ── Mobile: ≤ 767px ──────────────────────────────────────── */

@media (max-width: 767px) {
    body {
        height: 100vh;
        height: 100dvh;
        height: var(--visual-viewport-height, 100dvh);
        overflow: hidden;
    }

    /* Thinner scrollbar on mobile */
    ::-webkit-scrollbar {
        width: 3px;
    }

    /* Bottom tab bar hidden — navigation via agent cards */
    .mobile-tab-bar {
        display: none;
    }

    /* Hide desktop/tablet elements */
    .sidebar,
    .sidebar-resize-handle,
    .tablet-sidebar-toggle,
    .tablet-sidebar-backdrop {
        display: none !important;
    }

    .top-bar {
        padding: 8px 12px;
        flex-shrink: 0;
    }

    .top-bar h1 {
        font-size: 0.875rem;
    }

    /* Panel toggle: on every page, since the side panel is (#4539) */
    #panel-toggle-btn {
        display: flex !important;
    }

    /* Top bar settings dropdown: ensure it fits on small screens */
    .top-bar-settings-menu {
        right: 0;
        min-width: 160px;
        max-width: calc(100vw - 24px);
    }

    /* Adjust layout — no bottom tab bar */
    .layout {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .main-content {
        min-width: 0;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Navigation owns visibility so the list cannot overlap another view. */
    .mobile-agent-list {
        min-height: 0;
    }

    .mobile-agent-list > * {
        flex-shrink: 0;
    }

    /* The tab row gives way to one current-view dropdown (nav_tabs.js, #3816): it names the view and opens the list of all; 44 px tall on a touch screen (touch.css). */
    .top-nav-tabs { display: none; }
    .top-bar-brand,
    .top-bar-actions {
        flex-shrink: 0;
    }
    /* Four icon buttons (Saved included, #4510) must fit at 200% text on a 390 px phone. */
    .top-bar-actions { gap: 0; }
    .nav-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
        min-height: var(--control-height);
        margin: 0 8px;
        padding: 0 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--control-border);
        border-radius: var(--radius-ml);
        color: var(--text-primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .nav-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-more-menu.nav-all { left: 8px !important; right: 8px !important; }
    /* 320 px with an agent open has five buttons in the bar: the picker gives up some margin and padding so "Agents" is not cut to "Age..." (#5273) */
    @media (max-width: 359px) { .nav-select { margin: 0 4px; padding: 0 8px; gap: 4px; } }

    /* Show mobile back button in session header */
    .mobile-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        font-size: 1.25rem;
        z-index: 5;
    }

    /* Live session view */
    .session-view {
        padding-bottom: 0;
        flex: 1;
        min-height: 0;
        height: 100%;
    }

    /* Live session view adjustments */
    .live-body {
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .live-left-column {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .capture-wrapper {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .capture-wrapper.chat-mode .live-history-center {
        padding: 10px 12px 16px;
    }

    .agentic-state,
.agentic-collapse-btn,
.task-bar-resize-handle {
        display: none !important;
    }

    /* Terminal header panel toggle button on mobile */
    #popout-panel-toggle-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 26px;
        padding: 3px;
        border-radius: var(--radius-md);
        border: 1px solid var(--control-border);
        background: var(--bg-secondary);
        color: var(--text-secondary);
    }

    #popout-panel-toggle-btn.active,
    #popout-panel-toggle-btn[aria-pressed="true"] {
        color: var(--accent);
        background: var(--accent-dim);
        border-color: var(--accent);
    }

    /* Command pane: compact sticky input bar at bottom on mobile */
    .command-pane {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        z-index: 10;
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.keyboard-open .command-pane {
        padding-bottom: 0;
    }

    /* Hide the toolbar's buttons (macros, nav keys, mode buttons) on mobile; the model chip stays, as a row under the input (#5116) */
    .command-pane-toolbar > :not(.model-chip-bar) {
        display: none !important;
    }
    .command-pane-toolbar {
        order: 1;
        padding: 4px 8px 8px;
        border-bottom: none;
        min-height: 0;
    }
    .command-pane-toolbar:not(:has(> .model-chip-bar:not([hidden]))) {
        display: none !important;
    }

    /* Compact input body: single row with send button inline */
    .command-pane-body {
        padding: 6px 8px !important;
        gap: 6px;
        align-items: flex-end;
    }

    .command-pane textarea {
        min-height: 2.25rem !important;   /* 36px; rem, so the box grows with the text size (#4086) */
        max-height: 5rem;                 /* 80px */
        font-size: 1rem !important; /* 16px at the default size: prevents iOS zoom on focus, and follows the text size */
        padding: 7px 12px;
        border-radius: 18px;
    }

    /* Send buttons: ensure they show on mobile */
    .command-pane .mobile-send-btn {
        display: flex !important;
    }

    /* Board chat: compact on mobile */
    .board-chat-input-pane {
        height: auto !important;
        min-height: 80px;
        max-height: 40vh;
    }

    .board-chat-textarea {
        min-height: 60px;
        max-height: 100px;
        font-size: 0.875rem !important;
    }

    .board-chat-editor-wrap {
        padding: 6px 10px 8px;
    }

    .board-chat-resize-handle {
        display: none !important;
    }

    .board-chat-messages {
        font-size: 0.6875rem;
        padding: 4px 8px;
    }

    /* Capture pane scroll speed fix — enable momentum scrolling */
    .output-scroll,
    .xterm-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* The bar under the terminal on a phone: state and size only (there is no Ctrl+Shift+Esc to hint at). */
    .terminal-statusbar .xterm-focus-hint { display: none; }

    /* Hide tab bar when virtual keyboard is open */
    body.keyboard-open .mobile-tab-bar {
        display: none !important;
    }

    body.keyboard-open .layout {
        height: auto;
        flex: 1;
        min-height: 0;
    }

    /* Session header: single compact row on mobile */
    .session-header {
        padding: 6px 10px !important;
        flex-wrap: nowrap;
        gap: 0;
    }

    .session-header h2 {
        font-size: 0.875rem !important;
    }

    /* Hide branch, badge, status — keep Goal as single truncated line */
    .session-title #session-branch,
    .session-title #session-type-badge,
    .session-meta {
        display: none !important;
    }

    /* Goal: show text but hide action buttons, compact font */
    .session-title #session-summary .goal-action-btn {
        display: none !important;
    }

    .session-title #session-summary .goal-label {
        font-size: 0.75rem;
    }

    .session-title #session-summary .summary-text {
        font-size: 0.75rem;
    }

    /* Compact title: everything on one line, goal truncates */
    .session-title {
        margin-bottom: 0 !important;
        gap: 6px !important;
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* Goal fills remaining space and truncates */
    .session-title #session-summary {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .session-title-actions {
        flex-shrink: 0;
    }

    /* Show Attach/Restart inside the overflow menu on mobile */

    /* Message board adjustments: the Subscribers button opens the same list as a sheet (#3610); the side panel has it as a tab too (#4539). */
    #messageboard-view.mb-has-board .mb-subscribers-btn {
        display: inline-flex;
    }
    /* At phone width the toolbar keeps Subscribers and a More menu with Select, Export, Pause and Delete (#4538, UX #4536:
       five buttons wrapped to three rows at 200% text). Wrapping stays as the last resort. */
    #messageboard-view .mb-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        max-width: 100%;
    }
    #messageboard-view.mb-has-board .mb-more { display: inline-block; position: relative; }
    #messageboard-view.mb-has-board .mb-more-btn { display: inline-flex; }
    #messageboard-view .mb-more-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 200px;
        max-width: calc(100vw - 32px);
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 4px 0;
        box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.3);
        z-index: 1000;
    }
    #messageboard-view .mb-more.open .mb-more-menu { display: flex; }
    #messageboard-view .mb-more-menu .mb-action-btn {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 8px 16px;
        border: 0;
        border-radius: 0;
        background: none;
        white-space: normal;
        text-align: left;
    }
    #messageboard-view .mb-more-menu .mb-action-btn:hover,
    #messageboard-view .mb-more-menu .mb-action-btn:focus-visible { background: var(--bg-hover); }
    #messageboard-view .mb-more.open .mb-more-chevron { transform: rotate(180deg); }
    /* Paused, the Pause item reads "Resume Board" in the warning colour: in the menu red is Delete's alone (UX on #4538). */
    #messageboard-view .mb-more-menu #mb-pause-btn.mb-action-danger,
    #messageboard-view .mb-more-menu #mb-pause-btn.mb-action-danger:hover { color: var(--warning); opacity: 1; }

    /* Message board full-screen on mobile */
    #messageboard-view {
        flex-direction: column;
    }

    #messageboard-view {
        padding-inline: var(--space-xl);
    }

    #messageboard-view .session-header {
        flex-wrap: wrap;
        padding-inline: 0 !important;
    }

    #messageboard-view .view-body {
        flex: 1;
        min-height: 0;
    }

    /* Board message bubbles: compact on mobile */
    .mb-message {
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
    }

    /* A collapsed task-queue row is a touch target (#3343). */
    .mb-queue-summary { min-height: 44px; }

    /* Board input area — lift above bottom tab bar */
    #mb-board {
        padding-bottom: 60px !important;
    }

    #mb-post-input {
        font-size: 1rem !important; /* prevent iOS zoom on focus */
    }

    /* Goal/summary: single truncated line on mobile */
    .summary-line .summary-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: calc(100% - 40px);
        vertical-align: middle;
    }

    /* Scheduler view mobile */
    .scheduler-view {
        padding: 12px !important;
    }

    .sched-header h2 {
        font-size: 0.9375rem !important;
    }

    /* Job cards stack full width */

    /* History session view mobile */
    #history-session-view .session-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Hide session ID on mobile (too long) */
    .session-header .session-id {
        display: none;
    }

    /* Hide resize handles */
    .sidebar-resize-handle,
    .task-bar-resize-handle,
    .agentic-block-resize-handle,
    .board-chat-resize-handle {
        display: none !important;
    }

    /* Welcome screen compact */
    .welcome h2 {
        font-size: 1rem;
    }

    .welcome p {
        font-size: 0.75rem;
    }

    /* History tabs scrollable */
    .history-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    /* Modal adjustments */
    .modal-content,
    .modal-content-wide,
    .modal-content-extra-wide {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh;
    }

    .modal-header {
        margin: -24px -24px 0;
        padding: 20px 20px 14px;
    }

    .modal-footer {
        margin: 12px -24px -24px;
        padding: 14px 20px 20px;
    }

    .launch-modal-step > h3 {
        top: -24px;
        margin: -24px 0 12px;
        padding: 20px 4px 14px 0;
    }

    .launch-modal-step > .modal-actions {
        bottom: -24px;
        margin: 12px 0 -24px;
        padding: 14px 4px 20px 0;
    }

    .launch-type-cards {
        grid-template-columns: 1fr;
    }

    .mobile-launch-section {
        border: 1px solid var(--border);
        border-radius: var(--radius-ml);
        background: var(--bg-tertiary);
        overflow: hidden;
    }

    .mobile-launch-section summary {
        display: block;
        cursor: pointer;
        padding: 12px 14px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        list-style: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-launch-section summary::-webkit-details-marker {
        display: none;
    }

    .mobile-launch-section summary::after {
        content: "+";
        float: right;
        color: var(--text-muted);
    }

    .mobile-launch-section[open] summary::after {
        content: "-";
    }

    .mobile-launch-section .team-agents-container {
        border: none;
        background: transparent;
        padding: 0;
    }

    .agent-persona-actions,
    .acf-top-row {
        grid-template-columns: 1fr;
    }

    /* Toolbar wrapping */
    .command-toolbar {
        flex-wrap: wrap;
    }

    .command-toolbar .btn-label {
        display: none;
    }

    /* Output container full width */

    /* Waiting banner compact */
    .waiting-banner {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }

    /* View body for message board */
    .view-body {
        flex-direction: column !important;
    }

    /* Board cards: disable drag on mobile, hide grip */
    .session-group-item {
        cursor: pointer;
    }

    #mobile-session-list {
        padding: 0 12px 72px;
    }

    #mobile-session-list .session-group-header {
        padding: 10px 12px !important;
        margin: 8px 0 4px;
        border-radius: var(--radius-ml);
        background: rgba(var(--white-rgb), 0.03);
    }

    #mobile-session-list .session-board-card {
        margin: 10px 0 !important;
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    #mobile-session-list .board-card-agents {
        padding: 6px 8px 10px;
    }

    #mobile-session-list .session-group-item {
        padding: 12px 12px 12px 14px !important;
        margin: 8px 0;
        border: 1px solid rgba(var(--white-rgb), 0.06);
        border-radius: var(--radius-xl);
        background: linear-gradient(180deg, rgba(var(--white-rgb), 0.04), rgba(var(--white-rgb), 0.02));
        align-items: flex-start;
        gap: 10px;
        box-shadow: 0 10px 24px rgba(var(--black-rgb), 0.16);
    }

    #mobile-session-list .session-group-item.active {
        border-left: 1px solid rgba(var(--white-rgb), 0.06);
        border-color: rgba(var(--accent-rgb), 0.45);
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), 0 14px 28px rgba(var(--black-rgb), 0.2);
    }

    /* A card that needs the Operator has no amber border or glow of its own (#5123): its flashing dot and the state chip carry it. */

    #mobile-session-list .session-group-item.needs-attention .session-dot.waiting,
    #mobile-session-list .session-group-item.needs-attention .session-dot.stuck {
        box-shadow: 0 0 0 6px rgba(var(--fx-yellow-rgb), 0.12);
    }

    #mobile-session-list .session-group-item {
        min-height: 56px; /* touch target */
        /* Phone: cards are already inset by their group container; keep the
           card padding (usable width) and only align line 2 with the name:
           10px dot + 6px margin + 8px gap. */
        --row-dot-block: 24px;
    }

    #mobile-session-list .session-mobile-banner-row,
    #mobile-session-list .session-mobile-meta {
        margin-left: var(--row-dot-block, 24px);
    }

    /* Folder-group cards sit under their header like team cards do (which are
       inset by .board-card-agents): one consistent ~17-19px name offset. */
    #mobile-session-list > .session-group-item {
        margin-left: 8px;
    }

    #mobile-session-list .session-dot {
        width: 10px;
        height: 10px;
        margin: 5px 6px 0 0;
    }

    #mobile-session-list .sidebar-kebab-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #mobile-session-list .session-name-row {
        align-items: flex-start;
        gap: 8px;
        height: auto; /* the base row is 16 px high; a name that wraps to a second line overflowed it and the state chip was drawn over that line (#4612) */
    }

    /* the phone's name wraps instead, so its whole end is there: no split */
    #mobile-session-list .session-label.session-label-split { display: block; }
    #mobile-session-list .session-label-split .session-label-name { display: inline; }
    #mobile-session-list .session-label-split .sln-head { white-space: normal; }
    #mobile-session-list .session-label-split .sln-tail { white-space: normal; }
    #mobile-session-list .session-label-split .session-label-tags { display: inline; white-space: normal; }

    #mobile-session-list .session-label {
        white-space: normal;
        line-height: 1.35;
        font-size: 0.875rem;
        font-weight: 500; /* agents are children of the 600-weight group header */
    }

    #mobile-session-list .waiting-badge,
    #mobile-session-list .session-state-pill {
        display: none; /* the phone shows the state chip in the meta row */
    }

    #mobile-session-list .session-mobile-banner-row {
        display: block;
    }

    #mobile-session-list .session-mobile-banner-row:empty {
        display: none;
    }

    #mobile-session-list .session-mobile-banner {
        display: inline-flex;
        align-items: center;
        margin: 8px 0 0;
        padding: 4px 8px;
        border-radius: 999px;
        /* Quiet (#5123): the neutral pill's surface and hairline, with only the text in the warm colour. */
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        color: var(--warning);
        font-size: 0.6875rem;
        font-weight: 500;
    }

    #mobile-session-list .session-mobile-banner.error {
        background: var(--bg-tertiary);
        border-color: var(--border);
        color: color-mix(in srgb, var(--error) 62%, var(--text-primary)); /* plain --error is 4.2:1 on the neutral surface in the dark theme */
    }

    #mobile-session-list .session-mobile-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }

    #mobile-session-list .session-status-chip,
    #mobile-session-list .session-mobile-meta-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    #mobile-session-list .session-status-chip.running {
        background: rgba(var(--working-rgb), 0.16);
        color: var(--working);
    }
    [data-theme="light"] #mobile-session-list .session-status-chip.running { color: var(--accent-dim); } /* 3.8:1 with --working on its tint, 5.6:1 with this (#4851) */

    #mobile-session-list .session-status-chip.idle {
        background: rgba(148, 163, 184, 0.16);
        color: var(--text-secondary);
    }

    #mobile-session-list .session-status-chip.needs-input {
        background: var(--bg-tertiary); /* quiet (#5123): only the text is warm */
        color: var(--warning);
        font-weight: 600;
    }

    /* "Ready for input" rows carry no chip; with no unread pill either the meta row is
       empty and must not leave its 8px top margin behind. */
    #mobile-session-list .session-mobile-meta:empty { display: none; }
    #mobile-session-list .session-line2 { height: auto; align-items: flex-start; }
    #mobile-session-list .session-dot.sleeping::before { font-size: 0.8125rem; inset: -4px -2px; }

    #mobile-session-list .session-status-chip.error {
        background: var(--bg-tertiary);
        color: color-mix(in srgb, var(--error) 62%, var(--text-primary));
        font-weight: 600;
    }

    #mobile-session-list .session-mobile-meta-pill {
        background: rgba(var(--fx-green-deep-rgb), 0.14);
        color: #7ee787;
    }

    #mobile-session-list .session-goal {
        margin-top: 8px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.45;
    }

    /* The empty-goal affordance (sparkle + "No goal yet") must stay a single
       row: the -webkit-box clamp above would stack its two children. */
    #mobile-session-list .session-goal.session-goal-empty {
        display: flex;
        align-items: center;
        white-space: nowrap;
        -webkit-line-clamp: none;
        overflow: visible;
    }

    #mobile-session-list .sidebar-kebab-btn {
        opacity: 0.75 !important;
    }

    .drag-grip {
        display: none !important;
    }

    .agentic-tab {
        flex: 0 0 auto;
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* Board card folder footer: tighter */
}

/* ── Mobile Panel Overlay ─────────────────────────────────── */

@media (max-width: 767px) {
    .agentic-state.mobile-panel-overlay {
        display: flex !important;
        flex-direction: column !important;
        position: fixed;
        top: var(--top-bar-height, 49px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        z-index: 19; /* just under .top-bar (20), so the settings menu opens over the panel, not behind it */
        background: var(--bg-secondary);
    }

    /* In a team's page the team chat (z-index 30, over the agent's chat) covered this overlay, so no tab of the side panel could be seen or touched on a phone: while the overlay is open the chat goes beneath it (#4792). */
    body:has(.agentic-state.mobile-panel-overlay) .team-center-view { z-index: 18; }

    .agentic-state.mobile-panel-overlay .agentic-block {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    /* Panel tabs: horizontally scrollable, touch friendly */
    .agentic-state.mobile-panel-overlay .agentic-state-tabs {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 4px;
        gap: 2px;
        height: 44px;
        min-height: 44px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
        flex-shrink: 0;
    }

    .agentic-state.mobile-panel-overlay .agentic-state-tabs::-webkit-scrollbar {
        display: none;
    }

    .agentic-state.mobile-panel-overlay .agentic-tab {
        min-width: 44px;
        min-height: 40px;
        height: 40px;
        padding: 0 8px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
    }

    .agentic-state.mobile-panel-overlay .agentic-tab.active {
        color: var(--text-on-accent); /* was var(--accent) on var(--accent-dim): 1.8:1 in the dark theme, 1.5:1 in the light one, so the open tab's icon was all but invisible on a phone (#4851) */
        background: var(--accent-dim);
    }

    /* The rule above sets display: flex at a higher specificity than agentic.css's scope rules, so on a phone the team's
       tabs (Team View, Team Settings, Team Artifacts, Knowledge) showed in an agent's row. Same scoping, one level up. */
    .agentic-state.mobile-panel-overlay .agentic-tab[data-scope="team"] { display: none; }
    .agentic-state.mobile-panel-overlay.team-context .agentic-tab[data-scope="team"] { display: flex; }
    .agentic-state.mobile-panel-overlay.team-context .agentic-tab[data-scope="agent"] { display: none; }

    /* The close button leads the strip and stays put while the tabs scroll under it. At the end of the strip it
       covered the tabs it was stuck over (a half-hidden Tasks tab at 390px); on the left nothing is hidden at rest
       and the tab cut off by the right edge shows that the strip scrolls. */
    .agentic-state.mobile-panel-overlay #agentic-mobile-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        order: -1;
        position: sticky;
        left: 0;
        min-width: 44px;
        min-height: 40px;
        height: 40px;
        padding: 0 8px;
        background: var(--bg-secondary);
        color: var(--text-muted);
        z-index: 2;
    }

    .agentic-state.mobile-panel-overlay #agentic-mobile-close-btn:hover,
    .agentic-state.mobile-panel-overlay #agentic-mobile-close-btn:active {
        color: var(--text-primary);
        background: var(--bg-hover);
    }

    /* Panel content fills remaining space */
    .agentic-state.mobile-panel-overlay .agentic-panel.active {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agentic-state.mobile-panel-overlay #agentic-panel-board.active {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* When panel is shown, hide the task-bar-resize-handle */
    .agentic-state.mobile-panel-overlay + .task-bar-resize-handle {
        display: none !important;
    }

}

@media (max-width: 767px) {
    .welcome { padding: 30px 18px; }
    .welcome-header { margin-bottom: 22px; }
    .welcome-launch-list { grid-template-columns: 1fr; }
    .editions-home-list { grid-template-columns: 1fr; }
    .editions-modal .editions-content { width: 100%; max-width: calc(100vw - 32px); padding: 20px; }
    .editions-actions .btn { min-height: 44px; }

    /* Welcome team cards: stack vertically on mobile */
}

/* ── Small Phone: ≤ 479px ────────────────────────────────── */

@media (max-width: 479px) {
    /* Top bar: tighter on small phones */
    .top-bar {
        padding: 6px 8px;
        gap: 4px;
    }

    .top-bar-title {
        font-size: 0.8125rem;
    }

    /* Modal padding: tighter on small phones */
    .modal-content {
        padding: 16px !important;
    }

    .modal-header {
        margin: -16px -16px 0 !important;
        padding: 14px 16px 10px !important;
    }

    .modal-footer {
        margin: 8px -16px -16px !important;
        padding: 10px 16px 14px !important;
    }

    .modal-header h3 {
        font-size: 0.9375rem;
    }

    /* Session header: extra compact */
    .session-header h2 {
        font-size: 0.8125rem !important;
    }

    /* Message board: compact post form */
    .mb-post-input {
        font-size: 0.875rem;
        padding: 8px 10px;
    }

    .mb-post-send-btn {
        height: 38px;
        padding: 0 14px;
        font-size: 0.8125rem;
    }

    /* History tabs: smaller on small phones */
    .history-tab-btn {
        font-size: 0.6875rem;
        padding: 6px 8px;
    }
}

/* ── Landscape Mobile ────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce top bar height in landscape */
    .top-bar {
        padding: 4px 12px;
    }

    .top-bar h1 {
        font-size: 0.8125rem;
    }

    /* Layout: account for smaller top bar */
    .layout {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    /* Command pane: shorter in landscape to maximize output view */
    .command-pane {
        max-height: 120px !important;
    }

    .command-pane textarea {
        max-height: 3.75rem;   /* 60px */
    }

    /* Modal: shorter max height in landscape */
    .modal-content {
        max-height: 85vh;
    }

    /* Waiting banner: compact */
    .waiting-banner {
        font-size: 0.6875rem !important;
        padding: 4px 10px !important;
    }

    /* Hide mobile tab bar in landscape to maximize screen space */
    .mobile-tab-bar {
        display: none !important;
    }
}

/* ── Medium screens: 768px–1023px refinements ─────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Modal: better sizing for tablets */
    .modal-content,
    .modal-content-wide {
        max-width: 85vw;
    }

}

/* ── Pull-to-Refresh Indicator ────────────────────────────── */

.pull-refresh-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: height 0.1s ease-out;
}

/* ── Touch-friendly adjustments ───────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .session-list li {
        min-height: 52px;
    }

    /* The Job dialog's Cleanup worktree box is tapped through its label (38px tall before, #4500) */
    .job-cleanup-option {
        min-height: 44px;
    }

    /* Always show kebab buttons (no hover on touch) */
    .sidebar-kebab-btn {
        opacity: 0.5 !important;
    }

    .mb-delete-msg-btn {
        opacity: 0.4 !important;
    }

    /* Always show folder copy button on touch */
    .folder-copy-btn {
        display: inline-flex !important;
        align-items: center;
        opacity: 0.5;
    }

    /* Larger buttons */
    .btn-small {
        min-height: 36px;
        padding: 6px 14px;
    }

    /* Task items: larger touch target */
    .task-item {
        min-height: 44px;
    }

    /* Always show task delete button on touch */

    /* Group kebab always visible on touch */
    .group-kebab .sidebar-kebab-btn {
        opacity: 0.4 !important;
    }

    /* File list items: larger touch targets */
    .file-item {
        min-height: 44px;
        padding: 8px 12px;
    }

    /* Agentic tab buttons: larger for touch */
    .agentic-tab {
        min-width: 40px;
        min-height: 40px;
    }

    /* File action buttons: always visible on touch (no hover) */
    .file-action-btns {
        opacity: 1 !important;
    }

    .file-action-btn {
        min-width: 32px;
        min-height: 32px;
    }
}

/* Shared controls keep readable labels and touch targets. Composer and
   terminal geometry retain their existing mobile rules above. */
@media (max-width: 767px), (pointer: coarse) {
    .btn,
.btn-small,
.btn-sm,
.sidebar-subtab,
.modal-close-btn,
.mb-action-btn,
.cost-time-select,
.agent-ui-card button,
.agent-ui-send,
.sched-preset,
.team-settings-tabs [role="tab"],
.team-availability-dialog button,
.working-mode-form select,
.working-mode-form input[name="preset_name"],
.modal-content select,
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) {
        min-height: var(--control-touch-height);
    }
}

/* Titles of the phone-width agent and history lists. Classes rather than style="" attributes: the Cloud Hub's CSP
   (style-src 'self') refuses inline style attributes in markup assigned through innerHTML. */
.mobile-list-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }

/* The artifacts table scrolls sideways; on a phone the default scrollbar is a thick grey bar under the header. */
@media (max-width: 767px) {
    .team-artifacts-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
}

/* 200 percent page zoom on a phone is a page under 260 px wide: the top bar (brand, view dropdown, home and settings buttons) needs 216 px,
   so the dropdown drops to its own row instead of widening the page (#4086). */
@media (max-width: 260px) {
    .top-bar { padding: 7px 8px; flex-wrap: wrap; row-gap: 4px; }
    .nav-select { order: 3; flex: 1 1 100%; margin: 0; }
}