/* Coach chat: the chat list beside the thread (a drawer on small screens), the cards added by this screen,
   and the photo strip of the coach bar. The thread's base styles are in app.css ("Chat"). */

.chat-main { width: 100%; max-width: var(--column); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.chat-top { display: flex; align-items: center; gap: 12px; }
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/20px var(--font); }
.chat-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chat-side .btn { width: 100%; }
.chat-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.chat-row { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; border-radius: var(--r-md); min-height: 48px; }
.chat-row:hover, .chat-row:focus-within { background: var(--surface-sunken); }
.chat-row.is-active { background: var(--surface-raised); }
.chat-open { flex: 1; min-width: 0; display: grid; gap: 0; padding: 6px 4px 6px 12px; border: 0; background: none; text-align: left; border-radius: var(--r-md); }
.chat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/20px var(--font); }
.chat-row.is-active .chat-name { font-weight: 800; }
.chat-when { font: 500 12px/18px var(--font); color: var(--ink-muted); }
.chat-act { flex: none; border: 0; background: none; padding: 6px 4px; font: 500 12px/18px var(--font); color: var(--ink-muted); text-decoration: underline; }
.chat-act:hover { color: var(--ink); }
.chat-rename { flex: 1; min-width: 0; min-height: 36px; margin: 6px 0 6px 8px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ink); font: 500 14px/20px var(--font); }
.chat-ask { flex: 1; min-width: 0; padding-left: 12px; font: 500 13px/18px var(--font); }
.chat-shade { position: fixed; inset: 0; z-index: 19; background: rgb(40 40 40 / .4); }

@media (min-width: 1100px) {
  .view.chat { max-width: 1180px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
  .chat-side { position: sticky; top: 92px; max-height: calc(100dvh - 116px); }
  .chat-top, .chat-shade, .chat-side-close { display: none; }
  .chat-row .chat-act { display: none; }
  .chat-row:hover .chat-act, .chat-row:focus-within .chat-act, .chat-row.is-active .chat-act { display: block; }
  /* The coach bar follows the thread column: half of the list's width (260 + 24) to the right. */
  body.chat-on .coach { left: calc(50% + 142px); max-width: min(760px, calc(100% - 348px)); }
}
@media (max-width: 1099px) {
  .chat-side { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(320px, 86vw); padding: 20px 16px; background: var(--surface); transform: translateX(-104%); transition: transform .2s ease; visibility: hidden; }
  .chat-side.is-open { transform: none; visibility: visible; box-shadow: 10px 0 30px rgb(40 40 40 / .18); }
  .chat-top { position: sticky; top: var(--chat-top, 76px); z-index: 4; margin: -8px -8px 0; padding: 8px; background: var(--surface); }
}
@media (max-width: 900px) { .chat-top { --chat-top: 112px; } }
@media (prefers-reduced-motion: reduce) { .chat-side { transition: none; } }

/* Library card: the touched plan opens inside the card, one at a time. */
.chip.is-open { background: var(--ink); color: var(--surface-raised); box-shadow: none; }
.chip.is-open .chip-note { color: var(--gray-200); }
.plan-slot { min-width: 0; }
.plan-open { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.plan-open .pweek, .plan-open .select { background: var(--surface-raised); }
.plan-open.is-off { opacity: .7; }

/* Confirmation card with several writes: the state of each line. */
.confirm li { overflow-wrap: anywhere; }
.confirm li .req { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--success); }
.confirm li.is-bad { color: var(--danger); }
.confirm li.is-busy { opacity: .6; }
.confirm .req-error { font-weight: 800; }
.confirm li.is-cut { color: var(--ink-muted); text-decoration: line-through; }
.confirm .req-cut { margin-left: 10px; text-decoration: underline; display: inline-block; }

.post-row { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--surface); font: 400 14px/21px var(--font); overflow-wrap: anywhere; }
.me-image { width: 120px; max-height: 160px; object-fit: cover; border-radius: var(--r-md); margin: 0 0 8px auto; }

/* Photo of an exam result, waiting above the coach bar. */
.attach { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: 0 10px 30px rgb(40 40 40 / .12); }
.attach img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.attach-text { flex: 1; min-width: 0; display: grid; font: 500 12px/18px var(--font); color: var(--ink-muted); }
.attach-text strong { font: 500 14px/20px var(--font); color: var(--ink); }

@media (max-width: 600px) {
  .coach-bar { gap: 8px; }
  .coach-bar .coach-ico { display: none; }
  .coach-bar textarea { padding-left: 8px; }
  .chat-act { padding: 10px 4px; }
  .extras .table th, .extras .table td { padding: 8px 4px; }
}

/* Choice card: a question answered by picking from a list of the platform (publishers, the day, lesson groups) */
.choices { gap: 12px; max-width: 520px; }
.choices-search { width: 100%; min-height: 44px; }
.choices-list { display: flex; flex-direction: column; gap: 2px; max-height: 264px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.choices-option { min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: none; text-align: left; font: 500 14px/20px var(--font); color: var(--ink); overflow-wrap: anywhere; }
.choices-option:hover, .choices-option:focus-visible { background: var(--surface); }
.choices-option.is-new { color: var(--ink-muted); }
.choices-picked { font: 500 15px/22px var(--font); }
.choices-hint { font-size: 12px; line-height: 18px; }
.choices input[type="date"] { min-height: 44px; }