/* LiveLoop layout (2026-09-25). Layout only, in the plain black look: no glass, no rims, no backdrop. Loaded after liveloop-polish.css. Driven by liveloop-layout.js, which sets these body classes while LiveLoop is open: ll-dock-chat the prompt panel is attached to the bottom dock ll-dock-term the terminal is attached to the bottom dock ll-dock-both both are attached: side by side, a divider between them ll-dock-narrow below 900px: the dock stacks instead, and nothing floats liveloop-docked anything is attached, so the preview refits above it Two variables size the dock, both layout pixels inside LiveLoop's zoomed box: --live-chat-dock-h the dock's height (shared with the chat panel's code) --ll-dock-split the chat's share of the dock's width The chat panel and the terminal can each be detached into their own window and attached again, independently of each other. */ /* ── Project name in the header ─────────────────────────────────────────── */ #liveloop-project-name{display:inline-flex;align-items:center;gap:7px;max-width:240px;padding:6px 10px; border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#0f0f15;color:#e8e8f0; font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;flex:0 1 auto;min-width:0} #liveloop-project-name .liveloop-project-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #liveloop-project-name i{flex:0 0 auto;font-size:10px;color:#7d7d8f} #liveloop-project-name:hover{border-color:#8b5cf6;color:#fff} #liveloop-project-name:hover i{color:#c4b5fd} html.light-mode #liveloop-project-name{background:#fff;border-color:#dcdce4;color:#26262e} /* ── The prompt panel keeps its shape at any size ─────────────────────────── The panel is a grid with one implicit column, which grew to the widest row's min-content: the controls row (model, effort, note, meter, queue) does not wrap, so a small panel pushed its composer and bubbles off the right edge (owner, 2026-09-25). One shrinkable column, rows that wrap, fixed positions for every row so an empty thread cannot hand its space to another row. */ #liveloop-chat.live-chat-panel{grid-template-columns:minmax(0,1fr);background:#0b0b10;backdrop-filter:none;-webkit-backdrop-filter:none} #liveloop-chat.live-chat-panel > *{min-width:0;max-width:100%;box-sizing:border-box} #liveloop-chat .live-chat-head{grid-row:1} #liveloop-chat .live-chat-controls{grid-row:2;flex-wrap:wrap;row-gap:6px} #liveloop-chat .live-chat-controls > *{min-width:0} #liveloop-chat .live-chat-thread{grid-row:3;overflow-x:hidden} #liveloop-chat .live-chat-output{grid-row:4;align-self:end} #liveloop-chat .live-chat-files{grid-row:5} #liveloop-chat .live-chat-compose{grid-row:6;width:100%;min-width:0} #liveloop-chat .live-chat-compose textarea{min-width:0;width:auto} #liveloop-chat .live-chat-turn{max-width:min(92%,100%);overflow-wrap:anywhere} #liveloop-chat .live-chat-head b{font-size:13px} /* One line where it fits (owner, 2026-09-28: "we need the viewport to be bigger ... put everything on one line where we can"). script.js moves the controls into the title line, so the rows below renumber; a narrow panel lets the title line wrap. The composer is one row: attach, a two-line box the person can drag taller (it no longer grows into the stage), Send. */ #liveloop-chat.live-chat-panel{grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:8px;padding:10px 12px} #liveloop-chat .live-chat-head{flex-wrap:wrap;row-gap:6px} #liveloop-chat .live-chat-head b{flex:0 0 auto} #liveloop-chat .live-chat-head .live-chat-controls{grid-row:auto;flex:1 1 360px;flex-wrap:nowrap;min-width:0;cursor:default} #liveloop-chat .live-chat-thread{grid-row:2} #liveloop-chat .live-chat-output{grid-row:3} #liveloop-chat .live-chat-files{grid-row:4} #liveloop-chat .live-chat-compose{grid-row:5;flex-direction:row;align-items:flex-end;gap:8px;padding:6px 6px 6px 8px} #liveloop-chat .live-chat-compose .asksary-composer-row{flex:1 1 auto;min-width:0;order:1} #liveloop-chat .live-chat-compose .asksary-composer-tools{display:contents} #liveloop-chat .live-chat-compose .asksary-composer-attach{order:0} #liveloop-chat .live-chat-compose .asksary-composer-spacer{display:none} #liveloop-chat .live-chat-compose .asksary-composer-stop,#liveloop-chat .live-chat-compose .asksary-composer-send{order:2} #liveloop-chat .live-chat-compose textarea.asksary-composer-input{min-height:calc(2.9em + 12px);height:calc(2.9em + 12px);max-height:50dvh;padding:6px;resize:vertical;overflow-y:auto} /* A small window: the extras give way first, the composer never does. Classes, not a container query: a size container would make the panel the containing block of the fixed queue popover and trap it inside. The width classes are set by liveloop-layout.js from the panel's own size. */ #liveloop-chat.ll-compact #liveloop-effort-note,#liveloop-chat.ll-compact .live-chat-specs,#liveloop-chat.ll-compact .live-chat-tokens-text{display:none} #liveloop-chat.ll-compact .live-chat-controls{gap:6px} #liveloop-chat.ll-compact .live-chat-controls select{max-width:100%;flex:1 1 140px} #liveloop-chat.ll-compact #liveloop-effort{padding:0 6px;gap:6px} #liveloop-chat.ll-compact #liveloop-effort input[type=range]{width:58px;flex-basis:58px} #liveloop-chat.ll-compact .live-chat-compose{gap:6px} #liveloop-chat.ll-compact .live-chat-send,#liveloop-chat.ll-compact .live-chat-stop{padding:0 10px} #liveloop-chat.ll-compact .live-chat-head{gap:6px} #liveloop-chat.ll-tiny #liveloop-effort .liveloop-effort-name{display:none} #liveloop-chat.ll-tiny .live-chat-tokens{display:none} #liveloop-chat.ll-tiny .live-chat-output{max-height:72px} /* A short window: the running status line gives up its height before the thread or the composer do. */ #liveloop-chat.ll-short .live-chat-output{max-height:48px} #liveloop-chat.ll-short .live-chat-controls{row-gap:4px} /* Receipts (a live patch executed, a rewrite saved as state N, with Undo): a plain full-width status line in the thread, never a centred italic note. Their colour is set inline by renderLiveLoopReceipt; the light theme gets readable shades of the same three tones. "Plan first" rides in the controls row with the effort dial and wraps with it. */ #liveloop-chat .live-chat-turn.live-chat-receipt{align-self:stretch;max-width:100%;text-align:left;font-style:normal;background:transparent} #liveloop-chat .live-chat-receipt-undo:hover:not(:disabled){background:rgba(255,255,255,.08) !important} #liveloop-chat .live-chat-receipt-undo:disabled{opacity:.6;cursor:default !important} html.light-mode #liveloop-chat .live-chat-receipt[data-state="success"]{color:#047857 !important} html.light-mode #liveloop-chat .live-chat-receipt[data-state="pending"]{color:#6d28d9 !important} html.light-mode #liveloop-chat .live-chat-receipt[data-state="error"]{color:#b91c1c !important} /* One height handle for the whole dock (liveloop-layout.js), so the panel's own top edge stands down while LiveLoop is open. */ body.liveloop-open #liveloop-chat .live-chat-resize[data-edge="top"]{display:none !important} /* ── The dock: chat, terminal, or both ──────────────────────────────────── */ body.ll-dock-chat #liveloop-chat.live-chat-panel.active{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important; width:auto !important;height:var(--live-chat-dock-h,300px) !important;max-width:none !important;max-height:72dvh !important; min-width:0 !important;min-height:150px !important;border-radius:0 !important;border-left:0;border-right:0;border-bottom:0} body.ll-dock-chat #liveloop-chat.live-chat-panel.active .live-chat-resize{display:none !important} /* liveloop-layout.js keeps the dock at least as tall as the head, controls and whole composer (dockFloor). Past the 72dvh ceiling (a short landscape window) the panel scrolls inside, so Send can still be reached. */ body.ll-dock-chat #liveloop-chat.live-chat-panel.active{overflow-y:auto;overscroll-behavior:contain} /* composer.css hides the Send/Stop label below 640px for buttons that carry an icon; LiveLoop's carry only the label, which left an empty square on a phone. */ @media (max-width:640px){ #liveloop-chat .asksary-composer-send:not(:has(i)) > span,#liveloop-chat .asksary-composer-stop:not(:has(i)) > span{display:inline} } body.ll-dock-both:not(.ll-dock-narrow) #liveloop-chat.live-chat-panel.active{right:auto !important;width:var(--ll-dock-split,58%) !important} body.liveloop-open #liveloop-bridge-panel.llb-docked{left:0;right:0;top:auto;bottom:0;width:auto; height:var(--live-chat-dock-h,300px) !important;max-height:72dvh;min-height:150px;border-radius:0;box-shadow:none} body.ll-dock-both:not(.ll-dock-narrow) #liveloop-bridge-panel.llb-docked{left:var(--ll-dock-split,58%);border-left:1px solid rgba(255,255,255,.14)} body.liveloop-open #liveloop-bridge-panel .llb-grip{display:none} /* Below 900px there is no room for two columns or for windows: the dock stacks the chat above the terminal. */ body.ll-dock-both.ll-dock-narrow #liveloop-chat.live-chat-panel.active{bottom:calc(var(--live-chat-dock-h,300px) * .45) !important; height:calc(var(--live-chat-dock-h,300px) * .55) !important;max-height:none !important;min-height:0 !important} body.ll-dock-both.ll-dock-narrow #liveloop-bridge-panel.llb-docked{height:calc(var(--live-chat-dock-h,300px) * .45) !important;min-height:0;max-height:none} /* The divider between the two, and the dock's height handle. */ #ll-dock-divider,#ll-dock-grip{position:fixed;z-index:19450;touch-action:none;background:transparent} #ll-dock-divider[hidden],#ll-dock-grip[hidden]{display:none} #ll-dock-divider{left:var(--ll-dock-split,58%);bottom:0;width:10px;margin-left:-5px;height:var(--live-chat-dock-h,300px);max-height:72dvh;cursor:ew-resize} #ll-dock-divider::after{content:'';position:absolute;top:50%;left:4px;width:2px;height:40px;margin-top:-20px;border-radius:2px;background:rgba(255,255,255,.22)} #ll-dock-grip{left:0;right:0;bottom:min(var(--live-chat-dock-h,300px),72dvh);height:10px;margin-bottom:-5px;cursor:ns-resize} #ll-dock-grip::after{content:'';position:absolute;left:50%;top:3px;width:48px;height:4px;margin-left:-24px;border-radius:999px;background:rgba(255,255,255,.22)} #ll-dock-divider:hover::after,#ll-dock-grip:hover::after,#ll-dock-divider.is-dragging::after,#ll-dock-grip.is-dragging::after{background:rgba(167,139,250,.8)} #ll-dock-divider:focus-visible,#ll-dock-grip:focus-visible{outline:2px solid #a78bfa;outline-offset:-2px} body.ll-dock-narrow #ll-dock-divider{display:none} /* ── The terminal as its own window ─────────────────────────────────────── */ body.liveloop-open #liveloop-bridge-panel.llb-float{left:var(--llb-x,auto);top:var(--llb-y,auto);right:auto;bottom:auto; width:var(--llb-w,560px);height:var(--llb-h,340px) !important;min-width:300px;min-height:160px; max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);border:1px solid rgba(255,255,255,.18);border-radius:12px; box-shadow:0 20px 54px rgba(0,0,0,.5)} #liveloop-bridge-panel.llb-float .llb-head{cursor:grab;user-select:none} #liveloop-bridge-panel.llb-float.llb-moving .llb-head{cursor:grabbing} #liveloop-bridge-panel .llb-corner{display:none;position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:2;cursor:nwse-resize;touch-action:none; border-right:2px solid rgba(255,255,255,.3);border-bottom:2px solid rgba(255,255,255,.3);border-radius:0 0 11px 0} #liveloop-bridge-panel.llb-float .llb-corner{display:block} #liveloop-bridge-panel .llb-corner:hover{border-color:#a78bfa} /* ── The Git panel (liveloop-git.js) is LiveLoop's too ───────────────────── It is mounted on at z-index 10050, which is under LiveLoop's own container (19000): above it, below the header's two rows, and only while LiveLoop is open. */ body.liveloop-open #liveloop-git-panel{z-index:19460;top:104px;max-height:calc(100vh - 128px)} body:not(.liveloop-open) #liveloop-git-panel{display:none} /* ── Light theme: LiveLoop's own surfaces follow it together ───────────── The header already goes light; the panels under it stayed dark, which read as a light top half over a dark bottom half. The creation on the stage is the customer's and keeps its own colours. */ html.light-mode #liveloop-chat.live-chat-panel{background:#fbfbfd;border-color:#dcdce4;color:#26262e;box-shadow:0 12px 36px rgba(20,20,40,.14)} html.light-mode #liveloop-chat .live-chat-thread,html.light-mode #liveloop-chat .live-chat-output{background:#f1f1f5;color:#26262e} html.light-mode #liveloop-chat .live-chat-turn{color:#26262e} html.light-mode #liveloop-chat .live-chat-turn[data-role="assistant"]{background:#fff;border-color:#e2e2e8} html.light-mode #liveloop-chat .live-chat-turn[data-role="user"]{background:#ede7fb;border-color:#d6c9f5} html.light-mode #liveloop-chat textarea,html.light-mode #liveloop-chat select{background:#fff;border-color:#dcdce4;color:#26262e} html.light-mode #liveloop-chat .live-chat-close,html.light-mode #liveloop-chat .live-chat-max, html.light-mode #liveloop-chat .live-chat-undo,html.light-mode #liveloop-chat .live-chat-redo, html.light-mode #liveloop-chat .live-chat-attach{color:#43434d} /* The Web toggle reads in light mode too (owner, 2026-10-03): dark text when off, the same solid fill when on. */ html.light-mode #liveloop-bridge-panel.llb-root{background:#fbfbfd;color:#26262e;border-color:#dcdce4} html.light-mode #liveloop-bridge-panel .llb-head{border-color:#e2e2e8} html.light-mode #liveloop-bridge-panel .llb-head button{color:#43434d;border-color:#dcdce4} html.light-mode #liveloop-bridge-panel .llb-connect code,html.light-mode #liveloop-bridge-panel .llb-connect input, html.light-mode #liveloop-bridge-panel .llb-foot input,html.light-mode #liveloop-bridge-panel .llb-foot button{background:#fff;border-color:#dcdce4;color:#26262e} html.light-mode #liveloop-bridge-panel .llb-connect code,html.light-mode #liveloop-bridge-panel .llb-line.cmd{color:#047857} html.light-mode #liveloop-bridge-panel .llb-line.err{color:#b91c1c} html.light-mode #liveloop-bridge-panel .llb-connect p,html.light-mode #liveloop-bridge-panel .llb-line.sys{color:#5b5b68} html.light-mode #ll-dock-divider::after,html.light-mode #ll-dock-grip::after{background:rgba(0,0,0,.2)} /* ── Today's work: when, and where it led ───────────────────────────────── */ .ll-task-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:#8d8a9d;font:600 10.5px/1.3 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums} html.light-mode .ll-task-meta{color:#6b6b78} @media (prefers-reduced-motion:reduce){ #liveloop-bridge-panel.llb-float{transition:none} } /* Only the thread may stretch (owner, 2026-09-29: "when I removed attachments the prompt box grew upwards"). The panel's second row takes the spare height, and which child lands in it changes as rows come and go (the attachment chips, the request to check before sending). A box stretched there was then measured at its stretched height as the dock's floor, so the dock could only grow. Everything but the thread and the output keeps its own height. */ #liveloop-chat.live-chat-panel > :not(.live-chat-thread):not(.live-chat-output){align-self:start} #liveloop-chat.live-chat-panel > #liveloop-build-review{align-self:start;width:100%}