/* Daily Life Doc, round 10 (zone P): the page `chat`, the one chat of a patient, both sides (js/req/req-chat.js,
   req-chat-list.js, req-chat-field.js; docs/build/r10/PLAN.md section 3.2; the page "One chat", Parts 1 and 2).
   The frame: the left column, the chat (the strip, the list, the field) and the right column; the columns show only
   when zone C fills them at a computer (css/convo.css). The day dividers, "Reading…", "Not sent · Try again", "App",
   "Checked by a clinician", the Call me card, the lines the hooks of other zones draw under a message.
   The bubbles, the grey lines and the cards themselves are css/requests.css; the field is css/convo.css (`.cf`).
   Tokens and the type scale of base.css only. */

/* ---------- The frame ---------- */
.pg-body.ch { padding: 0; }
.ch-cols { flex: 1; min-height: 0; display: flex; }
.ch-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ch-left:empty, .ch-right:empty, .ch-strip:empty { display: none; }
.ch-head { display: flex; align-items: center; gap: 6px; }
.ch-head:empty { display: none; }
/* "Loading…" while an older page is read, quiet, at the top of the list. */
.ch-older { align-self: center; margin: 4px 0 2px; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.ch-older[hidden] { display: none; }
.ch-tail:empty { display: none; }

/* ---------- Day dividers: "Wed 14 Oct", "Today" ---------- */
.ch-day { align-self: center; margin: 22px 0 2px; font-size: var(--t-xs); font-weight: 600; line-height: 1.4; color: var(--ink3); letter-spacing: .01em; }
.ch-list > .ch-day:first-child { margin-top: 6px; }
.ch-day.fresh { animation: dd-fade 240ms ease both; }

/* ---------- What stands under a message ---------- */
/* "Reading…" under the patient's own message while the app reads it. */
.rc-rdg { margin: 6px 12px 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
/* "Not sent · Try again" under a message the outbox could not send: the bubble stays, never lost. */
.rc-m.notsent .rc-b, .rc-m.notsent .mg-files { opacity: 1; }
.rc-ns { position: relative; margin: 6px 12px 0; font-size: var(--t-xs); font-weight: 500; line-height: 1.4; color: var(--red); }
.rc-ns b { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rc-ns::after { content: ''; position: absolute; inset: -10px -8px; }
.rc-ns:active { opacity: .6; }
.rc-ns[disabled] { opacity: .5; }
/* The app's own messages say "App" in grey, never "Care team". */
.rc-by.app { color: var(--ink3); }
/* "Checked by a clinician" / "Not checked by a clinician yet" under a reply or a document card. */
.rc-chk { margin: 5px 12px 0; font-size: var(--t-2xs); font-weight: 500; line-height: 1.4; color: var(--ink3); }
/* The "Call me" card: a phone, the words, "Call" or "First call". */
.rc-callme > i:first-child { color: var(--ink); }
.rc-m.me .rc-callme { border-bottom-left-radius: 20px; border-bottom-right-radius: 7px; }
/* A call time drawn by zone L inside the bubble. */
.rc-ctm .rc-b { min-width: 220px; }
/* A grey line with something drawn under it (a hook of the care team). */
.rc-lw { align-self: center; max-width: 92%; display: flex; flex-direction: column; align-items: center; }
.rc-lw .rc-line { max-width: 100%; }
/* What the hooks of other zones draw under a message (zone A's result line, zone C's state of an item sent). */
.ch-under { max-width: 92%; }
.rc-m.me > .ch-under { align-self: flex-end; text-align: right; }
/* Zone D's document card in the chat. */
.rc-docw { max-width: 84%; cursor: pointer; }

/* ---------- The patient's field ---------- */
/* The round + of the patient also holds Call me: four items in one row on a phone (Photo, Camera, File, Call me; a
   computer has no Camera), so the row starts under the + and the items stand closer than the care team's. */
.ch-field .cf-tray { gap: 14px; padding-left: 2px; }
@media (max-width: 380px) { .ch-field .cf-tray { gap: 6px; } .ch-field .cf-tray .cf-pick { width: 60px; } }

@media (prefers-reduced-motion: reduce) {
  .ch-day.fresh { animation: none; }
}