/* Principle 01: Private stays private. See art/wall.js.
   Two chats stacked, the private one clipped to the wall at --split. Each
   chat's column is anchored to the wall. The frame's size (container queries
   on .wall-stage) picks the header, the rhythm, the type and the spelling, so
   both chats share one geometry. A chat narrower than 210px (queries on
   .wall-pane) takes the short spelling and the small type, and hides a few
   parts at the extremes; wall.js decides what else a chat has room for. */

.art-wall {
  --split: 50%;
  cursor: ew-resize;
}
.art-wall:has(.wall-input:focus-visible) { outline: 2px solid var(--coral-bar); outline-offset: 4px; }

.art-wall .wall-stage {
  position: absolute; inset: 0;
  container: wallframe / size;
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
.art-wall .wall-stage p { margin: 0; }
.art-wall .wall-i { width: 14px; height: 14px; flex: none; }

/* ── Layers and chats ───────────────────────────────────── */
.art-wall .wall-layer {
  --wall-po: 18px;     /* outer padding of a chat */
  --wall-pw: 28px;     /* padding on the wall side, clear of the handle */
  --wall-hw: 14px;     /* header padding on the wall side */
  --wall-head: 48px;   /* header band height */
  --wall-top: 16px;    /* space under the header */
  --wall-gap: 11px;    /* between messages */
  --wall-bar: 28px;    /* the controls row inside the composer card */
  --wall-pb: 12px;     /* under the card */
  --wall-row: 28px;    /* a picker row */
  position: absolute; inset: 0; background: var(--paper);
}
.art-wall .wall-pub { clip-path: inset(0 0 0 var(--split)); }
.art-wall .wall-priv { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.art-wall .wall-pane {
  position: absolute; top: 0; bottom: 0;
  container: wallpane / inline-size;
  display: flex; flex-direction: column;
}
.art-wall .wall-priv .wall-pane { left: 0; width: var(--split); }
.art-wall .wall-pub .wall-pane { left: var(--split); right: 0; }

/* Type. The frame sets it; a narrow chat steps down to the small size. */
.art-wall .wall-head, .art-wall .wall-body {
  --wall-t-title: 13px; --wall-l-title: 17px;
  --wall-t-msg: 13px; --wall-l-user: 18px; --wall-l-bot: 19px; --wall-bub: 7px 11px; --wall-bub-max: 92%;
  --wall-t-tool: 13px; --wall-l-tool: 20px;
  --wall-t-opt: 13px; --wall-t-why: 12px; --wall-l-why: 15px;
  --wall-t-note: 12px; --wall-l-note: 17px;
}

/* Header band: the badge in the outer corner, the title beside it. */
.art-wall .wall-head {
  flex: none; height: var(--wall-head); min-width: 0;
  display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line);
  padding: 0 var(--wall-hw) 0 var(--wall-po);
}
.art-wall .wall-pub .wall-head { flex-direction: row-reverse; padding: 0 var(--wall-po) 0 var(--wall-hw); }
.art-wall .wall-badge { flex: none; }
.art-wall .wall-title { font-size: var(--wall-t-title); line-height: var(--wall-l-title); min-width: 0; text-wrap: balance; }
.art-wall .wall-pub .wall-title { text-align: right; }
.art-wall .wall-no-title .wall-title { display: none; }
/* The short title, where wall.js finds the long one does not fit. */
.art-wall .wall-ts, .art-wall .wall-title-s .wall-tl { display: none; }
.art-wall .wall-title-s .wall-ts { display: inline; }
.art-wall .wall-lockonly { display: none; color: var(--ink); }
.art-wall .wall-lockonly .wall-i { width: 13px; height: 13px; }

/* Chat body */
.art-wall .wall-body {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: var(--wall-top) var(--wall-pw) var(--wall-pb) var(--wall-po);
}
.art-wall .wall-pub .wall-body { padding: var(--wall-top) var(--wall-po) var(--wall-pb) var(--wall-pw); }
.art-wall .wall-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wall-gap); min-width: 0; }
.art-wall .wall-user {
  align-self: flex-end; max-width: var(--wall-bub-max);
  background: var(--medium); border-radius: var(--r-container);
  padding: var(--wall-bub); font-size: var(--wall-t-msg); line-height: var(--wall-l-user);
  text-wrap: pretty;
}
/* A tool call is a line: icon, then the words, with the affiliation badge
   after them, or under them when the chat is narrow. */
.art-wall .wall-tool {
  display: flex; align-items: flex-start; gap: 7px; max-width: 100%;
  font-size: var(--wall-t-tool); line-height: var(--wall-l-tool); color: var(--muted);
}
.art-wall .wall-tool > .wall-i { margin-top: calc((var(--wall-l-tool) - 14px) / 2); color: var(--subtle); }
.art-wall .wall-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; }
/* The title is one line and never wraps, as the app's tool row is (ToolCallWithResponse): a
   title the chat is too narrow for ends in an ellipsis and the row's chevron stays after it,
   outside the clipped text. Only the affiliation badge may drop to a second line. */
.art-wall .wall-tt { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.art-wall .wall-ttx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The row's own chevron (ChevronRight at 60%), as the app and the Biomed tile draw it. */
.art-wall .wall-tchev { flex: none; margin: -2px 0 0 3px; opacity: 0.6; }
.art-wall .wall-aff {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 20px; padding: 0 6px; border-radius: var(--r-inner);
  background: var(--muted-ground); color: var(--ink); font-size: 12px; white-space: nowrap;
}
.art-wall .wall-aff .wall-i { width: 11px; height: 11px; color: var(--ink); }
.art-wall .wall-bot { font-size: var(--wall-t-msg); line-height: var(--wall-l-bot); margin-top: -2px; text-wrap: balance; }

/* What wall.js leaves out when a chat runs out of room: the answer, then the
   tool row, then the question. */
.art-wall .wall-drop1 .wall-m-bot,
.art-wall .wall-drop2 .wall-m-bot, .art-wall .wall-drop2 .wall-m-tool,
.art-wall .wall-drop3 .wall-msgs > * { display: none; }

/* Composer: one card holding the prose line and, under it, the controls row
   the app draws: [+] [Tools N]  ·  [model] (Send). The + glyph hangs back onto
   the card's text edge. wall.js drops the row's parts, in order, from a chat
   too narrow to hold them (the wall-bs steps below). The card is the page
   ground with the app's resting hairline (owner message 17, R-32); the idle
   Send in it rests on the subtle fill. */
.art-wall .wall-comp { flex: none; margin-top: auto; }
.art-wall .wall-card {
  padding: 9px 6px 6px 12px;
  background: var(--paper); border: 1px solid var(--line-composer); border-radius: var(--r-container);
}
.art-wall .wall-ph {
  display: block; font-size: 13px; line-height: 20px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art-wall .wall-bar { display: flex; align-items: center; gap: 2px; height: var(--wall-bar); margin: 2px 0 0 -6px; }
.art-wall .wall-plus { display: grid; place-items: center; flex: none; width: var(--wall-bar); height: var(--wall-bar); color: var(--muted); }
.art-wall .wall-plus .wall-i { width: 16px; height: 16px; }
.art-wall .wall-tools, .art-wall .wall-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: var(--wall-bar); padding: 0 7px; border-radius: var(--r-element);
  font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.art-wall .wall-chip { margin-left: auto; color: var(--ink-2); }
.art-wall .wall-chip .wall-chiplock { width: 12px; height: 12px; color: var(--ink); }
.art-wall .wall-chip.is-open { background: var(--fill-strong); }
.art-wall .wall-dd { width: 12px; height: 12px; margin-left: -1px; opacity: 0.6; }
.art-wall .wall-send {
  flex: none; margin-left: 2px;
  width: var(--wall-bar); height: var(--wall-bar); border-radius: var(--r-element);
  display: grid; place-items: center;
  background: var(--fill); color: var(--muted);
}
/* The model's name is the chip's whole point, so it is never hidden while it
   can show part of itself: the app truncates it inside the chip (max width,
   ellipsis) rather than leaving a lone padlock. */
.art-wall .wall-cn { overflow: hidden; text-overflow: ellipsis; }
/* Steps wall.js takes, in order, until the row fits: the chevrons, the Tools
   chip, then the + button, after which the chip gives way and its name
   ellipsizes. Only when not even the first few letters fit does the name go
   (its padlock stays; a chip with no padlock goes with it). */
.art-wall .wall-bs1 .wall-dd,
.art-wall .wall-bs2 .wall-dd, .art-wall .wall-bs2 .wall-tools,
.art-wall .wall-bs3 .wall-dd, .art-wall .wall-bs3 .wall-tools, .art-wall .wall-bs3 .wall-plus,
.art-wall .wall-bs4 .wall-dd, .art-wall .wall-bs4 .wall-tools, .art-wall .wall-bs4 .wall-plus, .art-wall .wall-bs4 .wall-cn { display: none; }
.art-wall .wall-bs3 .wall-chip { flex: 0 1 auto; min-width: 0; }
.art-wall .wall-bs3 .wall-cn { min-width: 2.5em; }
.art-wall .wall-bs4 .wall-chip:not(:has(.wall-chiplock)) { display: none; }

/* ── Events: wall.js sets their top, clear of the messages and the composer ── */
.art-wall .wall-evt {
  position: absolute; top: 0; left: var(--wall-po); right: var(--wall-pw);
  display: flex; flex-direction: column; align-items: flex-start;
}
.art-wall .wall-pub .wall-evt { left: var(--wall-pw); right: var(--wall-po); }
/* The picker hangs from the composer (wall.js sets its bottom). */
.art-wall .wall-priv .wall-evt { top: auto; bottom: 0; align-items: flex-end; }
.art-wall .wall-no-evt .wall-evt { visibility: hidden; }

/* The model picker, as the app draws it in a private chat: the current
   private model checked, the public one greyed out (SwitchModelModal.tsx).
   The selection is the one thing that moves: it tries Claude, the reason
   appears, and it returns to Versa. A compact picker keeps only the Claude
   row, and the selection appears on it. */
.art-wall .wall-pop {
  position: relative; width: min(100%, 250px);
  padding: 4px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-container);
  box-shadow: var(--shadow-popover);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease);
}
.art-wall .wall-pop.is-on { opacity: 1; transform: none; }
.art-wall .wall-hl {
  position: absolute; left: 4px; right: 4px; top: 4px; height: var(--wall-row);
  border-radius: var(--r-element); background: var(--fill-strong);
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-med) var(--ease);
}
.art-wall .wall-pop.is-try .wall-hl { transform: translateY(var(--wall-row)); }
.art-wall .wall-compact .wall-keep { display: none; }
.art-wall .wall-compact .wall-hl { opacity: 0; }
.art-wall .wall-compact .wall-pop.is-try .wall-hl { transform: none; opacity: 1; }
.art-wall .wall-opt {
  position: relative; height: var(--wall-row); display: flex; align-items: center; gap: 7px;
  padding: 0 9px; font-size: var(--wall-t-opt); white-space: nowrap;
}
.art-wall .wall-opt .wall-i { width: 12px; height: 12px; }
.art-wall .wall-opt .wall-end { margin-left: auto; }
.art-wall .wall-opt .wall-gap { width: 12px; flex: none; }
.art-wall .wall-navy { color: var(--navy); }
.art-wall .wall-barred .wall-opt { color: var(--faint); }
.art-wall .wall-quiet { font-size: 12px; }
/* The reason opens under the barred row once the selection lands on it: the
   picker grows upward by its height and the words fade in. */
.art-wall .wall-barred { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--dur-med) var(--ease); }
.art-wall .wall-pop.is-why .wall-barred { grid-template-rows: auto 1fr; }
.art-wall .wall-why {
  min-height: 0; overflow: hidden;
  opacity: 0; transition: opacity var(--dur-med) var(--ease);
}
.art-wall .wall-why > p {
  font-size: var(--wall-t-why); line-height: var(--wall-l-why); color: var(--muted);
  padding: 1px 9px 6px 28px; text-wrap: balance;
}
.art-wall .wall-pop.is-why .wall-why { opacity: 1; }

/* A public request travels to the wall and stops dead there. */
.art-wall .wall-req {
  position: relative; padding-bottom: 13px;
  opacity: 0; transition: opacity var(--dur-med) var(--ease);
}
.art-wall .wall-req.is-on { opacity: 1; }
.art-wall .wall-reqrow {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: var(--wall-t-tool); line-height: var(--wall-l-tool); color: var(--muted);
}
.art-wall .wall-reqrow .wall-i { color: var(--subtle); margin-top: calc((var(--wall-l-tool) - 14px) / 2); }
.art-wall .wall-req.is-run .wall-reqrow { animation: wall-breathe calc(var(--dur-slow) * 4) var(--ease) infinite; }
/* The lane runs from the wall to the end of the request row. */
.art-wall .wall-lane {
  position: absolute; left: calc(-1 * var(--wall-pw)); right: 0; bottom: 1px; height: 10px;
  overflow: hidden;
}
.art-wall .wall-ray {
  position: absolute; inset: 0;
  transform: translateX(calc(100% + 6px));
}
.art-wall .wall-ray::before {
  content: ''; position: absolute; left: 1px; right: 0; top: 4px; height: 2px;
  background: var(--coral-bar);
}
.art-wall .wall-tip {
  position: absolute; left: 0; top: 0; width: 6px; height: 10px;
  fill: none; stroke: var(--coral-bar); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Linear, like the app's travelling segment, so it stops dead at the wall. */
.art-wall .wall-req.is-go .wall-ray { transform: none; transition: transform 1100ms linear; }
.art-wall .wall-note {
  font-size: var(--wall-t-note); line-height: var(--wall-l-note); color: var(--muted); margin-top: 7px;
  text-wrap: balance;
  opacity: 0; transition: opacity var(--dur-med) var(--ease);
}
.art-wall .wall-note.is-on { opacity: 1; }
@keyframes wall-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* The reduced-motion still appears at once, the ray already at the wall. */
.art-wall.wall-still .wall-stage *,
.art-wall.wall-still .wall-req.is-go .wall-ray { transition: none; }

/* ── The wall and its handle ─────────────────────────────── */
.art-wall .wall-line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--split) - 2px); width: 2px;
  background: var(--navy); pointer-events: none;
}
.art-wall .wall-handle {
  position: absolute; top: 50%; left: calc(var(--split) - 1px);
  width: 38px; height: 38px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid transparent; border-radius: 50%;
  box-shadow: var(--shadow-popover);
  pointer-events: none;
}
.art-wall .wall-handle .wall-chev { width: 11px; height: 11px; color: var(--coral); }
.art-wall .wall-handle .wall-hlock { width: 13px; height: 13px; color: var(--navy); }

/* The real control covers the whole frame, as in the hshs slider. It is wider
   than the frame by one thumb, so the thumb's centre is exactly the wall at
   every value; the thumb is as wide as the handle and as tall as the frame, so
   a finger that lands on the wall lands on it (iOS Safari drags a range only
   from its thumb). The overhang is clipped by the frame. */
.art-wall .wall-input {
  position: absolute; top: 0; bottom: 0; left: -22px; z-index: 2;
  width: calc(100% + 44px); height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.art-wall .wall-input::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.art-wall .wall-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 100%; border: 0; background: transparent; }
.art-wall .wall-input::-moz-range-track { height: 100%; background: transparent; border: 0; }
.art-wall .wall-input::-moz-range-thumb { width: 44px; height: 100%; border: 0; border-radius: 0; background: transparent; }

/* ── Frame sizes ────────────────────────────────────────── */
.art-wall .wall-p, .art-wall .wall-g, .art-wall .wall-n { display: none; }

/* Narrow frames: the short spelling, small type, tighter margins. */
@container wallframe (max-width: 480px) {
  .art-wall .wall-d { display: none; }
  .art-wall .wall-p { display: inline; }
  .art-wall .wall-layer { --wall-po: 12px; --wall-pw: 24px; --wall-hw: 10px; --wall-top: 14px; --wall-gap: 10px; --wall-row: 26px; }
  .art-wall .wall-head, .art-wall .wall-body {
    --wall-t-title: 12px; --wall-l-title: 15px;
    --wall-t-msg: 12px; --wall-l-user: 16px; --wall-l-bot: 16px; --wall-bub: 6px 10px; --wall-bub-max: 100%;
    --wall-t-tool: 12px; --wall-t-opt: 12px; --wall-t-note: 12px; --wall-l-note: 16px;
  }
  .art-wall .wall-head { gap: 8px; }
  .art-wall .wall-card { padding-left: 10px; }
  .art-wall .wall-ph { font-size: 12px; }
  .art-wall .wall-pop { padding: 3px; }
  .art-wall .wall-hl { left: 3px; right: 3px; top: 3px; }
  .art-wall .wall-opt { gap: 5px; padding: 0 7px; }
  .art-wall .wall-opt .wall-i { width: 11px; height: 11px; }
  .art-wall .wall-opt .wall-gap { width: 11px; }
  .art-wall .wall-quiet { font-size: 12px; }
  .art-wall .wall-why > p { padding: 0 7px 5px 23px; }
  .art-wall .wall-handle { width: 32px; height: 32px; }
  .art-wall .wall-handle .wall-chev { width: 10px; height: 10px; }
  .art-wall .wall-handle .wall-hlock { width: 12px; height: 12px; }
}
/* Phone frames: a two row header (badge, then up to two lines of title,
   8px clear of the header rule). */
@container wallframe (max-width: 400px) {
  .art-wall .wall-layer { --wall-head: 70px; --wall-po: 11px; --wall-pw: 22px; }
  .art-wall .wall-tool, .art-wall .wall-reqrow { gap: 6px; }
  .art-wall .wall-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; padding-top: 8px; }
  .art-wall .wall-pub .wall-head { flex-direction: column; align-items: flex-end; padding-top: 8px; }
}
/* Short frames: a tighter rhythm. */
@container wallframe (max-height: 420px) {
  .art-wall .wall-layer { --wall-top: 12px; --wall-gap: 8px; --wall-bar: 26px; --wall-pb: 10px; --wall-row: 26px; }
  .art-wall .wall-card { padding-top: 7px; }
  .art-wall .wall-bar { margin-top: 0; }
}
/* Large frames (the stacked tablet layout): larger type, the long words. */
@container wallframe (min-width: 640px) and (min-height: 460px) {
  .art-wall .wall-d { display: none; }
  .art-wall .wall-g { display: inline; }
  .art-wall .wall-layer { --wall-po: 22px; --wall-pw: 30px; --wall-hw: 16px; --wall-head: 54px; --wall-top: 20px; --wall-gap: 13px; --wall-bar: 30px; --wall-pb: 14px; --wall-row: 30px; }
  .art-wall .wall-head, .art-wall .wall-body {
    --wall-t-title: 14px; --wall-l-title: 18px;
    --wall-t-msg: 14px; --wall-l-user: 20px; --wall-l-bot: 20px; --wall-bub: 8px 13px;
    --wall-t-tool: 13px; --wall-l-tool: 22px;
    --wall-t-opt: 13px; --wall-t-why: 12px; --wall-l-why: 17px;
    --wall-t-note: 13px; --wall-l-note: 18px;
  }
  .art-wall .wall-aff { font-size: 12px; height: 22px; }
  .art-wall .wall-ph { font-size: 13px; }
  .art-wall .wall-tools, .art-wall .wall-chip { font-size: 13px; }
  .art-wall .wall-pop { width: min(100%, 300px); }
}

/* ── A narrow chat, whatever the frame ──────────────────── */
/* wall.js steps a chat whose question or tool row runs too tall down to the
   short spelling (sp1), then the tiny one (sp2). */
.art-wall .wall-sp1 .wall-d, .art-wall .wall-sp1 .wall-g,
.art-wall .wall-sp2 .wall-d, .art-wall .wall-sp2 .wall-g, .art-wall .wall-sp2 .wall-p { display: none; }
.art-wall .wall-sp1 .wall-p, .art-wall .wall-sp2 .wall-n { display: inline; }
@container wallpane (max-width: 209px) {
  .art-wall .wall-d, .art-wall .wall-g { display: none; }
  .art-wall .wall-p { display: inline; }
  .art-wall .wall-head, .art-wall .wall-body {
    --wall-t-title: 12px; --wall-l-title: 15px;
    --wall-t-msg: 12px; --wall-l-user: 16px; --wall-l-bot: 16px; --wall-bub: 6px 10px; --wall-bub-max: 100%;
    --wall-t-tool: 12px; --wall-l-tool: 20px;
    --wall-t-opt: 12px; --wall-t-why: 12px; --wall-l-why: 15px;
    --wall-t-note: 12px; --wall-l-note: 16px;
  }
}
/* A narrow chat's header gives the title a little more room (a row header
   only: column-gap does nothing in the phone's column header). */
@container wallpane (max-width: 180px) {
  .art-wall .wall-head { --wall-hw: 9px; column-gap: 6px; }
}
@container wallpane (max-width: 200px) {
  .art-wall .wall-opt .wall-check { display: none; }
}
@container wallpane (max-width: 190px) {
}
@container wallpane (max-width: 100px) {
  .art-wall .wall-comp { display: none; }
  .art-wall .wall-priv .wall-badge { display: none; }
  .art-wall .wall-lockonly { display: inline-flex; }
}
@container wallpane (max-width: 70px) {
  .art-wall .wall-pub .wall-badge { display: none; }
}