/* ============================================================
   PASSAGE by Khoshà — comms.css
   Communications module: practice-wide log, composer modal and
   the record-side timeline panel wrapped onto the employer /
   worker / institution dossiers.

   All classes prefixed cm-. Uses only existing tokens from
   styles.css (--paper/--bone/--ink/--gold/--stroke/--r-*/--shadow) —
   no new colours. The practice-log table reuses the existing
   .tbl.cardable pattern (see mobile-lists.css), so it restacks into
   cards at mobile widths for free; the rules below only cover the
   cm- specific pieces that pattern doesn't already own: the search
   box, the composer, the timeline panel and its items.
   ============================================================ */

/* ---------- practice-wide log toolbar ---------- */
.cm-search{
  border:1px solid var(--stroke-soft); background:var(--bone); border-radius:99px;
  padding:8px 16px; font-size:13px; color:var(--ink); min-width:220px; max-width:320px; flex:1 1 220px;
  transition:border-color .2s, box-shadow .2s;
}
.cm-search:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(169,130,76,.12); outline:none; }

.cm-loading, .cm-empty{
  padding:26px 18px; text-align:center; color:var(--ink-faint); font-size:13px;
  background:rgba(255,255,255,.55); border:1px solid var(--stroke-soft); border-radius:var(--r-lg);
}

.cm-dir{ margin-left:6px; font-size:11.5px; color:var(--ink-faint); font-weight:600; white-space:nowrap; }

/* ---------- composer modal ---------- */
.cm-chch-row{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px; }
.cm-notice{
  background:var(--bone); border:1px solid var(--stroke-soft); border-left:3px solid var(--gold);
  border-radius:var(--r-sm); padding:10px 14px; font-size:12.5px; color:var(--ink-soft);
  margin-bottom:14px; line-height:1.5;
}

/* ---------- record-side Communications panel ---------- */
.cm-panel{ margin-top:16px; }
.cm-panel .toolrow{ margin-bottom:14px; }

.cm-timeline{ display:flex; flex-direction:column; }

.cm-tl{ display:flex; flex-direction:column; }
.cm-tl-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--stroke-soft); }
.cm-tl-item:last-child{ border-bottom:0; padding-bottom:2px; }

.cm-tl-dot{
  flex:0 0 10px; width:10px; height:10px; border-radius:50%; margin-top:6px;
  background:var(--ink-faint);
}
.cm-tl-dot-call{ background:#2B4469; }
.cm-tl-dot-email{ background:var(--gold-deep); }
.cm-tl-dot-sms{ background:var(--green); }
.cm-tl-dot-note{ background:var(--ink-faint); }

.cm-tl-body{ flex:1; min-width:0; }
.cm-tl-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.cm-tl-when{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.02em; }
.cm-tl-subject{ font-weight:600; font-size:13.5px; margin-top:2px; }
.cm-tl-txt{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:3px; word-break:break-word; }
.cm-tl-meta{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; }
.cm-tl-who{ font-size:11px; color:var(--ink-faint); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }

.cm-tl-activity .cm-tl-dot{ background:var(--stroke); }
.cm-tl-activity .cm-tl-txt{ color:var(--ink); }

/* ============================================================
   Mobile — 390px and down. The .tbl.cardable restack is handled
   globally by mobile-lists.css; these rules cover the pieces this
   file introduces that pattern doesn't touch: the search box, the
   composer's channel-switch row and the timeline items, so nothing
   here overflows horizontally on a narrow phone.
   ============================================================ */
@media (max-width:480px){
  .cm-search{ min-width:0; max-width:none; flex:1 1 100%; width:100%; }
  .cm-chch-row{ gap:5px; }
  .cm-chch-row .chip{ padding:6px 12px; font-size:12px; }
  .cm-panel .toolrow{ gap:8px; }
  .cm-panel .toolrow .btn{ flex:1 1 auto; text-align:center; }
  .cm-tl-item{ gap:9px; }
  .cm-tl-head{ gap:7px; }
  .cm-tl-subject, .cm-tl-txt{ word-break:break-word; overflow-wrap:anywhere; }
}