/* ============================================================
   THE OLD APP SHELL, IN THE NEW APP UI (26 Oct 2026; Dom: "wherever you
   find these old UI wireframes, only the UI, not the content story,
   update them to the new one, like the animated box in 'Askpilot does
   the work end to end'").
   The old shell (.sc-app: .sc-side, .sc-main, the .rn-* session view)
   stays as it is in the markup and in its scripts, so every scene keeps
   its content and its beats; this layer only re-dresses it as the new
   one (css/exec-ui.css .xu-app, css/hero-exec.css .he-*):
     shell     a light grey app with white cards, the black outline
     sidebar   the org mark, the nav, Open and Done, the session list
     session   the Process rail becomes its own card on the left, like
               the new progress pane: black ticks, a pink dot for the
               task in hand, grey dots for the rest, nothing struck out;
               the session card on the right, its header with a logo
               tile and an outlined Auto-run pill, tiled avatars in the
               feed, and the new message box
   Loaded last, after css/how-it-works.css, on every page with the shell.
   ============================================================ */

/* ---------- the shell ---------- */
.sc-app {
    --sc-ink: #16121A;
    --sc-mut: #6B7280;
    --sc-line: #E7E7EB;
    --v2-pink: #E9A3F5;
    gap: 10px; padding: 10px 10px 0 0;
    background: #F7F7F8;
    border-radius: 24px;
}

/* ---------- the sidebar ---------- */
.sc-app .sc-side {
    width: 212px; padding: 6px 10px 14px 14px;
    background: transparent; border-right: 0;
}
.sc-app .sc-brand { gap: 9px; padding: 0 2px 14px; margin: 0; }
.sc-app .sc-brand-mark { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #E4E4E9; background: #fff; }
.sc-app .sc-brand-mark svg, .sc-app .sc-brand-mark img { width: 15px; height: 15px; }
.sc-app .sc-brand b { font-size: 13.5px; font-weight: 700; }
.sc-app .sc-brand-collapse { color: #6B7280; }
.sc-app .sc-brand-collapse svg { width: 16px; height: 16px; }
.sc-app .sc-nav { gap: 2px; }
.sc-app .sc-nav-item { gap: 9px; padding: 7px 8px; font-size: 13px; color: #2A2530; }
.sc-app .sc-nav-item svg { width: 16px; height: 16px; }
.sc-app .sc-nav-item.is-on { background: #EBEBEF; font-weight: 600; }
.sc-app .sc-side-sub { gap: 10px; padding: 18px 8px 8px; font-size: 13px; }
.sc-app .sc-side-sub span:first-child { font-weight: 700; }
.sc-app .sc-side-sub span:last-child { font-weight: 400; color: #6B7280; }
.sc-app .rn-list, .sc-app .sc-recent { padding: 0; gap: 2px; }
.sc-app .rn-item, .sc-app .sc-recent-row { gap: 7px; padding: 6px 8px; font-size: 12px; font-weight: 600; }
.sc-app .rn-item.is-on { background: #EBEBEF; }
.sc-app .rn-item-dot { background: #5B5BF5; }
.sc-app .sc-user { gap: 9px; padding: 0 2px; border-top: 0; font-size: 13px; font-weight: 700; }
.sc-app .sc-avatar {
    width: 26px; height: 26px; border: 1px solid #E1E1E6; background: #fff; color: var(--sc-ink);
    font-size: 9.5px; font-weight: 700;
}

/* the MCP tab's small app keeps its folded sidebar: the marks alone */
.sc-app.ag-app .sc-side { width: 58px; padding: 6px 8px 14px 10px; }
.sc-app.ag-app .sc-brand { justify-content: center; padding: 0 0 14px; }
.sc-app.ag-app .sc-nav-item { justify-content: center; padding: 8px 0; }
.sc-app.ag-app .sc-user { justify-content: center; gap: 0; padding: 0; font-size: 0; }

/* ---------- the main area: a white card ---------- */
.sc-app .sc-main {
    background: #fff; border: 1px solid #E7E7EB; border-bottom: 0;
    border-radius: 14px 14px 0 0; overflow: hidden;
}
/* while the session is the open view, the area splits into two cards,
   the progress on the left and the session on the right, as in the new
   app; the session view lays its own parts out on a grid for it (the
   rail and the feed share .rn-body, so .rn-body steps aside) */
.sc-app .sc-main:has(> .rn-sessionview.is-on) { background: transparent; border-color: transparent; overflow: visible; }
/* (ids win over the old flex column rules: #rn-app, #ev-app, .hr-app, .dm-app) */
.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 {
    display: grid; grid-template-columns: 286px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 10px;
}
.sc-app .rn-sessionview::before {
    content: ""; grid-column: 2; grid-row: 1 / -1; z-index: 0;
    background: #fff; border: 1px solid #E7E7EB; border-bottom: 0; border-radius: 14px 14px 0 0;
}
.sc-app .rn-sessionview > *, .sc-app .rn-sessionview .rn-feed, .sc-app .rn-sessionview .rn-rail { position: relative; z-index: 1; }
.sc-app .rn-sessionview::before { pointer-events: none; }
.sc-app .rn-body, .sc-app .rn-sessionview .rn-body { display: contents !important; }
.sc-app .rn-top { grid-column: 2; grid-row: 1; }
.sc-app .rn-feed { grid-column: 2; grid-row: 2; min-height: 0; }
.sc-app .rn-composer { grid-column: 2; grid-row: 3; }
.sc-app .rn-rail {
    grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 1;
    width: auto; padding: 0; background: #fff;
    border: 1px solid #E7E7EB; border-bottom: 0; border-radius: 14px 14px 0 0;
}
/* before the trigger fires (Triggers) nothing is open: one empty white card,
   which gives way to the two cards as the run opens */
.sc-app .sc-main { transition: background-color .45s ease, border-color .45s ease; }
#ev-app.is-idle .sc-main { background: #fff; border-color: #E7E7EB; }
/* the rest of the main area's views keep the one white card behind them */
.sc-app .sc-main:has(> .rn-sessionview.is-on) > .sc-view:not(.rn-sessionview) { background: #fff; border-radius: 14px 14px 0 0; }

/* ---------- the progress card ---------- */
.sc-app .rn-rail-h {
    display: flex; align-items: center; gap: 9px; height: 52px; margin: 0; padding: 0 18px;
    border-bottom: 1px solid #EFEFF2; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
}
.sc-app .rn-rail-h svg { width: 16px; height: 16px; color: var(--sc-ink); }
.sc-app .rn-todos { position: relative; gap: 20px; padding: 22px 18px 0; }
.sc-app .rn-todos::before {
    content: ""; position: absolute; left: 25px; top: 30px; bottom: 8px; z-index: 0;
    width: 1px; background: #E5E5EA;
}
.sc-app .rn-todo { position: relative; gap: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--sc-ink); }
.sc-app .rn-todo i {
    position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 1px;
    border: 0; border-radius: 999px; background: #fff;
}
.sc-app .rn-todo i::before {
    content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 999px; background: #D4D6DD;
    transition: background-color .3s ease;
}
.sc-app .rn-todo.is-doing i { animation: none; border: 0; background: #fff; box-shadow: none; }
.sc-app .rn-todo.is-doing i::before { background: var(--v2-pink); }
.sc-app .rn-todo.is-done i { background: var(--sc-ink); border: 0; }
.sc-app .rn-todo.is-done i::before { display: none; }
.sc-app .rn-todo.is-done i svg { opacity: 1; width: 9px; height: 9px; color: #fff; }
.sc-app .rn-todo.is-done span { text-decoration: none; color: var(--sc-ink); }
.sc-app .rn-todo.is-doing span { font-weight: 600; }

/* ---------- the session card ---------- */
.sc-app .rn-top { gap: 9px; height: 52px; padding: 0 18px; border-bottom: 1px solid #EFEFF2; }
.sc-app .rn-top-ico {
    width: 24px; height: 24px; border-radius: 7px; border: 1px solid #ECECF0; background: #fff;
}
.sc-app .rn-top-ico img { width: 14px; height: 14px; border-radius: 0; }
.sc-app .rn-top-title { font-size: 13.5px; font-weight: 700; }
.sc-app .rn-autorun {
    gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px;
    border: 1px solid #E4E4E9; background: #fff; color: var(--sc-ink); font-size: 12px; font-weight: 600;
}
.sc-app .rn-autorun svg { color: #6B7280; }
.sc-app .rn-autorun.is-done { background: #F7F7F8; color: #4B5563; }
.sc-app .rn-done-btn { width: 28px; height: 28px; border: 1px solid #E4E4E9; background: #fff; color: #4B5563; }
.sc-app .rn-done-btn svg { width: 12px; height: 12px; }

/* the feed: tiled marks, as the Ask agent's are in the new app */
.sc-app .rn-feed { padding: 20px 22px 12px; }
.sc-app .rn-row { margin-bottom: 16px; }
.sc-app .rn-row-head { gap: 10px; font-size: 13px; }
.sc-app .rn-row-head > img, .sc-app .rn-row-head > .rn-avatar {
    flex: none; box-sizing: border-box; width: 24px; height: 24px; padding: 4px; border-radius: 7px;
    border: 1px solid #ECECF0; background: #fff; object-fit: contain;
}
.sc-app .rn-row-head > .rn-avatar { padding: 0; color: var(--sc-ink); font-size: 9px; }
.sc-app .rn-row-head time { font-size: 11.5px; color: #9CA3AF; }
.sc-app .rn-row-sub { margin: 4px 0 0 34px; font-size: 13px; line-height: 1.45; }
.sc-app .rn-work, .sc-app .ev-call-box, .sc-app .ev-watch { margin-left: 34px; border-color: #E7E7EB; border-radius: 12px; }
.sc-app .rn-work-item .rn-tick { background: #15803D; }

/* the message box */
.sc-app .rn-composer, #rn-app.sc-app .rn-composer, #ev-app.sc-app .rn-composer, .hr-app.sc-app .rn-composer { padding: 0 18px 16px; }
.sc-app .rn-composer-box { max-width: none; border-color: #E4E4E9; border-radius: 14px; }
.sc-app .rn-composer-t { color: #9CA3AF; }
.sc-app .rn-composer-src { height: 26px; padding: 0 9px; border-color: #E4E4E9; color: #4B5563; }

/* ---------- narrow screens: one card, no rail (as before) ---------- */
@media (max-width: 980px) {
    .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-columns: minmax(0, 1fr); }
    .sc-app .rn-sessionview::before { grid-column: 1; }
    .sc-app .rn-top, .sc-app .rn-feed, .sc-app .rn-composer { grid-column: 1; }
    .sc-app .rn-rail { display: none; }
    /* the sidebar is the strip along the top here (how-it-works.css) */
    .sc-app { padding: 0 10px; gap: 0; }
    .sc-app .sc-side, .sc-app.ag-app .sc-side { width: auto; padding: 10px 2px; }
}
@media (max-width: 767px) {
    .sc-app { padding: 0; gap: 0; }
    .sc-app .sc-side { padding: 10px 12px; }
    .sc-app .sc-main, .sc-app .rn-sessionview::before { border-radius: 0; border-left: 0; border-right: 0; }
    .sc-app .rn-top { padding: 0 14px; }
    .sc-app .rn-feed { padding: 16px 14px 10px; }
    .sc-app .rn-composer, #rn-app.sc-app .rn-composer, #ev-app.sc-app .rn-composer, .hr-app.sc-app .rn-composer { padding: 0 12px 12px; }
}