/* What only exists when the replica is a working demo (hero) */
.app.live .pointer { display: none; }
.app.live { user-select: none; }
.app.live .cmp-input, .app.live .m-text, .app.live .m-user .bubble { user-select: text; }
.app.live .cmp-input { outline: none; cursor: text; caret-color: #fff; }
.app.live .cmp-input:empty::before { content: var(--ph, 'Ask anything…'); }
.app.live .bwa-in { outline: none; cursor: text; caret-color: #fff; }
.app.live .bwa-in:empty::before { content: 'Ask about this page…'; color: #6b6b6b; }

.live .tap { cursor: pointer; }
.live .a-nav.tap:hover, .live .a-rail .it.tap:hover, .live .a-filter.tap:hover { background: #1f1f1f; color: #ddd; }
.live .a-tabs span.tap:hover { color: #fff; }
.live .a-btn.tap:hover, .live .scope .it.tap:hover, .live .cmp-box .opt.tap:hover { background: #262626; color: #fff; }
.live .a-chat.off { background: transparent; color: var(--a-text-2); }
.live .a-chat.off:hover { background: #1c1c1c; }
.live .chats { display: grid; gap: 2px; }
.live .send.ready { cursor: pointer; }
.live .m-work:not(.busy) { cursor: pointer; }
.live .m-work:not(.busy):hover { color: var(--a-text-3); }
.m-work:not(.open) ~ .tools { display: none; }

.try { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.try span { padding: 9px 16px; border-radius: 999px; background: #1a1a1a; color: var(--a-text-2); font-size: 14px; transition: background 0.2s, color 0.2s; }
.try span:hover { background: #262626; color: #fff; }
.m-sys { padding: 4px 0 4px 14px; border-left: 2px solid var(--a-border-2); color: var(--a-text-3); font: 12.5px var(--a-mono); }
.chg-none { padding: 26px 10px; text-align: center; color: var(--a-text-3); font-size: 13.5px; line-height: 1.7; }
.chg-h .x { display: inline-flex; }
.picker .mrow, .picker .rail div, .slash .row { cursor: pointer; }
.picker .mrow:hover, .picker .rail div:hover { background: #2c2c2c; }
.slash .row:hover { background: #2a2a2a; }
.slash .row[hidden] { display: none; }
.picking .pg h1 { cursor: pointer; }

.live-toast { position: absolute; left: 50%; bottom: 28px; z-index: 40; padding: 10px 18px; border-radius: 999px; background: #2a2a2a; color: #e6e6e6; font-size: 14px; opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.live-toast.on { opacity: 1; transform: translate(-50%, 0); }
.live-toast { display: flex; align-items: center; gap: 14px; }
.live-toast.with-dl { padding-right: 8px; pointer-events: auto; }
.live-toast button { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: #f2f2f2; color: #111; font: 500 13px 'Inter', sans-serif; cursor: pointer; }

.live .chats { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.live .chats .a-chat { min-width: 0; margin: 0 0 0 4px; }

/* Empty chat: the composer is the whole screen, exactly like the app */
.a-main.home .a-thread, .a-main.home .a-splits { display: none; }
.a-main.home .a-comp { margin: auto; padding-bottom: 40px; }
.a-main.home .scope .r { visibility: hidden; }
.a-main.home .cmp-box { flex-wrap: wrap; row-gap: 6px; padding: 14px 14px 10px 18px; }
.a-main.home .cmp-input { order: -1; flex: 1 0 100%; min-height: 50px; white-space: normal; overflow: visible; }
.a-main.home .cmp-box > :nth-child(1) { order: 1; }
.a-main.home .cmp-box > :nth-child(2) { order: 2; }
.a-main.home .cmp-box > :nth-child(4) { order: 3; }
.a-main.home .cmp-box > :nth-child(5) { order: 4; }
.a-main.home .cmp-box > :nth-child(6) { order: 5; margin-left: auto; }
.a-main.home .cmp-box > :nth-child(7) { order: 6; }
.a-main.home .hint { display: none; }

/* The working state, as the app draws it */
.m-wait { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--a-text-2); font-size: 15px; }
.m-wait[hidden] { display: none; }
.m-text + .m-wait { margin-top: 10px; }
.snake-dots { display: inline-grid; grid-template-columns: repeat(3, 3px); grid-template-rows: repeat(3, 3px); gap: 2px; flex: none; filter: drop-shadow(0 0 3px rgba(176, 212, 255, 0.3)); }
.snake-dots i { width: 3px; height: 3px; border-radius: 1px; background: #eef5ff; opacity: 0.085; animation: comet 1.4s linear infinite; animation-delay: var(--d, 0s); }
.snake-dots i:nth-child(5) { animation: none; }
@keyframes comet { 0% { opacity: 1; box-shadow: 0 0 4px rgba(176, 212, 255, 0.9); } 35% { opacity: 0.32; box-shadow: none; } 100% { opacity: 0.085; box-shadow: none; } }
.m-work { align-items: center; gap: 8px; justify-content: flex-start; }
.m-work[hidden] { display: none; }
.m-work .wt, .m-work .wm { flex: none; }
.m-work small { margin-left: auto; }
.m-roll { position: relative; height: 24px; margin: -2px 0 6px; overflow: hidden; color: var(--a-text-3); font-size: 15px; }
.m-roll[hidden] { display: none; }
.m-roll span { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.m-roll span b { font-weight: 400; color: var(--a-text-2); }
.m-roll .enter { animation: roll-in 0.3s ease-out both; }
.m-roll .exit { animation: roll-out 0.3s ease-out both; }
@keyframes roll-in { from { opacity: 0; transform: translateY(105%); } }
@keyframes roll-out { to { opacity: 0; transform: translateY(-105%); } }
.send.stopping { background: #ff5f57; color: #fff; cursor: pointer; }
.send.stopping .ic { width: 12px; height: 12px; }

/* Code mode launcher */
.cl { flex: 1; overflow: auto; display: flex; padding: 20px; background: var(--a-bg); }
.cl-card { width: min(640px, 100%); margin: auto; display: flex; flex-direction: column; gap: 14px; }
.cl-head { display: flex; align-items: center; gap: 10px; }
.cl-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #1c1c1c; color: var(--a-text-2); }
.cl-tag { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-text-3); }
.cl-ws { color: var(--a-heading); font-weight: 600; font-size: 14px; }
.cl-ws small { margin-left: 8px; font: 11px var(--a-mono); color: var(--a-text-3); font-weight: 400; }
.cl-h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--a-heading); }
.cl-body { border-radius: 12px; background: #151515; display: flex; flex-direction: column; }
.cl-sec { padding: 12px 16px; }
.cl-sec + .cl-sec { border-top: 1px solid var(--a-border); }
.cl-sh { display: flex; justify-content: space-between; margin-bottom: 9px; }
.cl-lab { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-text-3); }
.cl-lab b { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--a-text-2); }
.cl-opt { font-size: 11px; color: var(--a-text-3); }
.cl-task { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.cl-task input { flex: 1; min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: var(--a-heading); font: 15px 'Inter', sans-serif; }
.cl-task input::placeholder { color: #6b6b6b; }
.cl-start { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: #f2f2f2; color: #111; font: 500 14px 'Inter', sans-serif; cursor: pointer; }
.cl-start:hover { filter: brightness(0.92); }
.cl-count { display: flex; gap: 6px; }
.cl-pill { position: relative; width: 32px; height: 28px; border-radius: 7px; background: #1c1c1c; color: var(--a-text-2); font-size: 12.5px; display: grid; place-items: center; cursor: pointer; }
.cl-pill.cfg { background: #242424; }
.cl-pill.on { background: #2e2e2e; color: #fff; }
.cl-pill:hover { background: #2a2a2a; }
.cl-pill i { position: absolute; top: -5px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #151515; display: grid; place-items: center; }
.cl-pill i .mark, .cl-pill i .ic { width: 9px; height: 9px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cl-agent { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 9px; border-radius: 8px; background: #1a1a1a; color: var(--a-heading); font-size: 13px; font-weight: 500; cursor: pointer; }
.cl-agent:hover { background: #222; }
.cl-agent.on { background: #2a2a2a; }
.cl-agent .mark, .cl-agent .ic { width: 15px; height: 15px; }
.cl-dir { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; background: #1a1a1a; font: 12.5px var(--a-mono); color: var(--a-text-2); }
.cl-chips { display: flex; gap: 6px; }
.cl-chip { padding: 3px 9px; border-radius: 999px; background: #1c1c1c; color: var(--a-text-2); font-size: 12px; cursor: pointer; }
.cl-chip:hover { background: #262626; color: #fff; }
.cl-close { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--a-text-3); cursor: pointer; }
.cl-close:hover { background: #222; color: #fff; }

/* Live terminals */
.lt-grid { flex: 1; display: grid; gap: 10px; padding: 12px; min-height: 0; }
.lt-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 10px; background: #0c0c0c; overflow: hidden; outline: 0; }
.lt-pane.focus .ph { color: #fff; }
.lt-pane .ph .x { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; color: var(--a-text-3); cursor: pointer; }
.lt-pane .ph .x:hover { background: #222; color: #fff; }
.lt-pane .term { cursor: text; }
.lt-cur { display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: text-bottom; background: #d0d0d0; }
.lt-pane.focus .lt-cur { animation: blink 1s steps(2) infinite; }
.lt-pane:not(.focus) .lt-cur { background: transparent; outline: 1px solid #666; outline-offset: -1px; }
.term .ln { white-space: pre-wrap; word-break: break-all; }
.term .ln:empty::after { content: ' '; }
.cd-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.cd-head .cd-back { cursor: pointer; }

/* Live code + browser extras */
.cl[hidden], .cw[hidden] { display: none; }
.cw { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lay span { cursor: pointer; }
.cli-box { display: block; margin: 0 0 2px; padding: 6px 12px; border-radius: 6px; border: 1px solid #4a4a4a; white-space: normal; line-height: 1.5; }
.cli-box.c { border-color: #d97757; }
.bw-tab.on { background: #242424; }
.bw-tab.tap:not(.on) { color: var(--a-text-2); }
.bw-tab i:hover { color: #fff; }
.bb.dim { opacity: 0.35; }
.bw-omni .url { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--a-text-2); font: inherit; }
.bw-omni .star.on { color: #ffd27a; }
.bw-omni .star .ic { width: 14px; height: 14px; }
.bw-bm { display: flex; gap: 6px; padding: 6px 12px; background: #1c1c1c; }
.bw-bm[hidden] { display: none; }
.bm { display: inline-flex; gap: 8px; padding: 3px 10px; border-radius: 7px; background: #262626; color: var(--a-text-2); font-size: 12px; }
.bm i { font-style: normal; color: var(--a-text-3); }
.zm b { font-weight: 400; padding: 0 3px; }
.zm b:hover { color: #fff; }
.bw-vp { overflow: auto; }
.pg { min-height: 100%; }
.pg-nav span, .pg-nav b { padding: 2px 4px; }
.pg-list { margin: 0; padding-left: 20px; color: #8a8a8a; font-size: 15px; line-height: 1.9; }
.pg-new { padding-top: 30px; }
.pg-new h2 { margin: 0 0 8px; font: 500 28px 'Inter', sans-serif; }
.pg-new p { margin: 0 0 18px; color: #8a8a8a; }
.pg [data-go] { cursor: pointer; }
.picking .pg [data-go] { cursor: default; }
.picking .pg * { cursor: crosshair; }
.bw-vp .pg .hover, .bw-vp .pg .picked { outline: 1.5px solid #0d99ff; outline-offset: 2px; background-color: rgba(13, 153, 255, 0.1); }
.pg h1 { border: 0; }
.bl input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.bl .rng-in { flex: 1; height: 4px; accent-color: #0d99ff; }
.bl .opv { width: 34px; flex: none; text-align: right; }
.bf label.tap { cursor: ew-resize; }
.sw-wrap { position: relative; display: inline-flex; }
.sw-wrap input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.be-align i { cursor: pointer; }
.be-align i:hover { background: #2a2a2a; }
.bt-item.tap:hover, .be-send.tap:not(:disabled):hover { filter: brightness(1.12); }
.bwa-wait { display: flex; align-items: center; gap: 9px; color: var(--a-text-2); font-size: 13.5px; }
.bwa-in { min-height: 20px; }
.seg i.tap { cursor: pointer; }
.seg i.tap:hover { color: #fff; }
.app .cl-h1 { margin: 0; font: 600 20px/1.2 'Inter', sans-serif; letter-spacing: -0.02em; color: var(--a-heading); }
.bl .sw { display: inline-block; flex: none; }
/* Every keystroke redraws the terminal, so its lines must not replay the entry animation */
.lt-pane .ln { animation: none; }

/* The hero window: free to move and resize inside its frame */
.hero-frame { height: clamp(540px, 62vw, 780px); padding: 0; }
.hero-frame .cam.windowed { position: absolute; max-width: none; aspect-ratio: auto; margin: 0; border-radius: 6px; }
.hero-frame .cam.windowed .a-title { cursor: grab; }
.hero-frame .cam.windowed .a-title .a-tabs, .hero-frame .cam.windowed .a-title .a-btn { cursor: pointer; }
.cam.dragging, .cam.dragging * { cursor: grabbing !important; user-select: none; }
.cam.dragging iframe { pointer-events: none; }
.rz { position: absolute; z-index: 60; }
.rz-n, .rz-s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.rz-e, .rz-w { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-n { top: 0; } .rz-s { bottom: 0; } .rz-e { right: 0; } .rz-w { left: 0; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 12px; height: 12px; }
.rz-ne { top: 0; right: 0; cursor: nesw-resize; } .rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; cursor: nwse-resize; } .rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
@media (max-width: 760px) { .hero-frame { height: auto; padding: 14px 10px 0; } }

.hero-frame .cam.windowed { transition: none; }
.hero-frame .cam.windowed.snap { transition: left 0.3s var(--ease), top 0.3s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease); }
.lt-kb { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none; }
.lt-pane { position: relative; }

/* "Try it" sits beside Replay on the four app demos */
.tryit { right: 88px; }
.stage.taken .tryit { display: none; }

/* Phones and narrow windows: one column, no side panels */
.app[data-compact] .a-side, .app[data-compact] .a-rail, .app[data-compact] .a-title .left, .app[data-compact] .a-right { display: none; }
.app[data-compact] .a-body { padding: 0 6px 6px; }
.app[data-compact] .a-col { padding: 0 10px; }
.app[data-compact] .a-comp { padding: 0 10px 12px; }
.app[data-compact] .scope { gap: 14px; }
.app[data-compact] .scope .it:nth-child(3) { display: none; }
.app[data-compact] .picker { width: min(430px, calc(100% - 20px)); }
.app[data-compact] .cl { padding: 12px; }
.app[data-compact] .lt-grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: minmax(260px, 1fr); overflow: auto; }
.app[data-compact] .code-head .lay { display: none; }
.app[data-compact] .bw-agent { display: none; }
.app[data-compact] .bw-body { position: relative; }
.app[data-compact] .bw-editor.open { position: absolute; right: 0; top: 0; bottom: 0; z-index: 6; }
.app[data-compact] .bw-omni { max-width: none; }
.app[data-compact] .zm { display: none; }
@media (max-width: 760px) {
  .hero-frame { margin-left: 0; transform: none; }
  .hero-frame .cam { aspect-ratio: 4 / 5; }
}
.stage.taken .cam { aspect-ratio: 4 / 3; }
/* On a phone the Design panel only slides over the page once something is selected */
.app[data-compact] .bw-editor.open:not(.has-sel) { width: 0; }
.app[data-compact] .bw-editor.open.has-sel { width: min(300px, 80%); }

/* The "/" menu lists every command, so it scrolls */
.app.live .slash { max-height: 312px; overflow-y: auto; scrollbar-width: none; }
.app.live .slash::-webkit-scrollbar { display: none; }
.slash .row b { width: auto; min-width: 96px; margin-right: 10px; }
.slash .row i { flex: none; margin-right: 10px; font: 12px var(--a-mono); font-style: normal; color: var(--a-text-3); }
.slash .row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash .row { align-items: center; }

/* Small info card (status, usage, splits) */
.live-card { position: absolute; right: 18px; bottom: 120px; z-index: 12; width: 290px; padding: 12px 14px 10px; border-radius: 10px; background: #1d1d1d; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); font-size: 13.5px; color: var(--a-text-2); }
.live-card b { display: block; margin-bottom: 8px; color: var(--a-heading); font-weight: 600; }
.live-card div { display: flex; gap: 12px; padding: 2px 0; }
.live-card div span { flex: none; min-width: 70px; color: var(--a-text-3); }
.live-card i { position: absolute; right: 10px; top: 8px; font-style: normal; color: var(--a-text-3); cursor: pointer; }

/* Start a split */
.live-dlg { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); }
.dlg-card { width: min(520px, calc(100% - 40px)); max-height: calc(100% - 40px); overflow: auto; padding: 22px; border-radius: 12px; background: #1c1c1c; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); color: var(--a-text); }
.dlg-card h3 { margin: 0 0 6px; font: 600 17px 'Inter', sans-serif; color: var(--a-heading); letter-spacing: -0.02em; }
.dlg-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--a-text-3); }
.dlg-card label { display: block; margin-bottom: 12px; font-size: 12.5px; color: var(--a-text-3); }
.dlg-card textarea, .dlg-card select { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border: 0; border-radius: 8px; outline: 0; background: #141414; color: var(--a-heading); font: 14px 'Inter', sans-serif; resize: none; }
.dlg-card select { appearance: none; cursor: pointer; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dlg-actions button { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #262626; color: var(--a-heading); font: 500 13.5px 'Inter', sans-serif; cursor: pointer; }
.dlg-actions button:hover { background: #2e2e2e; }
.dlg-actions .primary { background: #f2f2f2; color: #111; }
.dlg-actions .primary:hover { background: #fff; }

/* A split's own panel, opened from its chip */
.sp { position: absolute; top: 0; right: 0; bottom: 0; z-index: 14; width: min(520px, 62%); display: flex; flex-direction: column; background: #141414; box-shadow: -24px 0 50px rgba(0, 0, 0, 0.45); }
.sp[hidden] { display: none; }
.sp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--a-heading); }
.sp-head > div { min-width: 0; flex: 1; }
.sp-head b { display: block; font-size: 14px; font-weight: 600; }
.sp-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text-3); font-size: 12.5px; }
.sp-state { font: 12px var(--a-mono); color: var(--a-ok); }
.sp-x { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--a-text-3); }
.sp-x:hover { background: #222; color: #fff; }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 6px 0 16px; }
.sp-body::-webkit-scrollbar { display: none; }
.sp-foot { margin: 0 14px 14px; padding: 12px 14px; border-radius: 10px; background: #1c1c1c; color: #6b6b6b; font-size: 14px; }
.split-chip.tap:hover { background: #222; color: #fff; }

/* The guide: one line saying what to do next */
.coach { position: absolute; left: 50%; top: 62px; z-index: 35; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 40px); padding: 9px 12px 9px 14px; border-radius: 10px; background: #282828; color: #e6e6e6; font-size: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.coach:empty { display: none; }
.cc-n { flex: none; font: 12px var(--a-mono); color: #8d93a1; }
.cc-text { min-width: 0; line-height: 1.4; }
.cc-use { flex: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: #f2f2f2; color: #111; font: 500 13px 'Inter', sans-serif; cursor: pointer; }
.cc-use:hover { background: #fff; }
.coach-hit { animation: coach-pulse 1.6s ease-in-out infinite; }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 160, 255, 0); } 50% { box-shadow: 0 0 0 4px rgba(120, 160, 255, 0.35); } }
.app[data-compact] .coach { top: 54px; flex-wrap: wrap; }
.dlg-card { scrollbar-width: none; }
.dlg-card::-webkit-scrollbar { display: none; }
.app[data-compact] .dlg-card { padding: 16px; }
.app[data-compact] .dlg-card p { margin-bottom: 10px; font-size: 12.5px; }
.app[data-compact] .dlg-card label { margin-bottom: 8px; }
.app[data-compact] .dlg-card textarea { height: 54px; }
.app[data-compact] .dlg-card textarea, .app[data-compact] .dlg-card select { padding: 7px 10px; font-size: 13px; }
.app[data-compact] .dlg-actions { margin-top: 10px; }