#communicationsPanel { container-type:inline-size; --comms-space:20px; }
.comms-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.comms-heading h2 { font-size:26px; font-weight:600; line-height:1.2; margin:0 0 8px; text-wrap:balance; }
.comms-heading p { margin:0; color:var(--muted); font-size:14px; }
.comms-icon { width:18px; height:18px; flex:none; }
.comms-gate { display:flex; align-items:center; gap:12px; padding:16px; margin-bottom:28px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.comms-gate > .comms-icon { color:var(--muted); }
.comms-gate > div:first-of-type { flex:1; }
.comms-gate strong { font-size:13px; font-weight:600; }
.comms-gate p { margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.6; max-width:70ch; text-wrap:pretty; }
.comms-actions { display:flex; flex-wrap:wrap; gap:8px; }
#communicationsPanel button, .communications-demo button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1px solid var(--line-2); border-radius:8px; padding:10px 12px; color:var(--ink); background:var(--panel-2); font:inherit; font-size:13px; cursor:pointer; }
#communicationsPanel button:hover:enabled, .communications-demo button:hover:enabled { border-color:var(--action); background:var(--panel-3); }
#communicationsPanel button:active:enabled { transform:translateY(1px); }
#communicationsPanel button:disabled { color:var(--muted); background:transparent; border-color:var(--line); cursor:not-allowed; }
#communicationsPanel :is(button,input,select,textarea,summary):focus-visible, .communications-demo button:focus-visible { outline:2px solid var(--action); outline-offset:3px; }
.comms-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,3vw,48px); align-items:start; }
.comms-history, .comms-side { min-width:0; }
.comms-side { display:grid; gap:24px; border-left:1px solid var(--line); padding-left:24px; }
.comms-toolbar { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.comms-toolbar h3, .comms-editor h3 { font-size:16px; font-weight:600; margin:0; }
.comms-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.comms-filters { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:20px; border-bottom:1px solid var(--line); }
#communicationsPanel .comms-filters button { background:transparent; color:var(--muted); border-color:transparent; padding-inline:10px; min-height:44px; }
#communicationsPanel .comms-filters button[aria-pressed=true] { background:var(--action-soft); border-color:var(--action); color:var(--action); }
.comms-filters span { font-size:11px; opacity:.8; font-variant-numeric:tabular-nums; }
.comms-timeline { padding-top:8px; }
.comms-event { display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; position:relative; padding:20px 0 0; overflow-wrap:anywhere; }
.comms-event::before { content:''; position:absolute; width:1px; background:var(--line-2); top:52px; bottom:-20px; left:15px; }
.comms-event:last-child::before { display:none; }
.comms-event-icon { display:grid; place-items:center; height:32px; width:32px; border:1px solid var(--line-2); background:var(--panel); border-radius:50%; color:var(--muted); }
.comms-event[data-event-type=followup] .comms-event-icon, .comms-event[data-event-type=complete] .comms-event-icon { color:var(--action); border-color:var(--action); }
.comms-event-content { padding:5px 0 20px; border-bottom:1px solid var(--line); }
.comms-event-head { display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.comms-event-head strong { font-size:14px; font-weight:600; }
.comms-event time { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.comms-event p { font-size:14px; line-height:1.65; white-space:pre-wrap; max-width:70ch; margin:12px 0; text-wrap:pretty; }
.comms-event details { margin:8px 0; }
.comms-meta, .comms-event small { color:var(--muted); font-size:12px; line-height:1.6; display:block; }
.comms-event-head + .comms-meta { margin-top:6px; }
.comms-due { margin:12px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.comms-next { padding:16px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); }
.comms-next-title { display:flex; align-items:center; gap:8px; font-size:13px; }
.comms-next-title .comms-icon { color:var(--action); }
.comms-next p { font-size:14px; line-height:1.65; margin:12px 0; overflow-wrap:anywhere; }
.comms-next > div:last-child { display:grid; gap:12px; }
.comms-next time { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
#communicationsPanel .comms-next button { background:transparent; }
.comms-editor { display:grid; align-content:start; gap:16px; }
.comms-editor > p { margin:0; }
.comms-editor p, .comms-empty p, .comms-permissions p { color:var(--muted); font-size:13px; line-height:1.65; max-width:70ch; text-wrap:pretty; }
.comms-example-actions { display:grid; gap:8px; }
#communicationsPanel .comms-example-actions button { justify-content:start; text-align:left; }
.comms-example-actions button .comms-icon { color:var(--muted); }
.comms-example-actions button span { text-wrap:balance; }
#communicationsPanel .comms-example-actions button:first-child, #communicationsPanel .comms-save { background:var(--action); color:var(--bg); border-color:var(--action); font-weight:600; }
#communicationsPanel .comms-example-actions button:first-child .comms-icon { color:inherit; }
.comms-editor form { display:grid; gap:12px; }
.comms-editor details { border-bottom:1px solid var(--line); padding-bottom:12px; }
.comms-editor summary, .comms-event summary, .comms-permissions summary { cursor:pointer; color:var(--muted); font-size:13px; min-height:44px; align-content:center; line-height:1.6; }
.comms-permissions summary .comms-icon { vertical-align:middle; margin-right:8px; }
.comms-editor details form { margin-top:16px; }
.comms-editor label { display:grid; gap:8px; font-size:13px; color:var(--muted); }
.comms-editor input, .comms-editor textarea, .comms-editor select { color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:12px; font:inherit; font-size:16px; width:100%; min-width:0; min-height:44px; caret-color:var(--action); }
.comms-editor textarea { resize:vertical; }
.comms-editor textarea::placeholder { color:var(--muted); }
.comms-extra { display:grid; gap:12px; }
.comms-status { margin:0; font-size:12px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.comms-status.is-error, .comms-due.is-overdue, .comms-next .is-overdue { color:var(--risk); }
.comms-status.is-error { padding:12px; border:1px solid var(--risk); border-radius:8px; }
.comms-consent { font-size:13px; line-height:1.7; }
.comms-consent div { display:grid; gap:8px; padding:12px 0; }
.comms-consent span, .comms-consent p { color:var(--muted); }
.comms-empty { padding:40px 0; }
.comms-empty > .comms-icon { color:var(--muted); width:28px; height:28px; }
.comms-empty h3 { margin:16px 0 8px; font-size:18px; text-wrap:balance; }
.panel-tabs { overflow-x:auto; }
.panel-tabs button { flex-shrink:0; }
@container (max-width:760px) {
  .comms-body { grid-template-columns:1fr; gap:28px; }
  .comms-side { order:-1; border-left:0; padding-left:0; gap:20px; }
  .comms-gate { align-items:start; flex-wrap:wrap; }
  .comms-gate .comms-actions { width:100%; padding-left:30px; }
  .comms-example-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .comms-toolbar { flex-wrap:wrap; }
}
@media(max-width:600px) {
  #communicationsPanel { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .comms-heading h2 { font-size:23px; }
  .comms-event { gap:12px; }
  .comms-event-head { display:grid; }
  .comms-gate .comms-actions { display:none; }
  .comms-gate { margin-bottom:20px; }
  #communicationsPanel .comms-example-actions button { font-size:12px; padding:10px; }
  .comms-next p { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { #communicationsPanel button:active:enabled { transform:none; } }