/* The live view (web/live-view.js): one calm column. Narration is plain text; the work it does sits
   in quiet one-line rows and small cards that open in place. Colour only where it means something:
   green for added lines and passes, red for removed lines and failures. */

.lv, .lv-panel, .lv-chat-card, .lv-strip, .lv-offer, .lv-room {
  --lv-col: 760px; --lv-gutter: 24px;
  --lv-row: 38px; --lv-card-r: 12px;
  --lv-quiet: var(--secondary); --lv-faint: var(--tertiary);
  --lv-card-bg: var(--surface); --lv-card-line: var(--hairline);
}
.lv {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;
  color: var(--ink);
}
.lv.is-narrow { --lv-gutter: 16px; }
.lv.is-compact { --lv-gutter: 18px; }
.lv.is-inline { height: auto; }

/* ---------- header ---------- */
.lv-head { flex: none; position: relative; z-index: 3; padding: 13px var(--lv-gutter) 12px; border-bottom: 1px solid var(--hairline); background: rgba(246, 244, 240, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lv-head-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back title actions menu" "back meta actions menu"; column-gap: 10px; align-items: center; min-width: 0; }
.lv-back { grid-area: back; margin-left: -8px; }
.lv .lv-title { grid-area: title; margin: 0; font: 600 16px/1.3 var(--font); letter-spacing: -0.011em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-head-actions { grid-area: actions; display: flex; align-items: center; gap: 6px; }
.lv-menu { grid-area: menu; }
.lv-title-btn.ctl-button.ctl-button { all: unset; display: inline; cursor: text; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-title-btn:hover { background: var(--fill); box-shadow: 0 0 0 4px var(--fill); }
.lv-title-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lv-title-input.ctl-field.ctl-field { height: 28px; font-size: 15.5px; font-weight: 600; padding: 0 8px; margin-left: -8px; }
.lv-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: nowrap; margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: var(--lv-quiet); min-width: 0; overflow: hidden; white-space: nowrap; }
.lv-meta > * { flex: none; }
.lv-meta > * + *::before { content: "·"; margin: 0 7px; color: var(--lv-faint); }
.lv-sub { flex: 0 1 auto !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--lv-faint); }
.lv-clock, .lv-time { font-variant-numeric: tabular-nums; }
.lv-engine { color: var(--lv-quiet); }
.lv-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 560; }
.lv-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lv-faint); }
.lv-state.is-working .lv-state-dot { background: var(--ink); animation: lv-breathe 1.8s ease-in-out infinite; }
.lv-state.is-needs .lv-state-dot { background: var(--attention); }
.lv-state.is-needs { color: var(--attention); }
.lv-state.is-ready .lv-state-dot { background: var(--verified); }
.lv-state.is-done .lv-state-dot { background: var(--ink); }
.lv-state.is-stopped .lv-state-dot, .lv-state.is-waiting .lv-state-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lv-faint); }
.lv-head-actions .btn svg { width: 14px; height: 14px; }
.lv-head-detail { margin: 8px 0 0; font-size: 13px; color: var(--lv-quiet); line-height: 1.45; }
.lv-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--lv-quiet); animation: lv-drop 160ms cubic-bezier(.2,.8,.2,1); }
.lv-confirm > span { flex: 1; min-width: 180px; }
.lv-confirm strong { color: var(--ink); font-weight: 600; }
/* A phone: back, title and menu on one line; the state, and the buttons beside it, under them. */
.lv.is-narrow .lv-head { padding-top: 8px; padding-bottom: 10px; }
.lv.is-narrow .lv-head-grid { grid-template-areas: "back title title menu" "meta meta actions actions"; row-gap: 4px; column-gap: 8px; }
.lv.is-narrow .lv-head-grid:not(.has-back) { grid-template-areas: "title title title menu" "meta meta actions actions"; }
.lv.is-narrow .lv-meta { margin-top: 0; }
.lv.is-narrow .lv-head-grid.has-back .lv-meta { padding-left: 34px; }
.lv.is-narrow .lv-sub, .lv.is-narrow .lv-engine { display: none; }
.lv.is-narrow .lv-head-actions { gap: 4px; }
.lv.is-narrow .lv-stop.ctl-button.ctl-button { width: 28px; padding: 0; }
.lv.is-narrow .lv-stop > span { display: none; }
@media (min-width: 720px) { .work-session .lv-head .lv-back { display: none; } .work-session .lv-head-grid.has-back .lv-meta { padding-left: 0 !important; } }
@keyframes lv-drop { from { opacity: 0; transform: translateY(-3px); } }

/* ---------- pinned to-do ---------- */
.lv-todo { flex: none; position: relative; z-index: 2; padding: 10px var(--lv-gutter) 0; }
.lv-todo[hidden] { display: none; }
.lv-todo-inner { max-width: var(--lv-col); margin: 0 auto; border: 1px solid var(--lv-card-line); border-radius: var(--lv-card-r); background: var(--lv-card-bg); box-shadow: 0 1px 2px rgba(29, 29, 31, 0.03); }
.lv-todo-head.ctl-row.ctl-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 12px; font-size: 12.5px; color: var(--lv-quiet); text-align: left; border-radius: var(--lv-card-r); }
.lv-todo-head[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.lv-todo-count { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 560; }
.lv-todo-label, .lv-todo-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-todo-current { color: var(--ink); }
.lv-todo-list { list-style: none; margin: 0; padding: 0 12px 9px; display: grid; gap: 0; max-height: min(30vh, 220px); overflow: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.4; }
.lv-todo-list li { display: flex; align-items: flex-start; gap: 9px; padding: 3px 0; color: var(--lv-quiet); }
.lv-todo-list li.is-doing { color: var(--ink); font-weight: 620; }
.lv-todo-list li.is-done > span:nth-child(2) { color: var(--lv-faint); text-decoration: line-through; text-decoration-color: rgba(29, 29, 31, 0.25); }
.lv-tick { flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1.5px; border-radius: 50%; border: 1.5px solid rgba(29, 29, 31, 0.22); }
.lv-tick svg { width: 10px; height: 10px; stroke-width: 3; }
li.is-done > .lv-tick { background: var(--ink); border-color: var(--ink); color: #fff; }
li.is-doing > .lv-tick { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 8px var(--ink); }
.lv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the column ---------- */
.lv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 24px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.lv-column { max-width: calc(var(--lv-col) + 2 * var(--lv-gutter)); margin: 0 auto; padding: 18px var(--lv-gutter) 28px; }
.lv.is-inline .lv-column { padding: 0; max-width: none; }
.lv-earlier { display: flex; justify-content: center; }
.lv-earlier:not(:empty) { margin-bottom: 16px; }
.lv-list { display: flex; flex-direction: column; gap: 6px; }
.lv-list > * { min-width: 0; }

/* Narration: plain text, the main voice of the page. */
.lv-msg { margin: 8px 0 6px; }
.lv-list > .lv-msg:first-child, .lv-nested > .lv-msg:first-child { margin-top: 0; }
.lv-md { font-size: 15px; line-height: 1.62; overflow-wrap: anywhere; }
.lv-md p { margin: 0 0 10px; }
.lv-md h2 { font-size: 15px; font-weight: 650; margin: 18px 0 6px; }
.lv-md h3 { font-size: 14.5px; font-weight: 650; margin: 16px 0 4px; }
.lv-msg.is-final { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.lv-msg.is-streaming .lv-md > :last-child::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: var(--ink); opacity: 0.55; animation: lv-caret 1s steps(2, start) infinite; }

.lv-user { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 12px 0 8px; }
.lv-user-bubble { max-width: min(82%, 600px); padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--raised); color: var(--ink); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-sent { font-size: 12px; color: var(--lv-faint); }
.lv-sent.bad { color: var(--destructive); }

.lv-status { margin: 10px auto; max-width: 560px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--lv-faint); text-wrap: balance; }
.lv-status.is-failed { color: var(--destructive); }
.lv-status.is-quiet { margin: 2px 0; text-align: left; }

/* Quiet one-line rows: thinking, lookups, tools, a finished to-do list. */
.lv-line, .lv-row.lv-line.ctl-row.ctl-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: var(--lv-quiet); text-align: left; background: transparent; }
.lv-line > svg { flex: none; width: 15px; height: 15px; color: var(--lv-faint); }
.lv-line-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-row.lv-line .lv-chev { opacity: 0; }
.lv-row.lv-line:hover .lv-chev, .lv-row.lv-line:focus-visible .lv-chev, .lv-row.lv-line[aria-expanded="true"] .lv-chev { opacity: 1; }
.lv-tools, .lv-lookups, .lv-think, .lv-todo-line { display: grid; gap: 0; }
.lv-tools + .lv-tools, .lv-lookups + .lv-tools, .lv-tools + .lv-lookups { margin-top: -4px; }
.lv-think-text { margin: 2px 0 6px 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--hairline); font-size: 13.5px; line-height: 1.55; color: var(--lv-quiet); white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-count { color: var(--lv-faint); font-variant-numeric: tabular-nums; }
.lv-steps, .lv-paths { list-style: none; margin: 2px 0 6px 23px; padding: 0 0 0 12px; border-left: 2px solid var(--hairline); display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--lv-quiet); }
.lv-paths code { font: 12.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.lv-query { color: var(--ink); }
.lv-todo-line .lv-todo-list { margin: 0 0 6px 23px; padding: 2px 0 2px 12px; border-left: 2px solid var(--hairline); max-height: none; }

.lv-chev { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--lv-faint); transition: transform 140ms cubic-bezier(.2,.8,.2,1), opacity 120ms; }
.lv-chev svg { width: 14px; height: 14px; }
[aria-expanded="true"] > .lv-chev { transform: rotate(90deg); }
.lv-todo-head .lv-chev { transform: none; }
.lv-todo-head .lv-chev.is-open { transform: rotate(180deg); }
.lv-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; padding-left: 8px; font-size: 12.5px; color: var(--lv-quiet); }

/* Cards: edits, commands, tests, helpers. One row each, opening in place. */
.lv-card { border: 1px solid var(--lv-card-line); border-radius: var(--lv-card-r); background: var(--lv-card-bg); overflow: hidden; box-shadow: 0 1px 1.5px rgba(29, 29, 31, 0.025); }
.lv-card-row, .lv-row.lv-card-row.ctl-row.ctl-row { display: flex; align-items: center; gap: 9px; width: 100%; min-height: var(--lv-row); padding: 0 12px; border-radius: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); text-align: left; background: transparent; }
.lv-card-row.is-static { cursor: default; }
.lv-card-row > svg { flex: none; width: 15px; height: 15px; color: var(--lv-faint); }
.lv-card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.lv-card .lv-fold { border-top: 1px solid var(--hairline); }
.lv-card-row[aria-expanded="true"] { background: rgba(29, 29, 31, 0.018); }
.lv-delta { display: inline-flex; gap: 6px; font: 500 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }
.lv-delta .add { color: var(--verified); }
.lv-delta .del { color: var(--destructive); }
.lv-delta .none { color: var(--lv-faint); }
.lv-mark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.lv-mark svg { width: 11px; height: 11px; stroke-width: 2.6; }
.lv-mark.ok { color: var(--verified); background: color-mix(in srgb, var(--verified) 11%, transparent); }
.lv-mark.bad { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.lv-outcome { font-variant-numeric: tabular-nums; }
.lv-outcome.bad { color: var(--destructive); font-weight: 520; }
.lv-time { color: var(--lv-faint); font-size: 12.5px; }

.lv-files { list-style: none; margin: 0; padding: 4px 0; }
.lv-file + .lv-file { border-top: 1px solid rgba(29, 29, 31, 0.05); }
.lv-file-row.ctl-row.ctl-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 12px 0 36px; border-radius: 0; font-size: 13px; text-align: left; color: var(--ink); background: transparent; }
.lv-file-name { font: 500 12.5px/1.4 var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.lv-file-dir { min-width: 0; flex: 0 1000 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lv-faint); font-size: 12.5px; direction: rtl; text-align: left; }
.lv-card-row .lv-file-dir { flex: 0 1000 auto; }
.lv-file-note { color: var(--lv-faint); font-size: 12px; }
.lv-file .lv-fold { border-top: 1px solid rgba(29, 29, 31, 0.05); }
.lv-part { min-width: 0; }
.lv-part + .lv-part { border-top: 1px dashed var(--hairline); }
.lv .work-diff-wrap > .work-card-note, .lv-note { margin: 0; padding: 8px 12px; font-size: 12.5px; color: var(--lv-quiet); }
.lv-note.bad { color: var(--destructive); }
.lv .diff-toolbar { display: none; }
.lv .work-diff { max-height: min(56vh, 520px); }

.lv-script { display: flex; align-items: flex-start; gap: 8px; padding: 9px 8px 9px 12px; background: var(--diff-gutter, #faf9f7); }
.lv-script code { flex: 1; min-width: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.lv-script code::before { content: "$ "; color: var(--lv-faint); }
.lv .work-output-wrap .work-output { max-height: 340px; border-top: 1px solid var(--hairline); }
.lv-cmd.is-bad { border-color: color-mix(in srgb, var(--destructive) 22%, var(--hairline)); }

.lv-tests-line .bad { color: var(--destructive); }
.lv-sep { color: var(--lv-faint); padding: 0 6px; }
.lv-failures { list-style: none; margin: 0; padding: 6px 12px 10px; display: grid; gap: 10px; font-size: 13px; }
.lv-failures strong { font-weight: 560; }
.lv-failures pre { margin: 4px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--destructive) 5%, var(--surface)); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: #7d1f29; max-height: 180px; overflow: auto; }

.lv-helper .lv-fold { padding: 10px 12px 12px 14px; }
.lv-nested { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 2px solid var(--hairline); }
.lv-nested .lv-card { box-shadow: none; }
.lv-nested .lv-md { font-size: 14px; }

.lv-v2 > * { margin: 0 !important; }

/* Spinners, pulses and loading. */
.lv-spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid rgba(29, 29, 31, 0.12); border-top-color: var(--ink); animation: lv-turn 0.8s linear infinite; }
.lv-pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: lv-breathe 1.8s ease-in-out infinite; }
.lv-live:empty { display: none; }
.lv-live { margin-top: 10px; }
.lv-working { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 0; font-size: 13.5px; color: var(--lv-quiet); }
.lv-working > span:last-child { background: linear-gradient(90deg, var(--lv-quiet) 0%, var(--lv-quiet) 40%, rgba(92, 89, 87, 0.35) 50%, var(--lv-quiet) 60%, var(--lv-quiet) 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lv-shimmer 2.4s linear infinite; }
.lv-working.is-gap > span:last-child { animation: none; color: var(--lv-quiet); background: none; }
.lv-working.is-gap .lv-pulse { background: var(--lv-faint); }
.lv-loading, .lv-skeleton { display: grid; gap: 9px; padding: 8px 0; }
.lv-skeleton { padding: 12px; }
.lv-loading span, .lv-skeleton span { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--fill) 0%, rgba(29, 29, 31, 0.09) 50%, var(--fill) 100%); background-size: 400px 100%; animation: shimmer 1.4s linear infinite; }
.lv-loading span:nth-child(1) { width: 72%; } .lv-loading span:nth-child(2) { width: 88%; } .lv-loading span:nth-child(3) { width: 46%; }
.lv-skeleton span:nth-child(2) { width: 82%; } .lv-skeleton span:nth-child(3) { width: 61%; }
@keyframes lv-turn { to { transform: rotate(360deg); } }
@keyframes lv-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@keyframes lv-caret { to { opacity: 0; } }
@keyframes lv-shimmer { from { background-position: 100% 0; } to { background-position: -140% 0; } }

/* ---------- the room card: what the session made ---------- */
.lv-room { display: grid; grid-template-columns: minmax(0, 1fr); margin: 14px 0 6px; border: 1px solid var(--lv-card-line); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04), 0 10px 30px rgba(29, 29, 31, 0.05); }
.lv-room-shot.ctl-button.ctl-button { display: block; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; background: var(--raised); aspect-ratio: 16 / 9; overflow: hidden; }
/* A readable crop of the top of the page, not the whole screen shrunk to nothing. */
.lv-room-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.32); transform-origin: top center; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.lv-room-shot:hover img { transform: scale(1.36); }
.lv-room-body { padding: 16px 18px 16px; display: grid; gap: 4px; }
.lv-room-kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--lv-quiet); letter-spacing: 0.01em; }
.lv-room-headline { margin: 2px 0 2px; font-size: 17px; line-height: 1.35; font-weight: 640; letter-spacing: -0.012em; text-wrap: pretty; }
.lv-room-counts { margin: 0; font-size: 13px; color: var(--lv-quiet); font-variant-numeric: tabular-nums; }
.lv-room-review { margin: 4px 0 0; font-size: 13px; color: var(--ink); font-weight: 520; }
.lv-room-review.is-bad { color: var(--destructive); }
.lv-room-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.lv-room-foot .btn svg { width: 15px; height: 15px; }
.lv-room.is-superseded { opacity: 0.72; box-shadow: none; }
@media (min-width: 900px) {
  .lv:not(.is-narrow):not(.is-compact) .lv-room:has(.lv-room-shot) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  /* The picture fills the card's height beside the text; a tall phone capture never sets that height. */
  .lv:not(.is-narrow):not(.is-compact) .lv-room .lv-room-shot { position: relative; aspect-ratio: auto; height: 100%; min-height: 220px; border-right: 1px solid var(--hairline); }
  .lv:not(.is-narrow):not(.is-compact) .lv-room .lv-room-shot img { position: absolute; inset: 0; }
  .lv:not(.is-narrow):not(.is-compact) .lv-room-body { align-content: center; padding: 20px 22px; }
}

/* ---------- the composer ---------- */
.lv-composer.composer { flex: none; padding: 8px var(--lv-gutter) max(14px, env(safe-area-inset-bottom)); }
.lv-composer-inner { max-width: var(--lv-col); margin: 0 auto; }
.lv .jump-latest { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4; }
.lv.is-compact .jump-latest { bottom: 18px; }

/* ---------- chat: the live card, the finished strip, the offer ---------- */
.lv-chat-card { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 12px 12px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(29, 29, 31, 0.03); }
.lv-chat-main { flex: 1; min-width: 0; }
.lv-chat-title { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-chat-sub { display: flex; align-items: baseline; gap: 0; margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--secondary); min-width: 0; }
.lv-chat-step { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-chat-files { flex: none; display: inline-flex; align-items: baseline; gap: 6px; }
.lv-chat-card .lv-time { flex: none; }
.lv-chat-card.is-queued .lv-pulse { background: var(--tertiary); animation: none; }
@media (max-width: 520px) { .lv-chat-card .lv-time { display: none; } .lv-chat-files { display: none; } .lv-chat-sub .lv-sep { display: none; } }

.lv-strip { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.lv-strip-line { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; font-size: 13px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.lv-strip-line .bad { color: var(--destructive); }
.lv-strip-line > span:not(.lv-sep) { display: inline-flex; align-items: baseline; gap: 6px; }
.lv-strip-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lv-strip-shot.ctl-button.ctl-button { display: block; height: auto; padding: 0; aspect-ratio: 4 / 3; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; background: var(--raised); }
.lv-strip-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.25); transform-origin: top center; }
.lv-strip-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 520; }
.lv-strip-check.is-bad { color: var(--destructive); }
.lv-strip-actions { display: flex; gap: 8px; justify-content: flex-end; }
.lv-strip .lv-note { padding: 0; }

.lv-offer { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(29, 29, 31, 0.03); }
.lv-offer-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12.5px; color: var(--secondary); }
.lv-offer-kicker svg { width: 14px; height: 14px; }
.lv-offer-title { margin: 0; font-size: 15.5px; font-weight: 640; line-height: 1.35; }
.lv-offer-task { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-offer-goal { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; }
.lv-offer-goal span { color: var(--secondary); }
.lv-offer-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.lv-offer-project { font-size: 12.5px; color: var(--tertiary); }
.lv-offer-foot .btn { margin-left: auto; }

/* ---------- the chat's Open panel ---------- */
:root { --lv-panel: clamp(400px, 36vw, 540px); }
.lv-panel { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: var(--lv-panel); display: flex; flex-direction: column; background: var(--canvas); border-left: 1px solid var(--hairline); box-shadow: -18px 0 48px rgba(29, 29, 31, 0.06); outline: none; }
.lv-panel.is-sheet { left: 0; width: auto; z-index: 60; border-left: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
.lv-panel-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--hairline); }
.lv-panel-title { flex: 1; min-width: 0; }
.lv-panel-title h2 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 640; color: var(--ink); text-transform: none; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-panel-body { flex: 1; min-height: 0; display: flex; }
.lv-panel-body > .lv { flex: 1; }
.lv-panel .lv-column { padding-top: 14px; }
@media (min-width: 1000px) {
  html.lv-panel-open .app-shell { padding-right: var(--lv-panel); }
  html.lv-panel-open .app-shell.route-chat { grid-template-columns: var(--rail) minmax(0, 1fr); }
  html.lv-panel-open .app-shell > .side, html.lv-panel-open .app-shell > .side-tab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-spin, .lv-pulse, .lv-state-dot, .lv-working > span:last-child, .lv-loading span, .lv-skeleton span, .lv-msg.is-streaming .lv-md > :last-child::after { animation: none; }
  .lv-chev { transition: none; }
}