/* ══════════════════════════════════════════════════════════════════════════
   canon-sched-comms.css — seen markers + customer messaging (feature_sched_comms, js/scheduler/comms.js).
   Keyed on classes comms.js only writes while the flag is on. Canon tokens only.
   ══════════════════════════════════════════════════════════════════════════ */
@layer components {
  .sched-app .sched-comms-seen { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: 12.5px; color: var(--c-text-2); }
  .sched-app .sched-comms-seen.is-unseen { color: var(--c-warn); font-weight: 600; }
  .sched-app .sched-comms-log:empty { display: none; }
  .sched-app .sched-comms-log { margin-top: var(--sp-2); }
  .sched-app .sched-comms-t { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-1); }
  .sched-app .sched-comms-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; font-size: 12.5px; color: var(--c-text); }
  .sched-app .sched-comms-ago { color: var(--c-muted); font-size: 11.5px; }
  .sched-app .sched-comms-msg { margin-top: var(--sp-2); }

  .sched-comms-modal { align-items: center; justify-content: center; }
  .sched-comms-modal .sched-comms-box {
    width: 460px; max-width: calc(100vw - 32px); padding: var(--sp-5); display: grid; gap: var(--sp-3);
    background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-lg, 14px);
  }
  .sched-comms-modal h2 { margin: 0; font-size: 18px; font-weight: 600; }
  .sched-comms-chan { display: grid; gap: var(--sp-1); font-size: 13px; }
  .sched-comms-modal textarea {
    font: inherit; font-size: 13px; width: 100%; padding: var(--sp-2);
    border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px); background: var(--c-card-2, var(--c-card)); color: var(--c-text); resize: vertical;
  }
  .sched-comms-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
}