/* The chat, the cards, the change log and the owner's spend card. Colours and base controls are in style.css. */

main:has(.chat-layout) { max-width: 1120px; }
/* The message box sticks to the bottom of the window: what gets the focus scrolls clear of it. --composer-height is
   set by the chat screen as the box grows. */
html:has(.chat-layout) { scroll-padding-bottom: calc(var(--composer-height, 160px) + 16px); }
/* "Skip to the message box", right after the chat's heading: out of sight until it has the focus (the first Tab from
   the heading, which has the focus when the screen opens). */
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 16px; z-index: 10; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.chat-main { min-width: 0; }
.chat-list { position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.chat-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.chat-links li { display: flex; gap: 8px; align-items: baseline; }
.chat-links a { flex: 1; min-width: 0; text-decoration: none; padding: 6px 8px; border-left: 3px solid transparent; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-links a:hover, .chat-links a[aria-current='page'] { background: #f4f4f5; }
/* The chat shown is marked by more than a tint: a dark bar (well over 3:1 against the list) and bold text. */
.chat-links a[aria-current='page'] { border-left-color: var(--ink); border-radius: 0 6px 6px 0; font-weight: 600; }
.chat-more { display: grid; gap: 6px; }
.chat-more .more-failed { margin: 0; color: var(--bad); }
.chat-links .muted { font-size: 12px; white-space: nowrap; }

a.button, label.button { display: inline-block; text-align: center; text-decoration: none; font-weight: 600; padding: 9px 16px; border-radius: 8px; background: var(--ink); color: #fff; border: 1px solid var(--ink); cursor: pointer; }
a.button:hover, label.button:hover { background: #c40000; border-color: #c40000; }
.button.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.button.secondary:hover { background: #fff; border-color: var(--ink); }
button.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; font-weight: 500; text-align: left; }
/* Red text on white is under 4.5:1, so a hovered link keeps its colour and gets a thicker underline. */
button.link:not(:disabled, [aria-disabled='true']):hover { background: none; color: var(--ink); text-decoration-thickness: 2px; }

.transcript { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.msg { display: grid; gap: 8px; }
.msg.from-client { justify-items: end; }
.msg .bubble { border-radius: var(--radius); padding: 10px 14px; max-width: min(640px, 100%); overflow-wrap: anywhere; }
.msg.from-client .bubble { background: var(--ink); color: #fff; }
.msg.from-assistant .bubble { background: var(--surface); border: 1px solid var(--line); }
.msg .bubble p, .msg .bubble ul, .msg .bubble ol { margin: 0 0 8px; }
.msg .bubble > :last-child { margin-bottom: 0; }
.msg .bubble ul, .msg .bubble ol { padding-left: 20px; }
.msg.pending .bubble { opacity: .75; }
.working { margin: 0; color: var(--muted); font-style: italic; }
.intro { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; }
.examples { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* A wrapped example keeps its bullet by its first line. */
.examples button.link { vertical-align: top; }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
img.thumb, .thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
figure.thumb { margin: 0; display: grid; gap: 4px; }
.thumb figcaption { font-size: 12px; color: var(--muted); }
.thumb.missing { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; }

.notice, .refusal { border-radius: 8px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; color: var(--bad); }
.notice p, .refusal p { margin: 0 0 8px; }
.notice > :last-child, .refusal > :last-child { margin-bottom: 0; }
p.notice { margin: 0 0 12px; }
/* The notice line stays in the page (a live region must be there before it speaks); empty, it takes no space. */
p.notice:empty { margin: 0; padding: 0; border-width: 0; }
.notice-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; }

.composer { position: sticky; bottom: 0; background: var(--canvas); padding: 8px 0 12px; display: grid; gap: 8px; }
.composer textarea { font: inherit; width: 100%; resize: vertical; min-height: 72px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.composer-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.composer-row:has(input[type='file']:focus-visible) .attach { outline: 2px solid var(--accent); outline-offset: 1px; }
.composer-row .counter { font-size: 12px; }
.composer-row button[type='submit'] { margin-left: auto; }
.attachments { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.attachments li { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.attachments img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

.card-group { display: grid; gap: 8px; }
.change-card, .help-card, .choose-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; max-width: 720px; }
.change-card.status-pending { border-color: var(--ink); }
.change-card p, .help-card p, .choose-card p { margin: 0; }
.card-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.meta { font-size: 12px; }
.note { background: #f4f4f5; border-radius: 8px; padding: 6px 10px; }
.item { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 6px; }
.item h3 { margin: 0; font-size: 14px; font-weight: 600; }
.fields { width: 100%; border-collapse: collapse; }
.fields th, .fields td { text-align: left; padding: 4px 6px; vertical-align: top; overflow-wrap: anywhere; }
.fields tbody th { font-weight: 500; color: var(--muted); width: 30%; }
.fields .before { color: var(--muted); text-decoration: line-through; text-decoration-color: #a1a1aa; }
.fields .after { font-weight: 600; }
.fields .long { white-space: pre-wrap; font-weight: 400; }
.fields .arrow { color: var(--muted); width: 1em; }
.warnings { margin: 0; padding: 8px 12px 8px 28px; background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; color: #7c2d12; }
.result { font-weight: 600; }
.result-applied { color: var(--ok); }
.result-failed, .result-uncertain { color: var(--bad); }
.skipped { background: #f4f4f5; border-radius: 8px; padding: 8px 12px; }
.skipped ul { margin: 4px 0 0; padding-left: 18px; }
.variations { display: grid; gap: 6px; }
.variation { border-left: 3px solid var(--line); padding-left: 10px; }
.variation-label, .variations-title { font-weight: 600; }
.card-message { font-weight: 500; }
/* Like the notice line, an empty message stays in the page (a live region must be there before it speaks) and takes
   no space: the negative margin takes back the card's grid gap. */
.card-message:empty { margin-top: -8px; }
.badge.change-applied { background: #dcfce7; color: var(--ok); }
.badge.change-pending, .badge.change-applying { background: #fef9c3; color: #854d0e; }
.badge.change-partial, .badge.change-failed, .badge.change-stale { background: #fee2e2; color: var(--bad); }
.badge.change-cancelled, .badge.change-expired, .badge.change-superseded { background: #f4f4f5; color: var(--muted); }
.help-card blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--canvas); }
.help-title, .choose-question { font-weight: 600; }

.change-log { display: grid; gap: 8px; margin: 0 0 16px; }
.log-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
/* Inline text in a list-item (so the native open/close marker shows), not a flex row: the " · " separators are text,
   and as flex items they wrapped onto lines of their own. */
.log-entry > summary { cursor: pointer; padding: 12px 16px; display: list-item; list-style-position: inside; line-height: 1.7; }
.log-entry[open] > summary { border-bottom: 1px solid var(--line); }
.log-summary { font-weight: 600; }
.log-entry > .card-group { padding: 12px; }
.log-entry .change-card { border: 0; padding: 4px; max-width: none; }

meter { width: 100%; height: 12px; margin: 8px 0; }
.banner { background: #f4f4f5; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.page-links { margin: 0 0 16px; }

@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-list { position: static; max-height: 220px; }
  /* On a small screen a sticky box would cover most of the chat, and what has the focus. */
  .composer { position: static; }
  html:has(.chat-layout) { scroll-padding-bottom: 0; }
  .fields tbody th { width: auto; }
}

@media (max-width: 640px) {
  /* 16px at least, or iOS zooms in on the message box (style.css does the same for other fields). */
  .composer textarea { font-size: 16px; }
}