/*
 * chat-app.css — the one-app shell around /chat (chat-first P2,
 * docs/design/CHAT_FIRST_EXPERIENCE.md §4.9 "Layouts").
 *
 *   < 900px   the conversation is the screen. The Library is a drawer from the
 *             left; a sheet slides up to 92% height with a grab handle.
 *   ≥ 900px   Library rail (280px) | conversation (max 720px, centred).
 *             A sheet opens as an inspector on the right, over the conversation
 *             until 1200px, beside it from 1200px — so a report can stay open
 *             while you keep chatting.
 *
 * Colours come from chat.html's --chat-* palette (which follows chat's own
 * light/dark preference while CHAT_ONE_APP is off) with Living Scout tokens as
 * the fallback. Spacing, type and radius are tokens only (npm run design:audit).
 * Nothing here is pinned to bottom: 0 — sheets size off --app-h, which chat.html
 * drives from the visual viewport, so the keyboard never covers a field.
 */

.shell { display: flex; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden; }
.shell > .app { flex: 1 1 auto; min-width: 0; }

/* ── Header additions ─────────────────────────────────────────────────────── */
.header-left { display: flex; align-items: center; gap: var(--ls-space-1); min-width: 0; flex: 1 1 auto; }
.header-titles { display: flex; align-items: center; gap: var(--ls-space-2); min-width: 0; flex: 1 1 auto; }
.header-right { flex-shrink: 0; }
/* The working set, beside the wordmark. A full 44px row target of its own —
   stacked under the title it could only have been 14px tall. */
.header-context {
  display: inline-flex; align-items: center; min-height: var(--ls-tap); min-width: 0; max-width: 100%;
  border: 0; background: none; padding: 0 var(--ls-space-1); text-align: left; cursor: pointer;
  font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted));
}
.header-context-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-context:hover, .header-context:focus-visible { color: var(--chat-text, var(--ls-text)); }
/* On a phone the goal is worth more than the wordmark beside the logo. */
@media (max-width: 480px) {
  .header.has-context .header-title { display: none; }
}

/* [hidden] has to win over the display rules below (buttons are inline-flex,
   boxes are flex), or a hidden Back arrow and a closed confirm box still show. */
.lib-panel [hidden], .sheet [hidden], .header [hidden] { display: none !important; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: var(--ls-tap); min-height: var(--ls-tap); padding: 0;
  border: 0; border-radius: var(--ls-radius-control); background: none; cursor: pointer;
  color: var(--chat-text-muted, var(--ls-muted));
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--chat-tint, var(--ls-line)); color: var(--chat-text, var(--ls-text)); }
.icon-btn:active { transform: scale(.94); }

/* ── Library panel: drawer < 900px, rail ≥ 900px ──────────────────────────── */
.lib-panel {
  position: fixed; top: 0; left: 0; z-index: 140;
  width: 86vw; max-width: 340px; height: 100vh; height: var(--app-h, 100dvh);
  display: flex; flex-direction: column;
  background: var(--chat-surface, var(--ls-surface)); border-right: 1px solid var(--chat-border, var(--ls-line));
  transform: translateX(-100%); visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
.lib-panel.open { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: var(--ls-elev-3); }
.lib-scrim, .sheet-scrim {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: var(--app-h, 100dvh); z-index: 135;
  background: rgba(12, 20, 16, .42); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lib-scrim.open, .sheet-scrim.open { opacity: 1; pointer-events: auto; }
.lib-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-2);
  padding: var(--ls-space-2) var(--ls-space-2) var(--ls-space-2) var(--ls-space-4);
  border-bottom: 1px solid var(--chat-border, var(--ls-line));
}
.lib-head-title { font-family: var(--ls-font-display); font-size: var(--ls-text-lead); font-weight: 500; letter-spacing: var(--ls-track-display); color: var(--chat-text, var(--ls-text)); }
.lib-list { flex: 1; overflow-y: auto; padding: var(--ls-space-3) var(--ls-space-3) var(--ls-space-8); -webkit-overflow-scrolling: touch; }
.lib-group-title {
  font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); letter-spacing: var(--ls-track-caps); text-transform: uppercase;
  color: var(--chat-text-muted, var(--ls-muted)); margin: var(--ls-space-4) var(--ls-space-1) var(--ls-space-2);
}
.lib-group-title:first-child { margin-top: var(--ls-space-1); }
/* DESIGN_RULES rule 1: the container carries the border and the radius; rows
   carry one inset hairline and nothing else. */
.lib-group {
  background: var(--chat-agent-bubble, var(--ls-raised)); border: 1px solid var(--chat-border, var(--ls-line));
  border-radius: var(--ls-radius-card); overflow: hidden;
}
.lib-row {
  position: relative; display: flex; align-items: center; gap: var(--ls-space-2); width: 100%;
  min-height: var(--ls-space-12); padding: var(--ls-space-2) var(--ls-space-2) var(--ls-space-2) var(--ls-space-3);
  border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--chat-text, var(--ls-text));
}
.lib-row + .lib-row::before { content: ''; position: absolute; top: 0; left: var(--ls-space-3); right: 0; height: 1px; background: var(--chat-border, var(--ls-line)); }
.lib-row:hover, .lib-row:focus-visible { background: var(--chat-tint, var(--ls-surface)); }
.lib-row:active { background: var(--chat-tint, var(--ls-surface)); }
.lib-row svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--chat-text-muted, var(--ls-muted)); }
.lib-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lib-row-label { font-size: var(--ls-text-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-row-sub { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-row.is-pinned .lib-row-label { font-family: var(--ls-font-display); font-weight: 500; }
.lib-row.is-danger .lib-row-label { color: var(--chat-error, var(--ls-danger-ink)); }
.lib-signed-out { display: flex; flex-direction: column; gap: var(--ls-space-3); padding: var(--ls-space-2); }
.lib-panel.is-flash .lib-group { outline: 3px solid var(--ls-glow); }

@media (min-width: 900px) {
  body.is-signed-in .lib-panel {
    position: static; transform: none; visibility: visible; transition: none; box-shadow: none;
    flex: 0 0 280px; width: 280px; max-width: none; height: auto; z-index: auto;
  }
  body:not(.is-signed-in) .lib-panel { display: none; }
  .lib-scrim { display: none; }
  .lib-close { display: none; }
  #libraryBtn { display: none; }
  .lib-head { min-height: 48px; }
}

/* ── Sheet: slide-up < 900px, inspector ≥ 900px ───────────────────────────── */
.sheet {
  position: fixed; left: 0; right: 0; z-index: 150;
  top: calc(var(--app-h, 100dvh) * .08); height: calc(var(--app-h, 100dvh) * .92);
  display: flex; flex-direction: column;
  background: var(--chat-bg, var(--ls-bg)); color: var(--chat-text, var(--ls-text));
  border-radius: var(--ls-radius-sheet) var(--ls-radius-sheet) 0 0; box-shadow: var(--ls-elev-3);
  transform: translateY(100%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .22s ease; }
.sheet-grab { width: 40px; height: 4px; border-radius: var(--ls-radius-pill); background: var(--chat-border, var(--ls-line)); margin: var(--ls-space-2) auto 0; flex-shrink: 0; }
.sheet-head {
  display: flex; align-items: center; gap: var(--ls-space-1); flex-shrink: 0;
  padding: var(--ls-space-1) var(--ls-space-2) var(--ls-space-2) var(--ls-space-4);
  border-bottom: 1px solid var(--chat-border, var(--ls-line));
}
.sheet-back[hidden] + .sheet-title { margin-left: 0; }
.sheet-back { margin-left: calc(var(--ls-space-3) * -1); }
.sheet-title {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--ls-font-display); font-size: var(--ls-text-title); font-weight: 500; letter-spacing: var(--ls-track-display); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--ls-space-4) var(--ls-space-4) var(--ls-space-10);
  display: flex; flex-direction: column; gap: var(--ls-space-3);
}
.sheet-body.is-frame { padding: 0; gap: 0; overflow: hidden; }
.sheet-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--ls-bg); }
.sheet-bar { padding: var(--ls-space-2) var(--ls-space-4); border-bottom: 1px solid var(--chat-border, var(--ls-line)); flex-shrink: 0; }

@media (min-width: 900px) {
  .sheet {
    position: static; top: auto; left: auto; right: auto; height: auto; z-index: auto;
    flex: 0 0 420px; width: 420px; display: none;
    transform: none; visibility: visible; transition: none;
    border-radius: 0; box-shadow: none; border-left: 1px solid var(--chat-border, var(--ls-line));
  }
  .sheet.open { display: flex; }
  .sheet-grab, .sheet-scrim { display: none; }
  .sheet-head { min-height: 48px; padding-top: var(--ls-space-2); }
  /* Two primaries a screen: send, plus the sheet's one action. The newest chat
     card's ember steps down to ghost while the inspector is open. */
  .shell.has-sheet .chat-area .scout-btn-primary {
    background: transparent; color: var(--chat-agent-text, var(--ls-text)); border-color: var(--chat-agent-border, var(--ls-line));
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .sheet.open {
    position: fixed; top: 0; right: 0; height: 100vh; height: var(--app-h, 100dvh); z-index: 150;
    box-shadow: var(--ls-elev-3);
  }
}

/* ── Sheet content ────────────────────────────────────────────────────────── */
.sh-card {
  display: flex; flex-direction: column; gap: var(--ls-space-2);
  background: var(--chat-agent-bubble, var(--ls-raised)); border: 1px solid var(--chat-border, var(--ls-line));
  border-radius: var(--ls-radius-card); padding: var(--ls-space-3) var(--ls-space-4);
}
.sh-card.is-focus { outline: 2px solid var(--ls-ember); outline-offset: -1px; }
.sh-eyebrow {
  font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); letter-spacing: var(--ls-track-caps); text-transform: uppercase;
  color: var(--ls-green-ink);
}
.sh-title { margin: 0; font-family: var(--ls-font-display); font-size: var(--ls-text-lead); font-weight: 500; line-height: 1.2; letter-spacing: var(--ls-track-tight); overflow-wrap: anywhere; }
.sh-note { margin: 0; font-size: var(--ls-text-small); line-height: 1.5; color: var(--chat-text-muted, var(--ls-muted)); overflow-wrap: anywhere; }
.sh-lead { color: var(--chat-text, var(--ls-text)); }
.sh-foot { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); }
.sh-loading { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); }
.sh-quote { border-left: 2px solid var(--chat-border, var(--ls-line)); padding-left: var(--ls-space-3); white-space: pre-line; }
.sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-2); }
.sh-actions .scout-btn { flex: 1 1 auto; }
.sh-wrap .scout-btn { flex: 0 1 auto; }
.scout-btn.is-danger { color: var(--chat-error, var(--ls-danger-ink)); }
.scout-btn.is-danger:hover { border-color: var(--chat-error, var(--ls-danger-ink)); color: var(--chat-error, var(--ls-danger-ink)); }
.scout-btn.is-danger-fill { background: var(--chat-error, var(--ls-danger-ink)); border-color: var(--chat-error, var(--ls-danger-ink)); color: var(--ls-raised); }
.sh-kvs { display: flex; flex-direction: column; margin: 0; }
.sh-kv { display: flex; justify-content: space-between; gap: var(--ls-space-3); padding: var(--ls-space-1) 0; border-top: 1px solid var(--chat-border, var(--ls-line)); }
.sh-kv:first-child { border-top: 0; }
.sh-kv dt { font-size: var(--ls-text-small); color: var(--chat-text-muted, var(--ls-muted)); }
.sh-kv dd { margin: 0; font-family: var(--ls-font-mono); font-size: var(--ls-text-small); text-align: right; overflow-wrap: anywhere; }
.sh-chips { display: flex; flex-wrap: wrap; gap: var(--ls-space-1); }
.sh-chip {
  font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); padding: var(--ls-space-hair) var(--ls-space-2);
  border-radius: var(--ls-radius-pill); background: var(--chat-tint, var(--ls-surface)); color: var(--chat-text, var(--ls-text));
}
.sh-pill {
  flex-shrink: 0; font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); letter-spacing: var(--ls-track-wide); text-transform: uppercase;
  padding: var(--ls-space-1) var(--ls-space-2); border-radius: var(--ls-radius-pill); background: var(--chat-tint, var(--ls-surface)); color: var(--chat-text, var(--ls-text));
}
.sh-pill.is-warn { background: var(--ls-amber-tint); color: var(--ls-amber-ink); }
.sh-big { font-family: var(--ls-font-mono); font-size: var(--ls-text-hero); font-weight: 500; line-height: 1; }
.sh-big-unit { font-size: var(--ls-text-small); color: var(--chat-text-muted, var(--ls-muted)); }
.sh-mono { font-family: var(--ls-font-mono); }
.sh-label { font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); }
.sh-input {
  width: 100%; min-height: var(--ls-tap); box-sizing: border-box;
  padding: var(--ls-space-2) var(--ls-space-3); border: 1px solid var(--chat-border, var(--ls-line)); border-radius: var(--ls-radius-control);
  background: var(--chat-input-bg, var(--ls-raised)); color: var(--chat-text, var(--ls-text));
  font: inherit; font-size: var(--ls-text-field);
}
.sh-input:focus { outline: 3px solid var(--ls-glow); border-color: var(--chat-accent, var(--ls-ember)); }
.sh-textarea { resize: vertical; line-height: 1.5; }
.sh-count { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); }
.sh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sh-li { display: flex; flex-direction: column; gap: var(--ls-space-hair); padding: var(--ls-space-2) 0; border-top: 1px solid var(--chat-border, var(--ls-line)); }
.sh-li:first-child { border-top: 0; }
.sh-li-main { font-size: var(--ls-text-ui); font-weight: 600; overflow-wrap: anywhere; }
.sh-li-meta { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); overflow-wrap: anywhere; }
.sh-rows {
  display: flex; flex-direction: column; background: var(--chat-agent-bubble, var(--ls-raised));
  border: 1px solid var(--chat-border, var(--ls-line)); border-radius: var(--ls-radius-card); overflow: hidden;
}
.sh-rowbtn {
  position: relative; display: flex; align-items: center; gap: var(--ls-space-3); width: 100%; min-height: var(--ls-space-12);
  padding: var(--ls-space-2) var(--ls-space-3); border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--chat-text, var(--ls-text));
}
.sh-rowbtn + .sh-rowbtn::before { content: ''; position: absolute; top: 0; left: var(--ls-space-3); right: 0; height: 1px; background: var(--chat-border, var(--ls-line)); }
.sh-rowbtn:hover, .sh-rowbtn:focus-visible, .sh-rowbtn:active { background: var(--chat-tint, var(--ls-surface)); }
.sh-rowbtn-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sh-rowbtn-title { font-family: var(--ls-font-display); font-size: var(--ls-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-rowbtn-meta { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); }
.sh-confirm-box { display: flex; flex-direction: column; gap: var(--ls-space-2); }
.sh-result.is-bad { color: var(--chat-error, var(--ls-danger-ink)); }
.sh-danger-card { border-color: var(--ls-danger-tint); }
.sh-danger-card .sh-eyebrow { color: var(--chat-error, var(--ls-danger-ink)); }
.ch-item { display: flex; flex-direction: column; gap: var(--ls-space-2); padding: var(--ls-space-2) 0; border-top: 1px solid var(--chat-border, var(--ls-line)); }
.ch-item:first-child { border-top: 0; }
.ch-name { font-weight: 600; font-size: var(--ls-text-ui); }
.ch-sub { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); overflow-wrap: anywhere; }
.ch-state.is-verified { color: var(--ls-green-ink); }
.ch-state.is-unverified { color: var(--ls-amber-ink); }
.ch-form { display: flex; flex-direction: column; gap: var(--ls-space-2); }

/* Bookings (ported from /profile) */
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ls-space-2); }
.bk-brand { font-family: var(--ls-font-display); font-size: var(--ls-text-lead); overflow-wrap: anywhere; }
.bk-price { font-family: var(--ls-font-mono); font-size: var(--ls-text-ui); font-weight: 600; white-space: nowrap; }
.bk-meta { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); }
.bk-goals { margin: 0; font-size: var(--ls-text-small); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.bk-note { color: var(--ls-amber-ink); }
.bk-thread { display: flex; flex-direction: column; gap: var(--ls-space-1); padding: var(--ls-space-2); border-radius: var(--ls-radius-control); background: var(--chat-tint, var(--ls-surface)); }
.bk-msg { font-size: var(--ls-text-small); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.bk-msg .who { font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); text-transform: uppercase; letter-spacing: var(--ls-track-wide); color: var(--chat-text-muted, var(--ls-muted)); margin-right: var(--ls-space-2); }
.bk-msg[data-from="system"] { font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-text-muted, var(--ls-muted)); }
.bk-box { display: flex; flex-direction: column; gap: var(--ls-space-2); }
.bk-err { font-size: var(--ls-text-caption); color: var(--chat-error, var(--ls-danger-ink)); }
.bk-alt { display: flex; flex-direction: column; gap: var(--ls-space-2); padding-top: var(--ls-space-2); border-top: 1px solid var(--chat-border, var(--ls-line)); }
.bk-link { display: flex; align-items: center; min-height: var(--ls-tap); font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); color: var(--chat-agent-link, var(--ls-green-ink)); overflow-wrap: anywhere; }
.bk-status[data-s="confirmed"], .bk-status[data-s="accepted"] { background: var(--ls-green-tint); color: var(--ls-green-ink); }
.bk-status[data-s="declined"], .bk-status[data-s="expired"] { color: var(--chat-text-muted, var(--ls-muted)); }

/* ── Live progress: the scan strip (§5 — Night is used for one thing) ─────── */
.turn, .turn-text, .turn-blocks { display: contents; }
.scan-strip {
  align-self: flex-start; max-width: 92%; display: flex; align-items: center; gap: var(--ls-space-2);
  padding: var(--ls-space-2) var(--ls-space-3); border-radius: var(--ls-radius-control);
  background: var(--ls-bg); color: var(--ls-text); border: 1px solid var(--ls-line);
  font-family: var(--ls-font-mono); font-size: var(--ls-text-caption); line-height: 1.4;
  animation: message-in .15s ease-out;
}
.scan-strip .ls-live-dot { flex-shrink: 0; }
.scan-line { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.scan-clock { color: var(--ls-muted); margin-left: auto; padding-left: var(--ls-space-2); font-variant-numeric: tabular-nums; }
.scan-done { align-self: flex-start; font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); color: var(--chat-text-muted, var(--ls-muted)); margin-top: calc(var(--ls-space-1) * -1); }
@media (prefers-reduced-motion: reduce) { .scan-strip { animation: none; } .lib-panel, .sheet { transition: none; } }

/* ── History: day separators, channel mark, anchors ───────────────────────── */
.day-sep {
  align-self: center; margin: var(--ls-space-2) 0; padding: var(--ls-space-hair) var(--ls-space-3);
  font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); letter-spacing: var(--ls-track-wide); text-transform: uppercase;
  color: var(--chat-text-muted, var(--ls-muted)); border-radius: var(--ls-radius-pill); background: var(--chat-tint, var(--ls-surface));
}
.msg-via { display: block; margin-top: var(--ls-space-1); font-family: var(--ls-font-mono); font-size: var(--ls-text-micro); opacity: .8; }
.message.is-target { outline: 2px solid var(--ls-ember); outline-offset: 2px; }
.history-sentinel { height: 1px; flex-shrink: 0; }