/* ============================================================
   THE ASKPILOT APP ON A PHONE (Dom, 26 Oct 2026, after the real app's
   phone view): one window per session. A panel icon and the session
   title with only the done button (no auto-run), then a "Messages |
   Progress 5/30" switch, the open view, and the message box. Messages is
   open; Progress shows the session's tasks in the same place.
   The switch and the panel icon are added by js/app-mobile.js; on wider
   screens they stay hidden and the screens keep their two cards.
   Applies to the app shell (.sc-app .rn-sessionview) and to Autonomous
   execution (.xu-app).
   ============================================================ */
.am-panel, .am-seg { display: none; }

@media (max-width: 980px) {
    /* ---- the header and the switch, shared (the app shell from 980px down,
       where it is one card anyway; Autonomous execution from 767px) ---- */
    .am-panel { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: #3F3846; }
    .am-panel svg { width: 20px; height: 20px; }
    .am-seg {
        display: flex; gap: 4px; margin: 10px 12px 2px; padding: 4px;
        border-radius: 12px; background: #F2F2F5;
    }
    .am-seg button {
        flex: 1; min-width: 0; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
        font: 600 .875rem/1.2 Manrope, system-ui, sans-serif; color: #6B6573; white-space: nowrap;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .am-seg button.is-on { background: #fff; color: #16121A; box-shadow: 0 1px 3px rgba(20, 17, 26, .12); }
    .am-seg b { font-weight: inherit; font-variant-numeric: tabular-nums; }

    /* ---- the app shell: no sidebar strip, one card ---- */
    .sc-app > .sc-side { display: none !important; }
    /* the trigger's icon stays beside the title (Dom); auto-run goes */
    .sc-app .rn-top .rn-autorun { display: none !important; }
    .sc-app .rn-top { gap: 10px; }
    .sc-app .rn-top .rn-done-btn { margin-left: auto; }
    .sc-app .rn-sessionview,
    #rn-app.sc-app .rn-sessionview, #ev-app.sc-app .rn-sessionview, .hr-app.sc-app .rn-sessionview, .dm-app.sc-app .rn-sessionview {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }
    .sc-app .rn-top { grid-row: 1; }
    .sc-app .am-seg { grid-column: 1; grid-row: 2; position: relative; z-index: 1; }
    .sc-app .rn-feed { grid-row: 3; }
    .sc-app .rn-composer { grid-row: 4; }
    /* Progress open: the tasks take the messages' place */
    .sc-app .rn-sessionview.am-prog .rn-feed { display: none !important; }
    .sc-app .rn-sessionview.am-prog .rn-rail {
        display: block !important; grid-column: 1; grid-row: 3; min-height: 0; overflow: hidden;
        border: 0; border-radius: 0; background: transparent;
    }
    .sc-app .rn-sessionview.am-prog .rn-rail-h { display: none; }
    .sc-app .rn-sessionview.am-prog .rn-todos { padding-top: 18px; }

    .sc-app .rn-feed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px); }
}
/* tablets: Autonomous execution keeps its two cards, so no switch there */
@media (min-width: 768px) and (max-width: 980px) {
    .xu-app .am-panel, .xu-app .am-seg { display: none; }
}
@media (max-width: 767px) {
    /* ---- Autonomous execution: the two cards become one window ---- */
    .xu-app { flex-direction: column; gap: 0; height: 600px; padding: 0; background: #fff; }
    .xu-app .xu-sess { display: contents; }
    .xu-app .xu-sess-top { order: 1; }
    .xu-app .am-seg { order: 2; flex: none; }
    .xu-app .xu-feed { order: 3; }
    .xu-app .xu-prog { order: 3; display: none; }
    .xu-app .xu-composer { order: 4; }
    .xu-app .xu-sess-top .he-auto { display: none; }
    .xu-app .xu-sess-top .he-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Progress open: the task list, without its own card and title */
    .xu-app.am-prog .xu-feed { display: none; }
    .xu-app.am-prog .xu-prog {
        display: flex; flex: 1; min-height: 0; height: auto; width: auto;
        border: 0; border-radius: 0; background: transparent;
    }
    .xu-app.am-prog .xu-pane-h { display: none; }
}