/* A conversation around the answer panel (thread.js). The manner is the panel's own: the same column, hairlines, small quiet
   sans for everything that is not prose. Earlier turns are slim white rows above the panel; nothing is boxed inside it. */
.thread { display: flex; flex-direction: column; gap: 8px; }
/* with earlier turns above the panel, the line that counts the verified cards stands where the cards are: under the panel */
.results:has(> #thread:not([hidden])) > .results-head { order: 1; padding-top: 6px; }
.results:has(> #thread:not([hidden])) > #results, .results:has(> #thread:not([hidden])) > #paging { order: 2; }
.turn { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 clamp(26px, 13.5%, 110px); }
.turn-head { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 13px 0 12px; position: relative; }
.turn-head::-webkit-details-marker { display: none; }
.turn-head::before { content: ""; position: absolute; left: -20px; top: 21px; width: 5px; height: 5px; border-right: 1.5px solid var(--text-4); border-bottom: 1.5px solid var(--text-4); transform: rotate(-45deg); }
.turn[open] > .turn-head::before { transform: rotate(45deg); top: 19px; }
.turn-q { font: var(--w-mid) 17.5px/1.3 var(--font-serif); color: var(--text); }
.turn-first { font-size: 13px; line-height: 1.4; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn[open] .turn-first { display: none; }
.turn-head:hover .turn-q { color: var(--mineral); }
.turn.is-lapsed { background: transparent; }
.turn.is-lapsed .turn-q { color: var(--text-3); }
.turn-lapsed { font-size: 11.5px; color: var(--text-4); }
.turn-body { display: flex; flex-direction: column; gap: 16px; padding: 6px 0 22px; border-top: 1px solid var(--line-weak); padding-top: 16px; }
.turn-body button.cite:disabled, .turn-body button.stop-title:disabled { cursor: default; color: inherit; }
.turn-body button.cite:disabled { color: var(--text-2); background: var(--tint-14); }
.turn-body button.stop-title:disabled { color: var(--text); }
.turn-body a.source-row svg { opacity: 0; }

/* how a follow-up was read, under the question's rule */
#answer-reading { display: flex; flex-direction: column; gap: 10px; }
.reading { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.reading-label { color: var(--text-4); }
.reading-as { color: var(--text-2); }
.reading-others { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.reading-as + .reading-others { margin-top: 7px; }
.reading-other { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12.5px; line-height: 1.4; }
.reading-other:hover { background: var(--hover); }

/* the follow-up field, at the foot of the panel */
/* it stays in view at the foot of the window for as long as the panel does, so that a long answer need not be scrolled to its end */
html:has(#answer-follow:not([hidden])) { scroll-padding-bottom: 130px; }   /* what takes the keyboard's focus is scrolled clear of it */
#answer-follow { position: sticky; bottom: 0; margin: 0 -14px -26px; padding: 0 14px 16px; background: linear-gradient(to bottom, transparent, var(--surface) 18px); border-radius: 0 0 16px 16px; }
.follow { padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.follow-form { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 5px 5px 5px 15px; box-shadow: 0 0 0 1px var(--line-strong), 0 4px 16px rgba(0,0,0,0.05); }
.follow-form:focus-within { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-wash), 0 4px 16px rgba(0,0,0,0.05); }
.follow-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 7px 0; font-size: 15px; color: var(--text); }
.follow-go { flex: none; border: 0; border-radius: 10px; padding: 7px 14px; font-size: 13.5px; font-weight: var(--w-mid); background: var(--accent); color: var(--tag-text); }
.follow-hint { margin: 0; font-size: 12.5px; color: var(--accent-text); }
.follow-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-4); }
.follow-new { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--text-3); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 2px; }
.follow-new:hover { color: var(--mineral); text-decoration-color: var(--mineral); }
.follow.is-full { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.follow-full { margin: 0; font-size: 13.5px; color: var(--text-3); }
.answer.is-busy #answer-follow { display: none; }   /* it comes with the finished answer */
/* the field while its words are with the server (thread.js, sent): the small print keeps its room, so that nothing moves */
.follow.is-sent .follow-input:read-only { color: var(--text-4); }
.follow.is-sent .follow-foot { visibility: hidden; }
.follow-stop { padding-left: 0; padding-right: 0; background: none; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.follow-stop:hover { background: var(--hover); color: var(--text); }
/* what was said that asked nothing, and its one-line reply (thread.js, talk and aside): the visitor's words in the small quiet sans, the
   reply in the answer's serif a size down, beside the spark that stands for Claude at the panel's head */
.talk { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-width: 641px) {
  /* what takes the keyboard's focus is scrolled clear of the foot, however tall it has grown; but for the field itself, which is in the foot: the first
     letter typed would otherwise move the page on by as much as the field lies inside that strip */
  html:has(#answer-follow > .talk:is(.has-words, .has-failed)) { scroll-padding-bottom: var(--talk-foot, 130px); }
  html:has(#answer-follow > .talk):has(#answer-follow .follow-input:focus) { scroll-padding-bottom: 0; }
}
.talk.has-words, .talk.has-failed { padding-top: 22px; }
.talk-past, .asides { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-weak); }
.talk-past { margin-bottom: -16px; }                   /* the newest exchange follows, in the pinned foot, which keeps a strip of its own above it */
.aside { display: flex; flex-direction: column; gap: 1px; }
.aside-said { margin: 0 0 0 22px; font-size: 13px; line-height: 19px; color: var(--text-4); overflow-wrap: anywhere; }
.talk .aside-said { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* the pinned foot lies over the answer: it stays low */
.aside-line { position: relative; padding-left: 22px; font: 400 16px/24px var(--font-serif); color: var(--text); overflow-wrap: anywhere; }
.aside-line:empty { padding: 0; }
.aside-line p { margin: 0; }
.aside-line > svg, .aside-wait > svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.aside-line > svg { position: absolute; left: 0; top: 5px; }
.aside .reading, .aside-more .reading { margin: 5px 0 0 22px; }
.aside-wait { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 24px; color: var(--text-3); white-space: nowrap; }
.aside-wait > svg { animation: breathe 1.6s ease-in-out infinite; }
.talk.is-over .aside-wait { position: absolute; left: 0; top: 100%; line-height: 22px; }
/* a follow-up that could not be asked, with the answer still on show: the state card's words and buttons, without the card */
.aside-fail:not(:empty) { margin-top: 8px; }
.talk .state { border: 0; border-radius: 0; background: none; padding: 0; gap: 4px; }
.talk .state-title { font: var(--w-strong) 13px/1.45 var(--font-sans); gap: 8px; }
.talk .state-title svg { width: 14px; height: 14px; }
.talk .state p { font-size: 13px; margin-left: 22px; }
.talk .state-actions { margin-left: 22px; padding-top: 2px; }
.talk .state .btn { padding: 3px 10px; }
@media (prefers-reduced-motion: reduce) { .aside-wait > svg { animation: none; } }
@media (max-width: 640px) { .talk.is-over .aside-wait { position: static; } }   /* the strip above the field is too low for it there, and the foot is not pinned: it takes its room */
/* a fixed text for somebody in trouble (app.js, drawCare): no model wrote it, so the panel's head says nothing; only the cross stays */
.answer.is-care .answer-title-row { visibility: hidden; }
.answer.is-care .answer-question { display: none; }
.answer.is-care .answer-body:focus { outline: none; }
.care-p + .care-p { margin-top: 1em; }
.care-p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 5px 2px; margin: -5px -2px; }   /* (more to tap, and no line moves) */
/* asked, and nothing heard from the server yet (app.js, ask_): the words typed are not a headline yet; their room is kept, so that nothing jumps */
.answer.is-unread .answer-question { visibility: hidden; }
.results.is-restoring { visibility: hidden; }   /* a conversation that the tab had kept is being drawn again, turn by turn (app.js, bringBack) */
@media (max-width: 640px) {
  .turn { padding: 0 18px; }
  .turn-head::before { display: none; }
  .follow-input { font-size: 16px; }
  html:has(#answer-follow:not([hidden])) { scroll-padding-bottom: 0; }
  #answer-follow { position: static; margin: 0; padding: 0; background: none; }   /* a small screen has no room to give it for good */
  .follow { padding-top: 14px; border-top: 1px solid var(--line-weak); }
  .follow-go, .reading-other, .follow-new { min-height: 44px; }
}