/* The conversation panel (view-chat.js): a docked panel from 1024 px, floating below it, a full-screen sheet on
   phones. Tokens and shared controls are in styles.css. */

.chat {
  position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 12px 12px 0; min-width: 0;
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--separator);
}
.chat:focus-visible { box-shadow: inset 0 0 0 1px var(--separator), var(--focus-ring); border-radius: var(--r-xl); }
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px;
  padding: 0 8px 0 20px; border-bottom: 1px solid var(--separator);
}
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px; }

/* A's thread. The copilot's turn is grey prose; the expert's a muted bubble in the same sans at 14 / 20 (the serif is
   only for the verbatim Terza text, so a chat message never looks like the rubric). A run of turns by one speaker
   shares one "Who · time" line. */
.messages { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.msg { display: grid; gap: 4px; min-width: 0; }
.msg:has(> .msg-meta):not(:first-child) { margin-top: 14px; }
.msg-meta { margin: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.msg-body {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--label-2);
}
.msg-expert { justify-items: end; }
.msg-expert .msg-body {
  max-width: 85%; padding: 8px 12px; border-radius: var(--r-lg); background: var(--surface-3); color: var(--label);
}
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.msg-pending .msg-body { color: var(--label-3); }
.typing::after { content: "▍"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typing::after { animation: none; } }
/* a new thread on a criterion that had one: a quiet line between the two */
.msg-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3);
}
.msg-divider::before, .msg-divider::after { content: ""; flex: 1; height: 1px; background: var(--separator); }
.msg-divider span { max-width: 80%; text-align: center; }
/* a turn that gave no reply: the server's reason, where the reply would have been */
.msg-failed:not(:first-child) { margin-top: 14px; }
.msg-failed > [role="alert"] { display: grid; gap: 4px; }
.msg-failed .msg-meta { color: var(--red); font-weight: 600; }
.msg-failed .msg-body {
  padding: 8px 12px; border-radius: var(--r-lg); background: var(--red-tint); color: var(--label);
  box-shadow: inset 0 0 0 1px var(--red-border);
}

.composer {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: end;
  padding: 12px; border-top: 1px solid var(--separator);
}
.composer .input { resize: none; min-height: 44px; max-height: 200px; field-sizing: content; background: var(--surface-2); }
.composer-hint { grid-column: 1 / -1; margin: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.composer-hint:empty { display: none; }
/* the mock's "Demo, try saying:" sentences, above the box (design A) */
.composer-try { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.composer-try-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.composer-try .link { min-height: 32px; font-size: var(--fs-footnote); text-align: start; white-space: normal; }
.chat .empty-state { padding: 24px 0; }

@media (max-width: 1023px) {
  .chat {
    position: fixed; z-index: 40; top: 12px; right: 12px; bottom: 12px; width: min(var(--sheet-w), calc(100vw - 24px));
    height: auto; margin: 0; box-shadow: inset 0 0 0 1px var(--separator), var(--shadow-pop);
  }
}
@media (max-width: 760px) {
  .chat { inset: 0; width: auto; border-radius: 0; box-shadow: none; }
  .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .composer-keys { display: none; } /* no keyboard shortcut on a phone */
  .composer-try .link { min-height: var(--target); }
}
/* Send is a 44 px target on touch (HIG, the --target token); 40 px with a mouse */
@media (max-width: 760px), (pointer: coarse) {
  .composer .btn-round { width: var(--target); min-height: var(--target); }
}

/* The server's line under a copilot reply saying what that turn did to the plan; its codes under Details */
.msg-plan { display: grid; gap: 2px; margin-top: 4px; }
.msg-plan-line { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.msg-plan-details > summary { font-size: var(--fs-footnote); color: var(--label-2); }
.msg-plan-details .mono { overflow-wrap: anywhere; }