/* Chat messages, shared by the teacher's copilot pane, the student's thread under a comment, and the teacher's read-only
   copy of that thread. Colours and controls come from tokens.css and app.css; the panes themselves are in workspace.css. */
.chat-msgs { display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 92%; padding: 7px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg.me { align-self: flex-end; background: var(--green-fill); border-color: var(--green-line); }
.chat-msg.ai { align-self: flex-start; }
.chat-msg .who { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.chat-msg .who i { font-style: normal; font-weight: 400; }
.chat-msg .body { white-space: pre-wrap; }
.chat-msg.wait .body { color: var(--muted); }
.chat-err { margin: 0; padding: 7px 10px; border-radius: var(--r); background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); font-size: var(--fs-sm); font-weight: 500; }
.chat-err[hidden] { display: none; }
.chat-form textarea { display: block; min-height: 56px; max-height: 180px; font-size: var(--fs-sm); }
.chat-form textarea:read-only { background: var(--surface-2); color: var(--muted); }
.chat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.chat-row .btn { flex: none; }
.chat-empty p { margin: 0 0 8px; }
.talked .chat-empty { display: none; }

/* what a student asked, shown to the teacher under the comment. Read only. */
.chat-log { margin-top: 8px; padding: 7px 0 0; border-top: 1px dashed var(--line-2); }
.chat-log > summary { color: var(--ink-2); font-size: var(--fs-sm); }
.chat-log .chat-msgs { margin-top: 8px; }
.chat-worry > summary { color: var(--bad); font-weight: 600; }

/* the student's thread, opened under a comment */
.chat-thread[hidden] { display: none; }
.chat-thread .chat-note { margin: 0 0 9px; font-size: var(--fs-xs); }
.chat-thread .chat-msgs { max-height: 420px; overflow: auto; margin-bottom: 8px; }
.chat-thread .chat-msgs:empty { display: none; }
.chat-thread .chat-err { margin-bottom: 8px; }

@media (pointer: coarse) {
  .chat-form textarea { font-size: 16px; }
}