/* Ask: the contents of the Ask panel (aside#ask.panel.ask-panel, loaded from /chat/panel). The
   panel box itself is .panel in style.css (full width at phone width). Tokens and the shared
   components only.

   .chat-head      the header: what Ask is about ("About PC90 T-bar"), New conversation, close
   .chat-log       the scrolling thread: .chat-suggest (first questions), .chat-turns, .chat-busy
   .chat-turn      one turn: .chat-q (the question, a plain right-aligned bubble) and .chat-a (the
                  answer as plain text on the panel: .chat-lead, .chat-points, .chat-cites at the
                  end of a line, .chat-quote)
   .chat-confirm   a confirm card's slot; .chat-card the card (.chat-card-what, -note, -do). After
                  Confirm it holds the page route's result (today.css styles .recorded)
   .chat-form      the question box and the send button at the bottom */

.ask-panel { overflow: hidden; }

.chat-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.chat-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 var(--t-lead)/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.chat-new { min-height: 32px; padding: var(--s1) var(--s2); border-color: transparent; color: var(--muted); font-weight: 400; }
.btn.chat-new:hover { color: var(--ink); }
.chat-close { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 400 var(--t-h2)/1 var(--ui); cursor: pointer; }
.chat-close:hover { background: var(--soft); color: var(--ink); }

.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.chat-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.chat-suggest .btn.quiet { justify-content: flex-start; max-width: 100%; white-space: normal; text-align: left; color: var(--acc); font-weight: 400; }
.chat-turns { display: flex; flex-direction: column; gap: var(--s5); }
.chat-busy { display: none; margin: 0; color: var(--muted); }
.chat-busy.htmx-request { display: block; }

.chat-turn { display: flex; flex-direction: column; gap: var(--s3); }
.chat-q { align-self: flex-end; max-width: 85%; margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-lg); background: var(--soft); color: var(--ink); overflow-wrap: anywhere; }
.chat-a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); overflow-wrap: anywhere; }
.chat-a > * { margin: 0; max-width: 100%; }
.chat-lead { color: var(--ink); }
.chat-points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.chat-points li { position: relative; padding-left: var(--s4); }
.chat-points li::before { content: ""; position: absolute; left: var(--s1); top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.chat-cites { font-size: var(--t-meta); color: var(--muted); }
.chat-cites a.ev { color: var(--muted); white-space: nowrap; }
.chat-cites a.ev:hover { color: var(--acc); }
.chat-quote { padding-left: var(--s3); border-left: 2px solid var(--line); color: var(--muted); }

.chat-confirm { width: 100%; }
.chat-confirm:empty { display: none; }
.chat-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); margin: var(--s1) 0 0; }
.chat-card-what { margin: 0; font-weight: 600; }
.chat-card-note { margin: 0; color: var(--muted); }
.chat-card-do { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chat-form { flex: 0 0 auto; display: flex; gap: var(--s2); margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--paper); }
.chat-form .field { flex: 1 1 auto; min-width: 0; }

@media (max-width: 700px) {
  .chat-head { padding-left: var(--s4); }
  .chat-log { padding: var(--s4); }
  .chat-q { max-width: 92%; }
}