/* ==========================================================
   HERO ANIMATION — index.html
   Scenes: write → transform → assemble → execute → loop
   Structure:
     .hero-anim              — outer wrapper
       .hero-app             — Askpilot app shell (sidebar + toolbar + main)
         .hero-sidebar       — slides in from left during assemble
         .hero-topbar        — slides down from top during assemble
         .hero-main          — main content area that holds the card
           .hero-card        — white card that is the doc / workflow
             .hero-code      — layer A: PROCESS.md syntax (Act 1)
             .hero-workflow  — layer B: designed workflow UI (Acts 2–4)
   ========================================================== */
.hero-anim {
    position: relative;
    width: 100%;
    cursor: pointer;
}
/* All interior interactive elements are decorative (the animation drives them).
   Disable pointer-events on them so the click-to-pause handler on .hero-anim
   gets every click — a disabled <button> would otherwise swallow the event,
   and <a href="#"> links would catch it before bubble. */
.hero-anim button,
.hero-anim a,
.hero-anim .hero-create-select,
.hero-anim .hero-dropzone {
    pointer-events: none;
}
/* =========================================================
   Pause/play feedback overlay — flashes briefly when the user clicks
   the animation to pause/resume. Centered, pointer-events: none so it
   never blocks the click that triggered it.
   ========================================================= */
.hero-pause-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 100;
}
.hero-pause-icon {
    width: 76px;
    height: 76px;
    border-radius: 9999px;
    /* Solid dark fill instead of backdrop-filter blur — saves a per-pixel
       pass on every frame the overlay is shown. */
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.35);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity   0.18s var(--hero-ease),
        transform 0.28s var(--hero-ease-doc);
    position: absolute;
}
.hero-pause-icon svg { width: 28px; height: 28px; }
.hero-pause-icon.is-show {
    opacity: 1;
    transform: scale(1);
}

/* Stage: fixed height on desktop so the app shell never jumps.
   Before assembly, the grid collapses to a single column so the main area
   (and the card inside it) is centered across the full stage width.
   During assembly, the sidebar column expands and the card shifts right. */
/* Shared easings for the hero animation — tuned to feel like weighted objects
   rather than snappy UI toggles.
     --hero-ease       : gentle decel for one-shot reveals (fade-in, slide-in)
     --hero-ease-in    : for exits
     --hero-ease-doc   : super-smooth tail for the doc→chip morph and reverse
     --hero-ease-shell : flat-tail curve used only for the shell reveal, so
                         the app "settles into focus" with no perceptible jerk */
.hero-app {
    --hero-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --hero-ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --hero-ease-doc:   cubic-bezier(0.16, 1, 0.3, 1);
    --hero-ease-shell: cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-app {
    position: relative;
    display: grid;
    /* Start with the final 2-column layout so there's no grid interpolation
       during assembly. The sidebar column exists from the start but the sidebar
       itself is invisible (opacity 0), so the card is centered in the main column
       during write/collapse. */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 680px;
    border-radius: 1rem;
}
@media (min-width: 1024px) {
    .hero-app {
        min-height: 740px;
    }
    .hero-app.is-assembled {
        grid-template-columns: 220px 1fr;
    }
}

/* The web app "shell" — visualized as a pseudo-element so it can scale and
   fade in from its own center without dragging its children's opacity.
   Uses a blur filter alongside opacity + scale so the surface reads as
   "coming into focus" rather than a flat fade. */
.hero-app::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.15);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: center center;
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
    /* opacity + small scale = "comes into focus" feel without expensive
       per-pixel blur resampling. Faster, GPU-friendly. */
    transition:
        opacity   1.1s var(--hero-ease-shell),
        transform 1.3s var(--hero-ease-shell);
}
.hero-app.is-assembled::before {
    opacity: 1;
    transform: scale(1);
}
/* Clip real children (sidebar, chat, rail) to the same rounded corners as
   the `::before` shell — otherwise their solid backgrounds paint right up
   to the sharp bounding box and hide the radius in the four corners. Also
   draw the app's outer border + shadow directly on the element so it stays
   visible over the children (same 1px grey, 1rem radius and soft shadow
   as the process.md writing box). */
.hero-app.is-assembled {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
/* Ensure real children render above the pseudo shell. */
.hero-app > * { position: relative; z-index: 1; }

/* Sidebar */
.hero-sidebar {
    grid-row: 1 / 3;
    grid-column: 1;
    display: none;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    background: #fafafa;
    opacity: 0;
    /* opacity-only fade — cheap on the GPU and indistinguishable in feel
       from blur+opacity for content this small. */
    transition:
        opacity 1.1s var(--hero-ease-shell) 0.1s,
        background-color 0.9s var(--hero-ease-shell),
        border-color     0.9s var(--hero-ease-shell);
}
/* During the trigger moment the sidebar's own surface fades to pure white
   so the whole stage reads as a single blank canvas. */
.hero-app.is-trigger-firing .hero-sidebar {
    background: #ffffff;
    border-right-color: transparent;
}
@media (min-width: 1024px) {
    .hero-sidebar { display: flex; }
}
.hero-app.is-assembled .hero-sidebar {
    opacity: 1;
}
.hero-sidebar-section {
    padding: 8px 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-sidebar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
}
.hero-sidebar-row svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    /* inherit row text color so the icon matches the label exactly */
    color: inherit;
}
.hero-sidebar-row:hover {
    background: #f3f4f6;
    color: #111827;
}
/* Workflows nav row reads as selected while the user is on the Add workflow
   form or the workflow presentation page. Once the chat session starts, the
   selection moves to the matching session row in the sidebar list below. */
.hero-app.is-creating .hero-sidebar-row[data-nav="workflows"],
.hero-app.is-flow-preview .hero-sidebar-row[data-nav="workflows"] {
    background: #f3f4f6;
    color: #0f172a;
    font-weight: 600;
}
.hero-sidebar-logo {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 10px;
    font-size: 14px; font-weight: 600; color: #0f172a;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.hero-sidebar-logo-mark {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hero-sidebar-logo-mark svg { width: 14px; height: 14px; }
.hero-sidebar-logo-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-sidebar-collapse {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
    border-radius: 6px;
}
.hero-sidebar-collapse svg { width: 16px; height: 16px; }

/* Sessions section — Active / Done tabs + list of session cards */
.hero-sidebar-sessions {
    padding: 14px 10px 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}
.hero-sidebar-sessions-tabs {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 8px 6px;
    font-size: 13px;
    font-weight: 500;
}
.hero-sidebar-sessions-tabs .is-active {
    color: #0f172a;
    font-weight: 600;
}
.hero-sidebar-sessions-tabs span:not(.is-active) {
    color: #9ca3af;
}
.hero-sidebar-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
/* Empty-state placeholder shown before the first session spawns. */
.hero-sidebar-sessions-empty {
    font-size: 12px;
    color: #9ca3af;
    padding: 8px 10px;
    margin: 0;
    line-height: 1.4;
    transition: opacity 0.4s var(--hero-ease);
}
.hero-app.is-session-born .hero-sidebar-sessions-empty {
    display: none;
}
.hero-sidebar-session {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: default;
    transition: background-color 0.2s ease;
}
/* Chase session is selected only while the chat session is active. During the
   workflow form / presentation phases the Workflows nav row carries selection
   instead. */
.hero-app.is-executing .hero-sidebar-session[data-session="chase"] {
    background: #f3f4f6;
}
.hero-sidebar-session:hover {
    background: #f9fafb;
}
.hero-app.is-executing .hero-sidebar-session[data-session="chase"]:hover {
    background: #f3f4f6;
}
.hero-sidebar-session-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #111827;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-app.is-executing .hero-sidebar-session[data-session="chase"] .hero-sidebar-session-title {
    font-weight: 600;
    color: #0f172a;
}
.hero-sidebar-session-time {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin: 3px 0 0;
    line-height: 1.2;
}

/* Topbar */
.hero-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 0;
    /* Collapsed by default — only the chat phase needs the topbar, so its
       grid row sits at 0px height the rest of the time. This lets the card
       (and its scrollbar) span the whole stage. */
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        height  0.9s var(--hero-ease-shell),
        padding 0.9s var(--hero-ease-shell),
        opacity 1.1s var(--hero-ease-shell) 0.1s;
}
@media (min-width: 1024px) {
    .hero-app.is-assembled .hero-topbar { grid-column: 2; }
}
/* Topbar is hidden during execute — the chat column's own header (session
   title + check) serves as the top strip, and the rail extends all the way
   up to the card's top edge on the right. */
.hero-app.is-executing .hero-topbar {
    height: 0;
    padding: 0;
    opacity: 0;
}
.hero-topbar-title {
    font-size: 13px; font-weight: 600; color: #111827;
}
.hero-topbar-actions {
    display: flex; gap: 8px;
}
.hero-topbar-dot {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
}

/* Main area — holds the card + the floating chip/cursor */
.hero-main {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: padding 0.5s ease;
}
@media (min-width: 1024px) {
    .hero-app.is-assembled .hero-main { grid-column: 2; }
}
.hero-app.is-assembled .hero-main {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

/* The card itself: single surface that hosts all three scenes (code, form, exec).
   During the is-collapsed phase the card itself shrinks (via transform) into a
   chip-sized rectangle, reading as the file "becoming" a small draggable object.
   JS sets --card-tx, --card-ty, --card-scale for the shrink transform. */
/* Intro overlay — fills the hero-card for the first 5s of every loop with
   a clean white surface and the tagline. Fades out before typing begins. */
.hero-card-intro {
    position: absolute;
    inset: 0;
    z-index: 50;
    /* Translucent white over a backdrop blur so the pastel hero gradient
       shows through softly. The card's own #ffffff is fully replaced by
       this layered look, blending the intro into the surrounding hero. */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.6s var(--hero-ease, ease-out);
}
.hero-app.is-intro-out .hero-card-intro {
    opacity: 0;
}
.hero-card-intro-text {
    margin: 0;
    font-family: inherit;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: #6583FF;
    max-width: 14em;
}

.hero-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    min-height: 620px;
    transform-origin: 0 0;
    transform: translate(var(--card-tx, 0), var(--card-ty, 0)) scale(var(--card-scale, 1));
    opacity: 1;
    /* All card geometry properties share one curve + duration so the shrink
       reads as one coordinated motion. No delays — the card animates with the
       same timing as the shell reveal so they feel like one piece. */
    transition:
        transform      1.4s var(--hero-ease-doc),
        max-width      1.4s var(--hero-ease-doc),
        box-shadow     1.2s var(--hero-ease),
        border-color   1.2s var(--hero-ease),
        border-radius  1.2s var(--hero-ease-doc),
        opacity        0.8s var(--hero-ease);
}
@media (min-width: 1024px) {
    .hero-card { min-height: 680px; }
}
/* Collapsed: the card has shrunk into chip dimensions (JS sets the transform
   values). The chip element fades in on top of the shrunken card for the
   handoff; once complete the card itself fades out so only the chip is visible. */
.hero-app.is-collapsed .hero-card {
    border-radius: 12px;
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.1);
}
.hero-app.is-collapsed.is-card-hidden .hero-card {
    opacity: 0;
    pointer-events: none;
    /* Snap-fast hide at the card→chip swap so the chip doesn't briefly
       overlap a still-fading card silhouette. */
    transition: opacity 0.18s var(--hero-ease);
}
/* While the card is hidden AND the app is assembling, let its geometry
   (max-width, transform, radius, border, shadow) SNAP to the assembled
   target so there's nothing left to animate when the card un-hides.
   The card un-hides cleanly — no half-finished transitions showing through. */
.hero-app.is-card-hidden.is-assembled .hero-card {
    transition: opacity 0.9s var(--hero-ease);
}
/* Assembled: card resets its transform (handled by JS clearing the custom props)
   and widens to fill the main content area. */
.hero-app.is-assembled .hero-card {
    max-width: 100%;
    box-shadow: none;
    border-color: transparent;
    border-radius: 0;
    height: 100%;
    min-height: 0;
}

/* Filename pill — visible during Act 1 only */
.hero-filename-pill {
    position: absolute;
    top: -12px;
    left: 24px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 4px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    opacity: 1;
    transition: opacity 0.4s var(--hero-ease);
}
.hero-filename-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #6583FF;
}
.hero-app.is-collapsed .hero-filename-pill,
.hero-app.is-creating .hero-filename-pill,
.hero-app.is-flow-preview .hero-filename-pill,
.hero-app.is-executing .hero-filename-pill {
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   Scene layers — absolutely stacked inside the card.
   Visibility is driven by state classes on .hero-app:
     (default)       → code scene only (Act 1)
     .is-assembled   → code scene still visible; chrome has landed
     .is-creating    → create-form scene fades in; code fades out
     .is-executing   → exec scene fades in; create-form fades out
   ========================================================= */
.hero-scene {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity   1.1s var(--hero-ease),
        transform 1.1s var(--hero-ease-doc);
}
.hero-app.is-assembled .hero-scene {
    border-radius: 0;
}
/* Scene A: PROCESS.md code. Visible by default, fades as the form appears.
   pre-wrap so long lines wrap inside the card; overflow-y: auto so the scene
   scrolls vertically when the typed content grows past the card height.
   JS auto-scrolls to keep the cursor visible as each line is revealed. */
/* Scene A: PROCESS.md "writing" view — rendered as a real word
   processor. The scene itself is now a column layout:
     [toolbar] -- formatting buttons (B / I / U / lists / link)
     [page]    -- the document surface where typing happens
     [status]  -- "Page 1 · English (UK) · 100%"
   The page does the typography + the line scroll. */
.hero-scene-code {
    opacity: 1;
    pointer-events: auto;
    background: #f8fafc;          /* editor frame background */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Notepad-style window chrome — replaces the previous Word-style
   formatting toolbar. The whole header is two thin rows:
     [tab strip]   ← app icon + active tab + new-tab button
     [menu bar]    ← File / Edit / View
   The File button opens the save dropdown.
   ============================================================ */

/* TAB STRIP — colorful Askpilot gradient picks up the site's brand
   palette (sky blue → mint → pale yellow → blush) so the editor
   doesn't read as flat Windows chrome. The active tab still pops
   out as white, the rest of the strip carries the brand mood. */
.hero-doc-tabstrip {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 40px;
    padding: 10px 8px 0 12px;
    background: linear-gradient(135deg, #EEF7FF 0%, #FFFAEB 100%);
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.hero-doc-app-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
}
.hero-doc-app-icon svg { width: 18px; height: 18px; display: block; }

.hero-doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px 0 12px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-bottom-color: #ffffff;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    margin-bottom: -1px;
    font-family: 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    color: #1f1f1f;
    align-self: flex-end;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
}
.hero-doc-tab-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.hero-doc-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    border-radius: 3px;
    color: #6b6b6b;
    cursor: default;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}
.hero-doc-tab-close:hover { background: rgba(0, 0, 0, 0.06); }
.hero-doc-tab-close svg { width: 11px; height: 11px; display: block; }

.hero-doc-tab-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    align-self: center;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: #444;
    cursor: default;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}
.hero-doc-tab-new:hover { background: rgba(0, 0, 0, 0.06); }
.hero-doc-tab-new svg { width: 13px; height: 13px; display: block; }

/* MENU BAR */
.hero-doc-menubar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: #ffffff;
    border-bottom: 1px solid #ececec;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.hero-doc-menu-item-wrap {
    position: relative;
}
.hero-doc-menu-item {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: #1f1f1f;
    font-family: 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1;
    cursor: default;
    transition: background-color 0.12s ease;
}
/* Hover/active states are driven by the animation (the virtual cursor),
   not by real :hover — so the File button only highlights when the
   on-screen pointer is actually over it. */
.hero-doc-menu-item.is-hover    { background: rgba(0, 0, 0, 0.05); }
.hero-doc-menu-item.is-pulse    { background: rgba(0, 0, 0, 0.05); }
.hero-doc-menu-item.is-pressed  { background: rgba(101, 131, 255, 0.16); }

/* Save dropdown — anchored under the File menu (top-left). */
.hero-doc-save-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.08),
        0 16px 32px -8px rgba(15, 23, 42, 0.18);
    padding: 4px;
    z-index: 30;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition:
        opacity   0.18s var(--hero-ease),
        transform 0.22s var(--hero-ease-shell);
}
/* Divider between save-menu groups (mirrors real Notepad's File menu) */
.hero-doc-save-divider {
    height: 1px;
    background: #ececec;
    margin: 4px 6px;
}
/* Inline keyboard shortcut hint on the right side of a menu item */
.hero-doc-save-item-shortcut {
    font-family: 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    color: #8a8a8a;
}
.hero-doc-save-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.hero-doc-save-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 12.5px;
    color: #1f1f1f;
    cursor: default;
    transition: background-color 0.12s ease;
}
.hero-doc-save-item.is-hover,
.hero-doc-save-item.is-hover.is-primary {
    background: rgba(101, 131, 255, 0.10);
}
.hero-doc-save-item-label {
    flex: 1;
    font-weight: 400;
}
.hero-doc-save-item-ext {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
}
.hero-doc-save-item.is-primary .hero-doc-save-item-ext {
    color: #4338ca;
    background: rgba(101, 131, 255, 0.12);
}
/* Click flash on the highlighted item */
.hero-doc-save-item.is-pressed {
    background: #dbeafe;
    transform: scale(0.99);
}

/* "Saved as …" toast — bottom-right of the scene */
.hero-doc-toast {
    position: absolute;
    right: 16px;
    bottom: 40px;            /* sits just above the status bar */
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.08),
        0 14px 30px -6px rgba(15, 23, 42, 0.18);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    color: #0f172a;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition:
        opacity   0.28s var(--hero-ease),
        transform 0.32s var(--hero-ease-shell);
}
.hero-doc-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.hero-doc-toast strong {
    font-weight: 600;
    color: #0f172a;
    margin-left: 2px;
}
.hero-doc-toast-tick {
    width: 14px;
    height: 14px;
    color: #16a34a;
    flex-shrink: 0;
}

/* The document page — where typing actually happens.
   Notepad displays a .md file as plain text in monospace; we
   match that. Flat white surface, monospace, no rendered styling. */
.hero-doc-page {
    flex: 1;
    min-height: 0;
    background: #ffffff;
    padding: 1.25rem 1.5rem 2.5rem;
    transition: padding 0.9s var(--hero-ease);
    font-family: 'Cascadia Mono', 'Cascadia Code', Consolas, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'Liberation Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #0f172a;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Once writing finishes, shrink the bottom padding so the saved
   doc reads as tight (no big empty zone below the last line).
   While writing, the larger 2.5rem padding gives the active line
   breathing room above the footer. */
.hero-app.is-write-complete .hero-doc-page {
    padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
    .hero-doc-page { font-size: 15px; padding: 2rem 2.25rem 2.5rem; }
    .hero-app.is-write-complete .hero-doc-page { padding-bottom: 0.75rem; }
}

/* Status bar — bottom of the editor frame, Notepad style */
.hero-doc-statusbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #fafafa;
    border-top: 1px solid #ececec;
    font-family: 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    color: #6b6b6b;
    flex-shrink: 0;
}
.hero-doc-status-dot { color: #cccccc; }
.hero-doc-status-spacer { flex: 1; }

.hero-scene-code-inner {
    display: block;
    transform: translateY(var(--code-y, 0px));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* === Word-processor document typography ============================
   The writing scene renders content the way Word, Pages, or Notion
   would — title, italic subtitle, H2 section headings, prose
   paragraphs with bold lead-ins, real checklist items, and bullet
   lists. No tag pills, no chips, no inline labels. Just typography.
   ==================================================================*/

/* All document text is rendered in a single near-black ink — Word
   default. Hierarchy comes from weight and size, not color. */
.hero-scene-code .hero-doc-title,
.hero-scene-code .hero-doc-sub,
.hero-scene-code .hero-doc-h2,
.hero-scene-code .hero-doc-p,
.hero-scene-code .hero-doc-todo,
.hero-scene-code .hero-doc-cont,
.hero-scene-code .hero-doc-meta,
.hero-scene-code .hero-doc-li {
    color: #0f172a;
    font-style: normal;
}
.hero-scene-code .hero-doc-cont em,
.hero-scene-code .hero-doc-sub em {
    font-style: normal;
    color: inherit;
}

/* The .md file is rendered as plain text — no styling. The doc-class
   spans (.hero-doc-title etc.) were used by the previous Word-style
   rendering; they're now reset to plain inline so any leftover
   markup falls through as flat text. The only thing the page does
   is line-by-line and per-character typing animation. */
.hero-scene-code .hero-doc-title,
.hero-scene-code .hero-doc-sub,
.hero-scene-code .hero-doc-h2,
.hero-scene-code .hero-doc-p,
.hero-scene-code .hero-doc-todo,
.hero-scene-code .hero-doc-cont,
.hero-scene-code .hero-doc-meta,
.hero-scene-code .hero-doc-li {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.hero-scene-code .hero-doc-todo::before,
.hero-scene-code .hero-doc-li::before { content: none; }

/* === Markdown token colors ==========================================
   Notepad's markdown-aware view colorises the source so YAML keys,
   ## headings, [ ] checkboxes, and rule/field labels read at a
   glance. We use a calm editorial palette — no neon syntax-highlight
   colors — and keep body text in default ink.
   ====================================================================*/
.hero-doc-page .md-fence        { color: #94a3b8; }
.hero-doc-page .md-key          { color: #6366f1; font-weight: 600; }
.hero-doc-page .md-h2           { color: #0ea5e9; font-weight: 700; }
.hero-doc-page .md-checkbox     { color: #94a3b8; }
.hero-doc-page .md-todo         { color: #0f172a; font-weight: 600; }
.hero-doc-page .md-field        { color: #0f766e; font-weight: 600; }
.hero-doc-page .md-rule-stop,
.hero-doc-page .md-rule-escalate,
.hero-doc-page .md-rule-tone    { color: #dc2626; font-weight: 600; }
.hero-doc-page .md-bullet       { color: #94a3b8; }
.hero-doc-page .md-process,
.hero-doc-page .md-path-name    { color: #d97706; font-weight: 600; }

/* Static preview wraps the markdown in a <pre class="hero-doc-md"> so
   white-space and line breaks survive without any HTML formatting. */
.hero-doc-md {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: transparent;
    padding: 0;
    border: 0;
}

/* Hide the editor scene (toolbar + tab strip + menu + page +
   status bar) for every phase after writing — collapse, form,
   flow preview, trigger firing, and chat execution. */
.hero-app.is-collapsed .hero-scene-code,
.hero-app.is-creating .hero-scene-code,
.hero-app.is-flow-preview .hero-scene-code,
.hero-app.is-trigger-firing .hero-scene-code,
.hero-app.is-executing .hero-scene-code {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Scene B: Add workflow form. Hidden until .is-creating. */
.hero-scene-create {
    transform: translateY(6px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: #ffffff;
    will-change: opacity, transform;
    transition:
        opacity   0.9s var(--hero-ease-shell),
        transform 1.1s var(--hero-ease-shell);
}
.hero-app.is-creating .hero-scene-create {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hero-app.is-flow-preview .hero-scene-create,
.hero-app.is-executing .hero-scene-create {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* Scene B2: workflow-created confirmation — shown briefly between the form
   and the execution scene to confirm the workflow is set up and running. */
.hero-scene-flow {
    transform: translateY(8px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: #ffffff;
    will-change: opacity, transform;
    transition:
        opacity   0.9s var(--hero-ease-shell),
        transform 1.1s var(--hero-ease-shell);
}
.hero-app.is-flow-preview .hero-scene-flow {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hero-app.is-executing .hero-scene-flow {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

/* Scene C: execution chat. Hidden until .is-executing. */
.hero-scene-exec {
    transform: translateY(8px);
}
.hero-app.is-executing .hero-scene-exec {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Typing lines — each line is its own block. The blank lines in
   the LINES array carry an `&nbsp;` for separators; we collapse
   their height so the gap between todos stays subtle (the per-block
   `margin-top` rules above carry most of the rhythm). */
.hero-file-line {
    display: block;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin-bottom: 0;
}
.hero-file-line.is-blank {
    /* &nbsp;-only separator lines — height controls the gap between
       sections (between the YAML frontmatter, ## Rules, ## Todos,
       ## Sub-processes, and between todo blocks). */
    line-height: 0.9em;
    font-size: 1em;
}
.hero-file-line.is-visible {
    opacity: 1;
    transform: none;
}

/* Blinking text caret — thin vertical line, like a real text-editor caret
   (was a wide block cursor that looked "code-y"). */
.hero-cursor {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    background: #1f2937;
    vertical-align: -0.18em;
    margin-left: 1px;
    animation: heroCursorBlink 1s steps(2, start) infinite;
}
@keyframes heroCursorBlink {
    to { visibility: hidden; }
}

/* Shared spinner keyframes — used by tool cards and rail */
@keyframes heroSpin {
    to { transform: rotate(360deg); }
}
@keyframes heroStatusPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Inline approval card buttons (used in chat phase) */
.hero-btn-primary {
    background: #0f172a; color: #ffffff;
    font-size: 12px; font-weight: 600;
    border: 0;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-primary.is-pressed { background: #1f2937; transform: scale(0.97); }
.hero-btn-secondary {
    background: #ffffff; color: #374151;
    font-size: 12px; font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
}

/* ==========================================================
   EXECUTION VIEW — appears after the app assembles.
   Layout: chat thread (primary) + right rail (workflow summary).
   Mobile: chat only, rail hidden.
   ========================================================== */
.hero-exec {
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    min-height: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero-app.is-executing .hero-exec { display: grid; opacity: 1; }
@media (min-width: 1024px) {
    .hero-exec {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

/* =========================================================
   Chat column — session view
   ========================================================= */
.hero-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid #e5e7eb;
    background: #ffffff;
}
@media (max-width: 1023px) {
    .hero-chat { border-right: 0; }
}

/* Session title bar */
.hero-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f4;
}
.hero-chat-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-chat-done {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    color: #4b5563;
    transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.hero-chat-done svg { width: 14px; height: 14px; }
.hero-app.is-executing.is-complete .hero-chat-done {
    color: #059669;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Thread */
.hero-chat-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    scroll-behavior: smooth;
}
.hero-chat-thread::-webkit-scrollbar { width: 4px; }
.hero-chat-thread::-webkit-scrollbar-track { background: transparent; }
.hero-chat-thread::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* Composer (static, decorative) */
.hero-chat-composer {
    border-top: 1px solid #eef0f4;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
}
.hero-chat-input {
    font-size: 14px;
    color: #9ca3af;
    padding: 6px 0 2px;
    letter-spacing: -0.002em;
}
.hero-chat-meta { display: flex; }
.hero-sources-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 5px 12px 5px 10px;
}
.hero-sources-pill-ico { width: 13px; height: 13px; color: #0f172a; }
.hero-sources-pill-info { width: 13px; height: 13px; color: #9ca3af; }

/* =========================================================
   Messages — all left-aligned, avatar + name/time + body
   ========================================================= */
.hero-msg {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-msg.is-visible { opacity: 1; transform: none; }

/* A continuation message (no avatar row, just a continuation body) is a
   sub-action of the same agent turn — it should share the tight in-turn
   spacing used between children inside `.hero-msg-body`, not the large
   inter-turn spacing that `.hero-chat-thread`'s `gap: 28px` imposes. Pull
   it up so the effective gap becomes 10px (matches `.hero-msg-body gap`). */
.hero-msg:has(> .hero-msg-body.is-continuation:only-child) {
    margin-top: -18px;
}

/* Streaming caret — a thin vertical bar that blinks at the end of any
   element currently receiving streamed characters. Mirrors the cursor
   modern LLM chat UIs show while tokens are still arriving. */
.is-streaming::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    opacity: 0.6;
    margin-left: 2px;
    vertical-align: -0.15em;
    border-radius: 1px;
    animation: heroCaretBlink 1s steps(2, start) infinite;
}
@keyframes heroCaretBlink {
    to { opacity: 0; }
}
/* Tool-call body stays hidden until the tool name finishes streaming —
   mirrors how real tool-call UIs render structured fields only once the
   tool response payload has arrived, not while the name is still being
   "called". */
.hero-tool-body.is-tool-body-pending {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

/* System / automated banner — kick-off card for the session. Mirrors the
   agent message structure: icon + title on one centred row, and a meta row
   of chips underneath aligned to the content column. */
.hero-msg-system .hero-system-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    max-width: 100%;
}
.hero-msg-system .hero-system-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hero-msg-system .hero-system-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
}
.hero-msg-system .hero-system-ico svg { width: 18px; height: 18px; }
.hero-msg-system .hero-system-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.hero-msg-system .hero-system-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.002em;
    line-height: 1.3;
}
.hero-msg-system .hero-system-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
    min-width: 0;
    /* align with the title column: icon 30 + row gap 10 = 40px */
    margin-left: 40px;
}
.hero-msg-system .hero-system-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    /* Cap the chip's max width to the content column so a long
       value (e.g. process name) wraps onto its own line instead
       of clipping past the right edge on narrow viewports. */
    max-width: 100%;
    min-width: 0;
}
.hero-msg-system .hero-system-chip-val {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hero-msg-system .hero-system-chip-key {
    font-size: 10.5px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hero-msg-system .hero-system-chip-val {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #374151;
}

/* Session header — slim, two-row card that announces the workflow has
   started. Carries one structured statement: status + headline + which
   process + what triggered it. No bulky contact panel — those details
   re-surface naturally in the first agent tool call below. */
.hero-msg-system .hero-system-event {
    width: 100%;
    max-width: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hero-msg-system .hero-system-event-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hero-msg-system .hero-system-event-headline {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.002em;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.hero-msg-system .hero-system-event-time {
    font-size: 11px;
    color: #9ca3af;
    flex: 0 0 auto;
}
.hero-msg-system .hero-system-event-running {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.hero-msg-system .hero-system-event-slug {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #0f172a;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 5px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.hero-msg-system .hero-system-event-trigger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid #f1f5f9;
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.5;
}
.hero-msg-system .hero-system-event-trigger-label {
    color: #9ca3af;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hero-msg-system .hero-system-event-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 5px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 500;
}
.hero-msg-system .hero-system-event-brand-chip .hero-brand-img {
    width: 14px; height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}
.hero-msg-system .hero-system-event-trigger-text {
    color: #4b5563;
    font-weight: 500;
}
.hero-msg-row {
    display: flex; gap: 10px; align-items: center;
}
.hero-avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #6583FF 0%, #BF27BF 50%, #EE844C 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}
/* Agent avatar: the real Askpilot logo mark inside a soft rounded-square tile. */
.hero-avatar.is-agent {
    background:
        url("../images/logo/askpilot-logo-dark-icon.svg") center/58% no-repeat,
        #ffffff;
    color: transparent;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.hero-avatar.is-agent::before { content: none; }
/* Tool-call head avatar: icon only (no box), smaller than the main avatar's
   inner logo and centred on the same vertical axis as the 30px tile. */
.hero-tool-head .hero-avatar.is-agent {
    border: 0;
    background:
        url("../images/logo/askpilot-logo-dark-icon.svg") center/100% no-repeat;
    border-radius: 0;
    box-shadow: none;
    width: 13px; height: 13px;
    /* main avatar centre is at x=15 (30/2); offset by (30-13)/2 = 8.5 so the
       smaller icon shares the same centre line. The tool name then starts at
       x=32 (icon left 8.5 + icon 13 + 10.5 margin), which matches the visual
       start of the body text column after the avatar. */
    margin-left: 8.5px;
    margin-right: 10.5px;
}
/* Override the flex gap on the tool head so only the explicit margin-right
   above controls the distance between icon and tool name. */
.hero-tool-head { gap: 0; }
.hero-avatar.is-user {
    background: #eef2f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    border-radius: 12px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
}
.hero-msg-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Continuation variant: agent sub-actions after the first "Ask · time" header.
   Text-style children keep the 40px indent (same as the main text column) and
   get a small Ask icon on the left via an ::before pseudo-element. Icon sits
   at x=8.5 so its centre matches the main avatar's vertical axis. */
.hero-msg-body.is-continuation > .hero-msg-text,
.hero-msg-body.is-continuation > .hero-msg-label {
    position: relative;
}
.hero-msg-body.is-continuation > .hero-msg-text::before,
.hero-msg-body.is-continuation > .hero-msg-label::before {
    content: '';
    position: absolute;
    left: -31.5px; /* -(40 - 8.5) so icon lives at x=8.5 of the message */
    top: 0.35em;
    width: 13px; height: 13px;
    background: url("../images/logo/askpilot-logo-dark-icon.svg") center/100% no-repeat;
}
.hero-msg-head {
    display: flex; align-items: baseline; gap: 8px;
    min-width: 0;
}
.hero-msg-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.hero-msg-time {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
}
/* Indent any text-style content inside the message body to align with the
   author name column (avatar width 30 + gap 10 = 40px). Tool cards stay at
   x=0 so their small icon lines up with the main avatar's vertical axis. */
.hero-msg-text {
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    line-height: 1.55;
    margin-left: 40px;
}
.hero-msg-label {
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    margin-bottom: -2px;
    letter-spacing: -0.002em;
    line-height: 1.55;
    margin-left: 40px;
}

/* Thoughts block — soft-outlined reasoning card */
.hero-thoughts {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 40px;
}

/* =========================================================
   Tool call card — avatar + name header (flat), then a soft-grey
   container holding stacked label/value pairs. A centered down-chevron
   sits at the bottom as the collapse hint.
   ========================================================= */
.hero-tool {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    border: 0;
}
.hero-tool-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}
.hero-tool-head .hero-avatar {
    width: 22px; height: 22px;
}
.hero-tool-name {
    font-size: 13px;
    font-weight: 400;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.hero-tool-status {
    display: none;
}
.hero-tool-status .spinner {
    width: 12px; height: 12px;
    border: 1.8px solid #e5e7eb;
    border-top-color: #9ca3af;
    border-radius: 50%;
    animation: heroSpin 0.8s linear infinite;
}
.hero-tool-status .check-badge {
    display: none;
    width: 14px; height: 14px;
    border-radius: 9999px;
    background: #10b981;
    color: #ffffff;
    align-items: center; justify-content: center;
}
.hero-tool-status .check-badge svg { width: 9px; height: 9px; }
.hero-tool-status.is-done { color: #6b7280; font-weight: 500; }
.hero-tool-status.is-done .spinner { display: none; }
.hero-tool-status.is-done .check-badge { display: inline-flex; }

/* Body: soft-grey rounded container with stacked field rows
   (label on top, value underneath with left accent bar). */
.hero-tool-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: #f6f7f9;
    border-radius: 12px;
    margin-left: 40px;
    transition: opacity 0.25s ease, transform 0.3s var(--hero-ease-doc);
}
.hero-tool-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
}
.hero-tool-field-label {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: -0.002em;
    line-height: 1.55;
}
.hero-tool-field-value {
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    line-height: 1.55;
    min-width: 0;
    /* Wrap long values onto multiple lines so nothing clips off the right
       edge on narrow viewports. Code values keep their monospace font but
       also wrap (with overflow-wrap so long tokens break cleanly). */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0 0 0 10px;
    border-left: 2px solid #d1d5db;
}
.hero-tool-field-value.is-code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 400;
    color: #374151;
}
.hero-tool-field-value.is-muted {
    color: #9ca3af;
    border-left-color: #e5e7eb;
}
/* Fade-preview value: rendered in light grey to read as the first line of a
   longer message truncated into a single-line preview. */
.hero-tool-field-value.is-fade {
    color: #b5bcc7;
    border-left-color: #e5e7eb;
}
/* Attachment value: the field reads as a clickable file chip rather than a
   plain text value — bordered, with a document icon, filename, and an
   "open/expand" icon on the right that implies a preview overlay. */
.hero-tool-field-value.is-attachment {
    padding: 0;
    border-left: 0;
    overflow: visible;
    white-space: normal;
}
.hero-tool-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #374151;
    max-width: 100%;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-tool-file > svg:first-child {
    flex: 0 0 auto;
    width: 13px; height: 13px;
    color: #6b7280;
}
.hero-tool-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-tool-file-expand {
    flex: 0 0 auto;
    width: 13px; height: 13px;
    color: #9ca3af;
    margin-left: 2px;
}
/* Collapse hint — centered chevron at the bottom of the body */
.hero-tool-expand {
    align-self: center;
    margin: 4px 0 2px;
    width: 18px; height: 18px;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
    cursor: default;
    padding: 0;
}
.hero-tool-expand svg { width: 14px; height: 14px; }

/* =========================================================
   Inline approval card — clean, professional, neutral palette.
   A thin warm accent strip on the left is the only color cue;
   everything else uses the same greys as the rest of the chat.
   ========================================================= */
/* =========================================================
   Calendar event card — final session artifact. Sits inside an
   agent message body, mirrors the layout/spacing of approval
   cards, but with a Google Calendar brand badge, an event-date
   tile (month/time block), and the event metadata.
   ========================================================= */
.hero-chat-calendar {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-left: 40px;
    margin-top: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hero-chat-calendar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.hero-chat-calendar-brands {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* Negative gap = overlap so the two tiles read as a paired set */
    gap: 0;
}
.hero-chat-calendar-brand {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hero-chat-calendar-brands .hero-chat-calendar-brand + .hero-chat-calendar-brand {
    /* Slight overlap on the second brand tile so they read as a pair */
    margin-left: -8px;
    box-shadow: -2px 0 0 #ffffff;
}
.hero-chat-calendar-brand .hero-brand-img { width: 22px; height: 22px; object-fit: contain; }
.hero-chat-calendar-head-text { min-width: 0; }
.hero-chat-calendar-status {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hero-chat-calendar-status::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.hero-chat-calendar-source {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
}
.hero-chat-calendar-event {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
}
.hero-chat-calendar-date {
    flex: 0 0 auto;
    width: auto;
    min-width: 76px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background: #ffffff;
}
.hero-chat-calendar-date-month {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: #6583FF;
    padding: 5px 12px;
}
.hero-chat-calendar-date-time {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    padding: 8px 0 9px;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.hero-chat-calendar-event-info { min-width: 0; flex: 1; }
.hero-chat-calendar-event-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}
.hero-chat-calendar-event-meta {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.4;
}
.hero-chat-calendar-event-attendee {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

.hero-chat-approval {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px 14px 18px;
    margin-left: 40px;
    overflow: hidden;
}
.hero-chat-approval::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #2563eb;
}
.hero-chat-approval-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    display: flex; align-items: center; gap: 8px;
}
.hero-chat-approval-title svg {
    color: #0f172a;
    flex: 0 0 auto;
}
.hero-chat-approval-body {
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8f9fb;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    line-height: 1.55;
}
.hero-chat-approval-actions {
    margin-top: 12px;
    display: flex; align-items: center; gap: 8px;
}
/* Primary-button label swap: default text is visible; approved label is
   hidden until the card enters `.is-approved`, at which point the button
   itself flips to green + "Approved ✓". */
.hero-btn-primary .hero-btn-label-default { display: inline-flex; align-items: center; }
.hero-btn-primary .hero-btn-label-done    { display: none; align-items: center; gap: 6px; }
.hero-btn-primary .hero-btn-label-done svg { width: 12px; height: 12px; }

.hero-chat-approval.is-approved .hero-btn-primary {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    pointer-events: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hero-chat-approval.is-approved .hero-btn-primary .hero-btn-label-default { display: none; }
.hero-chat-approval.is-approved .hero-btn-primary .hero-btn-label-done    { display: inline-flex; }
.hero-chat-approval.is-approved .hero-btn-secondary {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.8);
}

/* =========================================================
   Right rail — timeline-style workflow panel
   ========================================================= */
.hero-rail {
    display: none;
    flex-direction: column;
    padding: 0 22px 18px;
    background: #fafafa;
    min-width: 0;
    /* no left border — the chat column's border-right already draws the
       chat↔rail divider, so adding one here produces a doubled 2px line. */
}
@media (min-width: 1024px) {
    .hero-rail { display: flex; }
}
.hero-rail-top {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0 18px;
    margin-bottom: 4px;
}
.hero-rail-icon {
    width: 22px; height: 22px;
    border: 0;
    background: transparent;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
    /* pull the icon left so its centre aligns with the todo circles below
       (icon box centre x=11 → shift by -3 to match circle centre x=8) */
    margin-left: -3px;
}
.hero-rail-icon svg { width: 16px; height: 16px; }
.hero-rail-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
}

/* Timeline: vertical connector behind the circles, masked at the last item */
.hero-rail-todos {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 18px;
    position: relative;
}
.hero-rail-todos::before {
    content: '';
    position: absolute;
    left: 7.25px;        /* circle centre: 16px circle / 2 minus border adjustment */
    top: 16px;
    bottom: 16px;
    width: 1.5px;
    background: #d1d5db;
    border-radius: 1px;
    z-index: 0;
}
/* Mask the connector segment below the last circle so it doesn't dangle
   past the last todo. Matches the rail background. */
.hero-rail-todo:last-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: -18px;
    width: 16px;
    background: #fafafa;
    z-index: 0;
}
.hero-rail-todo {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 0;
    border-radius: 0;
    position: relative;
    z-index: 1;
    transition: none;
    background: transparent;
}
.hero-rail-todo[data-state="waiting"] { background: transparent; }
.hero-rail-todo[data-state="pending"] .hero-rail-todo-title { color: #374151; }
.hero-rail-todo[data-state="pending"] .hero-rail-todo-check { border-color: #d1d5db; }
.hero-rail-todo[data-state="running"] .hero-rail-todo-check {
    border-color: #9ca3af;
    background:
        linear-gradient(to right, #9ca3af 0 50%, transparent 50% 100%);
}
.hero-rail-todo[data-state="running"] .hero-rail-todo-check .spinner { display: none; }
.hero-rail-todo[data-state="running"] .hero-rail-todo-check .check { display: none; }
.hero-rail-todo[data-state="running"] .hero-rail-todo-title { color: #0f172a; font-weight: 500; }
.hero-rail-todo[data-state="done"] .hero-rail-todo-check {
    background: #3b5bff;
    border-color: #3b5bff;
}
.hero-rail-todo[data-state="done"] .hero-rail-todo-check .check {
    color: #ffffff;
}
.hero-rail-todo[data-state="done"] .hero-rail-todo-title { color: #6b7280; text-decoration: line-through; text-decoration-color: #0f172a; }
.hero-rail-todo-check {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 9999px;
    background: #fafafa;
    /* ring in rail-background so the circle reads cleanly over the connector */
    box-shadow: 0 0 0 3px #fafafa;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
    transition: background 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 1;
}
.hero-rail-todo-check .spinner {
    display: none;
    width: 7px; height: 7px;
    border: 1.5px solid #d1d5db;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: heroSpin 0.8s linear infinite;
}
.hero-rail-todo-check .check {
    width: 9px; height: 9px;
    color: transparent;
}
.hero-rail-todo-title {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    line-height: 1.45;
}

/* =========================================================
   Add workflow FORM (Scene B / Act 3)
   ========================================================= */
.hero-create-form {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 1023px) {
    .hero-create-form { padding: 20px 20px 16px; gap: 16px; }
}
.hero-create-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-create-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f172a;
    margin: 0;
}
.hero-create-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
    margin: 0;
    max-width: 620px;
}
.hero-create-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.hero-create-sep {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 4px 0;
}
.hero-create-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-create-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.hero-create-select {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13.5px;
    color: #111827;
    transition:
        border-color 0.35s var(--hero-ease),
        box-shadow   0.35s var(--hero-ease);
}
.hero-create-select.is-focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.hero-create-select-icon {
    flex: 0 0 auto;
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
}
.hero-create-select-icon svg { width: 14px; height: 14px; }
.hero-create-select-value {
    flex: 1; min-width: 0;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hero-create-select-caret { color: #9ca3af; display: flex; align-items: center; }
.hero-create-select-caret svg { width: 14px; height: 14px; }

/* Sub-label under Access — helper copy in muted grey. */
.hero-create-sublabel {
    font-size: 12.5px;
    color: #6b7280;
    margin: -2px 0 0;
    line-height: 1.45;
}

/* Empty/populated state for selects — the animation toggles .is-populated
   to swap placeholder text for the filled value with a fade. */
.hero-create-select-placeholder,
.hero-create-select-filled {
    display: inline-block;
    transition: opacity 0.3s var(--hero-ease);
}
.hero-create-select-filled {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #0f172a;
    font-weight: 500;
}
.hero-create-select-placeholder {
    color: #9ca3af;
}
.hero-create-select.is-populated .hero-create-select-placeholder { opacity: 0; }
.hero-create-select.is-populated .hero-create-select-filled { opacity: 1; }

/* Secondary row — the trigger event, stacked right below the source
   (shares the same section but sits as a follow-up row). */
.hero-create-select-subrow {
    margin-top: 8px;
}

/* Brand icon chip inside the trigger source select (e.g. Rightmove logo).
   A light rounded container so colored brand logos read cleanly.
   Only appears once a trigger is selected — on an empty select it collapses
   so the placeholder text reads cleanly from the left edge. */
.hero-create-brand-icon {
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: opacity 0.3s var(--hero-ease), width 0.3s var(--hero-ease), margin 0.3s var(--hero-ease);
}
.hero-create-select:not(.is-populated) .hero-create-brand-icon {
    opacity: 0;
    width: 0;
    border-width: 0;
    margin-right: -10px;
    pointer-events: none;
}
.hero-brand-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
}
.hero-brand-mark {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Dropzone */
.hero-dropzone {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 28px 20px;
    background: #fafafa;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.9s var(--hero-ease),
        background   0.9s var(--hero-ease);
}
.hero-dropzone.is-hover {
    border-color: #60a5fa;
    background: #eff6ff;
}
.hero-dropzone.is-filled {
    border-style: solid;
    border-color: #a7f3d0;
    background: #ecfdf5;
}
.hero-dropzone-empty {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity 0.3s ease;
}
.hero-dropzone.is-filled .hero-dropzone-empty {
    opacity: 0;
    pointer-events: none;
}
.hero-dropzone-title {
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    margin: 0;
}
.hero-dropzone-sub {
    font-size: 13px;
    color: #9ca3af;
    margin: 0 0 6px;
}
.hero-dropzone-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hero-dropzone-filled {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.hero-dropzone.is-filled .hero-dropzone-filled {
    opacity: 1;
    transform: scale(1);
}
.hero-dropped-file {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 10px 14px 10px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hero-dropped-file-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #4b5563;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-dropped-file-icon svg { width: 16px; height: 16px; }
.hero-dropped-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hero-dropped-file-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}
.hero-dropped-file-sub {
    font-size: 12px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.hero-dropped-file-ok {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: #10b981;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
}
.hero-dropped-file-ok svg { width: 11px; height: 11px; }

.hero-create-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    margin: 0;
}
.hero-create-hint-icon {
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-create-hint-icon svg { width: 14px; height: 14px; }

.hero-create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
.hero-create-cancel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    cursor: default;
}
.hero-create-submit {
    background: #e5e7eb;
    border: 0;
    border-radius: 9999px;
    padding: 8px 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #9ca3af;
    cursor: default;
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.15s ease;
}
.hero-app.is-dropped .hero-create-submit:not([disabled]),
.hero-create-submit.is-ready {
    background: #0f172a;
    color: #ffffff;
}
.hero-create-submit.is-pressed {
    transform: scale(0.97);
    background: #1f2937;
}

/* =========================================================
   Floating PROCESS.md file chip — the element that "flies" into the dropzone.
   It's positioned absolutely inside .hero-card so it can traverse scenes.
   JS sets --x, --y, --scale on the element for each animation beat.
   ========================================================= */
.hero-file-chip {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1)) rotate(var(--r, 0deg));
    will-change: transform, opacity;
    /* Gentle doc-ease with a soft tail — chip feels weighted, not snappy.
       Opacity is fast on first appearance so the card→chip handoff reads
       as a single morph, not two stacked elements crossfading. */
    transition:
        opacity    0.18s var(--hero-ease),
        transform  1.4s var(--hero-ease-doc),
        box-shadow 0.6s var(--hero-ease);
    z-index: 40;
}
.hero-file-chip.is-active { opacity: 1; }
.hero-file-chip.is-grabbed {
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.32), 0 4px 12px -2px rgba(15, 23, 42, 0.15);
}
.hero-file-chip.is-landed {
    opacity: 0;
    transition: opacity 0.5s ease 0.1s;
}
.hero-file-chip-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #4b5563;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-file-chip-icon svg { width: 14px; height: 14px; }
.hero-file-chip-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.hero-file-chip-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}
.hero-file-chip-sub {
    font-size: 11px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* =========================================================
   Virtual cursor (click demonstration)
   ========================================================= */
.hero-virtual-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1));
    will-change: transform, opacity;
    /* Cursor shares chip's ease+duration so they travel as one unit. */
    transition:
        opacity   0.6s var(--hero-ease),
        transform 1.4s var(--hero-ease-doc);
    z-index: 50;
    /* drop-shadow is a filter; the cursor is tiny so it's cheap, but a
       static box-shadow on the SVG would be even cheaper. */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.hero-virtual-cursor.is-active { opacity: 1; }
.hero-virtual-cursor.is-clicking {
    transition: transform 0.3s ease;
}
.hero-virtual-cursor svg { width: 18px; height: 18px; }

/* =========================================================
   Workflow presentation screen — quiet detail-page view of the
   PROCESS.md that was just imported. Shown for ~5s before chat starts.
   ========================================================= */
.hero-flow-view {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
@media (max-width: 1023px) {
    .hero-flow-view { padding: 28px 22px 22px; gap: 20px; }
}

/* Header — file kicker + workflow name + description */
.hero-flow-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.hero-flow-header-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Edit button — quiet outlined action in the top-right of the header. */
.hero-flow-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    margin-top: 6px;
}
.hero-flow-edit svg {
    width: 13px; height: 13px;
    color: #6b7280;
}
.hero-flow-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    margin: 0;
    align-self: flex-start;
}
.hero-flow-kicker-icon {
    width: 14px; height: 14px;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
}
.hero-flow-kicker-icon svg { width: 14px; height: 14px; }
.hero-flow-name {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #0f172a;
    line-height: 1.15;
    margin: 0;
}
.hero-flow-desc {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
    max-width: 560px;
}

/* Meta panel: Access / Trigger */
.hero-flow-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 18px 20px;
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}
@media (max-width: 767px) {
    .hero-flow-meta { grid-template-columns: 1fr; gap: 12px; }
}
.hero-flow-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hero-flow-meta-label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-flow-meta-value {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.hero-flow-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    flex-shrink: 0;
}
/* Generic icon for non-brand meta values (e.g. Access "All members").
   Plain icon — no background — sits on the same baseline as adjacent text. */
.hero-flow-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    color: #0f172a;
    flex-shrink: 0;
}
.hero-flow-meta-icon svg { width: 14px; height: 14px; }

/* Sections (Rules / Todos) */
.hero-flow-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-flow-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
/* Rules — same bordered-container pattern as Todos/Sub-processes:
   one rule per row, divided by thin lines, mono Stop:/Escalate: label
   on the left + descriptive text alongside. */
.hero-flow-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.hero-flow-rule {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.hero-flow-rule:last-child { border-bottom: 0; }
.hero-flow-rule-label {
    flex-shrink: 0;
    font-weight: 600;
    color: #be185d;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: -0.005em;
}
.hero-flow-rule-text {
    font-size: 13.5px;
    color: #0f172a;
    line-height: 1.4;
}

/* Todos — outer card (border + radius) wraps the list, with a vertical
   connector line behind the hollow circles so the steps read as a sequence
   (a workflow process), not just a checklist. */
.hero-flow-todos {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.hero-flow-todos::before {
    content: '';
    position: absolute;
    left: 23px;          /* aligns with check-circle centres (16px padding-left + 7px to circle centre) */
    top: 32px;
    bottom: 32px;
    width: 1.5px;
    background: #e5e7eb;
    border-radius: 1px;
    z-index: 0;
}
/* Mask any connector line that would otherwise show below the LAST todo's
   circle (rows with multi-line text are taller than the connector's `bottom`
   reservation). A small white block sits over that segment. */
.hero-flow-todo:last-child::before {
    content: '';
    position: absolute;
    left: 16px;          /* container padding-left */
    top: 32px;           /* just below the circle's centre */
    bottom: -1px;
    width: 16px;
    background: #ffffff;
    z-index: 0;
}
.hero-flow-todo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    position: relative;
    z-index: 1;
}
.hero-flow-todo-check {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 9999px;
    background: #ffffff;
    /* white ring so the circle reads cleanly over the connector line behind it */
    box-shadow: 0 0 0 3px #ffffff;
    position: relative;
    z-index: 1;
    margin-top: 2px;
}
.hero-flow-todo-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hero-flow-todo-text {
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.4;
}
.hero-flow-todo-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.45;
}
.hero-flow-todo-hint {
    color: #be185d;
    font-size: 12.5px;
    font-weight: 500;
}

/* Per-todo parameter row — small key + chip(s) sitting below the description.
   Reads as a structured metadata strip that doesn't compete with the title or
   description text above it. Wraps gracefully on narrow widths. */
.hero-flow-todo-params {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 6px;
}
.hero-flow-todo-param {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.hero-flow-todo-param-key {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hero-flow-todo-param-chip {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 400;
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.35;
}
/* Flag-style param (approval required, after-24h) — same pill but with a
   small leading icon and rose tint for the approval flag, neutral for time. */
.hero-flow-todo-param-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: #be185d;
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    border-radius: 9999px;
    padding: 2px 9px 2px 7px;
    line-height: 1.35;
}
.hero-flow-todo-param-flag svg { width: 11px; height: 11px; flex: 0 0 auto; }
.hero-flow-todo-param-flag:not(:first-of-type) { margin-left: 0; }
/* The "After 24h" flag uses a neutral grey tone since it's just a timing,
   not a human-action gate. */
.hero-flow-todo-param-flag svg[viewBox="0 0 16 16"]:not([stroke-width="1.8"]) {
    /* clock icon — keep the rose tint inherit from parent */
}
/* Override: when the flag's child icon is the clock variant (stroke 1.6),
   use a neutral colour so it reads as informational, not actionable. */
.hero-flow-todo-param-flag:has(svg[stroke-width="1.6"]) {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* Sub-processes — other workflows that this one can call.
   Each row shows: workflow icon, name (mono), and a "Runs when …" trigger
   hint that references one of the rules so the connection is explicit. */
/* Sub-processes — same bordered-container pattern as Rules/Todos:
   a single bordered container, one process per row divided by thin lines. */
.hero-flow-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.hero-flow-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.hero-flow-sub:last-child { border-bottom: 0; }
.hero-flow-sub-icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
}
.hero-flow-sub-icon svg { width: 14px; height: 14px; }
.hero-flow-sub-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: -0.005em;
}
/* =========================================================
   Trigger notification — "New lead from Rightmove" push that appears after
   the workflow preview, then animates into the sidebar as a new session.
   Positioned absolutely inside .hero-app so it can traverse the main↔sidebar
   boundary. Starts centered in the main area and ends at the top of the
   sessions list. JS drives --x/--y/--scale for the movement.
   ========================================================= */
.hero-trigger-notif {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    max-width: calc(100% - 32px);
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.25), 0 4px 12px -2px rgba(15, 23, 42, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--notif-x, 0), var(--notif-y, 0)) scale(var(--notif-scale, 1));
    transform-origin: 0 0;
    will-change: transform, opacity;
    transition:
        opacity   0.7s var(--hero-ease-shell),
        transform 1.4s var(--hero-ease-doc),
        box-shadow 0.6s var(--hero-ease);
    z-index: 60;
}
.hero-trigger-notif.is-active { opacity: 1; }
.hero-trigger-notif.is-shrinking {
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.18);
}

/* Missed-call badge — peeks out of the top-right corner. Red circular
   tile with a downward-arrow handset glyph (the universal unanswered-call
   icon). Pulses gently while the notification is active to convey
   "this just happened". */
.hero-trigger-notif-bell {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #dc2626;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.4);
    z-index: 1;
}
.hero-trigger-notif-bell svg { width: 14px; height: 14px; }
.hero-trigger-notif.is-active .hero-trigger-notif-bell {
    animation: heroMissedPulse 1.4s ease-in-out 0.15s infinite both;
}
.hero-trigger-notif.is-shrinking .hero-trigger-notif-bell {
    animation: none;
}
@keyframes heroMissedPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.4); }
    50%      { transform: scale(1.12); box-shadow: 0 6px 16px -2px rgba(220, 38, 38, 0.6); }
}

.hero-trigger-notif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.hero-trigger-notif-brand {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-trigger-notif-brand .hero-brand-img {
    width: 18px;
    height: 18px;
}
.hero-trigger-notif-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.hero-trigger-notif-title {
    font-size: 15.5px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}
.hero-trigger-notif-time {
    font-size: 11.5px;
    color: #9ca3af;
    margin: 0;
}
.hero-trigger-notif-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 38px;
}
.hero-trigger-notif-prop {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    margin: 0;
}
.hero-trigger-notif-meta {
    font-size: 12px;
    color: #b91c1c;
    margin: 0;
    font-weight: 500;
}

/* When the trigger is firing, the entire app fades to a blank white stage:
   flow content, sidebar content, and topbar content all clear. The notification
   takes the stage. As the notification flies to the sidebar, the UI re-emerges
   (class is removed) so sidebar/topbar fade back in around the arriving event. */
.hero-scene-flow .hero-flow-view {
    transition: opacity 0.8s var(--hero-ease-shell);
}
.hero-app.is-trigger-firing .hero-scene-flow .hero-flow-view {
    opacity: 0;
}
/* Fade sidebar content to 0 (logo, nav, sessions list, placeholder). The
   sidebar's own background stays (fafafa) but on-brand interior is gone. */
.hero-sidebar > * {
    transition: opacity 0.8s var(--hero-ease-shell);
}
.hero-app.is-trigger-firing .hero-sidebar > * {
    opacity: 0;
}
/* Topbar content fades too. */
.hero-app.is-trigger-firing .hero-topbar {
    opacity: 0;
}

/* The Rightmove session row in the sidebar is hidden until the trigger fires,
   then slides in (+fades) so the notification "becomes" that session. */
.hero-sidebar-session[data-session="chase"] {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition:
        max-height      1s var(--hero-ease-shell),
        opacity         0.9s var(--hero-ease-shell),
        padding         1s var(--hero-ease-shell),
        background-color 0.6s ease;
}
.hero-app.is-session-born .hero-sidebar-session[data-session="chase"] {
    max-height: 72px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* =========================================================
   Mobile / tablet sessions panel — only visible under 1024px,
   only during the trigger-firing → session-born stretch. Mirrors
   the desktop sidebar's full structure (logo, nav rows, sessions
   list) so the user sees the same menu they would on desktop —
   just brought in transiently to "receive" the Rightmove
   notification, then slid back out before chat takes over.
   ========================================================= */
.hero-mobile-sessions {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(260px, 78%);
    z-index: 25; /* above content, below the notification (z=60) */
    background: #fafafa;
    border-right: 1px solid #e5e7eb;
    display: none;
    flex-direction: column;
    padding: 0;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s var(--hero-ease-shell),
        opacity   0.45s var(--hero-ease-shell);
}
@media (max-width: 1023px) {
    /* Only on viewports where the desktop sidebar is hidden — the
       panel takes over its job for the duration of the trigger. */
    .hero-mobile-sessions { display: flex; }
}
.hero-app.is-mobile-sessions-on .hero-mobile-sessions {
    transform: translateX(0);
    opacity: 1;
}

/* Logo row — mirrors .hero-sidebar-logo */
.hero-mobile-sessions-logo {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.hero-mobile-sessions-logo-mark {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.hero-mobile-sessions-logo-mark svg { width: 14px; height: 14px; }
.hero-mobile-sessions-logo-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-mobile-sessions-collapse {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
    border-radius: 6px;
}
.hero-mobile-sessions-collapse svg { width: 16px; height: 16px; }

/* Nav section — mirrors .hero-sidebar-section + .hero-sidebar-row */
.hero-mobile-sessions-nav {
    padding: 8px 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hero-mobile-sessions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
}
.hero-mobile-sessions-row svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: inherit;
}
.hero-mobile-sessions-row[data-nav="workflows"] {
    background: #f3f4f6;
    color: #0f172a;
    font-weight: 600;
}

/* Sessions section — separator strip + tabs + list. */
.hero-mobile-sessions-section {
    padding: 14px 10px 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Tabs row — mirrors the desktop sessions tabs, scaled for mobile. */
.hero-mobile-sessions-tabs {
    display: flex;
    gap: 14px;
    padding: 4px 4px 10px;
}
.hero-mobile-sessions-tab {
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
    cursor: default;
}
.hero-mobile-sessions-tab.is-active { color: #0f172a; font-weight: 600; }

/* Sessions list area + empty placeholder + the session row itself.
   The row is hidden until .is-session-born — same gating class the
   desktop session row already uses, so a single JS toggle drives both. */
.hero-mobile-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}
.hero-mobile-sessions-empty {
    font-size: 12px;
    color: #9ca3af;
    padding: 8px 10px;
    margin: 0;
    line-height: 1.4;
    transition: opacity 0.4s var(--hero-ease);
}
.hero-app.is-session-born .hero-mobile-sessions-empty { display: none; }

/* Mirror desktop .hero-sidebar-session look exactly: no card chrome at
   rest, light grey selected background while the session is active,
   same title/time typography (light weight by default, bolder when the
   chase session is the selected one). */
.hero-mobile-session {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: default;
    /* same data-session="chase" gating so the row appears with the
       notification fly, then stays visible for the brief hold. */
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition:
        max-height      1s var(--hero-ease-shell),
        opacity         0.9s var(--hero-ease-shell),
        padding         1s var(--hero-ease-shell),
        background-color 0.6s ease;
}
.hero-app.is-session-born .hero-mobile-session[data-session="chase"] {
    max-height: 72px;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Selected background mirrors desktop's #f3f4f6 fill, but kicks in at
   is-session-born so the row is visibly "selected" during the 2s hold
   before the panel slides out (desktop waits for is-executing because
   its sidebar stays open). */
.hero-app.is-session-born .hero-mobile-session[data-session="chase"],
.hero-app.is-executing   .hero-mobile-session[data-session="chase"] {
    background: #f3f4f6;
}
.hero-mobile-session-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #111827;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0;
}
/* Mirror desktop's selected-session emphasis (600 / #0f172a) but kick
   in as soon as the session is born — on mobile the left panel slides
   away before chat starts, so we'd never see the bolder treatment if
   it waited for is-executing like desktop does. */
.hero-app.is-session-born .hero-mobile-session[data-session="chase"] .hero-mobile-session-title,
.hero-app.is-executing   .hero-mobile-session[data-session="chase"] .hero-mobile-session-title {
    font-weight: 600;
    color: #0f172a;
}
.hero-mobile-session-time {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin: 3px 0 0;
    line-height: 1.2;
}

/* =========================================================
   Mobile / tablet Workflow rail panel — only visible under
   1024px, only between the trigger landing the session and
   the chat starting. Slides in from the RIGHT (mirroring the
   desktop rail's right-edge position), the 6 todos reveal one
   at a time as a quick preview, hold ~1s, then slide out and
   chat takes over. Desktop keeps its permanent right rail.
   ========================================================= */
.hero-mobile-rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(280px, 82%);
    z-index: 25;
    background: #fafafa;
    border-left: 1px solid #e5e7eb;
    display: none;
    flex-direction: column;
    padding: 0 22px 18px;
    box-shadow: -12px 0 32px -12px rgba(15, 23, 42, 0.18);
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s var(--hero-ease-shell),
        opacity   0.45s var(--hero-ease-shell);
}
@media (max-width: 1023px) {
    .hero-mobile-rail { display: flex; }
}
.hero-app.is-mobile-rail-on .hero-mobile-rail {
    transform: translateX(0);
    opacity: 1;
}

/* Header — mirrors .hero-rail-top */
.hero-mobile-rail-top {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0 18px;
    margin-bottom: 4px;
}
.hero-mobile-rail-icon {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
    margin-left: -3px;
}
.hero-mobile-rail-icon svg { width: 16px; height: 16px; }
.hero-mobile-rail-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
}

/* Todos list — vertical connector + todo rows. Each row reveals
   when its data-mobile-rail-todo matches the .is-mobile-rail-todo-N
   class added on .hero-app, in sequence (handled by JS). */
.hero-mobile-rail-todos {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 18px;
    position: relative;
}
/* Each todo owns the connector segment that goes DOWN from its own
   circle into the next todo's circle. The segment only appears once
   the NEXT todo reveals (.is-line-on flips on the CURRENT todo as the
   next one fades in) — so the cascade reads as:
     circle 1 (alone) → line draws to circle 2 → circle 2 lands →
     line draws to circle 3 → circle 3 lands → …
   The very last todo never gets a line (nothing to connect to). */
.hero-mobile-rail-todo::after {
    content: '';
    position: absolute;
    left: 7.25px;
    top: 16px;                 /* just below the circle */
    height: calc(100% - 16px + 18px); /* down to the next todo's circle top */
    width: 1.5px;
    background: #d1d5db;
    border-radius: 1px;
    z-index: 0;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.45s var(--hero-ease), opacity 0.3s var(--hero-ease);
}
.hero-mobile-rail-todo.is-line-on::after {
    transform: scaleY(1);
    opacity: 1;
}
.hero-mobile-rail-todo:last-child::after {
    display: none;
}
.hero-mobile-rail-todo {
    display: flex; align-items: flex-start; gap: 12px;
    position: relative;
    z-index: 1;
    /* Hidden by default — JS adds .is-revealed in stagger to fade
       each todo in, then .is-line-on on the PREVIOUS todo so the
       connector visibly draws into the new one. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.55s var(--hero-ease), transform 0.55s var(--hero-ease);
}
.hero-mobile-rail-todo.is-revealed {
    opacity: 1;
    transform: none;
}
.hero-mobile-rail-todo-check {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 9999px;
    background: #fafafa;
    box-shadow: 0 0 0 3px #fafafa;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.hero-mobile-rail-todo-title {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    line-height: 1.45;
    margin: 0;
}

/* =========================================================
   Mobile approval popup — during Todo 4, a realistic iPhone
   slides in docked to the right edge of the app frame. A rich
   push notification from Askpilot appears on its lockscreen
   with the draft WhatsApp body + inline Approve/Edit actions.
   The Approve button is pressed in the animation, fills with
   green + checkmark, and the phone slides off-screen.
   ========================================================= */
/* PHONE — two presentations:
   • Desktop (≥1024px): docks to the RIGHT EDGE of the app frame, beside
     the chat + rail, and slides in/out horizontally.
   • Mobile/tablet (<1024px): the rail is hidden and chat fills the frame,
     so docking to the side would overlap the chat. Instead the phone
     CENTERS over the chat (acting like a foreground iOS device), with a
     dim scrim behind, and slides UP from below. The chat is paused
     visually for that moment, then the phone slides back down. */
.hero-phone {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    /* Force the phone onto its own compositor layer so transform/opacity
       transitions don't trigger paint on the chat behind it. */
    will-change: transform, opacity;
    transform-origin: center;
    /* On mobile/tablet the phone is the foreground subject — size it up
       so the notification is easy to read. Capped at 88% of frame width
       so there's still a sliver of dimmed chat visible around it.
       Desktop overrides this below. */
    width: 280px;
    max-width: 88%;
    /* 19.5:9 screen ratio, plus top/bottom bezels: target ~460-470px tall */
    aspect-ratio: 9 / 19.5;

    /* --- Mobile / tablet defaults: centred, slides up from below --- */
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, 130%) scale(0.94);
    transition:
        opacity   1.0s var(--hero-ease-shell),
        transform 1.1s cubic-bezier(0.22, 0.9, 0.32, 1.15);
}

/* --- Desktop: dock to the right edge, slide in horizontally --- */
@media (min-width: 1024px) {
    .hero-phone {
        width: 230px;
        max-width: 230px;
        left: auto;
        right: 22px;
        top: 50%;
        transform: translate(120%, -50%) scale(0.96);
        transition:
            opacity   1.1s var(--hero-ease-shell),
            transform 1.3s cubic-bezier(0.22, 0.9, 0.32, 1.15);
    }
}

/* SHOWING — mobile centres into view; desktop slides in from the right. */
.hero-app.is-phone-showing .hero-phone {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@media (min-width: 1024px) {
    .hero-app.is-phone-showing .hero-phone {
        transform: translate(0%, -50%) scale(1);
    }
}

/* LEAVING — mobile slides back DOWN; desktop slides off RIGHT. */
.hero-app.is-phone-leaving .hero-phone {
    opacity: 0;
    transform: translate(-50%, 130%) scale(0.94);
    transition:
        opacity   0.85s var(--hero-ease-in),
        transform 1.0s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
@media (min-width: 1024px) {
    .hero-app.is-phone-leaving .hero-phone {
        transform: translate(130%, -50%) scale(0.96);
        transition:
            opacity   0.9s var(--hero-ease-in),
            transform 1.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
    }
}

/* Mobile/tablet scrim behind the phone — soft dim of the chat to make
   the phone clearly the foreground subject. Desktop doesn't need this
   (the phone sits beside chat, not on top of it). */
/* Scrim is just a flat semi-transparent overlay — no backdrop-filter.
   backdrop-filter forces a real-time blur of the whole frame on every
   paint, which tanks frame rates on mobile devices. A plain dim is
   GPU-cheap and reads almost the same. */
.hero-phone-scrim {
    position: absolute;
    inset: 0;
    z-index: 29;
    background: rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--hero-ease);
    /* Promote to its own layer so the fade doesn't repaint everything
       behind it. */
    will-change: opacity;
}
.hero-app.is-phone-showing .hero-phone-scrim {
    opacity: 1;
}
@media (min-width: 1024px) {
    .hero-phone-scrim { display: none; }
}

/* Device chrome — titanium-toned bezel with subtle inner highlight so it
   reads as a real phone rather than a flat rectangle. */
.hero-phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(145deg, #2a2d33 0%, #14161a 55%, #0b0c0e 100%);
    border-radius: 38px;
    padding: 6px;
    /* Mobile/tablet: lighter shadow set. Heavy soft shadows on a moving
       element kill frame rate on phones — keep just the rim for shape. */
    box-shadow:
        0 8px 18px -10px rgba(15, 23, 42, 0.30),
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
        0 0 0 1px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1024px) {
    /* Desktop: full ambient shadow stack — phone barely moves and the
       framerate budget is much larger. */
    .hero-phone-frame {
        box-shadow:
            0 30px 60px -20px rgba(15, 23, 42, 0.35),
            0 12px 24px -10px rgba(15, 23, 42, 0.25),
            0 0 0 0.5px rgba(255, 255, 255, 0.04) inset,
            0 0 0 1px rgba(0, 0, 0, 0.4);
    }
}
.hero-phone-frame::before {
    /* inner bezel highlight — hairline of brighter metal on the top edge */
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 37px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 20%);
    pointer-events: none;
}
/* Side buttons — tiny, subtle. Just enough to hint at device-ness. */
.hero-phone-side-btn {
    position: absolute;
    background: #15171b;
    border-radius: 1.5px;
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.03);
}
.hero-phone-side-power {
    right: -1.5px;
    top: 84px;
    width: 2.5px; height: 54px;
}
.hero-phone-side-vol-up {
    left: -1.5px;
    top: 80px;
    width: 2.5px; height: 30px;
}
.hero-phone-side-vol-dn {
    left: -1.5px;
    top: 118px;
    width: 2.5px; height: 30px;
}

/* Screen — inset under the bezel, rounded just inside the outer radius.
   Background is a subtle iOS-style gradient so the notification and the
   lockscreen clock have a surface to sit on. */
.hero-phone-screen {
    position: absolute;
    inset: 6px;
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 50% 100%, #2b3756 0%, #131a2c 55%, #0b1020 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Dynamic island — pill sitting at the top of the screen. */
.hero-phone-island {
    position: absolute;
    left: 50%;
    top: 7px;
    transform: translateX(-50%);
    width: 72px;
    height: 18px;
    background: #050608;
    border-radius: 12px;
    z-index: 3;
}
/* Top status row — time on the left, signal/wifi/battery on the right. */
.hero-phone-status {
    position: absolute;
    top: 9px;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 16px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}
.hero-phone-status-time { min-width: 28px; }
.hero-phone-status-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hero-phone-status-signal  { width: 13px; height: 8px; color: #ffffff; }
.hero-phone-status-wifi    { width: 12px; height: 8px; color: #ffffff; }
.hero-phone-status-battery {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 20px; height: 9px;
    border: 0.8px solid rgba(255,255,255,0.6);
    border-radius: 2px;
    padding: 1px;
    margin-left: 2px;
}
.hero-phone-status-battery-fill {
    display: block;
    width: 72%;
    height: 100%;
    background: #ffffff;
    border-radius: 1px;
}
.hero-phone-status-battery-cap {
    position: absolute;
    right: -2.5px;
    top: 2.5px;
    width: 1.5px; height: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 0 1px 1px 0;
}

/* Lockscreen clock — big date + time centred, iOS-style. */
.hero-phone-clock {
    margin-top: 48px;
    text-align: center;
    color: #ffffff;
}
.hero-phone-clock-date {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.95;
    letter-spacing: -0.002em;
}
.hero-phone-clock-time {
    margin-top: 2px;
    font-size: 56px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

/* Rich push notification — frosted translucent surface sitting near the
   bottom of the lockscreen. Appears with a small spring scale+opacity. */
.hero-phone-notif {
    margin: auto 10px 22px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 16px;
    overflow: hidden;
    color: #0f172a;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition:
        opacity   0.8s var(--hero-ease-shell),
        transform 1.1s cubic-bezier(0.22, 1.2, 0.32, 1);
    box-shadow:
        0 10px 24px -10px rgba(0, 0, 0, 0.35),
        0 2px 4px -1px rgba(0, 0, 0, 0.08);
}
.hero-app.is-phone-showing .hero-phone-notif {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Hold the phone on the lockscreen for ~2.4s before the notification
       lands — reads as "phone is here, moment passes, a push arrives". */
    transition-delay: 2.4s, 2.4s;
}
.hero-phone-notif-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 0;
}
.hero-phone-notif-app-icon {
    width: 18px; height: 18px;
    border-radius: 4px;
    background: #ffffff;
    border: 0.5px solid rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3px;
}
.hero-phone-notif-app-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.hero-phone-notif-app-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #64748b;
    flex: 1;
    min-width: 0;
}
.hero-phone-notif-time {
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}
.hero-phone-notif-body {
    padding: 4px 12px 10px;
}
.hero-phone-notif-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin: 0 0 1px;
}
.hero-phone-notif-subtitle {
    font-size: 11.5px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.002em;
    line-height: 1.3;
    margin: 0 0 3px;
    opacity: 0.88;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-phone-notif-text {
    font-size: 11.5px;
    font-weight: 400;
    color: #334155;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Action row — two buttons side-by-side separated by a faint divider,
   iOS rich-notification style. */
.hero-phone-notif-actions {
    display: flex;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
.hero-phone-notif-action {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    letter-spacing: -0.005em;
    cursor: default;
    font-family: inherit;
    transition: background 0.2s ease, color 0.25s ease, transform 0.2s ease;
    position: relative;
}
.hero-phone-notif-action:first-child {
    border-right: 0.5px solid rgba(0, 0, 0, 0.08);
}
.hero-phone-notif-action.is-primary { color: #0f172a; }
/* Pressed state — simulates a finger-tap: subtle scale-down + tint. */
.hero-phone-notif-action.is-pressed {
    background: rgba(37, 99, 235, 0.12);
    transform: scale(0.97);
}
/* Approved state — the primary action fills green and the label swaps to
   a centred check + "Approved". */
.hero-phone-notif-action-label { display: inline-block; transition: opacity 0.2s ease; }
.hero-phone-notif-action-done {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #ffffff;
}
.hero-phone-notif-action-done svg { width: 13px; height: 13px; }
.hero-phone-notif-action.is-approved {
    background: #10b981;
    color: #ffffff;
    transform: none;
}
.hero-phone-notif-action.is-approved .hero-phone-notif-action-label { opacity: 0; }
.hero-phone-notif-action.is-approved .hero-phone-notif-action-done  { display: inline-flex; }
.hero-phone-notif-action.is-approved + .hero-phone-notif-action {
    opacity: 0.4;
    pointer-events: none;
}

/* Reduced motion: skip the phone entirely. */
@media (prefers-reduced-motion: reduce) {
    .hero-phone { display: none; }
}

/* Reduced motion: settle on final frame */
@media (prefers-reduced-motion: reduce) {
    .hero-app, .hero-sidebar, .hero-topbar, .hero-main, .hero-card,
    .hero-scene, .hero-file-line, .hero-exec, .hero-msg,
    .hero-tool-status, .hero-file-chip, .hero-virtual-cursor,
    .hero-dropzone, .hero-dropzone-filled, .hero-create-submit {
        transition: none !important;
        filter: none !important;
    }
    .hero-app::before { transition: none !important; filter: none !important; }
    .hero-cursor { animation: none !important; }
    .hero-rail-todo-check .spinner,
    .hero-tool-status .spinner { animation: none !important; }
    .hero-trigger-notif-bell { animation: none !important; }
    /* Streaming caret blink + tool-body fade: skip so the final frame is
       stable and nothing visually twitches under reduced motion. */
    .is-streaming::after { animation: none !important; opacity: 0 !important; }
    .hero-tool-body.is-tool-body-pending { opacity: 1 !important; transform: none !important; }
    /* No animation to pause — drop the click affordance. */
    .hero-anim { cursor: default; }
}