<!--
=====================================================================
 FILE:        Credify_Messaging_08-19-26_0555PM-PDT_PLATFORM-SSO-AUTOCONNECT_SUPPORT.html
 BUILT FROM:  Credify_Messaging_08-03-26_0313PM-PDT_RAIL-RESIZE-GOBACK_SUPPORT.html
 ACCOUNT:     JAYGMAIL
 DATE:        2026-08-19 17:55 PDT
 MERGED:      no
 ---------------------------------------------------------------------
 CHANGELOG (newest first):
 2026-08-19  Platform bridge: .credifyfast.com SSO session pickup +
             passwordless Synapse auto-connect (messaging module M2).
             New api() wrapper (never throws; logs method+path+status
             only) and hydrateFromServer() at boot: GET /api/state; a
             LIVE backend answering 401/403 redirects to
             login.credifyfast.com?redirect=... (SSO.md 4.1); network
             error / no backend = silent standalone demo mode,
             byte-for-byte prior behavior. On 2xx (serverMode): the org
             directory (core users) merges into providers (keyed by new
             coreUserId field, server names win), staff mxid mappings
             hydrate mx.provToMxid (server wins over local panel edits),
             matrix.publicBaseUrl seeds mx.baseUrl. If me.mxid is
             mapped and not already connected, POST /api/matrix/token
             mints a short-lived server token and new
             MX.connectWithToken() connects with NO password; the
             Server panel stays untouched as the manual override.
             resume()'s 401 branch now tries ONE silent server re-mint
             before the existing "reconnect from the Server panel"
             fallback. createDM/createGroup/renameSync fire-and-forget
             POST /api/rooms so messaging_rooms fills best-effort while
             connected. No schema bump (all additions live outside the
             persisted shape or default safely). Verified: script
             syntax clean, jsdom E2E (demo boot intact with no backend;
             401 triggers navigation; hydrate merge + token auto-
             connect against stubbed /api + Matrix whoami; api() never
             throws on network error), console clean.
 2026-08-03  Resizable left rail (desktop) + "Go back" button. The app grid
             gains a 5px drag strip between rail and stage (calendar sidebar
             pattern): drag sets the conversation-list width via --rail-w,
             clamped 300-500px, mint highlight on hover/drag, width
             persisted as state.railW so it survives reload (absent key =
             344px CSS default, so no migrate/schema bump needed; Reset demo
             reseeds it away as expected). Strip hidden on touch devices
             (pointer:coarse) and in the <=760px single-column layout -
             mobile stays full-screen, untouched. New full-width "Go back"
             pill button under the brand header (calendar .sb-dash style,
             arrow-left icon) fires history.back() - relative navigation by
             design, no dashboard URL hardcoded; no-op if the tab has no
             history. FIX (surfaced by the resize): the railfoot toolbar
             outgrew the rail when the Server button landed 07-31 (~431px
             natural vs 344px rail - "Reset demo" was clipped off-screen
             even before this change); .railfoot now flex-wraps (gap 6/8)
             so every footer control stays visible at any width 300-500.
             Verified: node --check clean, CSS braces balanced,
             9 clamp unit checks, Playwright E2E (drag/clamp both ends,
             persist across reload, history.back returns to prior page,
             footer controls in-bounds at 300/344/500,
             400px viewport hides strip, conversation-open regression),
             screenshots in qa/, console clean.
 2026-07-31  Synapse/Matrix Milestone 1 — internal staff chat can now run on
             a real Matrix homeserver. New railfoot "Server" panel (status
             dot): homeserver URL + login + provider→mxid mapping table;
             session resumes on reload. When connected, DMs/groups are real
             Matrix rooms (createRoom, m.direct, invite/kick/leave/rename,
             m.room.pinned_events); send/reply/edit/delete/reactions map to
             m.room.message, m.in_reply_to, m.replace, redactions and
             m.reaction with optimistic local echo + txn reconcile over a
             /sync long-poll; read receipts (m.receipt → per-message
             readBy), typing and presence are live; attachments go through
             the media repo (mxc://, authed download) instead of base64.
             Unknown mxids auto-provision provider entries; the rail shows
             Matrix convs (+ SMS demo threads) while connected; smart-group
             auto-membership pauses (appservice territory, later
             milestone); auto-reply/delivery simulators are disabled; the
             seat locks to the Synapse login. Risk scanning still runs
             client-side on inbound internal messages until the appservice
             lands. NO E2EE BY DESIGN — self-hosted Synapse stays readable
             for risk scan + audit. Disconnected = demo mode, byte-for-byte
             prior behavior with seed data intact. migrate() bumps schemaV
             5→6 (state.mx backfill). Session token persists in
             localStorage (M1 trade-off — noted in Server panel).
             Verified: transport core 27/27 checks green against a REAL
             local Synapse 1.157.2 (login/whoami, DM+m.direct, invite→join,
             send/receive, edit, react+redact, reply, message redaction,
             receipts, typing, group rename/pin/kick, authed media round-
             trip, back-pagination); jsdom demo-mode E2E green; two-client
             jsdom UI E2E over live Synapse green; node --check clean.
 2026-07-02  Appointment reminders + broadcast messaging. Completes the
             Overlap Map Part 1 reminders disposition that the 0855AM
             build deferred (its parent lineage predated the reminders
             engine). FEATURE — appointment reminders: SMS panel gains a
             "Next appointment" section — "Set/Change/Clear" (manual
             entry) triggers scheduleApptReminders(), which computes one
             scheduled text per configured offset (e.g. 24h/1h before)
             using the existing scheduled-send pipeline (quiet hours,
             consent, risk scan on release all apply unchanged). Practice
             setup gains a Reminders tab: enable toggle, offset chips
             (presets + custom minutes), template picker, and a "Feeds
             from Credify Calendar after integration" note. Changing or
             clearing the appointment cancels stale reminders and
             reschedules. New {{appt_datetime}} merge token; new seed
             template "Appointment reminder (auto)" for the dynamic-offset
             copy. SYNC STUB — owned by calendar: setNextAppt stays the
             manual entry it is today; comment block declares the future
             inbound feed contract {eventId, patientId, startISO,
             offsets[], channel}. NOT A BUG — intentionally inert until
             Calendar integration.
             FEATURE — broadcast messaging: new compose-row button opens
             a recipient picker (search + multi-select patient contacts,
             "select all opted-in") and message composer with merge-token
             support. Send-now or schedule-for-later; each recipient is
             sent through the identical per-patient pipeline as a normal
             text — consent-opted-out contacts are skipped, quiet-hours
             recipients get an individually deferred send — no batch
             shortcuts around the compliance path. Every send/schedule is
             tagged with a shared broadcastId and logged to the existing
             patient-SMS audit log (reuses sms_sent/scheduled_created/
             scheduled_deferred_quiet types); the broadcast modal shows a
             "Recent broadcasts" rollup computed from those audit rows —
             no new persistence surface. Post-send toast reports sent/
             scheduled/deferred/skipped counts.
             Data model: contact.nextAppt {startISO, setBy, setAt};
             practice.apptReminders {enabled, offsets[], templateId};
             scheduled messages optionally tag apptReminder/apptOffset/
             apptStartISO or broadcastId. migrate() bumps schemaV 4->5,
             backfills apptReminders defaults, nextAppt:null on existing
             contacts, and the new auto-reminder template on existing
             practices.
             Verified: node --check clean, CSS braces balanced, full
             in-browser clickthrough (set/change/clear appointment with
             reminder chips updating, Reminders tab config, broadcast to
             multi-select incl. one opted-out + one quiet-hours recipient,
             audit log shows every event, v4->v5 migration preserves
             existing data), zero console errors.
 2026-07-02  Integration pass (Overlap Map 07-02-26) — no bug fixes.
             FEATURE — risk-flag acknowledge/resolve lifecycle: every risk
             fire (rule match on any message, or inbound Treatment Plan
             flag) now creates a first-class risk alert in state.riskAlerts
             with status new -> acknowledged -> resolved. The Alerts modal
             gains an "Alerts" tab (the existing notification outbox is
             unchanged on its own tab): lifecycle cards with severity,
             source tag, rule names/terms, snippet, filter chips
             All / New / Ack'd / Resolved (with counts), Acknowledge
             (records user + timestamp), and Resolve with a REQUIRED
             inline resolution note (user + timestamp recorded). Every
             transition appends to the alert's own history[] and — for
             patient-associated alerts only, per the 07-01 audit-scope
             rule — writes risk_acknowledged / risk_resolved rows to the
             patient-SMS audit log. Alerts badge now counts unseen outbox
             notifications + unacknowledged (new) risk alerts. migrate()
             bumps schemaV 3->4 and backfills riskAlerts from existing
             outbox entries (one alert per message+rule, status new) so
             prior sessions keep their history.
             FEATURE — inbound risk intake from Treatment Plan:
             window.CREDIFY_MSG.receiveRiskFlag({clientId, riskLevel,
             details, notifyTargets[]}) is a documented, console-callable
             entry point that creates a source-tagged "Treatment Plan"
             risk alert in the same lifecycle, notifies targets through
             the existing outbox (quiet hours honored; high severity
             overrides, matching rule behavior), audits when the client
             resolves to a known contact, and returns {ok, alertId}.
             Wiring to the Treatment Plan queue is a sync stub
             (data-sync-owner="treatment-plan"). Matrix note: at
             integration this arrives as a reverse-DNS custom event
             (com.credify.risk_flag) via the appservice.
             SYNC STUBS added this pass (all toast "Opens in {Module}
             after integration"; all inert by design, NOT bugs):
             (1) thread-header "Chart" chip on patient SMS threads,
                 data-sync-owner="ehr" -> EHR chart;
             (2) thread-header "Contact" chip on patient SMS threads,
                 data-sync-owner="crm" -> CRM contact record;
             (3) contact-detail "Synced from CRM" caption + "Open in CRM"
                 stub on the SMS panel, data-sync-owner="crm" -> CRM
                 STATE.contacts shared roster (identity + consent flags);
             (4) receiveRiskFlag inbound feed, data-sync-owner=
                 "treatment-plan" (entry point live; feed wiring stubbed).
             DEFERRED — Overlap Map Part 1 "appointment reminders"
             disposition (scheduleApptReminders / setNextAppt + Calendar
             feed stub): those functions live in the 07-01 0616PM
             REMINDERS_BROADCAST build, which was never pushed to this
             workspace; this build's parent (0521PM QA_BUGFIX) predates
             them. Deferred rather than re-implemented to avoid forking
             the reminders engine. Apply that disposition on the 0616PM
             lineage.
             Verified: node --check clean, CSS braces balanced, full
             in-browser lifecycle clickthrough (ack -> resolve w/ note,
             filter chips, TP intake via console, stub toasts, v3->v4
             localStorage migration preserves messages/audit/outbox),
             zero console errors.
 2026-07-01  QA pass (agency-team walkthrough) + bug fix + 2 UX wins.
             BUG FIX — audit-log scope: risk keyword rules scan internal
             provider DM/group messages too (by design), but a flagged
             INTERNAL message was writing risk_flagged/alert_sent/alert_held
             rows into the patient-SMS audit log — which is defined as a
             patient-SMS-only record — producing ghost rows with no patient.
             runRiskScan() and fireAlerts() now guard those logAudit() calls
             with c.type==="sms". Internal messages still show the in-thread
             risk banner and still fire the email/SMS alert outbox + toast;
             they just no longer pollute the patient audit trail. Patient-SMS
             risk logging is unchanged. FEATURE — SMS segment counter: the
             SMS composer now shows a live "N chars · M SMS" readout (amber
             at 2+ segments), with correct GSM-7 (160/153) vs Unicode
             (70/67) math incl. GSM extension chars; hidden in internal-note
             mode. FEATURE — Escape now dismisses any open modal (previously
             only the lightbox). Verified: node --check clean, CSS braces
             540/540 balanced, 10 in-browser E2E checks (fix + both features)
             + 10 smsSegments unit tests, zero console errors. Full feature
             sweep (DM/group/SMS/templates/scheduling/quiet-hours/risk/
             consent/audit/search/smart-groups) re-tested green.
 2026-07-01  SMS templates + merge fields. Composer: a template button (document
             icon) added to the SMS inbar between clip and clock. Clicking opens
             an inline popover with a search-filtered list of templates; selecting
             one resolves all merge tokens ({{patient_first}}, {{patient_full}},
             {{patient_phone}}, {{provider_name}}, {{provider_cred}},
             {{provider_location}}) against the active patient contact and the
             current provider seat, then drops the resolved text into the compose
             box (still editable before send). Using a template fires a
             template_used audit event (template name + id logged). Pipelines:
             templated sends flow through the same path as any text — consent /
             opt-out guard, quiet-hours defer, risk scan, delivery simulation.
             Practice Setup: new Templates tab with inline name/body editing,
             delete, and add-new. 6 seed templates (appointment reminder/confirm/
             cancel, intake paperwork ready, billing follow-up, wellness check-in).
             migrate() backfills smsTemplates on existing localStorage sessions.
             Matrix note: tokens are frontend-only; only the resolved plain text
             is sent as the m.room.message event body — no raw tokens ever reach
             the homeserver. Verified: node --check clean, CSS braces 538/538
             balanced, 8 unit tests pass (merge resolver, null guards, audit maps).
 2026-06-23  Left-rail width / chat-window sizing. The conversation list was
             truncating (provider seat label, "Dr. Maya Soto" name, and the
             footer toolbar all clipped). Widened the left rail from 300px to
             344px in the desktop app grid (grid-template-columns); the +44px
             comes out of the chat column (minmax(0,1fr)), so the chat window
             shrinks by that amount as requested and the nav now fits. Bumped
             the provider seat-pill max-width 138px->150px so the seat label
             reads more fully. Pure CSS — no data model, event handling, or
             persistence touched, so Matrix/Synapse compliance is unaffected.
             Mobile single-column grid (<=760px) and the 320px pinned panel
             are unchanged. Verified: node --check clean, CSS braces balanced.
 2026-06-22  Risk-rule keyword editor + modern delete button. Replaced the
             comma-separated keywords text field with a collapsed custom
             dropdown per rule: the trigger shows "{n} keywords · {m} active";
             expanding reveals each keyword as a row with an on/off toggle
             (mute without deleting) and a remove (✕). An add field at the
             bottom appends keywords (Enter or +Add; commas split for bulk;
             case-insensitive dedupe) and keeps focus for fast multi-add.
             Disabled keywords are tracked per rule in kwOff and are skipped
             by scanDetail, so the live tester, message flagging, alerts, and
             audit all honor the on/off state. The "Delete rule" button is
             restyled to a modern outlined-danger button with a trash icon.
             Data model: keywords stay plain strings; kwOff:[] added per rule
             (backfilled via migrate, included on new rules). Verified: 16
             jsdom checks (collapse/expand, toggle→kwOff→scan, add/bulk/
             dedupe, remove, disabled-keyword-no-longer-flags) + 8-check
             combined smoke (scheduling / risk / audit / search all intact).
 2026-06-19  Unified search for users, locations & groups. The left "Search
             people & messages" box now returns grouped results instead of
             only filtering existing threads: a People section lists ALL
             providers matching name/role/title/location (tagged Chat if a
             DM exists, New otherwise — clicking starts the DM if needed); a
             Groups section lists matching group conversations; a Locations
             section surfaces matching practice locations as chips. Clicking
             a location scopes results to that location (active pill with
             clear); typing fresh text clears the location filter. Existing
             reach preserved in a Chats & messages section (SMS patients by
             name/phone + message-body matches). New helpers: findOrStartDM,
             provHay, exitSearch, renderSearchResults; ui.searchLoc added to
             state + reset. Verified: 18 jsdom checks (new vs existing-DM
             provider, group search, location filter scoping, patient/
             message reach, no-match) + 7-check combined smoke confirming
             MMS / scheduling / risk / audit all intact alongside search.
=====================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Credify · Secure Messaging</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
  :root{
    --ink:#0B2A20;
    --forest:#0F3D2E;
    --pine:#14533D;
    --mint:#34D399;
    --mint-600:#10b981;
    --mint-soft:#D6F3E5;
    --mist:#EDF3F0;
    --surface:#FFFFFF;
    --line:#E2E8E4;
    --line-2:#EDF1EE;
    --muted:#5B6B64;
    --slate:#1E293B;
    --danger:#C2410C;
    --online:#22C55E;
    --away:#F59E0B;
    --offline:#94A3B8;
    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(11,42,32,.06), 0 8px 24px rgba(11,42,32,.06);
    --shadow-pop:0 12px 40px rgba(11,42,32,.18);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:'Sora',system-ui,-apple-system,sans-serif;
    color:var(--slate);
    background:var(--mist);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  button{font-family:inherit;cursor:pointer}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#cdd9d3;border-radius:20px;border:3px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:#b6c5bd;background-clip:padding-box}

  /* ---------- Shell ---------- */
  .app{
    display:grid;
    grid-template-columns:var(--rail-w,344px) 5px minmax(0,1fr);
    height:100vh;
    background:var(--mist);
  }

  /* ---------- Left rail ---------- */
  .rail{
    background:var(--forest);
    color:#E8F2ED;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  /* drag strip between rail and stage — desktop resize (calendar sidebar pattern) */
  .rail-resize{cursor:col-resize;background:var(--forest);transition:background .15s;position:relative;z-index:10}
  .rail-resize:hover,.rail-resize.active{background:var(--mint)}
  .brand{
    padding:18px 18px 14px;
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .brand .logo{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(145deg,var(--mint),#0d9488);
    display:grid;place-items:center;color:#04221a;font-weight:700;flex:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .brand .word{font-family:'Instrument Serif',serif;font-size:25px;letter-spacing:.2px;line-height:1;color:#fff}
  .brand .sub{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);opacity:.85;margin-top:3px}

  /* "Go back" — full-width pill under the brand header (calendar .sb-dash pattern) */
  .railback{padding:12px 16px 0}
  .dashback{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
    padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;
    font-family:inherit;font-size:12.5px;font-weight:600;text-align:left;
    transition:background .15s,border-color .15s}
  .dashback:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32)}
  .dashback svg{flex-shrink:0}

  .me{
    padding:13px 16px;display:flex;align-items:center;gap:11px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .me .meta{min-width:0;flex:1}
  .me .meta .nm{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .me .meta .rl{font-size:11px;color:#A7CABA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* seat picker — custom on desktop, native on mobile */
  .seatpick{margin-left:auto;position:relative;flex:none}
  .seatpick-native{
    background:rgba(255,255,255,.08);color:#dff3ea;border:1px solid rgba(255,255,255,.14);
    border-radius:8px;font-size:11px;padding:5px 6px;max-width:118px;font-family:inherit;
  }
  .seatpick-native option{color:#0B2A20}
  .seat-trigger{
    display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#dff3ea;font-family:inherit;
    font-size:11px;padding:6px 7px 6px 8px;max-width:150px;transition:background .12s,border-color .12s;
  }
  .seat-trigger:hover{background:rgba(255,255,255,.13)}
  .seat-trigger:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
  .seat-trigger .st-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seat-trigger .st-caret{flex:none;transition:transform .15s}
  .seat-trigger[aria-expanded="true"] .st-caret{transform:rotate(180deg)}
  .seat-menu{
    position:absolute;top:calc(100% + 6px);right:0;min-width:236px;background:#fff;
    border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-pop);padding:6px;z-index:55;
    animation:seatIn .13s ease;
  }
  @keyframes seatIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .seat-menu .sm-head{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:5px 9px 6px;font-weight:600}
  .seat-opt{
    display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;
    border:none;background:transparent;width:100%;text-align:left;font-family:inherit;transition:background .1s;
  }
  .seat-opt:hover{background:var(--mist)}
  .seat-opt:focus-visible{outline:none;background:var(--mist)}
  .seat-opt.active{background:var(--mint-soft)}
  .seat-opt .so-meta{flex:1;min-width:0}
  .seat-opt .so-nm{font-size:13px;font-weight:500;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seat-opt .so-rl{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seat-opt .so-chk{flex:none;color:var(--mint-600);opacity:0}
  .seat-opt.active .so-chk{opacity:1}
  /* visibility toggle: custom on desktop, native on mobile */
  .seatpick-native{display:none}
  .seatpick-custom{display:block}

  .railtools{padding:12px 14px 8px;display:flex;gap:8px}
  .search{
    flex:1;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:7px 9px;
  }
  .search input{
    background:transparent;border:none;outline:none;color:#eaf5f0;font-family:inherit;font-size:12.5px;width:100%;
  }
  .search input::placeholder{color:#8fb6a6}
  .search svg{flex:none;opacity:.7}
  .newbtn{
    flex:none;width:36px;height:36px;border-radius:9px;border:none;
    background:var(--mint);color:#04221a;font-size:20px;line-height:1;display:grid;place-items:center;
    transition:filter .15s, transform .1s;
  }
  .newbtn:hover{filter:brightness(1.07)}
  .newbtn:active{transform:scale(.94)}
  .bcastbtn{
    flex:none;width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);color:#eaf5f0;display:grid;place-items:center;
    transition:background .15s, transform .1s;
  }
  .bcastbtn:hover{background:rgba(255,255,255,.16)}
  .bcastbtn:active{transform:scale(.94)}

  .convsection{padding:6px 12px 2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fab9a}
  .convlist{flex:1;overflow-y:auto;padding:4px 8px 14px}
  .conv{
    display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;
    transition:background .12s;position:relative;
  }
  .conv:hover{background:rgba(255,255,255,.06)}
  .conv.active{background:rgba(255,255,255,.13)}
  .conv .ctext{min-width:0;flex:1}
  .conv .crow{display:flex;align-items:center;gap:6px}
  .conv .cname{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .conv .ctime{font-size:10.5px;color:#86b1a0;flex:none}
  .conv .cprev{font-size:12px;color:#a9cabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .conv.unread .cprev{color:#dcefe4;font-weight:500}

  /* unified search results (dark rail) */
  .sr-active{display:flex;align-items:center;gap:6px;margin:2px 10px 8px;padding:6px 10px;background:var(--pine);color:#fff;border-radius:8px;font-size:12px;font-weight:600}
  .sr-active svg{flex:none}
  .sr-active button{margin-left:auto;background:rgba(255,255,255,.18);border:none;color:#fff;width:18px;height:18px;border-radius:5px;cursor:pointer;font-size:11px;line-height:1;font-family:inherit}
  .sr-active button:hover{background:rgba(255,255,255,.3)}
  .sr-sec{margin-bottom:4px}
  .sr-h{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7fab9a;padding:9px 12px 4px}
  .sr-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 4px}
  .sr-loc{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dbeee6;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit}
  .sr-loc:hover{background:rgba(255,255,255,.12)}
  .sr-loc svg{flex:none}
  .sr-locn{background:rgba(255,255,255,.16);border-radius:999px;padding:0 6px;font-size:10.5px;font-weight:700}
  .sr-row{display:flex;align-items:center;gap:11px;padding:8px 12px;cursor:pointer;border-radius:9px;margin:0 6px}
  .sr-row:hover{background:rgba(255,255,255,.06)}
  .sr-meta{flex:1;min-width:0}
  .sr-nm{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sr-sub{font-size:11.5px;color:#a9cabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .sr-tag{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:2px 7px}
  .sr-tag.chat{background:rgba(52,211,153,.18);color:#6ee7b7}
  .sr-tag.new{background:rgba(255,255,255,.1);color:#bcd3ca}
  .sr-empty{padding:20px 12px;color:#7fab9a;font-size:12.5px;text-align:center}
  .pin-dot{color:var(--mint);font-size:10px;flex:none}
  .smart-ind{color:var(--mint);display:inline-flex;flex:none;opacity:.85}
  .badge{
    flex:none;min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:#DC2626;color:#fff;
    font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(220,38,38,.2);
  }
  .railfoot{padding:10px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
  .railfoot button{
    background:transparent;border:1px solid rgba(255,255,255,.16);color:#bfe0d2;border-radius:8px;
    font-size:11px;padding:6px 9px;transition:background .12s;
  }
  .railfoot button:hover{background:rgba(255,255,255,.07)}
  .railfoot .icon-foot{display:inline-flex;align-items:center;gap:5px}
  .railfoot .icon-foot.hidden{display:none}
  #testToolsBtn{color:#b91c1c;background-color:#fff}
  .railfoot .spacer{flex:1}
  .mx-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:3px;flex:none}
  .mx-dot.off{background:#6b7280}.mx-dot.on{background:#34d399}.mx-dot.warn{background:#f59e0b}
  .mxmap{display:grid;grid-template-columns:1fr 160px;gap:6px 10px;align-items:center;max-height:170px;overflow:auto;margin:8px 0 2px;padding-right:4px}
  .mxmap .nm{font-size:12.5px}
  .mx-note{font-size:11.5px;opacity:.78;line-height:1.5;margin-top:12px}
  .railfoot .enc{font-size:10.5px;color:#7fab9a;display:flex;align-items:center;gap:5px}

  /* ---------- Avatars ---------- */
  .av{position:relative;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-family:'Sora';user-select:none}
  .av.s40{width:40px;height:40px;font-size:14px}
  .av.s44{width:44px;height:44px;font-size:15px}
  .av.s34{width:34px;height:34px;font-size:12.5px}
  .av.s28{width:28px;height:28px;font-size:11px}
  .av .pres{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--forest)}
  .thread .av .pres,.panel .av .pres,.modal .av .pres{border-color:#fff}
  .pres.online{background:var(--online)}
  .pres.away{background:var(--away)}
  .pres.offline{background:var(--offline)}
  .av.group{background:linear-gradient(145deg,var(--pine),#0d9488)}

  /* ---------- Thread ---------- */
  .stage{display:flex;min-width:0;background:var(--mist)}
  .thread{flex:1;display:flex;flex-direction:column;min-width:0}
  .thead{
    height:64px;flex:none;background:var(--surface);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:12px;padding:0 18px;
  }
  .thead .ti{min-width:0;flex:1}
  .thead .ti .tn{font-size:15.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
  .thead .ti .ts{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .thead .alerts-btn{position:relative}
  .thead-empty{border-bottom:1px solid var(--line);justify-content:flex-end}
  .icobtn{
    width:36px;height:36px;flex:none;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--pine);
    display:grid;place-items:center;transition:background .12s,border-color .12s;
  }
  .icobtn:hover{background:var(--mist);border-color:#cfded7}
  .icobtn.on{background:var(--mint-soft);border-color:#bfe9d4;color:var(--forest)}

  .scroller{flex:1;overflow-y:auto;padding:20px 8px 8px}
  .msgs{max-width:880px;margin:0 auto;padding:0 14px}
  .daysep{display:flex;align-items:center;gap:12px;margin:14px 0}
  .daysep::before,.daysep::after{content:"";height:1px;background:var(--line);flex:1}
  .daysep span{font-size:11px;color:var(--muted);background:var(--mist);padding:0 4px;font-weight:500}

  .row{display:flex;gap:10px;margin:2px 0;align-items:flex-end}
  .row.me{flex-direction:row-reverse}
  .row .avwrap{width:34px;flex:none}
  .stack{max-width:74%;min-width:0;display:flex;flex-direction:column}
  .row.me .stack{align-items:flex-end}
  .who{font-size:11.5px;color:var(--muted);margin:8px 4px 3px;font-weight:500}
  .row.me .who{display:none}

  .bubble{
    position:relative;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);
    font-size:13.5px;line-height:1.5;color:var(--slate);box-shadow:0 1px 1px rgba(11,42,32,.03);
    word-wrap:break-word;overflow-wrap:anywhere;
  }
  .row.me .bubble{background:var(--mint-soft);border-color:#c4ecd9;color:#0c3527}
  .bubble.first{border-top-left-radius:5px}
  .row.me .bubble.first{border-top-left-radius:14px;border-top-right-radius:5px}
  .bubble .txt{white-space:pre-wrap}
  .bubble .edited{font-size:10.5px;color:var(--muted);margin-left:6px}
  .row.me .bubble .edited{color:#3c7a64}
  .bubble.del .txt{font-style:italic;color:var(--muted)}

  .reply-quote{
    border-left:3px solid var(--mint-600);background:rgba(16,185,129,.07);border-radius:6px;
    padding:5px 9px;margin-bottom:6px;font-size:12px;
  }
  .reply-quote .rq-who{font-weight:600;color:var(--pine);font-size:11.5px}
  .reply-quote .rq-tx{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}

  .atts{display:flex;flex-direction:column;gap:7px;margin-top:7px}
  .att-img{max-width:260px;border-radius:10px;border:1px solid var(--line);cursor:pointer;display:block}
  .att-file{
    display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.7);border:1px solid var(--line);
    border-radius:9px;padding:8px 10px;text-decoration:none;color:var(--slate);max-width:260px;
  }
  .row.me .att-file{background:rgba(255,255,255,.55)}
  .att-file .fi{width:30px;height:30px;border-radius:7px;background:var(--mint-soft);color:var(--forest);display:grid;place-items:center;flex:none;font-size:11px;font-weight:700}
  .att-file .fmeta{min-width:0}
  .att-file .fnm{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .att-file .fsz{font-size:11px;color:var(--muted)}

  .meta-line{display:flex;align-items:center;gap:6px;margin:2px 6px 4px;font-size:10.5px;color:var(--muted)}
  .row.me .meta-line{flex-direction:row-reverse}
  .receipt{display:flex;align-items:center;gap:3px}
  .receipt.read{color:var(--mint-600)}

  .reacts{display:flex;flex-wrap:wrap;gap:5px;margin:4px 6px 2px}
  .react{
    display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);
    border-radius:20px;padding:2px 8px;font-size:12px;cursor:pointer;transition:background .12s,border-color .12s;
  }
  .react:hover{background:var(--mist)}
  .react.mine{background:var(--mint-soft);border-color:#bfe9d4}
  .react .rc{font-size:11px;color:var(--muted);font-weight:600}

  .pin-flag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--away);margin:0 6px 2px;font-weight:600}

  /* scheduled / deferred send */
  .bubble.sched{border-style:dashed;border-color:#bfe7d6}
  .row.me .bubble.sched{background:#F4FBF8;border-color:#bfe7d6}
  .sched-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--mint-600);background:var(--mint-soft);border-radius:999px;padding:3px 9px;margin-bottom:7px}
  .sched-chip.quiet{color:#92600A;background:#FEF3C7}
  .sched-chip svg{flex:none}
  .sched-acts{display:flex;gap:7px;margin-top:8px}
  .sched-acts button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 11px;font-size:11.5px;font-weight:500;color:var(--pine);cursor:pointer;font-family:inherit}
  .sched-acts button:hover{background:var(--mist)}
  .sched-acts button[data-cancelsched]{color:var(--danger)}
  .sched-cancel-note{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:11.5px;color:var(--muted);margin:10px auto;max-width:84%;line-height:1.5}
  .sched-cancel-note svg{flex:none;color:var(--danger)}

  /* hover actions */
  .actions{
    position:absolute;top:-15px;display:flex;gap:2px;background:#fff;border:1px solid var(--line);
    border-radius:9px;padding:3px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
  }
  .row:not(.me) .actions{right:6px}
  .row.me .actions{left:6px}
  .bubble:hover .actions,.actions:hover{opacity:1;pointer-events:auto}
  .actions button{
    width:26px;height:26px;border:none;background:transparent;border-radius:6px;display:grid;place-items:center;
    color:var(--muted);font-size:13px;transition:background .1s,color .1s;
  }
  .actions button:hover{background:var(--mist);color:var(--pine)}
  .emoji-pop{
    position:absolute;top:14px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px;
    display:flex;gap:2px;box-shadow:var(--shadow-pop);z-index:10;
  }
  .row:not(.me) .emoji-pop{right:6px}
  .row.me .emoji-pop{left:6px}
  .emoji-pop button{width:30px;height:30px;border:none;background:transparent;border-radius:7px;font-size:17px;cursor:pointer}
  .emoji-pop button:hover{background:var(--mist)}

  /* typing */
  .typing{display:flex;align-items:center;gap:9px;padding:4px 14px 2px;max-width:880px;margin:0 auto}
  .typing .dots{display:flex;gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px}
  .typing .dots i{width:6px;height:6px;border-radius:50%;background:#9fb4ab;animation:bounce 1.3s infinite}
  .typing .dots i:nth-child(2){animation-delay:.18s}
  .typing .dots i:nth-child(3){animation-delay:.36s}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

  /* composer */
  .composer{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px 14px}
  .composer-inner{max-width:880px;margin:0 auto}
  .reply-bar{
    display:flex;align-items:center;gap:9px;background:var(--mist);border:1px solid var(--line);
    border-radius:9px 9px 0 0;padding:7px 12px;font-size:12px;border-bottom:none;
  }
  .reply-bar .rb-who{font-weight:600;color:var(--pine)}
  .reply-bar .rb-tx{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .reply-bar button{margin-left:auto;border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1}
  .att-tray{display:flex;flex-wrap:wrap;gap:8px;padding:9px 4px 2px}
  .att-chip{
    display:flex;align-items:center;gap:8px;background:var(--mist);border:1px solid var(--line);border-radius:9px;
    padding:6px 8px 6px 6px;font-size:12px;max-width:220px;
  }
  .att-chip img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none}
  .att-chip .ci{width:30px;height:30px;border-radius:6px;background:var(--mint-soft);color:var(--forest);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
  .att-chip .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .att-chip button{border:none;background:transparent;color:var(--muted);font-size:15px;line-height:1;flex:none}
  .inbar{display:flex;align-items:flex-end;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 8px 7px 12px;transition:border-color .12s,box-shadow .12s}
  .inbar.replying,.inbar.hasatt{border-radius:0 0 12px 12px}
  .inbar:focus-within{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .inbar textarea{
    flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:13.5px;line-height:1.5;
    max-height:140px;color:var(--slate);background:transparent;padding:6px 0;
  }
  .inbar .clipbtn{
    width:36px;height:36px;flex:none;border:none;background:transparent;color:var(--muted);border-radius:9px;
    display:grid;place-items:center;transition:background .12s,color .12s;
  }
  .inbar .clipbtn:hover{background:var(--mist);color:var(--pine)}
  .sendbtn{
    width:38px;height:38px;flex:none;border:none;border-radius:10px;background:var(--mint-600);color:#fff;
    display:grid;place-items:center;transition:filter .15s,transform .1s,background .15s;
  }
  .sendbtn:hover{filter:brightness(1.06)}
  .sendbtn:active{transform:scale(.94)}
  .sendbtn:disabled{background:#cdded6;cursor:default;filter:none;transform:none}

  /* ---------- SMS template popover ---------- */
  .tpl-popover{
    position:absolute;bottom:calc(100% + 8px);left:0;right:0;
    background:#fff;border:1px solid var(--line);border-radius:13px;
    box-shadow:0 8px 28px rgba(0,0,0,.13);z-index:60;
    display:flex;flex-direction:column;max-height:340px;overflow:hidden;
    animation:tplIn .13s ease;
  }
  @keyframes tplIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .tpl-popover-head{display:flex;align-items:center;gap:9px;padding:11px 14px 8px;border-bottom:1px solid var(--line-2)}
  .tpl-popover-head span{font-size:11.5px;font-weight:600;color:var(--ink);flex:1}
  .tpl-popover-head input{flex:1;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px;font-family:inherit;outline:none;color:var(--ink)}
  .tpl-popover-head input:focus{border-color:var(--mint-600)}
  .tpl-popover-head .tpl-x{border:none;background:transparent;font-size:18px;color:var(--muted);line-height:1;padding:0 2px;cursor:pointer}
  .tpl-popover-head .tpl-x:hover{color:var(--ink)}
  .tpl-list{overflow-y:auto;padding:6px}
  .tpl-card{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:9px;cursor:pointer;transition:background .1s}
  .tpl-card:hover{background:var(--mist)}
  .tpl-card .tc-name{font-size:12.5px;font-weight:600;color:var(--ink)}
  .tpl-card .tc-prev{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tpl-card .tc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
  .tpl-tag{font-size:10.5px;font-weight:600;background:var(--mint-soft);color:var(--forest);border-radius:6px;padding:1px 6px}
  .tpl-empty{font-size:12.5px;color:var(--muted);padding:18px;text-align:center}
  .tpl-pop-wrap{position:relative}
  .tplbtn{
    width:36px;height:36px;flex:none;border:none;background:transparent;color:var(--muted);border-radius:9px;
    display:grid;place-items:center;transition:background .12s,color .12s;
  }
  .tplbtn:hover{background:var(--mist);color:var(--pine)}
  .tplbtn.active{background:var(--mint-soft);color:var(--forest)}
  .token-chip{display:inline-flex;align-items:center;gap:3px;background:var(--mint-soft);color:var(--forest);
    border-radius:5px;padding:1px 6px;font-size:11px;font-weight:600;font-family:monospace}
  .tpl-mgr-hint{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.55}
  .tpl-mgr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .tpl-row{border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:7px;background:#fff}
  .tpl-row-head{display:flex;align-items:center;gap:8px}
  .tpl-row-head .tr-name{flex:1;font-size:13px;font-weight:600;color:var(--ink);border:none;border-bottom:1px solid transparent;padding:2px 0;background:transparent;font-family:inherit;outline:none}
  .tpl-row-head .tr-name:focus{border-bottom-color:var(--mint-600)}
  .tpl-row-head .tr-del{border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;padding:3px 5px;border-radius:6px;line-height:1}
  .tpl-row-head .tr-del:hover{background:#FEE2E2;color:var(--danger)}
  .tpl-row textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit;resize:vertical;min-height:58px;outline:none;color:var(--ink);box-sizing:border-box}
  .tpl-row textarea:focus{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.12)}
  .tpl-row-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tpl-preview{font-size:11.5px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tpl-add-row{display:flex;gap:8px;align-items:center}
  .tpl-add-row input{flex:1;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit;outline:none;color:var(--ink)}
  .tpl-add-row input:focus{border-color:var(--mint-600)}
  .token-ref{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  /* SMS character / segment counter */
  .sms-counter{font-size:11px;color:var(--muted);text-align:right;padding:5px 6px 0;user-select:none;letter-spacing:.01em}
  .sms-counter.multi{color:#92600A;font-weight:500}

  /* ---------- Info panel ---------- */
  .panel{
    width:320px;flex:none;background:var(--surface);border-left:1px solid var(--line);
    display:flex;flex-direction:column;overflow-y:auto;position:relative;
  }
  .panel.hidden{display:none}
  .panel-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .12s,color .12s}
  .panel-x:hover{background:var(--mist);color:var(--ink)}
  .panel .ph{padding:22px 20px 16px;text-align:center;border-bottom:1px solid var(--line)}
  .panel .ph .av{margin:0 auto 11px}
  .panel .ph .pn{font-size:17px;font-weight:600;color:var(--ink)}
  .pn-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
  .pn-link:hover{text-decoration:underline;color:var(--pine)}
  .tn-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
  .tn-link:hover{text-decoration:underline;color:var(--pine)}
  .panel .ph .pr{font-size:12.5px;color:var(--muted);margin-top:2px}
  .panel .psec{padding:16px 20px;border-bottom:1px solid var(--line-2)}
  .panel .psec h4{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .pmember{display:flex;align-items:center;gap:10px;padding:7px 0}
  .pmember .pm-meta{flex:1;min-width:0}
  .pmember .pm-nm{font-size:13px;font-weight:500;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pmember .pm-rl{font-size:11px;color:var(--muted)}
  .pmember .pm-x{border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:4px}
  .pmember .pm-x:hover{color:var(--danger)}
  .pmember .youtag{font-size:10px;background:var(--mint-soft);color:var(--forest);border-radius:6px;padding:2px 6px;font-weight:600}
  .panel .pbtn{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);
    background:#fff;border-radius:9px;padding:9px;font-size:12.5px;color:var(--pine);font-weight:500;
    transition:background .12s;
  }
  .panel .pbtn:hover{background:var(--mist)}
  .panel .pbtn.danger{color:var(--danger);border-color:#f0d6c8}
  .panel .pbtn.danger:hover{background:#fdf1ea}
  .pinned-msg{font-size:12.5px;color:var(--slate);background:var(--mist);border-radius:8px;padding:8px 10px;margin-bottom:7px;cursor:pointer}
  .pinned-msg .pm-w{font-weight:600;font-size:11px;color:var(--pine);display:block;margin-bottom:2px}
  .pinned-msg .pm-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}

  /* shared attachments grid */
  .att-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .att-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}

  /* ---------- Empty ---------- */
  .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:40px;gap:14px}
  .empty .eill{width:74px;height:74px;border-radius:20px;background:linear-gradient(145deg,var(--mint-soft),#fff);display:grid;place-items:center;color:var(--pine);box-shadow:var(--shadow)}
  .empty h3{margin:0;font-family:'Instrument Serif',serif;font-size:24px;color:var(--ink);font-weight:400}
  .empty p{margin:0;font-size:13px;max-width:300px;line-height:1.55}

  /* ---------- Modal ---------- */
  .scrim{position:fixed;inset:0;background:rgba(11,42,32,.42);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:60;padding:20px}
  .scrim.hidden{display:none}
  .modal{
    background:#fff;border-radius:18px;box-shadow:var(--shadow-pop);width:100%;max-width:460px;max-height:94vh;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .modal.lg{max-width:560px}
  .modal.xl{max-width:760px}
  .mhd{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
  .mhd h3{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
  .mhd .x{margin-left:auto;border:none;background:transparent;color:var(--muted);font-size:22px;line-height:1;width:30px;height:30px;border-radius:8px}
  .mhd .x:hover{background:var(--mist)}
  .mbd{padding:18px 22px;overflow-y:auto}
  .mbd label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px}
  .mbd input[type=text]{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:inherit;font-size:13.5px;
    outline:none;color:var(--slate);transition:border-color .12s,box-shadow .12s;
  }
  .mbd input[type=text]:focus{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .mbd input[type=text].input-error{border-color:var(--danger);background:#fdf4f0}
  .mbd input[type=text].input-error:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(194,65,12,.16)}
  @keyframes shakeX{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
  .mbd input[type=text].shake{animation:shakeX .32s ease}
  .field-err{display:flex;align-items:center;gap:6px;color:var(--danger);font-size:12px;font-weight:500;margin:7px 2px 0}
  .field-err svg{flex:none}
  .msearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:10px;transition:border-color .12s,box-shadow .12s;background:#fff}
  .msearch:focus-within{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .msearch svg{flex:none;color:var(--muted)}
  .msearch input{flex:1;border:none;outline:none;font-family:inherit;font-size:13px;color:var(--slate);background:transparent}
  .msearch .clr{border:none;background:transparent;color:var(--muted);font-size:17px;line-height:1;width:22px;height:22px;border-radius:6px;flex:none;display:none}
  .msearch .clr:hover{background:var(--mist)}
  .msearch.has .clr{display:grid;place-items:center}
  .filtcol.hide,.pick.hide{display:none}
  .taxrow.hide,.provrow.hide{display:none}
  .nomatch{font-size:12.5px;color:var(--muted);padding:10px 4px;text-align:center}
  .mini-check{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:var(--slate);cursor:pointer;user-select:none}
  .mini-check .cbx{width:20px;height:20px;border-radius:6px;border:2px solid #cfded7;flex:none;display:grid;place-items:center;color:#fff;transition:.12s}
  .mini-check .cbx.on{background:var(--mint-600);border-color:var(--mint-600)}
  .mini-check .cbx:not(.on) svg{opacity:0}
  .picker{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:300px;overflow-y:auto}
  .pick{
    display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;cursor:pointer;
    border:1px solid transparent;transition:background .1s,border-color .1s;
  }
  .pick:hover{background:var(--mist)}
  .pick.sel{background:var(--mint-soft);border-color:#bfe9d4}
  .pick .pk-meta{flex:1;min-width:0}
  .pick .pk-nm{font-size:13.5px;font-weight:500;color:var(--slate)}
  .pick .pk-rl{font-size:11.5px;color:var(--muted)}
  .pick .chk{width:20px;height:20px;border-radius:6px;border:2px solid #cfded7;flex:none;display:grid;place-items:center;color:#fff;transition:.1s}
  .pick.sel .chk{background:var(--mint-600);border-color:var(--mint-600)}
  .glist .rdo{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;position:relative;transition:border-color .12s}
  .glist .pick.sel .rdo{border-color:var(--mint-600)}
  .glist .pick.sel .rdo::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mint-600)}
  .picker .rdo{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;position:relative;transition:border-color .12s}
  .picker .pick.sel .rdo{border-color:var(--mint-600)}
  .picker .pick.sel .rdo::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mint-600)}
  .mft{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center;background:#fcfdfc}
  .ps-dirty{font-size:12px;color:var(--danger);margin-right:auto;align-self:center;font-weight:500}
  .btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:500;color:var(--slate);transition:background .12s}
  .btn:hover{background:var(--mist)}
  .btn.primary{background:var(--mint-600);border-color:var(--mint-600);color:#fff}
  .btn.primary:hover{filter:brightness(1.06);background:var(--mint-600)}
  .btn.primary:disabled{background:#cdded6;border-color:#cdded6;cursor:default;filter:none}
  .btn.primary.danger{background:var(--danger);border-color:var(--danger)}
  .btn.primary.danger:hover{filter:brightness(1.05);background:var(--danger)}
  .cd-modal .cd-msg{font-size:13.5px;line-height:1.55;color:var(--slate);margin:0}
  .btn.ghostdanger{color:var(--danger);border-color:#f0d6c8}
  .btn.ghostdanger:hover{background:#fdf1ea}

  /* practice setup */
  .tabs{display:flex;gap:4px;background:var(--mist);border-radius:11px;padding:4px;margin-bottom:16px}
  .tabs button{
    flex:1;border:none;background:transparent;border-radius:8px;padding:8px 6px;font-family:inherit;font-size:12.5px;
    font-weight:500;color:var(--muted);transition:background .12s,color .12s;
  }
  .tabs button.on{background:#fff;color:var(--forest);box-shadow:0 1px 2px rgba(11,42,32,.08)}
  .taxhint{font-size:12px;color:var(--muted);margin:-4px 0 12px;line-height:1.5}
  .taxlist{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
  .taxrow{display:flex;align-items:center;gap:8px}
  .taxrow .drag{color:#cbd5d0;flex:none}
  .taxrow input{
    flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;
    outline:none;color:var(--slate);transition:border-color .12s,box-shadow .12s;
  }
  .taxrow input:focus{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .taxrow .count{font-size:11px;color:var(--muted);flex:none;white-space:nowrap}
  .taxrow .del{border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1;width:30px;height:30px;border-radius:8px;flex:none}
  .taxrow .del:hover{background:#fdf1ea;color:var(--danger)}
  .taxadd{display:flex;gap:8px}
  .taxadd input{flex:1;border:1px dashed #c8d6cf;border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13px;outline:none}
  .taxadd input:focus{border-style:solid;border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .taxadd button{flex:none;border:none;background:var(--mint-600);color:#fff;border-radius:9px;padding:0 16px;font-weight:600;font-size:13px}
  .taxadd button:hover{filter:brightness(1.06)}

  .provhead{display:flex;align-items:center;gap:11px;padding:2px 2px 6px}
  .provhead .ph-spacer{flex:1;min-width:0}
  .pr-sel-head{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:none;width:478px;color:var(--muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
  .pr-sel-head span{text-align:center}
  @media (max-width:660px){
    .pr-sel-head{width:100%}
  }
  .provrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2)}
  .provrow:last-child{border-bottom:none}
  .provrow .pr-id{font-size:11px;color:var(--muted);flex:none}
  .provrow .pr-nm{font-size:13px;font-weight:500;color:var(--slate);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .provrow .pr-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:none;width:478px}
  .provrow select{
    border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-family:inherit;font-size:12px;color:var(--slate);
    background:#fff;outline:none;width:100%;min-width:0;
  }
  @media (max-width:660px){
    .provrow{flex-wrap:wrap}
    .provrow .pr-sel{width:100%}
  }
  .provrow select:focus{border-color:var(--mint-600)}

  /* attribute chips */
  .attr-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--pine);background:var(--mint-soft);border-radius:6px;padding:2px 7px;font-weight:500}
  .attr-chip.muted{background:var(--mist);color:var(--muted)}
  .pmember .pm-attrs{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}

  /* group build-from */
  .seg{display:flex;gap:4px;background:var(--mist);border-radius:10px;padding:4px;margin:4px 0 12px}
  .seg button{flex:1;border:none;background:transparent;border-radius:7px;padding:7px 4px;font-family:inherit;font-size:11.5px;font-weight:500;color:var(--muted);transition:.12s}
  .seg button.on{background:#fff;color:var(--forest);box-shadow:0 1px 2px rgba(11,42,32,.08)}
  .valrow{margin-bottom:12px}
  .valrow select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:inherit;font-size:13.5px;color:var(--slate);background:#fff;outline:none}
  .valrow select:focus{border-color:var(--mint-600);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
  .matchnote{font-size:11.5px;color:var(--muted);margin:8px 2px 4px;display:flex;align-items:center;gap:6px}
  .matchnote b{color:var(--pine)}

  /* keyword dropdown (managed list with per-keyword toggle + add) */
  .kw-dd{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
  .kw-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:none;padding:10px 12px;font-size:13px;color:var(--slate);cursor:pointer;font-family:inherit}
  .kw-trigger:hover{background:var(--mist)}
  .kw-summary{font-weight:500}
  .kw-dim{color:var(--muted);font-weight:400}
  .kw-chev{color:var(--muted);flex:none;transition:transform .18s}
  .kw-dd.open .kw-chev{transform:rotate(180deg)}
  .kw-panel{display:none;border-top:1px solid var(--line)}
  .kw-dd.open .kw-panel{display:block}
  .kw-list{max-height:232px;overflow-y:auto;padding:6px}
  .kw-item{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px}
  .kw-item:hover{background:var(--mist)}
  .kw-item.muted .kw-txt{color:var(--muted);text-decoration:line-through}
  .kw-txt{flex:1;min-width:0;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kw-sw{flex:none;width:32px;height:18px;border-radius:999px;border:none;background:#cdd8d2;cursor:pointer;padding:0;position:relative;transition:background .15s}
  .kw-sw.on{background:var(--mint-600)}
  .kw-sw span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
  .kw-sw.on span{left:16px}
  .kw-rm{flex:none;width:22px;height:22px;border-radius:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12.5px;line-height:1;font-family:inherit;transition:.12s}
  .kw-rm:hover{background:#fde8e1;color:var(--danger)}
  .kw-empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}
  .kw-add{display:flex;gap:7px;padding:8px;border-top:1px solid var(--line);background:var(--mist)}
  .kw-input{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--slate);background:#fff;outline:none}
  .kw-input:focus{border-color:var(--mint-600)}
  .kw-addbtn{flex:none;border:none;background:var(--forest);color:#fff;border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
  .kw-addbtn:hover{background:var(--pine)}
  .rule-del{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #f0c9bf;color:var(--danger);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
  .rule-del:hover{background:#fff1ec;border-color:var(--danger)}
  .ntf-dd{position:relative}
  .ntf-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 11px;font:inherit;font-size:12.5px;color:var(--slate);cursor:pointer}
  .ntf-trigger:hover{border-color:var(--mint-600)}
  .ntf-chev{transition:transform .15s;color:var(--muted)}
  .ntf-dd.open .ntf-chev{transform:rotate(180deg)}
  .ntf-panel{display:none;position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:220px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(15,61,46,.14);padding:5px}
  .ntf-dd.open .ntf-panel{display:block}
  .ntf-panel .ntf-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:12.5px}
  .ntf-item:hover{background:var(--mist)}
  .ntf-item .cbx{width:20px;height:20px;border-radius:6px;border:2px solid #cfded7;flex:none;display:grid;place-items:center;color:#fff;transition:.12s}
  .ntf-item .cbx.on{background:var(--mint-600);border-color:var(--mint-600)}
  .ntf-item .cbx:not(.on) svg{opacity:0}
  .ntf-nm{flex:1;min-width:0;color:var(--slate)}
  .rule-del svg{flex:none}

  /* multi-criteria filter builder */
  .filtcol{margin-bottom:13px}
  .filtcol .fc-h{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip-t{border:1px solid var(--line);background:#fff;border-radius:18px;padding:6px 12px;font-size:12.5px;color:var(--slate);cursor:pointer;transition:.12s;font-family:inherit}
  .chip-t:hover{background:var(--mist)}
  .chip-t.on{background:var(--mint-soft);border-color:#bfe9d4;color:var(--forest);font-weight:500}
  .preview{background:var(--mist);border:1px solid var(--line);border-radius:11px;padding:6px;max-height:188px;overflow-y:auto;margin-top:4px}
  .preview .pv-row{display:flex;align-items:center;gap:9px;padding:5px 6px}
  .preview .pv-nm{font-size:12.5px;color:var(--slate)}
  .preview .pv-empty{font-size:12px;color:var(--muted);padding:14px;text-align:center}
  .smart-toggle{display:flex;align-items:center;gap:11px;background:var(--mist);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin:14px 0 2px;cursor:pointer;user-select:none}
  .smart-toggle .sw{width:38px;height:22px;border-radius:20px;background:#cdd9d3;position:relative;flex:none;transition:background .15s}
  .smart-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .smart-toggle.on .sw{background:var(--mint-600)}
  .smart-toggle.on .sw::after{transform:translateX(16px)}
  .smart-toggle .st-txt{flex:1}
  .smart-toggle .st-t{font-size:13px;font-weight:500;color:var(--slate)}
  .smart-toggle .st-d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
  .smart-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;background:var(--mint-soft);color:var(--forest);border-radius:6px;padding:2px 7px;font-weight:600}

  /* ---- SMS scaffold ---- */
  .av.sms{background:#475569}
  .av .sms-tag{position:absolute;right:-3px;bottom:-4px;background:#475569;color:#fff;font-size:7px;font-weight:700;letter-spacing:.04em;border-radius:5px;padding:1px 3px;border:2px solid #fff;line-height:1}
  .thread .av .sms-tag,.panel .av .sms-tag{border-color:#fff}
  .row.sms.me .bubble{background:#DCEAFE;border-color:#c2dbfb;color:#0b2540}
  .row.sms:not(.me) .bubble{background:#fff}
  .meta-line .via{color:var(--muted)}
  .receipt.queued{color:var(--muted)} .receipt.sent{color:var(--muted)} .receipt.delivered{color:#2563eb} .receipt.failed{color:var(--danger)}
  .note-row{display:flex;justify-content:center;margin:8px 0}
  .note{max-width:80%;background:#FEF7E6;border:1px solid #F6E2A8;border-radius:12px;padding:9px 12px;font-size:13px;color:#5b4a17}
  .note .note-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#b07d12;margin-bottom:5px}
  .note .txt{white-space:pre-wrap;color:#4a3d18}
  .risk-banner{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;border-radius:7px;padding:4px 8px;margin-bottom:6px}
  .risk-banner.high{background:#FEE2E2;color:#B91C1C}
  .risk-banner.med{background:#FEF3C7;color:#92600A}
  .optout-bar{background:#FEF2F2;border:1px solid #FBD5D5;border-radius:11px;padding:13px 14px;font-size:12.5px;color:#7f1d1d}
  .note-toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px 9px 0 0;border-bottom:none;padding:8px 12px;font-size:12px;color:var(--muted);cursor:pointer;background:var(--mist);user-select:none}
  .note-toggle .ntdot{width:9px;height:9px;border-radius:50%;background:#cbd5d0;flex:none}
  .note-toggle.on{background:#FEF7E6;color:#8a6a12;border-color:#F6E2A8}
  .note-toggle.on .ntdot{background:#E0A516}
  .inbar.notemode{border-color:#F6E2A8}
  .inbar.notemode:focus-within{border-color:#E0A516;box-shadow:0 0 0 3px rgba(224,165,22,.18)}
  .consent-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:7px;padding:3px 9px}
  .consent-chip.ok{background:var(--mint-soft);color:var(--forest)}
  .consent-chip.out{background:#FEE2E2;color:#B91C1C}
  .consent-chip.pend{background:var(--mist);color:var(--muted)}
  .ppick{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-family:inherit;font-size:13px;color:var(--slate);background:#fff;outline:none}
  .ppick:focus{border-color:var(--mint-600)}

  /* ---- quiet hours editor ---- */
  .qh-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
  .qh-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .qh-row label{margin:0;font-size:12px;color:var(--muted);font-weight:600}
  .qh-row input[type=time]{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:13px;color:var(--slate);outline:none}
  .qh-row input[type=time]:focus{border-color:var(--mint-600)}
  .qh-prov{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
  .qh-prov:last-child{border-bottom:none}
  .qh-prov .qh-nm{flex:1;min-width:120px;font-size:13px;font-weight:500;color:var(--slate)}
  .mini-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--muted);user-select:none}
  .mini-toggle .sw{width:34px;height:20px;border-radius:20px;background:#cdd9d3;position:relative;flex:none;transition:background .15s}
  .mini-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .mini-toggle.on .sw{background:var(--mint-600)}
  .mini-toggle.on .sw::after{transform:translateX(14px)}

  /* ---- risk rules ---- */
  .rule-tester{border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:14px;background:var(--mist)}
  .rule-tester label{display:block;margin-bottom:7px;font-size:12px;font-weight:600;color:var(--slate)}
  .rule-tester #riskTest{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-family:inherit;font-size:13px;color:var(--slate);background:#fff;outline:none}
  .rule-tester #riskTest:focus{border-color:var(--mint-600)}
  .rule-test-out{margin-top:9px;font-size:12px}
  .addrule-top{display:inline-flex;align-items:center;gap:6px;margin:4px 0 14px}
  .rule-test-out:empty{margin-top:0}
  .rule-test-out.clear{color:var(--muted)}
  .rule-test-out .rt-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 0;border-top:1px solid var(--line);color:var(--slate)}
  .rule-test-out .rt-row:first-child{border-top:none}
  .risk-terms{font-weight:600;opacity:.85}
  .rule-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:11px}
  .rule-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .rule-head .rule-name{flex:1;font-size:14px;font-weight:600;color:var(--ink)}
  .sev-pill{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.04em}
  .sev-pill.high{background:#FEE2E2;color:#B91C1C}
  .sev-pill.medium{background:#FEF3C7;color:#92600A}
  .rule-card .kw{font-size:12px;color:var(--muted);margin-bottom:9px;line-height:1.5}
  .rule-card .kw b{color:var(--slate);font-weight:600}
  .rule-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--muted)}
  .rule-meta .attr-chip{cursor:default}
  .ruleopt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}

  /* ---- alerts / outbox ---- */
  .alerts-btn{position:relative}
  .alerts-count{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#DC2626;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--forest)}
  .ob-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2)}
  .ob-item:last-child{border-bottom:none}
  .ob-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff}
  .ob-ic.email{background:#0E7490}.ob-ic.sms{background:#475569}
  .ob-body{flex:1;min-width:0}
  .ob-subj{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .ob-to{font-size:11.5px;color:var(--muted);margin-top:1px}
  .ob-snip{font-size:12px;color:var(--slate);margin-top:5px;background:var(--mist);border-radius:7px;padding:6px 9px;white-space:pre-wrap}
  .ob-status{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.03em;flex:none}
  .ob-status.sent{background:var(--mint-soft);color:var(--forest)}
  .ob-status.held_quiet_hours{background:#FEF3C7;color:#92600A}
  .ob-time{font-size:11px;color:var(--muted);white-space:nowrap}

  /* ---- audit log ---- */
  .au-hint{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5}
  .au-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
  .au-cats{display:flex;gap:7px;flex-wrap:wrap}
  .au-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;font-family:inherit}
  .au-chip:hover{background:var(--mist)}
  .au-chip.on{background:var(--forest);border-color:var(--forest);color:#fff}

  /* risk-alert lifecycle (acknowledge / resolve loop) */
  .ra-item{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line-2)}
  .ra-item:last-child{border-bottom:none}
  .ra-body{flex:1;min-width:0}
  .ra-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--ink)}
  .ra-ctx{font-size:12px;color:var(--muted);margin-top:3px}
  .ra-snip{font-size:12px;color:var(--slate);margin-top:6px;line-height:1.45;background:var(--mist);border-radius:8px;padding:7px 10px;word-break:break-word}
  .ra-meta{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.55}
  .ra-notequote{font-size:12px;color:var(--slate);margin-top:6px;border-left:3px solid var(--mint);padding:2px 0 2px 9px;line-height:1.45}
  .ra-actions{display:flex;gap:7px;margin-top:10px;align-items:center;flex-wrap:wrap}
  .ra-actions .btn{padding:7px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
  .ra-resolve{margin-top:10px}
  .ra-resolve textarea{
    width:100%;min-height:58px;resize:vertical;border:1px solid var(--line);border-radius:9px;
    padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--ink);background:#fff;
  }
  .ra-resolve textarea:focus{outline:none;border-color:var(--mint-600)}
  .ra-resolve .ra-actions{margin-top:8px}
  .st-chip{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.04em;flex:none}
  .st-chip.stnew{background:#DBEAFE;color:#1D4ED8}
  .st-chip.stack{background:#FEF3C7;color:#92600A}
  .st-chip.stres{background:var(--mint-soft);color:var(--forest)}
  .src-tag{font-size:10px;font-weight:600;background:#EDE9FE;color:#6D28D9;border-radius:6px;padding:2px 7px;flex:none}

  /* sync stubs — cross-module hooks, inert until integration */
  .sync-chip{
    display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--pine);
    background:var(--mint-soft);border:none;border-radius:999px;padding:6px 12px;cursor:pointer;font-family:inherit;flex:none;
    transition:background .12s;
  }
  .sync-chip:hover{background:#c3ebd9}
  .crm-sync-cap{
    display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;color:var(--muted);
  }
  .crm-sync-cap .linklike{
    border:none;background:none;padding:0;font-size:11px;font-weight:600;color:var(--mint-600);
    cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px;
  }
  .sync-note{font-size:11px;color:var(--muted);line-height:1.5}
  .au-row2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .au-list{display:flex;flex-direction:column;gap:9px;max-height:54vh;overflow-y:auto;padding-right:2px}
  .au-item{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:11px 12px}
  .au-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--mist);color:var(--muted)}
  .au-item.au-sent .au-ic{background:var(--mint-soft);color:var(--forest)}
  .au-item.au-received .au-ic{background:#E0F2FE;color:#0369A1}
  .au-item.au-scheduled .au-ic{background:#FEF3C7;color:#92600A}
  .au-item.au-consent .au-ic{background:var(--mist);color:var(--pine)}
  .au-item.au-risk .au-ic{background:#FEE2E2;color:#B91C1C}
  .au-item.au-alerts .au-ic{background:#FCE7F3;color:#9D174D}
  .au-body{flex:1;min-width:0}
  .au-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
  .au-type{font-size:13px;font-weight:600;color:var(--ink)}
  .au-pt{font-size:11px;font-weight:600;color:var(--pine);background:var(--mint-soft);border-radius:6px;padding:1px 7px}
  .au-sum{font-size:12.5px;color:var(--slate);line-height:1.45;word-break:break-word}
  .au-meta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;word-break:break-word}
  .au-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right}
  .au-actor{font-size:11px;color:var(--muted);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .au-time{font-size:11px;color:var(--muted)}

  /* lightbox */
  .lightbox{position:fixed;inset:0;background:rgba(11,30,24,.9);display:grid;place-items:center;z-index:80;padding:30px;cursor:zoom-out}
  .lightbox.hidden{display:none}
  .lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:var(--shadow-pop)}

  /* toast */
  .toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;align-items:center}
  .toast{
    background:var(--ink);color:#eafaf3;font-size:13px;padding:10px 16px;border-radius:11px;box-shadow:var(--shadow-pop);
    display:flex;align-items:center;gap:9px;animation:tin .25s ease;
  }
  .toast .td{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
  @keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  /* responsive */
  .backbtn{display:none}
  @media (max-width:1180px){.panel{display:none}.panel.force{display:flex;position:absolute;right:0;top:0;height:100%;z-index:40;box-shadow:var(--shadow-pop)}}
  @media (max-width:760px){
    .app{grid-template-columns:1fr}
    .rail-resize{display:none}
    .rail{position:absolute;inset:0;z-index:30;width:100%}
    .app.in-thread .rail{display:none}
    .app:not(.in-thread) .stage{display:none}
    .backbtn{display:grid}
    .panel.force{width:100%}
    .seatpick-native{display:block}
    .seatpick-custom{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<div class="app" id="app">

  <!-- LEFT RAIL -->
  <aside class="rail" id="rail">
    <div class="brand">
      <div class="logo">C</div>
      <div>
        <div class="word">Credify</div>
        <div class="sub">Secure Messaging</div>
      </div>
    </div>

    <div class="railback">
      <button class="dashback" id="goBackBtn" title="Go back to the previous page">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
        Go back
      </button>
    </div>

    <div class="me" id="meBar"></div>

    <div class="railtools">
      <div class="search">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
        <input id="searchInput" type="text" placeholder="Search people & messages" autocomplete="off" />
      </div>
      <button class="newbtn" id="newBtn" title="New message">+</button>
      <button class="bcastbtn" id="broadcastBtn" title="Broadcast to patients">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11v2a1 1 0 0 0 1 1h1l6 4V6l-6 4H4a1 1 0 0 0-1 1z"/><path d="M15 8a4 4 0 0 1 0 8"/><path d="M18 5a8 8 0 0 1 0 14"/></svg>
      </button>
    </div>

    <div class="convsection">Conversations</div>
    <div class="convlist" id="convList"></div>

    <div class="railfoot">
      <span class="enc">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
        Encrypted
      </span>
      <button id="mxConnBtn" class="icon-foot" title="Synapse server connection — internal chat backend (Matrix)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="6" rx="2"/><rect x="2" y="15" width="20" height="6" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg>
        <span id="mxConnLabel">Server</span><i id="mxDot" class="mx-dot off"></i>
      </button>
      <span class="spacer"></span>
      <button id="auditBtn" class="icon-foot" title="SMS audit log — append-only event history with export">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6M9 9h1"/></svg>
        Audit
      </button>
      <button id="practiceBtn" title="Practice setup — locations, titles & roles" class="icon-foot">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        Practice
      </button>
      <button id="testToolsBtn" class="icon-foot hidden" title="Admin test tools — reset test users (Matrix identity, etc.)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2 2.3-2.3z"/></svg>
        Test tools
      </button>
      <button id="resetBtn" title="Reset all messaging data">Reset demo</button>
    </div>
  </aside>

  <!-- drag strip (desktop rail resize) -->
  <div class="rail-resize" id="railResize" title="Drag to resize"></div>

  <!-- STAGE -->
  <main class="stage" id="stage"></main>

</div>

<!-- modal mount -->
<div class="scrim hidden" id="scrim"></div>
<!-- lightbox -->
<div class="lightbox hidden" id="lightbox"><img id="lightboxImg" alt="attachment preview" /></div>
<!-- toasts -->
<div class="toasts" id="toasts"></div>

<!-- hidden file input -->
<input type="file" id="fileInput" multiple style="display:none" />
<input type="file" id="smsFileInput" accept="image/*" multiple style="display:none" />

<script>
/* =====================================================================
   Credify Secure Messaging — single-file module
   Vanilla JS · localStorage persistence · no external deps
===================================================================== */
(function(){
  "use strict";

  const STORE_KEY = "credify_messaging_v1";
  const AVATAR_COLORS = ["#0F3D2E","#0E7490","#15803D","#0891B2","#4D7C0F"];
  const EMOJIS = ["👍","❤️","😂","🎉","🙏","👀"];
  const MAX_ATT_BYTES = 5 * 1024 * 1024; // 5MB per file guard

  /* ---------- seed data ---------- */
  function defaultPractice(){
    return {
      locations:["Downtown Clinic","North Office","Telehealth"],
      titles:["Clinical Director","Senior Clinician","Associate Clinician","Intake Coordinator"],
      roles:["Psychologist","Therapist","Psychiatrist","Counselor","Social Worker"],
      quietHours:{ enabled:true, start:"20:00", end:"07:00" },
      riskRules:[
        { id:"rule_selfharm", name:"Suicidal ideation / self-harm", severity:"high", enabled:true, scan:"all", matchMode:"word",
          keywords:["suicide","suicidal","kill myself","killing myself","want to die","wanna die","end my life","end it all","take my own life","better off dead","don't want to be here","hurt myself","harm myself","self-harm","self harm","cut myself","cutting myself"],
          notify:{ type:"group", providerIds:[], groupId:"c_grp_intake", channels:{email:true, sms:true} },
          overrideQuiet:true },
        { id:"rule_harmothers", name:"Threat to others / violence", severity:"high", enabled:true, scan:"all", matchMode:"word",
          keywords:["kill him","kill her","kill them","hurt someone","hurt him","hurt her","going to hurt","want to hurt them","shoot","stab","make them pay","they deserve to die"],
          notify:{ type:"group", providerIds:[], groupId:"c_grp_intake", channels:{email:true, sms:true} },
          overrideQuiet:true },
        { id:"rule_overdose", name:"Overdose / substance crisis", severity:"high", enabled:true, scan:"all", matchMode:"word",
          keywords:["overdose","overdosed","od'd","took too many","took a bunch of","relapsed","using again","can't stop drinking","drank too much","high right now"],
          notify:{ type:"group", providerIds:[], groupId:"c_grp_intake", channels:{email:true, sms:true} },
          overrideQuiet:true },
        { id:"rule_abuse", name:"Abuse / immediate safety", severity:"high", enabled:true, scan:"all", matchMode:"word",
          keywords:["being abused","he hit me","she hit me","hit me","not safe at home","afraid of him","afraid of her","threatened me","won't let me leave","being followed"],
          notify:{ type:"group", providerIds:[], groupId:"c_grp_intake", channels:{email:true, sms:true} },
          overrideQuiet:true },
        { id:"rule_distress", name:"Severe distress / hopelessness", severity:"medium", enabled:true, scan:"all", matchMode:"word",
          keywords:["hopeless","can't go on","can't cope","no point","giving up","give up","worthless","i'm a burden","feel like a burden","can't take it anymore","breaking down","falling apart"],
          notify:{ type:"provider", providerIds:[1], groupId:null, channels:{email:true, sms:false} },
          overrideQuiet:false },
        { id:"rule_medical", name:"Urgent medical / medication", severity:"medium", enabled:true, scan:"all", matchMode:"word",
          keywords:["emergency","chest pain","can't breathe","trouble breathing","passed out","hospital","out of meds","ran out of","double dose","bad reaction","allergic reaction","side effect"],
          notify:{ type:"provider", providerIds:[4], groupId:null, channels:{email:true, sms:false} },
          overrideQuiet:false }
      ],
      smsTemplates:[
        { id:"tpl_appt_remind",  name:"Appointment reminder",   body:"Hi {{patient_first}}, just a reminder that you have an appointment with {{provider_name}} at {{provider_location}} tomorrow. Reply STOP to opt out." },
        { id:"tpl_appt_auto",    name:"Appointment reminder (auto)", body:"Hi {{patient_first}}, reminder: you have an appointment with {{provider_name}} on {{appt_datetime}}. Reply STOP to opt out." },
        { id:"tpl_appt_confirm", name:"Appointment confirmed",  body:"Hi {{patient_first}}, your appointment with {{provider_name}} has been confirmed. If you need to reschedule, please reply to this message." },
        { id:"tpl_appt_cancel",  name:"Appointment cancelled",  body:"Hi {{patient_first}}, your upcoming appointment with {{provider_name}} has been cancelled. Please contact us to reschedule." },
        { id:"tpl_intake_ready", name:"Intake paperwork ready", body:"Hi {{patient_first}}, your intake paperwork is ready. Please complete it before your first appointment with {{provider_name}}. Reply with any questions." },
        { id:"tpl_billing",      name:"Billing follow-up",      body:"Hi {{patient_first}}, this is a courtesy reminder regarding your account balance at {{provider_location}}. Please call us at your earliest convenience. Reply STOP to opt out." },
        { id:"tpl_checkin",      name:"Wellness check-in",      body:"Hi {{patient_first}}, {{provider_name}} wanted to check in. How are you doing? Feel free to reply to this message if you have any concerns." }
      ],
      apptReminders:{ enabled:true, offsets:[1440,60], templateId:"tpl_appt_auto" }
    };
  }
  function seed(){
    const now = Date.now();
    const min = 60*1000, hr = 60*min, day = 24*hr;
    const providers = [
      {id:1, name:"Dr. Maya Ellison",  credential:"LCSW", location:"Downtown Clinic", title:"Clinical Director",  role:"Social Worker", presence:"online"},
      {id:2, name:"Dr. James Okafor",  credential:"PsyD", location:"Downtown Clinic", title:"Senior Clinician",   role:"Psychologist", presence:"online"},
      {id:3, name:"Dr. Sara Lindqvist",credential:"LMFT", location:"North Office",    title:"Associate Clinician",role:"Therapist",    presence:"away"},
      {id:4, name:"Dr. Aaron Whitfield",credential:"MD",  location:"Telehealth",      title:"Senior Clinician",   role:"Psychiatrist", presence:"offline"},
      {id:5, name:"Dr. Priya Nair",    credential:"LPC",  location:"North Office",    title:"Associate Clinician",role:"Counselor",    presence:"online"}
    ];
    const conversations = [
      {
        id:"c_dm_1_2", type:"dm", name:null, memberIds:[1,2], createdBy:1, pinned:true,
        messages:[
          mk("m1",2,"Morning Maya — did the Hendricks intake packet come through your queue?", now-2*hr-12*min,[1,2]),
          mk("m2",1,"It did. Scoring flagged moderate on the PHQ-9, I'm routing to you for the eval.", now-2*hr-6*min,[1,2]),
          mk("m3",2,"Perfect. I'll take the 2pm slot. Can you share the summary?", now-2*hr,[1,2]),
          Object.assign(mk("m4",1,"Sent — attached the intake summary.", now-118*min,[1,2]),{
            attachments:[{name:"Hendricks_Intake_Summary.pdf",type:"application/pdf",size:184320,dataUrl:""}]
          })
        ]
      },
      {
        id:"c_grp_intake", type:"group", name:"Intake Team", memberIds:[1,2,3], createdBy:1, pinned:false,
        messages:[
          mk("g1",3,"Adding the two new referrals to the shared board now.", now-1*day-3*hr,[1,2,3]),
          mk("g2",1,"Thanks Sara. Let's keep eval turnaround under 48h this week.", now-1*day-2*hr-40*min,[1,2,3]),
          mk("g3",2,"Agreed. I've got bandwidth for three more this week.", now-50*min,[1,2]),
          Object.assign(mk("g4",3,"Quick question on the new ROI form — is field 12 required?", now-22*min,[3]),{
            reactions:{"👀":[1]}
          })
        ]
      },
      {
        id:"c_dm_1_4", type:"dm", name:null, memberIds:[1,4], createdBy:4, pinned:false,
        messages:[
          mk("d1",4,"Med review for the Alvarez case is done. Notes in the chart.", now-2*day,[1,4]),
          mk("d2",1,"Appreciate it Aaron.", now-2*day+10*min,[1,4])
        ]
      },
      {
        id:"sms_jordan", type:"sms", contactId:"ct_jordan", assignedTo:2, status:"open", pinned:false,
        messages:[
          smsMsg("s1","in",null,"Hi — is it possible to move my Thursday session?", now-3*hr),
          smsMsg("s2","out",2,"Of course. Would Thursday at 3:00pm work instead?", now-3*hr+4*min,"delivered"),
          smsMsg("s3","in",null,"Yes, that's perfect. Thank you!", now-3*hr+9*min)
        ]
      },
      {
        id:"sms_riley", type:"sms", contactId:"ct_riley", assignedTo:1, status:"pending", pinned:false,
        messages:[
          smsMsg("r1","in",null,"Quick question about my prescription refill", now-26*hr)
        ]
      }
    ];
    const contacts = [
      { id:"ct_jordan", name:"Jordan Avery", phone:"+16195550142", consent:"opted_in",  consentAt:now-10*day, optOutAt:null, nextAppt:null },
      { id:"ct_riley",  name:"Riley Chen",   phone:"+16195550198", consent:"opted_in",  consentAt:now-40*day, optOutAt:null, nextAppt:null }
    ];
    providers.forEach(p=>{ p.quietHours = { override:false, enabled:true, start:"20:00", end:"07:00" }; });
    return {schemaV:6, currentUserId:1, practice:defaultPractice(), providers, conversations, contacts, outbox:[], smsAudit:[], riskAlerts:[], mx:{enabled:false, baseUrl:"http://localhost:8008", userId:null, accessToken:null, deviceId:null, since:null, provToMxid:{}}};
  }
  function mk(id, senderId, text, ts, readBy){
    return {id, senderId, text, ts, channel:"internal", attachments:[], reactions:{}, replyTo:null, edited:false, deleted:false, readBy:readBy.slice(), pinned:false, flags:[], risk:null};
  }
  // SMS message: direction 'in' (from patient) or 'out' (from staff). authorId = staff who sent (out only).
  function smsMsg(id, direction, authorId, text, ts, deliveryStatus){
    return { id, channel:"sms", direction, authorId:authorId||null, senderId:authorId||null, text, ts,
      deliveryStatus: direction==="out" ? (deliveryStatus||"delivered") : "received",
      isNote:false, attachments:[], numMedia:0, reactions:{}, replyTo:null, edited:false, deleted:false,
      readBy: direction==="out"?[authorId]:[], pinned:false, externalId:"SM"+id, flags:[], risk:null };
  }

  /* ---------- state / persistence ---------- */
  let memFallback = null;
  function migrate(s){
    if(!s.practice) s.practice = defaultPractice();
    // One-time v1 -> v2 backfill (only when this state predates the location/title model).
    if(!(s.schemaV>=2)){
      const seedById = {
        1:{location:"Downtown Clinic",title:"Clinical Director",role:"Social Worker"},
        2:{location:"Downtown Clinic",title:"Senior Clinician",role:"Psychologist"},
        3:{location:"North Office",title:"Associate Clinician",role:"Therapist"},
        4:{location:"Telehealth",title:"Senior Clinician",role:"Psychiatrist"},
        5:{location:"North Office",title:"Associate Clinician",role:"Counselor"}
      };
      (s.providers||[]).forEach(p=>{
        const sp = seedById[p.id];
        if(p.location===undefined) p.location = sp?sp.location:"";
        if(p.title===undefined)    p.title    = sp?sp.title:"";
        // v1 stored job title in `role` (e.g. "Clinical Director"); reclassify to discipline.
        if(p.role===undefined || (sp && !s.practice.roles.includes(p.role))) p.role = sp?sp.role:(p.role||"");
      });
    }
    // Make sure any value an existing provider references is present in the taxonomy.
    const ensure=(list,val)=>{ if(val && !list.includes(val)) list.push(val); };
    (s.providers||[]).forEach(p=>{ ensure(s.practice.locations,p.location); ensure(s.practice.titles,p.title); ensure(s.practice.roles,p.role); });
    // Drop transient/runtime-only flags that should never persist.
    (s.conversations||[]).forEach(c=>{ delete c.__typing; });

    // v3: SMS channel, quiet hours, risk rules, contacts, outbox.
    if(!s.practice.quietHours) s.practice.quietHours = { enabled:true, start:"20:00", end:"07:00" };
    if(!s.practice.riskRules)  s.practice.riskRules  = defaultPractice().riskRules;
    (s.practice.riskRules||[]).forEach(r=>{ if(!r.matchMode) r.matchMode="word"; if(!Array.isArray(r.kwOff)) r.kwOff=[]; });
    if(!s.contacts) s.contacts = [];
    if(!s.outbox)   s.outbox   = [];
    if(!s.smsAudit) s.smsAudit = [];
    if(!s.prefs)    s.prefs    = {};
    if(!s.practice.smsTemplates) s.practice.smsTemplates = defaultPractice().smsTemplates;
    (s.providers||[]).forEach(p=>{ if(!p.quietHours) p.quietHours = { override:false, enabled:true, start:"20:00", end:"07:00" }; });
    (s.conversations||[]).forEach(c=>{
      c.messages.forEach(m=>{
        if(m.channel===undefined) m.channel = "internal";
        if(m.flags===undefined) m.flags = [];
        if(m.risk===undefined) m.risk = null;
      });
    });

    // v4: first-class risk alerts with an acknowledge/resolve lifecycle.
    // Backfill one alert per (message, rule) from the existing notification
    // outbox so sessions that already flagged messages keep that history.
    // (Local finds only — the uid/contact helpers are declared after load() runs.)
    if(!(s.schemaV>=4)){
      s.riskAlerts = [];
      const seenKeys = {};
      let mig = 0;
      (s.outbox||[]).slice().reverse().forEach(o=>{           // oldest first…
        if(!o.ruleId || !o.messageId) return;
        const k = o.messageId+"|"+o.ruleId;
        if(seenKeys[k]) return; seenKeys[k]=1;
        const c  = (s.conversations||[]).find(x=>x.id===o.conversationId);
        const ct = (c && c.type==="sms") ? (s.contacts||[]).find(x=>x.id===c.contactId) : null;
        const rule = ((s.practice||{}).riskRules||[]).find(r=>r.id===o.ruleId);
        s.riskAlerts.unshift({                                 // …so unshift leaves newest first
          id:"ra_mig_"+(mig++), ts:o.ts, source:"message",
          severity:o.severity==="high"?"high":"medium",
          ruleIds:[o.ruleId], ruleNames:[rule?rule.name:o.ruleId], terms:(o.terms||[]).slice(),
          conversationId:o.conversationId||null, messageId:o.messageId||null,
          contactId:ct?ct.id:null, patientName:ct?ct.name:null,
          clientId:null, details:"", context:"", snippet:(o.body||"").split("Message: ")[1]||"",
          notifyTargets:[], status:"new",
          ackBy:null, ackByName:null, ackAt:null,
          resolvedBy:null, resolvedByName:null, resolvedAt:null, resolutionNote:null,
          history:[{at:o.ts, to:"new", by:null, byName:"System (migrated)"}]
        });
      });
    }
    if(!Array.isArray(s.riskAlerts)) s.riskAlerts = [];

    // v5: appointment reminders (manual next-appointment entry pending the
    // Calendar feed) + broadcast messaging (no new persistence — broadcasts
    // are tagged messages/audit rows, reusing the existing scheduled-send
    // and audit machinery).
    if(!s.practice.apptReminders) s.practice.apptReminders = { enabled:true, offsets:[1440,60], templateId:"tpl_appt_auto" };
    if(!(s.practice.smsTemplates||[]).some(t=>t.id==="tpl_appt_auto")){
      (s.practice.smsTemplates=s.practice.smsTemplates||[]).push(
        { id:"tpl_appt_auto", name:"Appointment reminder (auto)", body:"Hi {{patient_first}}, reminder: you have an appointment with {{provider_name}} on {{appt_datetime}}. Reply STOP to opt out." });
    }
    (s.contacts||[]).forEach(ct=>{ if(!('nextAppt' in ct)) ct.nextAppt = null; });

    if(!s.mx){ s.mx = { enabled:false, baseUrl:"http://localhost:8008", userId:null, accessToken:null, deviceId:null, since:null, provToMxid:{} }; }
    s.schemaV = 6;
    return s;
  }
  function load(){
    try{
      const raw = localStorage.getItem(STORE_KEY);
      if(raw){ const d = JSON.parse(raw); if(d && d.providers){ const m=migrate(d); save(m); return m; } }
    }catch(e){ /* storage blocked — use memory */ }
    const s = seed(); save(s); return s;
  }
  function save(s){
    try{ localStorage.setItem(STORE_KEY, JSON.stringify(s)); }
    catch(e){ memFallback = s; }
  }
  let state = load();
  let ui = { activeId: state.conversations[0]?.id || null, search:"", searchLoc:null, reply:null, draftAtts:[], smsDraftMedia:[], panelOpen:true, emojiFor:null };
  const openKwRules = new Set();   // rule ids whose keyword dropdown is expanded (transient)
  const openNotifyDD = new Set();  // rule ids whose notify-provider dropdown is expanded (transient)
  let kwRefocus = null;            // rule id whose add-input should regain focus after rerender

  function persist(){ save(state); }

  /* ---------- SMS audit log (append-only) ---------- */
  const AUDIT_LABELS={ sms_sent:"Text sent", mms_sent:"MMS sent", sms_received:"Text received", mms_received:"MMS received",
    scheduled_created:"Scheduled", scheduled_sent:"Scheduled sent", scheduled_canceled:"Scheduled canceled",
    scheduled_canceled_optout:"Scheduled auto-canceled", scheduled_deferred_quiet:"Quiet-hours deferred",
    consent_optout:"Opted out (STOP)", consent_optin:"Opted in (START)", risk_flagged:"Risk flagged",
    alert_sent:"Alert sent", alert_held:"Alert held", template_used:"Template used",
    risk_acknowledged:"Risk acknowledged", risk_resolved:"Risk resolved" };
  const AUDIT_CATEGORY={ sms_sent:"sent", mms_sent:"sent", sms_received:"received", mms_received:"received",
    scheduled_created:"scheduled", scheduled_sent:"scheduled", scheduled_canceled:"scheduled",
    scheduled_canceled_optout:"scheduled", scheduled_deferred_quiet:"scheduled",
    consent_optout:"consent", consent_optin:"consent", risk_flagged:"risk", alert_sent:"alerts", alert_held:"alerts",
    template_used:"sent", risk_acknowledged:"risk", risk_resolved:"risk" };
  function auditSnip(s){ s=(s||"").trim(); return s.length>80 ? s.slice(0,80)+"…" : s; }
  // Append a normalized event. Caller persists afterward (logged before the existing persist()).
  function logAudit(type, c, opts){
    opts=opts||{};
    const ct = c ? contact(c.contactId) : null;
    const actorId = ('actorId' in opts) ? opts.actorId : state.currentUserId;
    const actor = actorId!=null ? prov(actorId) : null;
    (state.smsAudit = state.smsAudit || []).push({
      id:uid("au"), ts: opts.ts||Date.now(), type, category: AUDIT_CATEGORY[type]||"other",
      conversationId: c?c.id:null, contactId: ct?ct.id:null, patientName: ct?ct.name:(opts.patientName||null),
      actorId: actorId!=null?actorId:null, actorName: actor?actor.name:(opts.actorName||(actorId==null?"System":null)),
      messageId: opts.messageId||null, channel: opts.channel||"sms",
      summary: opts.summary||(AUDIT_LABELS[type]||type), meta: opts.meta||{}
    });
  }

  /* ---------- SMS merge-field resolver ----------
     Matrix note: tokens are frontend-only sugar; resolved text is what gets sent
     as the m.room.message event body — no tokens ever leave to the homeserver.
  */
  const MERGE_TOKENS = [
    { token:"{{patient_first}}",   label:"Patient first name",   resolve: ct => ct ? ct.name.split(" ")[0] : "" },
    { token:"{{patient_full}}",    label:"Patient full name",    resolve: ct => ct ? ct.name : "" },
    { token:"{{patient_phone}}",   label:"Patient phone",        resolve: ct => ct ? ct.phone : "" },
    { token:"{{provider_name}}",   label:"Provider name",        resolve: (ct,p) => p ? p.name : "" },
    { token:"{{provider_cred}}",   label:"Provider credential",  resolve: (ct,p) => p ? p.credential : "" },
    { token:"{{provider_location}}",label:"Provider location",   resolve: (ct,p) => p ? p.location : "" },
    { token:"{{appt_datetime}}",   label:"Next appointment date/time", resolve: ct => (ct && ct.nextAppt) ? fmtWhen(new Date(ct.nextAppt.startISO).getTime()) : "" },
  ];
  function resolveMergeFields(tplBody, c){
    const ct = c ? contact(c.contactId) : null;
    const p  = me();
    let out = tplBody;
    MERGE_TOKENS.forEach(t=>{ out = out.replaceAll(t.token, t.resolve(ct, p)||""); });
    return out;
  }

  /* ---------- helpers ---------- */
  const $ = sel => document.querySelector(sel);
  const esc = s => String(s==null?"":s).replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
  const me = () => state.providers.find(p=>p.id===state.currentUserId);
  const prov = id => state.providers.find(p=>p.id===id);
  const conv = id => state.conversations.find(c=>c.id===id);
  const initials = name => name.replace(/^Dr\.?\s+/i,"").split(/\s+/).map(w=>w[0]).slice(0,2).join("").toUpperCase();
  const uid = pre => pre+"_"+Math.random().toString(36).slice(2,9);
  const contact = id => (state.contacts||[]).find(c=>c.id===id);

  // who "owns" a message from the current user's perspective (handles internal + sms)
  function isMine(m){ return m.channel==="sms" ? m.authorId===state.currentUserId : m.senderId===state.currentUserId; }

  function fmtPhone(p){
    const d=String(p||"").replace(/[^\d]/g,"");
    if(d.length===11 && d[0]==="1") return `(${d.slice(1,4)}) ${d.slice(4,7)}-${d.slice(7)}`;
    if(d.length===10) return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;
    return p||"";
  }

  /* ----- quiet hours ----- */
  function effectiveQuietHours(providerId){
    const p=prov(providerId);
    if(p && p.quietHours && p.quietHours.override) return p.quietHours;
    return state.practice.quietHours || {enabled:false};
  }
  function inQuietWindow(qh, ts){
    if(!qh || !qh.enabled) return false;
    const d=new Date(ts), mins=d.getHours()*60+d.getMinutes();
    const toMin=s=>{ const [h,m]=String(s||"0:0").split(":").map(Number); return (h||0)*60+(m||0); };
    const start=toMin(qh.start), end=toMin(qh.end);
    if(start===end) return false;
    return start<end ? (mins>=start && mins<end) : (mins>=start || mins<end); // overnight wrap
  }
  function isProviderQuiet(providerId, ts){ return inQuietWindow(effectiveQuietHours(providerId), ts||Date.now()); }
  // Timestamp when the quiet-hours window containing ts next ends (handles overnight wrap). Caller ensures ts is inside the window.
  function quietWindowEnd(qh, ts){
    const toMin=s=>{ const [h,m]=String(s||"0:0").split(":").map(Number); return (h||0)*60+(m||0); };
    const end=toMin(qh.end), d=new Date(ts);
    const e=new Date(d.getFullYear(), d.getMonth(), d.getDate(), Math.floor(end/60), end%60, 0, 0);
    while(e.getTime()<=ts) e.setDate(e.getDate()+1);
    return e.getTime();
  }

  /* ----- risk detection ----- */
  function escRe(s){ return String(s).replace(/[.*+?^${}()|[\]\\]/g,"\\$&"); }
  // Whole-word / phrase match by default (so "die" doesn't match "diet"); "contains" = legacy substring.
  function keywordMatches(term, text, mode){
    const k=String(term||"").trim(); if(!k) return false;
    const t=String(text||"");
    if(mode==="contains") return t.toLowerCase().includes(k.toLowerCase());
    try { return new RegExp("(?:^|[^A-Za-z0-9])"+escRe(k)+"(?![A-Za-z0-9])","i").test(t); }
    catch(e){ return t.toLowerCase().includes(k.toLowerCase()); }
  }
  // Returns [{rule, terms:[matched keyword strings]}] for every enabled rule with >=1 hit.
  function scanDetail(text){
    const out=[];
    (state.practice.riskRules||[]).forEach(r=>{
      if(!r.enabled) return;
      const mode=r.matchMode||"word";
      const off=new Set(r.kwOff||[]);
      const terms=(r.keywords||[]).filter(k=>k && !off.has(k) && keywordMatches(k, text, mode));
      if(terms.length) out.push({rule:r, terms});
    });
    return out;
  }
  function scanText(text){ return scanDetail(text).map(d=>d.rule); }
  function topSeverity(rules){ return rules.some(r=>r.severity==="high") ? "high" : (rules.length?"medium":null); }
  function resolveNotifyTargets(notify){
    if(!notify) return [];
    if(notify.type==="group"){ const g=conv(notify.groupId); return g?g.memberIds.slice():[]; }
    return (notify.providerIds||[]).slice();
  }
  function ruleById(id){ return (state.practice.riskRules||[]).find(r=>r.id===id); }

  // Scan a freshly-created message; flag it and fire alerts. Returns matched rules.
  function runRiskScan(c, m){
    const detail=scanDetail(m.text);
    if(!detail.length){ if(m.riskTerms) m.riskTerms=[]; return []; }
    const matched=detail.map(d=>d.rule);
    m.flags=matched.map(r=>r.id);
    m.risk=topSeverity(matched);
    m.riskTerms=[...new Set(detail.flatMap(d=>d.terms))];
    const isIn=m.direction==="in";
    // The audit log is a patient-SMS record; internal DM/group flags still banner + alert below,
    // but must not appear in the patient trail (they'd show as ghost rows with no patient).
    if(c.type==="sms"){
      logAudit("risk_flagged", c, isIn
        ? {messageId:m.id, actorId:null, actorName:"Patient", summary:`Risk flagged (${m.risk}) — ${matched.map(r=>r.name).join(", ")}`, meta:{severity:m.risk, rules:matched.map(r=>r.name), terms:m.riskTerms, direction:"in", textSnippet:auditSnip(m.text)}}
        : {messageId:m.id, actorId:m.authorId, summary:`Risk flagged (${m.risk}) — ${matched.map(r=>r.name).join(", ")}`, meta:{severity:m.risk, rules:matched.map(r=>r.name), terms:m.riskTerms, direction:"out", textSnippet:auditSnip(m.text)}});
    }
    detail.forEach(d=>fireAlerts(d.rule, c, m, d.terms));
    updateAlertsBadge();
    return matched;
  }
  function senderLabelFor(c, m){
    if(c.type==="sms"){
      if(m.direction==="in"){ const ct=contact(c.contactId); return ct?ct.name:"Patient"; }
      const a=prov(m.authorId); return a?a.name:"Staff";
    }
    const p=prov(m.senderId); return p?p.name:"Someone";
  }
  function fireAlerts(rule, c, m, terms){
    const targets=resolveNotifyTargets(rule.notify);
    const now=Date.now();
    const ctx = c.type==="sms" ? `Patient text · ${contact(c.contactId)?.name||"Unknown"}` : (c.type==="group"?`Group · ${c.name}`:`Direct message`);
    const snippet = (m.text||"").slice(0,140);
    const matchedTerms = (terms&&terms.length) ? terms : (m.riskTerms||[]);
    // Lifecycle record — one first-class risk alert per rule fire; the
    // acknowledge/resolve loop lives in the Alerts panel.
    createRiskAlert({
      source:"message", severity:rule.severity, ruleIds:[rule.id], ruleNames:[rule.name], terms:matchedTerms,
      conversationId:c.id, messageId:m.id,
      contactId:c.type==="sms"?c.contactId:null,
      patientName:c.type==="sms"?(contact(c.contactId)?.name||null):null,
      context:ctx, snippet
    });
    let sentCount=0, heldCount=0;
    targets.forEach(pid=>{
      const p=prov(pid); if(!p) return;
      const quiet=isProviderQuiet(pid, now);
      const willSend = rule.overrideQuiet || !quiet;
      const status = willSend ? "sent" : "held_quiet_hours";
      if(willSend) sentCount++; else heldCount++;
      const ch=rule.notify.channels||{};
      if(ch.email){
        state.outbox.unshift(alertEntry("email", p, rule, c, m, ctx, snippet, status, now, matchedTerms));
      }
      if(ch.sms){
        state.outbox.unshift(alertEntry("sms", p, rule, c, m, ctx, snippet, status, now, matchedTerms));
      }
      if(!ch.email && !ch.sms){ // default to email if nothing chosen
        state.outbox.unshift(alertEntry("email", p, rule, c, m, ctx, snippet, status, now, matchedTerms));
      }
    });
    if(c.type==="sms"){  // patient-SMS audit only — internal alerts still fire/toast, just aren't logged in the patient trail
      if(sentCount) logAudit("alert_sent", c, {messageId:m.id, actorId:null, actorName:"System", summary:`${sentCount} alert${sentCount>1?"s":""} sent for "${rule.name}"`, meta:{rule:rule.name, severity:rule.severity, recipients:sentCount, terms:matchedTerms}});
      if(heldCount) logAudit("alert_held", c, {messageId:m.id, actorId:null, actorName:"System", summary:`${heldCount} alert${heldCount>1?"s":""} held (quiet hours) for "${rule.name}"`, meta:{rule:rule.name, severity:rule.severity, recipients:heldCount, terms:matchedTerms}});
    }
    const sev = rule.severity==="high" ? "⚠ High-risk" : "Risk";
    if(sentCount) toast(`${sev}: “${rule.name}” — alerted ${sentCount} recipient${sentCount===1?"":"s"}`);
    if(heldCount) toast(`${heldCount} alert${heldCount===1?"":"s"} held (quiet hours)`);
  }
  function alertEntry(kind, p, rule, c, m, ctx, snippet, status, ts, terms){
    const tlist=(terms&&terms.length)?terms:[];
    const subject = `${rule.severity==="high"?"⚠ HIGH-RISK":"Risk"} flagged · ${rule.name}`;
    const body = `${ctx}\nFrom: ${senderLabelFor(c,m)}\nMatched: ${rule.name}${tlist.length?` (${tlist.map(t=>"“"+t+"”").join(", ")})`:""}\nMessage: “${snippet}”\nOpen the conversation in Credify to respond.`;
    return { id:uid("ob"), ts, kind, status, ruleId:rule.id, severity:rule.severity, terms:tlist,
      toId:p.id, toName:p.name, toAddr: kind==="email"?emailFor(p):smsFor(p),
      subject, body, conversationId:c.id, messageId:m.id, seen:false };
  }
  const emailFor = p => p.name.toLowerCase().replace(/^dr\.?\s+/,"").replace(/[^a-z]+/g,".").replace(/^\.|\.$/g,"")+"@credifyhealth.example";
  const smsFor   = p => "+1619555"+String(1000+p.id).slice(-4);
  function unseenAlerts(){ return (state.outbox||[]).filter(o=>!o.seen).length; }

  /* ----- risk-alert lifecycle: new -> acknowledged -> resolved -----
     One first-class alert per risk fire (rule match on a message, or an
     inbound Treatment Plan flag). The notification outbox above stays the
     per-recipient delivery record; this is the provider-facing work queue.
     Matrix note: at integration each alert maps to a reverse-DNS custom
     event (com.credify.risk_alert) with state transitions as follow-ups.
  */
  function createRiskAlert(o){
    const ts = o.ts||Date.now();
    const a = {
      id:uid("ra"), ts, source:o.source||"message",
      severity:o.severity==="high"?"high":"medium",
      ruleIds:(o.ruleIds||[]).slice(), ruleNames:(o.ruleNames||[]).slice(), terms:(o.terms||[]).slice(),
      conversationId:o.conversationId||null, messageId:o.messageId||null,
      contactId:o.contactId||null, patientName:o.patientName||null,
      clientId:o.clientId||null, details:o.details||"", context:o.context||"",
      snippet:o.snippet||"", notifyTargets:(o.notifyTargets||[]).slice(),
      status:"new",
      ackBy:null, ackByName:null, ackAt:null,
      resolvedBy:null, resolvedByName:null, resolvedAt:null, resolutionNote:null,
      history:[{at:ts, to:"new", by:null, byName:o.source==="treatment-plan"?"Treatment Plan":"System"}]
    };
    (state.riskAlerts = state.riskAlerts||[]).unshift(a);
    return a;
  }
  function riskAlertById(id){ return (state.riskAlerts||[]).find(a=>a.id===id); }
  function newRiskCount(){ return (state.riskAlerts||[]).filter(a=>a.status==="new").length; }
  function riskAlertLabel(a){ return a.source==="treatment-plan" ? "Treatment Plan flag" : (a.ruleNames.join(", ")||"Risk rule"); }
  // Patient-SMS audit rows for lifecycle transitions — patient-associated
  // alerts only, per the 07-01 audit-scope rule (no patient, no row);
  // internal-thread transitions still live in the alert's own history[].
  function auditRiskTransition(a, type, summary, extraMeta){
    const c = a.conversationId ? conv(a.conversationId) : null;
    const smsConv = (c && c.type==="sms") ? c : null;
    if(!smsConv && !a.patientName) return;
    logAudit(type, smsConv, Object.assign({
      patientName:a.patientName, messageId:a.messageId, channel:"risk", summary,
      meta:Object.assign({alertId:a.id, severity:a.severity, source:a.source, rules:a.ruleNames.slice()}, extraMeta||{})
    }));
  }
  function ackRiskAlert(id){
    const a=riskAlertById(id); if(!a || a.status!=="new") return false;
    const p=me(), now=Date.now();
    a.status="acknowledged"; a.ackBy=p.id; a.ackByName=p.name; a.ackAt=now;
    a.history.push({at:now, to:"acknowledged", by:p.id, byName:p.name});
    auditRiskTransition(a, "risk_acknowledged", `Risk alert acknowledged by ${p.name} — ${riskAlertLabel(a)}`);
    persist(); updateAlertsBadge();
    return true;
  }
  function resolveRiskAlert(id, note){
    const a=riskAlertById(id); if(!a || a.status!=="acknowledged") return false;
    note=String(note||"").trim(); if(!note) return false;   // resolution note is required
    const p=me(), now=Date.now();
    a.status="resolved"; a.resolvedBy=p.id; a.resolvedByName=p.name; a.resolvedAt=now; a.resolutionNote=note;
    a.history.push({at:now, to:"resolved", by:p.id, byName:p.name, note});
    auditRiskTransition(a, "risk_resolved", `Risk alert resolved by ${p.name} — ${riskAlertLabel(a)}`, {note:auditSnip(note)});
    persist(); updateAlertsBadge();
    return true;
  }

  /* =====================================================================
     SYNC STUB — owned by treatment-plan. Inbound risk intake.
     Hooks up to the Treatment Plan Builder risk-notify queue (its items
     labeled "wire to messaging backend"). Payload contract:
       { clientId:string, riskLevel:"high"|"medium", details:string,
         notifyTargets:number[] }   // provider ids from the shared roster
     Works today when called from the console; the Treatment Plan wiring
     is intentionally inert until integration. NOT A BUG.
     Matrix note: at integration this arrives as a reverse-DNS custom
     event (com.credify.risk_flag) through the bridge/appservice; the
     entry point below is the frontend seam it lands on.
  ===================================================================== */
  window.CREDIFY_MSG = window.CREDIFY_MSG || {};
  window.CREDIFY_MSG.receiveRiskFlag = function(payload){
    payload = payload||{};
    const details = String(payload.details||"").trim();
    if(!payload.clientId || !details){
      toast("Risk flag rejected — clientId and details are required");
      return {ok:false, error:"clientId and details are required"};
    }
    const severity = payload.riskLevel==="high" ? "high" : "medium";
    const ct = contact(payload.clientId) || null;
    const targets = Array.isArray(payload.notifyTargets) ? payload.notifyTargets.filter(id=>prov(id)) : [];
    const now = Date.now();
    const a = createRiskAlert({
      source:"treatment-plan", severity, ts:now,
      clientId:payload.clientId, contactId:ct?ct.id:null, patientName:ct?ct.name:null,
      details, context:"Treatment Plan · risk flag", snippet:details.slice(0,140), notifyTargets:targets
    });
    // Notify through the same outbox as rule fires — quiet hours honored,
    // high severity overrides (mirrors overrideQuiet on the high-sev rules).
    let sent=0, held=0;
    targets.forEach(pid=>{
      const p=prov(pid);
      const quiet=isProviderQuiet(pid, now);
      const willSend = severity==="high" || !quiet;
      const status = willSend ? "sent" : "held_quiet_hours";
      if(willSend) sent++; else held++;
      state.outbox.unshift({
        id:uid("ob"), ts:now, kind:"email", status, ruleId:null, severity, terms:[],
        toId:p.id, toName:p.name, toAddr:emailFor(p),
        subject:`${severity==="high"?"⚠ HIGH-RISK":"Risk"} flag · Treatment Plan`,
        body:`Treatment Plan risk flag\nClient: ${ct?ct.name:payload.clientId}\nLevel: ${severity}\nDetails: “${details.slice(0,140)}”\nOpen the Alerts panel in Credify Messaging to acknowledge.`,
        conversationId:null, messageId:null, seen:false, alertId:a.id
      });
    });
    if(ct){ // patient-associated -> patient-SMS audit trail (scope rule: no patient, no row)
      logAudit("risk_flagged", null, {patientName:ct.name, actorId:null, actorName:"Treatment Plan", channel:"risk",
        summary:`Risk flagged (${severity}) — Treatment Plan`,
        meta:{severity, source:"treatment-plan", alertId:a.id, textSnippet:auditSnip(details)}});
    }
    persist(); updateAlertsBadge();
    toast(`${severity==="high"?"⚠ High-risk":"Risk"} flag received from Treatment Plan${sent?` — alerted ${sent} recipient${sent===1?"":"s"}`:""}`);
    if(held) toast(`${held} alert${held===1?"":"s"} held (quiet hours)`);
    return {ok:true, alertId:a.id};
  };

  // === CRM integration seam =================================================
  // Clicking a provider's name routes here. When wired to Credify CRM, replace
  // the body with navigation to that provider's profile tab. Kept overridable
  // (window.openProviderProfile) and console-callable per the file's API pattern.
  window.openProviderProfile = function(providerId){
    const p = prov(providerId);
    toast((p?p.name:"Provider")+" — profile opens in Credify CRM after integration");
  };

  function fmtTime(ts){
    const d=new Date(ts);
    return d.toLocaleTimeString([], {hour:"numeric", minute:"2-digit"});
  }
  function fmtRel(ts){
    const diff=Date.now()-ts, m=60*1000, h=60*m, day=24*h;
    if(diff<m) return "now";
    if(diff<h) return Math.floor(diff/m)+"m";
    if(diff<day && new Date(ts).getDate()===new Date().getDate()) return fmtTime(ts);
    if(diff<2*day) return "Yesterday";
    if(diff<7*day) return new Date(ts).toLocaleDateString([], {weekday:"short"});
    return new Date(ts).toLocaleDateString([], {month:"short", day:"numeric"});
  }
  function dayLabel(ts){
    const d=new Date(ts), t=new Date(), y=new Date(Date.now()-864e5);
    if(d.toDateString()===t.toDateString()) return "Today";
    if(d.toDateString()===y.toDateString()) return "Yesterday";
    return d.toLocaleDateString([], {weekday:"long", month:"long", day:"numeric"});
  }
  function fmtWhen(ts){
    const d=new Date(ts), now=new Date(), tm=new Date(Date.now()+864e5);
    let day;
    if(d.toDateString()===now.toDateString()) day="Today";
    else if(d.toDateString()===tm.toDateString()) day="Tomorrow";
    else day=d.toLocaleDateString([], {weekday:"short", month:"short", day:"numeric"});
    return day+" "+fmtTime(ts);
  }
  function parseLocalDT(v){
    const m=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/.exec(v||"");
    return m ? new Date(+m[1], +m[2]-1, +m[3], +m[4], +m[5], 0, 0).getTime() : null;
  }
  function toLocalDTValue(ts){
    const d=new Date(ts), p=n=>String(n).padStart(2,"0");
    return d.getFullYear()+"-"+p(d.getMonth()+1)+"-"+p(d.getDate())+"T"+p(d.getHours())+":"+p(d.getMinutes());
  }
  function fmtBytes(b){
    if(b<1024) return b+" B";
    if(b<1048576) return (b/1024).toFixed(0)+" KB";
    return (b/1048576).toFixed(1)+" MB";
  }
  function fileExt(name){ const m=/\.([a-z0-9]+)$/i.exec(name||""); return m?m[1].toUpperCase().slice(0,4):"FILE"; }

  // SMS segmentation: GSM-7 single = 160 (153 concat); Unicode single = 70 (67 concat).
  const GSM7_BASE="@£$¥èéùìòÇ\nØø\rÅåΔ_ΦΓΛΩΠΨΣΘΞ ÆæßÉ !\"#¤%&'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑÜ§¿abcdefghijklmnopqrstuvwxyzäöñüà";
  const GSM7_EXT="^{}\\[~]|€";
  function smsSegments(text){
    text=text||"";
    if(!text) return {chars:0, segments:0, unicode:false};
    let unicode=false, len=0;
    for(const ch of text){
      if(GSM7_BASE.indexOf(ch)>=0) len+=1;
      else if(GSM7_EXT.indexOf(ch)>=0) len+=2;   // escaped chars cost two GSM-7 septets
      else { unicode=true; break; }
    }
    if(unicode){
      const cp=[...text].length;
      return {chars:cp, segments: cp<=70 ? 1 : Math.ceil(cp/67), unicode:true};
    }
    return {chars:len, segments: len<=160 ? 1 : Math.ceil(len/153), unicode:false};
  }

  function convTitle(c){
    if(c.type==="sms"){ const ct=contact(c.contactId); return ct?ct.name:"Patient"; }
    if(c.type==="group") return c.name||"Group";
    const other = c.memberIds.find(id=>id!==state.currentUserId);
    const p = prov(other); return p?p.name:"Unknown";
  }
  function convSubtitle(c){
    if(c.type==="sms"){
      const ct=contact(c.contactId);
      const a=c.assignedTo?prov(c.assignedTo):null;
      const bits=["SMS", ct?fmtPhone(ct.phone):"", a?("Assigned: "+a.name.replace(/^Dr\.\s/,"")):"Unassigned", statusLabel(c.status)];
      return bits.filter(Boolean).join(" · ");
    }
    if(c.type==="group"){
      return c.memberIds.map(id=>prov(id)?prov(id).name.replace(/^Dr\.\s/,""):"?").join(", ");
    }
    const other = prov(c.memberIds.find(id=>id!==state.currentUserId));
    if(!other) return "";
    const pres = other.presence==="online"?"Active now":other.presence==="away"?"Away":"Offline";
    return other.credential+" · "+other.role+" · "+pres;
  }
  const statusLabel = s => ({open:"Open",pending:"Pending",resolved:"Resolved"}[s]||"Open");
  function lastMsg(c){
    for(let i=c.messages.length-1;i>=0;i--){ if(!c.messages[i].deleted) return c.messages[i]; }
    return c.messages[c.messages.length-1]||null;
  }
  function previewText(m){
    if(!m) return "No messages yet";
    if(m.deleted) return "Message deleted";
    const who = isMine(m) ? "You: " : "";
    if(m.isNote) return "📝 Note: "+(m.text||"");
    if(m.deliveryStatus==="scheduled") return "🕒 Scheduled: "+(m.text || (m.attachments&&m.attachments.length?"photo":""));
    if(m.deliveryStatus==="canceled_optout") return "Scheduled text canceled (opted out)";
    if(!m.text && m.attachments && m.attachments.length) return who+"📎 "+m.attachments.length+" attachment"+(m.attachments.length>1?"s":"");
    return who+(m.text||"");
  }
  function unreadCount(c){
    return c.messages.filter(m=>!m.deleted && !isMine(m) && !m.readBy.includes(state.currentUserId)).length;
  }
  function markRead(c){
    let changed=false;
    c.messages.forEach(m=>{ if(!m.readBy.includes(state.currentUserId)){ m.readBy.push(state.currentUserId); changed=true; } });
    if(changed) persist();
    MX.receiptSync(c);
  }
  function receiptFor(c,m){
    const others = c.memberIds.filter(id=>id!==state.currentUserId);
    if(!others.length) return {label:"Sent", read:false};
    const allRead = others.every(id=>m.readBy.includes(id));
    if(allRead) return {label:c.type==="group"?"Read by all":"Read", read:true};
    const someRead = others.some(id=>m.readBy.includes(id));
    if(c.type==="group" && someRead){
      const n = others.filter(id=>m.readBy.includes(id)).length;
      return {label:"Read by "+n, read:false};
    }
    return {label:"Delivered", read:false};
  }

  /* ---------- avatars ---------- */
  function avatar(id, size){
    const p = prov(id); if(!p) return "";
    const col = AVATAR_COLORS[(id-1)%AVATAR_COLORS.length];
    return `<div class="av ${size}" style="background:${col}">${esc(initials(p.name))}<span class="pres ${p.presence}"></span></div>`;
  }
  function groupAvatar(size){
    return `<div class="av ${size} group">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#eafaf3" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    </div>`;
  }
  function smsAvatar(ct, size){
    const nm=ct?ct.name:"?";
    return `<div class="av ${size} sms">${esc(initials(nm))}<span class="sms-tag" title="SMS">SMS</span></div>`;
  }
  function convAvatar(c, size){
    if(c.type==="sms") return smsAvatar(contact(c.contactId), size);
    if(c.type==="group") return groupAvatar(size);
    const other = c.memberIds.find(id=>id!==state.currentUserId);
    return avatar(other, size);
  }

  /* =====================================================================
     RENDER
  ===================================================================== */
  function render(){ renderMe(); renderConvList(); renderStage(); updateAlertsBadge(); }

  function setSeat(id){
    if(id===state.currentUserId) return;
    if(MX.active() && !MX.canSeat(id)){ toast("Connected to Synapse as "+MX.userId()+" — sign in as that user to switch seats"); return; }
    state.currentUserId = id; persist();
    const c = conv(ui.activeId); if(c) markRead(c);
    render();
    toast("Now messaging as "+me().name);
  }

  function renderMe(){
    closeSeatMenu();
    const m = me();
    const shortName = p => p.name.replace(/^Dr\.\s/,"");
    $("#meBar").innerHTML = `
      ${avatar(m.id,"s40")}
      <div class="meta">
        <div class="nm">${esc(m.name)}</div>
        <div class="rl">${esc(m.credential)} · ${esc(m.role)}</div>
      </div>
      <div class="seatpick" id="seatPick">
        <!-- native: shown on mobile -->
        <select class="seatpick-native" id="userSwitch" title="Switch provider seat" aria-label="Switch provider seat">
          ${state.providers.map(p=>`<option value="${p.id}" ${p.id===m.id?"selected":""}>Provider ${p.id} · ${esc(shortName(p))}</option>`).join("")}
        </select>
        <!-- custom: shown on desktop -->
        <div class="seatpick-custom">
          <button type="button" class="seat-trigger" id="seatTrigger" aria-haspopup="listbox" aria-expanded="false" title="Switch provider seat">
            <span class="st-label">Provider ${m.id} · ${esc(shortName(m))}</span>
            <svg class="st-caret" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="m6 9 6 6 6-6"/></svg>
          </button>
        </div>
      </div>`;

    // native (mobile)
    $("#userSwitch").addEventListener("change", e=>setSeat(+e.target.value));

    // custom (desktop)
    const trigger = $("#seatTrigger");
    trigger.addEventListener("click", e=>{ e.stopPropagation(); toggleSeatMenu(); });
    trigger.addEventListener("keydown", e=>{
      if(e.key==="ArrowDown"||e.key==="Enter"||e.key===" "){ e.preventDefault(); openSeatMenu(); }
    });
  }

  function closeSeatMenu(){
    const pick = $("#seatPick"); if(!pick) return;
    pick.querySelector(".seat-menu")?.remove();
    $("#seatTrigger")?.setAttribute("aria-expanded","false");
    document.removeEventListener("click", seatOutside);
    document.removeEventListener("keydown", seatKeys);
  }
  function toggleSeatMenu(){
    if($("#seatPick")?.querySelector(".seat-menu")) closeSeatMenu(); else openSeatMenu();
  }
  function openSeatMenu(){
    const custom = $("#seatPick")?.querySelector(".seatpick-custom");
    if(!custom || custom.querySelector(".seat-menu")) return;
    const menu = document.createElement("div");
    menu.className = "seat-menu";
    menu.setAttribute("role","listbox");
    menu.innerHTML = `<div class="sm-head">Message as</div>` + state.providers.map(p=>{
      const active = p.id===state.currentUserId;
      return `<button type="button" class="seat-opt ${active?"active":""}" role="option" aria-selected="${active}" data-seat="${p.id}">
        ${avatar(p.id,"s28")}
        <span class="so-meta">
          <span class="so-nm">Provider ${p.id} · ${esc(p.name.replace(/^Dr\.\s/,""))}</span>
          <span class="so-rl">${esc(p.credential+" · "+p.role)}</span>
        </span>
        <svg class="so-chk" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l4 4 10-10"/></svg>
      </button>`;
    }).join("");
    custom.appendChild(menu);
    $("#seatTrigger").setAttribute("aria-expanded","true");
    menu.querySelectorAll(".seat-opt").forEach(b=>{
      b.addEventListener("click", e=>{ e.stopPropagation(); const id=+b.dataset.seat; closeSeatMenu(); setSeat(id); });
    });
    menu.querySelector(".seat-opt.active")?.focus();
    setTimeout(()=>{ document.addEventListener("click", seatOutside); document.addEventListener("keydown", seatKeys); },0);
  }
  function seatOutside(e){ if(!$("#seatPick")?.contains(e.target)) closeSeatMenu(); }
  function seatKeys(e){
    const menu = $("#seatPick")?.querySelector(".seat-menu"); if(!menu) return;
    const opts = [...menu.querySelectorAll(".seat-opt")];
    const i = opts.indexOf(document.activeElement);
    if(e.key==="Escape"){ closeSeatMenu(); $("#seatTrigger")?.focus(); }
    else if(e.key==="ArrowDown"){ e.preventDefault(); (opts[i+1]||opts[0]).focus(); }
    else if(e.key==="ArrowUp"){ e.preventDefault(); (opts[i-1]||opts[opts.length-1]).focus(); }
    else if((e.key==="Enter"||e.key===" ") && i>=0){ e.preventDefault(); opts[i].click(); }
  }

  function sortedConvs(){
    return state.conversations.filter(c=>c.type==="sms" || !MX.active() || c.mxRoomId).sort((a,b)=>{
      if(a.pinned!==b.pinned) return a.pinned?-1:1;
      return (lastMsg(b)?.ts||0)-(lastMsg(a)?.ts||0);
    });
  }
  function matchesSearch(c, q){
    if(!q) return true;
    q=q.toLowerCase();
    if(convTitle(c).toLowerCase().includes(q)) return true;
    if(c.type==="sms"){ const ct=contact(c.contactId); if(ct && fmtPhone(ct.phone).toLowerCase().includes(q)) return true; if(ct && String(ct.phone).includes(q)) return true; }
    if(c.type==="group" && c.memberIds.some(id=>prov(id)&&prov(id).name.toLowerCase().includes(q))) return true;
    return c.messages.some(m=>!m.deleted && (m.text||"").toLowerCase().includes(q));
  }

  function renderConvList(){
    const q = ui.search.trim();
    const el = $("#convList");
    if(q || ui.searchLoc){ renderSearchResults(el, q); return; }
    const list = sortedConvs().filter(c=>matchesSearch(c,q));
    if(!list.length){
      el.innerHTML = `<div style="padding:20px 12px;color:#7fab9a;font-size:12.5px;text-align:center">No conversations match “${esc(q)}”.</div>`;
      return;
    }
    el.innerHTML = list.map(c=>{
      const lm = lastMsg(c), un = unreadCount(c);
      return `<div class="conv ${c.id===ui.activeId?"active":""} ${un?"unread":""}" data-id="${c.id}">
        ${convAvatar(c,"s40")}
        <div class="ctext">
          <div class="crow">
            ${c.pinned?'<span class="pin-dot" title="Pinned">●</span>':""}
            ${c.dynamic?'<span class="smart-ind" title="Smart group — auto-updating"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.7 4.4A9 9 0 0 0 20.5 15"/></svg></span>':""}
            <span class="cname">${esc(convTitle(c))}</span>
            <span class="ctime">${lm?fmtRel(lm.ts):""}</span>
          </div>
          <div class="cprev">${esc(previewText(lm))}</div>
        </div>
        ${un?`<span class="badge">${un}</span>`:""}
      </div>`;
    }).join("");
    el.querySelectorAll(".conv").forEach(n=>n.addEventListener("click",()=>openConv(n.dataset.id)));
  }

  function renderSearchResults(el, q){
    const ql=q.toLowerCase(), loc=ui.searchLoc, me=state.currentUserId;
    const pin=`<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="2.5"/></svg>`;
    // People (all providers; start a DM even if none exists)
    let people=state.providers.filter(p=>p.id!==me);
    if(loc) people=people.filter(p=>p.location===loc);
    if(ql) people=people.filter(p=>provHay(p).includes(ql));
    // Groups
    let groups=state.conversations.filter(c=>c.type==="group");
    if(loc) groups=groups.filter(c=>c.memberIds.some(id=>prov(id)&&prov(id).location===loc));
    if(ql) groups=groups.filter(c=>(c.name||"").toLowerCase().includes(ql) || c.memberIds.some(id=>prov(id)&&prov(id).name.toLowerCase().includes(ql)));
    // Locations (refinement chips) — only while typing, before one is chosen
    let locs=[];
    if(ql && !loc) locs=(state.practice.locations||[]).filter(L=>L.toLowerCase().includes(ql));
    // Chats & messages (preserve patient/phone/message-text reach) — only with a text query
    const peopleIds=new Set(people.map(p=>p.id)), groupIds=new Set(groups.map(c=>c.id));
    let chats=[];
    if(ql){
      chats=sortedConvs().filter(c=>{
        if(groupIds.has(c.id)) return false;
        if(c.type==="dm"){ const other=c.memberIds.find(id=>id!==me); if(peopleIds.has(other)) return false; }
        if(c.type==="sms"){ const ct=contact(c.contactId); if(ct && ((ct.name||"").toLowerCase().includes(ql) || fmtPhone(ct.phone).toLowerCase().includes(ql) || String(ct.phone).includes(ql))) return true; }
        return c.messages.some(m=>!m.deleted && (m.text||"").toLowerCase().includes(ql));
      });
    }

    const personRow=p=>{
      const hasDm=state.conversations.some(c=>c.type==="dm"&&c.memberIds.includes(p.id)&&c.memberIds.includes(me));
      return `<div class="sr-row" data-dm="${p.id}">${avatar(p.id,"s36")}
        <div class="sr-meta"><div class="sr-nm">${esc(p.name)}</div><div class="sr-sub">${esc([p.role,p.location].filter(Boolean).join(" · "))}</div></div>
        <span class="sr-tag ${hasDm?"chat":"new"}">${hasDm?"Chat":"New"}</span></div>`;
    };
    const convRow=c=>{ const lm=lastMsg(c); return `<div class="sr-row" data-open="${c.id}">${convAvatar(c,"s36")}
      <div class="sr-meta"><div class="sr-nm">${esc(convTitle(c))}</div><div class="sr-sub">${esc(c.type==="group"?(c.memberIds.length+" member"+(c.memberIds.length===1?"":"s")+(c.dynamic?" · Smart":"")):previewText(lm))}</div></div></div>`; };

    let html="";
    if(loc) html+=`<div class="sr-active">${pin} ${esc(loc)} <button data-clrloc title="Clear location filter">✕</button></div>`;
    if(locs.length) html+=`<div class="sr-sec"><div class="sr-h">Locations</div><div class="sr-chips">`+locs.map(L=>`<button class="sr-loc" data-loc="${esc(L)}">${pin} ${esc(L)} <span class="sr-locn">${state.providers.filter(p=>p.location===L).length}</span></button>`).join("")+`</div></div>`;
    if(people.length) html+=`<div class="sr-sec"><div class="sr-h">People${loc?" here":""}</div>`+people.map(personRow).join("")+`</div>`;
    if(groups.length) html+=`<div class="sr-sec"><div class="sr-h">Groups</div>`+groups.map(convRow).join("")+`</div>`;
    if(chats.length) html+=`<div class="sr-sec"><div class="sr-h">Chats &amp; messages</div>`+chats.map(convRow).join("")+`</div>`;

    if(!people.length && !groups.length && !chats.length && !locs.length){
      html += `<div class="sr-empty">${loc?`No people or groups at ${esc(loc)}.`:`No matches for “${esc(q)}”.`}</div>`;
    }
    el.innerHTML=html;
    el.querySelectorAll("[data-dm]").forEach(n=>n.addEventListener("click",()=>{ const ex=findOrStartDM(+n.dataset.dm); if(ex){ exitSearch(); openConv(ex.id); } }));
    el.querySelectorAll("[data-open]").forEach(n=>n.addEventListener("click",()=>{ exitSearch(); openConv(n.dataset.open); }));
    el.querySelectorAll("[data-loc]").forEach(n=>n.addEventListener("click",()=>{ ui.searchLoc=n.dataset.loc; ui.search=""; const si=$("#searchInput"); if(si) si.value=""; renderConvList(); }));
    el.querySelector("[data-clrloc]")?.addEventListener("click",()=>{ ui.searchLoc=null; renderConvList(); });
  }

  function openConv(id){
    ui.activeId=id; ui.reply=null; ui.draftAtts=[]; ui.smsDraftMedia=[]; ui.emojiFor=null; ui.smsNote=false;
    const c = conv(id); if(c) markRead(c);
    releaseDueScheduled();
    document.getElementById("app").classList.add("in-thread");
    render();
    requestAnimationFrame(scrollToBottom);
  }

  // ----- unified search helpers -----
  function provHay(p){ return [p.name,p.credential,p.role,p.title,p.location].filter(Boolean).join(" ").toLowerCase(); }
  function findOrStartDM(pid){
    let ex=state.conversations.find(c=>c.type==="dm"&&c.memberIds.includes(pid)&&c.memberIds.includes(state.currentUserId)&&(!MX.active()||c.mxRoomId));
    if(ex) return ex;
    if(MX.active()){ MX.createDM(pid); return null; }   // async: opens on room create
    ex={id:uid("c"),type:"dm",name:null,memberIds:[state.currentUserId,pid],createdBy:state.currentUserId,pinned:false,messages:[]}; state.conversations.push(ex); persist();
    return ex;
  }
  function exitSearch(){ ui.search=""; ui.searchLoc=null; const si=$("#searchInput"); if(si) si.value=""; }

  function renderStage(){
    const stage = $("#stage");
    const c = conv(ui.activeId);
    if(!c){
      stage.innerHTML = `<div class="thread"><div class="thead thead-empty"><span style="flex:1"></span>
        <button class="icobtn alerts-btn" id="alertsBtn" title="Risk alerts & notification outbox"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="alerts-count" id="alertsCount" style="display:none">0</span></button>
      </div><div class="empty">
        <div class="eill"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
        <h3>Your conversations live here</h3>
        <p>Pick a provider or group on the left, or start something new with the + button.</p>
      </div></div>`;
      $("#alertsBtn")?.addEventListener("click",openAlerts);
      updateAlertsBadge();
      return;
    }
    stage.innerHTML = `
      <div class="thread">
        <div class="thead">
          <button class="icobtn backbtn" id="backBtn" title="Back"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="m15 18-6-6 6-6"/></svg></button>
          ${convAvatar(c,"s40")}
          <div class="ti">
            <div class="tn">${c.type!=="group"&&c.type!=="sms"?`<button type="button" class="tn-link" data-profile="${c.memberIds.find(id=>id!==state.currentUserId)}">${esc(convTitle(c))}</button>`:esc(convTitle(c))}</div>
            <div class="ts">${esc(convSubtitle(c))}</div>
          </div>
          ${c.type==="sms"?`<button class="sync-chip" id="openChartBtn" data-sync-owner="ehr" title="Open this patient's chart in Credify EHR (after integration)">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 11v6M9 14h6"/></svg>
            Chart
          </button>
          <button class="sync-chip" id="openContactBtn" data-sync-owner="crm" title="Open this contact in Credify CRM (after integration)">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Contact
          </button>`:""}
          ${c.contactId&&c.mxRoomId?`<a class="sync-chip" href="https://ehr.credifyfast.com/?contact=${encodeURIComponent(c.contactId)}" target="_blank" rel="noreferrer" title="Open this client's chart in Credify EHR">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 11v6M9 14h6"/></svg>
            Chart
          </a>`:""}
          <button class="icobtn ${c.pinned?"on":""}" id="pinConvBtn" title="${c.pinned?"Unpin conversation":"Pin conversation"}">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="${c.pinned?"currentColor":"none"}" stroke="currentColor" stroke-width="2"><path d="M12 17v5M9 10.76V7a3 3 0 0 1 6 0v3.76a2 2 0 0 0 .59 1.42L17 13.5H7l1.41-1.32A2 2 0 0 0 9 10.76Z"/></svg>
          </button>
          ${c.type==="sms"?`<button class="icobtn" id="simInbound" title="Simulate inbound text (demo)">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10h11M3 6h17M3 14h7M3 18h11"/><path d="M16 16l4 4 4-4"/></svg>
          </button>`:""}
          <button class="icobtn alerts-btn" id="alertsBtn" title="Risk alerts & notification outbox">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
            <span class="alerts-count" id="alertsCount" style="display:none">0</span>
          </button>
          <button class="icobtn ${ui.panelOpen?"on":""}" id="infoBtn" title="Details">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>
          </button>
        </div>

        <div class="scroller" id="scroller">
          <div class="msgs" id="msgs">${renderMessages(c)}</div>
          ${renderTyping(c)}
        </div>

        ${renderComposer(c)}
      </div>
      ${renderPanel(c)}
    `;
    wireStage(c);
    updateAlertsBadge();
    requestAnimationFrame(scrollToBottom);
  }

  function renderMessages(c){
    if(!c.messages.length){
      const who = c.type==="sms" ? (contact(c.contactId)?.name||"this patient") : convTitle(c);
      return `<div class="empty" style="padding:30px 0"><p>No messages yet — ${c.type==="sms"?"start the conversation with":"say hello to"} ${esc(who)}.</p></div>`;
    }
    if(c.type==="sms") return renderSmsMessages(c);
    let html="", lastDay="", lastSender=null;
    c.messages.forEach((m,i)=>{
      const dl = dayLabel(m.ts);
      if(dl!==lastDay){ html+=`<div class="daysep"><span>${dl}</span></div>`; lastDay=dl; lastSender=null; }
      const mine = isMine(m);
      const first = m.senderId!==lastSender;
      lastSender=m.senderId;
      html += renderMsg(c,m,mine,first);
    });
    return html;
  }

  function deliveryChip(m){
    const map={ queued:["Queued","q"], sent:["Sent","s"], delivered:["Delivered","d"], failed:["Failed","f"], received:["",""] };
    const [label,k]=map[m.deliveryStatus]||["",""];
    if(!label) return "";
    const icon = m.deliveryStatus==="failed"
      ? `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>`
      : m.deliveryStatus==="delivered"
        ? `<svg width="13" height="10" viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l3.5 3.5L11 3"/><path d="M7 9l1 1L17 1"/></svg>`
        : `<svg width="11" height="9" viewBox="0 0 14 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l3.5 3.5L12 2"/></svg>`;
    return `<span class="receipt ${m.deliveryStatus}">${icon} ${esc(label)}</span>`;
  }

  function riskBanner(m){
    if(!m.flags || !m.flags.length) return "";
    const names=m.flags.map(id=>ruleById(id)?.name).filter(Boolean).join(", ");
    const terms=(m.riskTerms||[]).slice(0,4);
    const hi=m.risk==="high";
    return `<div class="risk-banner ${hi?"high":"med"}">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>
      Flagged: ${esc(names)}${terms.length?`<span class="risk-terms"> · ${esc(terms.map(t=>"“"+t+"”").join(", "))}</span>`:""}
    </div>`;
  }

  function renderSmsMessages(c){
    const ct=contact(c.contactId);
    let html="", lastDay="";
    c.messages.forEach(m=>{
      const dl=dayLabel(m.ts);
      if(dl!==lastDay){ html+=`<div class="daysep"><span>${dl}</span></div>`; lastDay=dl; }
      const smsMedia = (m.attachments&&m.attachments.length)?`<div class="atts">`+m.attachments.map(a=>`<img class="att-img" src="${a.dataUrl}" alt="${esc(a.name)}" data-lb="${esc(a.dataUrl)}" />`).join("")+`</div>`:"";
      const smsBody = m.text?`<span class="txt">${linkify(esc(m.text))}</span>`:"";
      if(m.isNote){
        const a=prov(m.authorId);
        html+=`<div class="note-row">
          <div class="note">${riskBanner(m)}
            <div class="note-h"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z"/></svg> Internal note · ${esc(a?a.name:"Staff")} · not sent to patient</div>
            <div class="txt">${linkify(esc(m.text))}</div>
          </div>
        </div>`;
        return;
      }
      if(m.deliveryStatus==="canceled_optout"){
        html+=`<div class="sched-cancel-note"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M5 5l14 14"/></svg> Scheduled text not sent — ${esc(ct?ct.name:"patient")} opted out (STOP).${m.text?` “${esc(m.text)}”`:""}</div>`;
        return;
      }
      if(m.deliveryStatus==="scheduled"){
        const bumped = m.scheduleKind==="manual" && m.chosenAt && m.chosenAt!==m.releaseAt;
        const label = m.scheduleKind==="quiet"
          ? "Quiet hours · sends "+fmtWhen(m.releaseAt)
          : (bumped ? "Scheduled "+fmtWhen(m.chosenAt)+" · quiet hours, sends "+fmtWhen(m.releaseAt)
                     : "Scheduled · "+fmtWhen(m.releaseAt));
        html+=`<div class="row me sms sched-row" data-mid="${m.id}">
          <div class="avwrap"></div>
          <div class="stack">
            <div class="bubble sched">
              <div class="sched-chip ${(m.scheduleKind==="quiet"||bumped)?"quiet":""}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> ${esc(label)}</div>
              ${smsBody}${smsMedia}
              <div class="sched-acts">
                <button data-sendnow="${m.id}">Send now</button>
                <button data-cancelsched="${m.id}">Cancel</button>
              </div>
            </div>
          </div>
        </div>`;
        return;
      }
      const out = m.direction==="out";
      const author = prov(m.authorId);
      html+=`<div class="row ${out?"me":""} sms" data-mid="${m.id}">
        <div class="avwrap">${!out?smsAvatar(ct,"s34"):""}</div>
        <div class="stack">
          ${!out?`<div class="who">${esc(ct?ct.name:"Patient")}</div>`:""}
          <div class="bubble ${out?"":"first"}">${riskBanner(m)}${smsBody}${smsMedia}</div>
          <div class="meta-line">
            <span>${fmtTime(m.ts)}</span>
            ${out?deliveryChip(m):""}
            ${out&&author?`<span class="via">via ${esc(author.name.replace(/^Dr\.\s/,""))}</span>`:""}
          </div>
        </div>
      </div>`;
    });
    return html;
  }

  function renderMsg(c,m,mine,first){
    const p = prov(m.senderId);
    const showName = c.type==="group" && !mine && first;
    let inner="";

    if(m.deleted){
      inner = `<div class="bubble del"><span class="txt">This message was deleted</span></div>`;
      return wrapRow(c,m,mine,first,p,showName,inner,true);
    }

    // reply quote
    let quote="";
    if(m.replyTo){
      const rm = c.messages.find(x=>x.id===m.replyTo);
      if(rm){
        const rwho = rm.senderId===state.currentUserId?"You":(prov(rm.senderId)?.name||"Unknown");
        const rtx = rm.deleted?"deleted message":(rm.text|| (rm.attachments.length?"📎 attachment":""));
        quote = `<div class="reply-quote"><div class="rq-who">${esc(rwho)}</div><div class="rq-tx">${esc(rtx)}</div></div>`;
      }
    }

    // attachments
    let atts="";
    if(m.attachments.length){
      atts = `<div class="atts">`+m.attachments.map(a=>{
        if(a.type && a.type.startsWith("image/") && a.dataUrl){
          return `<img class="att-img" src="${a.dataUrl}" alt="${esc(a.name)}" data-lb="${esc(a.dataUrl)}" />`;
        }
        const href = a.dataUrl||"#";
        return `<a class="att-file" href="${href}" ${a.dataUrl?`download="${esc(a.name)}"`:'onclick="return false"'}>
          <span class="fi">${esc(fileExt(a.name))}</span>
          <span class="fmeta"><span class="fnm">${esc(a.name)}</span><span class="fsz">${fmtBytes(a.size||0)}</span></span>
        </a>`;
      }).join("")+`</div>`;
    }

    const txt = m.text ? `<span class="txt">${linkify(esc(m.text))}</span>${m.edited?'<span class="edited">(edited)</span>':""}` : (m.edited?'<span class="edited">(edited)</span>':"");
    inner = `<div class="bubble ${first?"first":""}">
      ${m.pinned?'<span class="pin-flag"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>Pinned</span>':""}
      ${riskBanner(m)}${quote}${txt}${atts}
      ${renderActions(c,m,mine)}
    </div>`;

    return wrapRow(c,m,mine,first,p,showName,inner,false);
  }

  function wrapRow(c,m,mine,first,p,showName,inner,isDel){
    const reacts = renderReacts(c,m);
    let meta="";
    if(!isDel){
      const r = mine?receiptFor(c,m):null;
      meta = `<div class="meta-line">
        <span>${fmtTime(m.ts)}</span>
        ${mine&&r?`<span class="receipt ${r.read?"read":""}">${receiptIcon(r.read)} ${esc(r.label)}</span>`:""}
      </div>`;
    }
    return `<div class="row ${mine?"me":""}" data-mid="${m.id}">
      <div class="avwrap">${(!mine&&first&&!isDel)?avatar(m.senderId,"s34"):(!mine&&first&&isDel?avatar(m.senderId,"s34"):"")}</div>
      <div class="stack">
        ${showName?`<div class="who">${esc(p?p.name:"")}</div>`:""}
        ${inner}
        ${reacts}
        ${meta}
      </div>
    </div>`;
  }

  function receiptIcon(read){
    return read
      ? `<svg width="14" height="11" viewBox="0 0 18 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l3.5 3.5L11 3"/><path d="M7 9l1 1L17 1"/></svg>`
      : `<svg width="11" height="11" viewBox="0 0 14 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l3.5 3.5L12 2"/></svg>`;
  }

  function renderReacts(c,m){
    const keys=Object.keys(m.reactions||{}).filter(k=>m.reactions[k]&&m.reactions[k].length);
    if(!keys.length) return "";
    return `<div class="reacts">`+keys.map(k=>{
      const ids=m.reactions[k], mine=ids.includes(state.currentUserId);
      const who=ids.map(id=>id===state.currentUserId?"You":(prov(id)?.name.replace(/^Dr\.\s/,"")||"?")).join(", ");
      return `<button class="react ${mine?"mine":""}" data-react="${k}" data-mid="${m.id}" title="${esc(who)}">${k} <span class="rc">${ids.length}</span></button>`;
    }).join("")+`</div>`;
  }

  function renderActions(c,m,mine){
    return `<div class="actions">
      <button data-act="react" title="React">🙂</button>
      <button data-act="reply" title="Reply"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 17l-5-5 5-5"/><path d="M4 12h11a5 5 0 0 1 5 5v1"/></svg></button>
      <button data-act="pin" title="${m.pinned?"Unpin":"Pin"}"><svg width="13" height="13" viewBox="0 0 24 24" fill="${m.pinned?"currentColor":"none"}" stroke="currentColor" stroke-width="2"><path d="M12 17v5M9 10.76V7a3 3 0 0 1 6 0v3.76a2 2 0 0 0 .59 1.42L17 13.5H7l1.41-1.32A2 2 0 0 0 9 10.76Z"/></svg></button>
      ${mine?`<button data-act="edit" title="Edit"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
      <button data-act="del" title="Delete"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg></button>`:""}
    </div>`;
  }

  function renderTyping(c){
    if(c.type!=="dm" || !c.memberIds) return "";
    const other = prov(c.memberIds.find(id=>id!==state.currentUserId && prov(id) && prov(id).presence==="online"));
    if(!other || c.__typing!==true) return "";
    return `<div class="typing">${avatar(other.id,"s28")}<div class="dots"><i></i><i></i><i></i></div></div>`;
  }

  function renderComposer(c){
    if(c.type==="sms") return renderSmsComposer(c);
    const replying = ui.reply ? c.messages.find(m=>m.id===ui.reply) : null;
    const hasAtt = ui.draftAtts.length>0;
    let replyBar="";
    if(replying){
      const who = replying.senderId===state.currentUserId?"You":(prov(replying.senderId)?.name||"Unknown");
      const tx = replying.text||(replying.attachments.length?"📎 attachment":"");
      replyBar=`<div class="reply-bar"><div><span class="rb-who">Replying to ${esc(who)}</span></div><div class="rb-tx">${esc(tx)}</div><button id="cancelReply" title="Cancel">×</button></div>`;
    }
    let tray="";
    if(hasAtt){
      tray=`<div class="att-tray">`+ui.draftAtts.map((a,i)=>{
        const thumb=a.type&&a.type.startsWith("image/")&&a.dataUrl?`<img src="${a.dataUrl}" alt=""/>`:`<span class="ci">${esc(fileExt(a.name))}</span>`;
        return `<div class="att-chip">${thumb}<span class="cn">${esc(a.name)}</span><button data-rmatt="${i}" title="Remove">×</button></div>`;
      }).join("")+`</div>`;
    }
    return `<div class="composer"><div class="composer-inner">
      ${replyBar}
      ${tray}
      <div class="inbar ${replying?"replying":""} ${hasAtt?"hasatt":""}">
        <button class="clipbtn" id="clipBtn" title="Attach files"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a5 5 0 0 1-7.07-7.07l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button>
        <textarea id="msgInput" rows="1" placeholder="Message ${esc(convTitle(c))}…"></textarea>
        <button class="sendbtn" id="sendBtn" title="Send" disabled><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg></button>
      </div>
    </div></div>`;
  }

  function renderSmsComposer(c){
    const ct=contact(c.contactId);
    const note = ui.smsNote===true;
    const optedOut = ct && ct.consent==="opted_out";
    if(optedOut && !note){
      return `<div class="composer"><div class="composer-inner">
        <div class="optout-bar">
          <div><b>${esc(ct.name)} has opted out of texts (STOP).</b> You can't send SMS until they re-consent. You can still add internal notes.</div>
          <div style="display:flex;gap:8px;margin-top:9px">
            <button class="btn" id="noteOnly">Add internal note</button>
            <button class="btn primary" id="reconsent">Mark re-consented</button>
          </div>
        </div>
      </div></div>`;
    }
    const hasMedia = !note && ui.smsDraftMedia.length>0;
    let tray="";
    if(hasMedia){
      tray=`<div class="att-tray">`+ui.smsDraftMedia.map((a,i)=>`<div class="att-chip"><img src="${a.dataUrl}" alt=""/><span class="cn">${esc(a.name)}</span><button data-rmsms="${i}" title="Remove">×</button></div>`).join("")+`</div>`;
    }
    const tpls = (state.practice.smsTemplates||[]);
    return `<div class="composer"><div class="composer-inner">
      <div class="note-toggle ${note?"on":""}" id="noteToggle" title="Toggle internal note">
        <span class="ntdot"></span>
        <span>${note?"Internal note — not sent to patient":"Texting "+esc(ct?ct.name:"patient")+" · tap to switch to internal note"}</span>
      </div>
      ${tray}
      <div class="tpl-pop-wrap">
        <div class="inbar ${note?"notemode":""} ${hasMedia?"hasatt":""}">
          ${!note?`<button class="clipbtn" id="smsClipBtn" title="Attach image"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2.5"/><circle cx="8.5" cy="8.5" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg></button>`:""}
          ${!note?`<button class="tplbtn" id="smsTplBtn" title="SMS templates"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M7 7h10M7 11h6"/></svg></button>`:""}
          <textarea id="msgInput" rows="1" placeholder="${note?"Write an internal note…":"Text "+esc(ct?ct.name:"patient")+"…"}"></textarea>
          ${!note?`<button class="clipbtn" id="smsSchedBtn" title="Schedule send"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></button>`:""}
          <button class="sendbtn" id="sendBtn" title="${note?"Save note":"Send text"}" ${hasMedia?"":"disabled"}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg></button>
        </div>
      </div>
      ${!note?`<div class="sms-counter" id="smsCounter"></div>`:""}
    </div></div>`;
  }

  function renderPanel(c){
    if(c.type==="sms") return renderSmsPanel(c);
    const pinned = c.messages.filter(m=>m.pinned && !m.deleted);
    const imgs = [];
    c.messages.forEach(m=>m.attachments.forEach(a=>{ if(a.type&&a.type.startsWith("image/")&&a.dataUrl) imgs.push(a); }));
    const isGroup = c.type==="group";
    const headAv = isGroup?groupAvatar("s44"):convAvatar(c,"s44");
    let head;
    if(isGroup){
      const smartBadge = c.dynamic ? ` <span class="smart-badge"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.7 4.4A9 9 0 0 0 20.5 15"/></svg> Smart</span>` : "";
      head = `${headAv}<div class="pn">${esc(c.name)}${smartBadge}</div><div class="pr">${c.memberIds.length} members${c.dynamic?" · auto-updating":""}</div>`;
    }else{
      const o=prov(c.memberIds.find(id=>id!==state.currentUserId));
      const line2 = o ? [o.credential, o.role].filter(Boolean).join(" · ") : "";
      const chips = o ? `<div style="display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:8px">
        ${o.title?`<span class="attr-chip">${esc(o.title)}</span>`:""}
        ${o.location?`<span class="attr-chip muted">${esc(o.location)}</span>`:""}
      </div>` : "";
      head = `${headAv}<div class="pn"><button type="button" class="pn-link" data-profile="${o?o.id:""}">${esc(o?o.name:"")}</button></div><div class="pr">${esc(line2)}</div>${chips}`;
    }

    return `<aside class="panel ${ui.panelOpen?"":"hidden"} ${ui.panelOpen?"force":""}" id="panel">
      <button class="panel-x" id="panelClose" title="Close details" aria-label="Close details">×</button>
      <div class="ph">${head}</div>

      ${isGroup && c.dynamic ? `<div class="psec">
        <h4>Auto-updating filter</h4>
        <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px">${filterChips(c.filter)||'<span style="font-size:12px;color:var(--muted)">No criteria</span>'}</div>
        <div style="font-size:11.5px;color:var(--muted);margin-bottom:11px;line-height:1.5">Members are kept in sync automatically as providers are reassigned in Practice setup.</div>
        <button class="pbtn" id="editFilterBtn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg> Edit filter</button>
        <button class="pbtn" id="convertManualBtn" style="margin-top:8px"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> Convert to manual list</button>
      </div>`:""}

      ${isGroup?`<div class="psec">
        <h4>Members</h4>
        ${c.memberIds.map(id=>{
          const p=prov(id); if(!p) return "";
          const isMe=id===state.currentUserId, canRemove=!isMe && !c.dynamic;
          return `<div class="pmember">${avatar(id,"s34")}
            <div class="pm-meta">
              <div class="pm-nm">${esc(p.name)}</div>
              <div class="pm-rl">${esc([p.credential,p.role].filter(Boolean).join(" · "))}</div>
              ${(p.title||p.location)?`<div class="pm-attrs">${p.title?`<span class="attr-chip">${esc(p.title)}</span>`:""}${p.location?`<span class="attr-chip muted">${esc(p.location)}</span>`:""}</div>`:""}
            </div>
            ${isMe?'<span class="youtag">You</span>':(canRemove?`<button class="pm-x" data-removemem="${id}" title="Remove from group">×</button>`:"")}
          </div>`;
        }).join("")}
        ${c.dynamic?"":`<button class="pbtn" id="addMemBtn" style="margin-top:8px"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg> Add members</button>`}
      </div>`:""}

      <div class="psec">
        <h4>Pinned messages</h4>
        ${pinned.length?pinned.map(m=>{
          const who=m.senderId===state.currentUserId?"You":(prov(m.senderId)?.name||"?");
          const tx=m.text||(m.attachments.length?"📎 attachment":"");
          return `<div class="pinned-msg" data-jump="${m.id}"><span class="pm-w">${esc(who)}</span><span class="pm-t">${esc(tx)}</span></div>`;
        }).join(""):'<div style="font-size:12.5px;color:var(--muted)">No pinned messages yet. Hover a message and use the pin to keep it here.</div>'}
      </div>

      ${imgs.length?`<div class="psec">
        <h4>Shared images (${imgs.length})</h4>
        <div class="att-grid">${imgs.slice(0,9).map(a=>`<img src="${a.dataUrl}" alt="${esc(a.name)}" data-lb="${esc(a.dataUrl)}"/>`).join("")}</div>
      </div>`:""}

      <div class="psec">
        ${isGroup?`<button class="pbtn" id="renameGrpBtn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg> Rename group</button>
        <button class="pbtn danger" id="leaveGrpBtn" style="margin-top:8px"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg> Leave group</button>`:""}
      </div>
    </aside>`;
  }

  function renderSmsPanel(c){
    const ct=contact(c.contactId);
    const consent = ct?ct.consent:"pending";
    const consentChip = consent==="opted_in" ? `<span class="consent-chip ok">Opted in</span>`
      : consent==="opted_out" ? `<span class="consent-chip out">Opted out (STOP)</span>`
      : `<span class="consent-chip pend">Consent pending</span>`;
    const flagged = c.messages.filter(m=>m.flags&&m.flags.length).length;
    const STAT=[["open","Open"],["pending","Pending"],["resolved","Resolved"]];
    return `<aside class="panel ${ui.panelOpen?"":"hidden"} ${ui.panelOpen?"force":""}" id="panel">
      <button class="panel-x" id="panelClose" title="Close details" aria-label="Close details">×</button>
      <div class="ph">${smsAvatar(ct,"s44")}<div class="pn">${esc(ct?ct.name:"Patient")}</div><div class="pr">${esc(ct?fmtPhone(ct.phone):"")}</div>
        <div style="margin-top:9px">${consentChip}</div>
        <div class="crm-sync-cap" data-sync-owner="crm" title="Name, phone, tags and consent flags are owned by the CRM shared roster (STATE.contacts)">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.7 4.4A9 9 0 0 0 20.5 15"/></svg>
          Synced from CRM · <button class="linklike" id="openCrmContact" data-sync-owner="crm">Open in CRM</button>
        </div>
      </div>

      <div class="psec">
        <h4>Consent (TCPA)</h4>
        <div style="font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.5">Texting requires opt-in. Inbound “STOP” opts out automatically; “START” opts back in.</div>
        ${consent==="opted_out"
          ? `<button class="pbtn" id="consentToggle"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> Mark re-consented (opt in)</button>`
          : `<button class="pbtn danger" id="consentToggle"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M5 5l14 14"/></svg> Mark opted out (STOP)</button>`}
      </div>

      <div class="psec">
        <h4>Next appointment</h4>
        ${ct && ct.nextAppt
          ? `<div style="font-size:13px;color:var(--ink);font-weight:600">${esc(fmtWhen(new Date(ct.nextAppt.startISO).getTime()))}</div>
             <div style="display:flex;gap:7px;margin-top:9px">
               <button class="pbtn" id="apptChangeBtn" style="flex:1">Change</button>
               <button class="pbtn danger" id="apptClearBtn" style="flex:1">Clear</button>
             </div>
             ${(()=>{ const pending=c.messages.filter(m=>m.deliveryStatus==="scheduled"&&m.apptReminder).sort((a,b)=>a.releaseAt-b.releaseAt);
               return pending.length ? `<div style="display:flex;flex-direction:column;gap:5px;margin-top:9px">${pending.map(m=>
                 `<div style="font-size:11.5px;color:var(--muted)">🕒 ${esc(fmtWhen(m.releaseAt))} <span style="color:var(--pine)">(${esc(apptOffsetLabel(m.apptOffset))})</span></div>`).join("")}</div>` : "";
             })()}`
          : `<button class="pbtn" id="apptSetBtn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></svg> Set next appointment</button>`}
        <div class="sync-note" data-sync-owner="calendar" style="margin-top:10px">Feeds from Credify Calendar after integration.</div>
      </div>

      <div class="psec">
        <h4>Assigned to</h4>
        <select class="ppick" id="assignSel">
          <option value="">Unassigned</option>
          ${state.providers.map(p=>`<option value="${p.id}" ${c.assignedTo===p.id?"selected":""}>${esc(p.name)}</option>`).join("")}
        </select>
      </div>

      <div class="psec">
        <h4>Status</h4>
        <div class="seg" id="statusSeg">
          ${STAT.map(([k,l])=>`<button data-status="${k}" class="${c.status===k?"on":""}">${l}</button>`).join("")}
        </div>
      </div>

      <div class="psec">
        <h4>Safety</h4>
        <div style="font-size:12.5px;color:var(--slate);margin-bottom:10px">${flagged?`<b style="color:var(--danger)">${flagged}</b> flagged message${flagged===1?"":"s"} in this thread.`:"No flagged messages."}</div>
        <button class="pbtn" id="threadAudit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg> View audit log</button>
      </div>

      <div class="psec">
        <div style="font-size:11px;color:var(--muted);line-height:1.55">Scaffold note: in production, SMS bodies stay non-PHI (carriers aren't under BAA). Detailed clinical content belongs in the secure portal; texts carry reminders and “you have a secure message” nudges.</div>
      </div>
    </aside>`;
  }

  function linkify(s){
    return s.replace(/(https?:\/\/[^\s<]+)/g, m=>`<a href="${m}" target="_blank" rel="noopener" style="color:var(--mint-600)">${m}</a>`);
  }

  /* =====================================================================
     WIRING
  ===================================================================== */
  function wireStage(c){
    $("#backBtn")?.addEventListener("click",()=>{ document.getElementById("app").classList.remove("in-thread"); });
    $("#alertsBtn")?.addEventListener("click",openAlerts);
    $("#infoBtn")?.addEventListener("click",()=>{ ui.panelOpen=!ui.panelOpen; renderStage(); });
    $("#panelClose")?.addEventListener("click",()=>{ ui.panelOpen=false; renderStage(); });
    $("#panel")?.querySelector(".pn-link")?.addEventListener("click",e=>{ const id=+e.currentTarget.dataset.profile; if(id) window.openProviderProfile(id); });
    $(".thead")?.querySelector(".tn-link")?.addEventListener("click",e=>{ const id=+e.currentTarget.dataset.profile; if(id) window.openProviderProfile(id); });
    $("#pinConvBtn")?.addEventListener("click",()=>{ c.pinned=!c.pinned; persist(); toast(c.pinned?"Conversation pinned":"Conversation unpinned"); render(); });

    // composer
    const input=$("#msgInput"), sendBtn=$("#sendBtn");
    const smsCounter=$("#smsCounter");
    const refreshSmsCounter=()=>{
      if(!smsCounter||!input) return;
      const {chars,segments,unicode}=smsSegments(input.value);
      smsCounter.textContent = chars+" char"+(chars===1?"":"s")+" · "+segments+" SMS"+(unicode&&chars?" · Unicode":"");
      smsCounter.classList.toggle("multi", segments>1);
    };
    if(input){
      autoGrow(input);
      input.addEventListener("input",()=>{ autoGrow(input); sendBtn.disabled = !input.value.trim() && !ui.draftAtts.length && !(ui.smsNote!==true && ui.smsDraftMedia.length>0); refreshSmsCounter(); MX.noteTyping(c); });
      input.addEventListener("keydown",e=>{
        if(e.key==="Enter" && !e.shiftKey){ e.preventDefault(); sendMessage(c); }
      });
      if($("#scrim").classList.contains("hidden")) input.focus();
      refreshSmsCounter();
    }
    sendBtn?.addEventListener("click",()=>sendMessage(c));
    $("#clipBtn")?.addEventListener("click",()=>openFilePicker(c));
    $("#smsClipBtn")?.addEventListener("click",()=>openSmsMediaPicker(c));
    $("#smsSchedBtn")?.addEventListener("click",()=>openSchedulePicker(c));
    // ---- SMS template button ----
    (function(){
      const btn=$("#smsTplBtn"); if(!btn) return;
      btn.addEventListener("click",e=>{
        e.stopPropagation();
        const existing=document.querySelector(".tpl-popover");
        if(existing){ existing.remove(); btn.classList.remove("active"); return; }
        btn.classList.add("active");
        const tpls=(state.practice.smsTemplates||[]);
        const pop=document.createElement("div");
        pop.className="tpl-popover";
        pop.innerHTML=`
          <div class="tpl-popover-head">
            <input id="tplSearch" placeholder="Search templates…" autocomplete="off"/>
            <button class="tpl-x" id="tplClose">×</button>
          </div>
          <div class="tpl-list" id="tplList"></div>`;
        btn.closest(".tpl-pop-wrap").appendChild(pop);
        function renderList(q){
          const list=pop.querySelector("#tplList");
          const filtered=tpls.filter(t=>!q||t.name.toLowerCase().includes(q)||t.body.toLowerCase().includes(q));
          if(!filtered.length){ list.innerHTML=`<div class="tpl-empty">No templates match.</div>`; return; }
          list.innerHTML=filtered.map(t=>{
            const resolved=resolveMergeFields(t.body,c);
            return `<div class="tpl-card" data-tid="${t.id}"><div class="tc-name">${esc(t.name)}</div><div class="tc-prev">${esc(resolved)}</div></div>`;
          }).join("");
          list.querySelectorAll(".tpl-card").forEach(card=>{
            card.addEventListener("click",()=>{
              const tpl=tpls.find(t=>t.id===card.dataset.tid); if(!tpl) return;
              const resolved=resolveMergeFields(tpl.body,c);
              const inp=$("#msgInput"); if(inp){ inp.value=resolved; inp.dispatchEvent(new Event("input")); inp.focus(); }
              logAudit("template_used",c,{summary:`Template applied: "${tpl.name}"`,meta:{templateId:tpl.id,templateName:tpl.name}});
              persist();
              pop.remove(); btn.classList.remove("active");
            });
          });
        }
        const srch=pop.querySelector("#tplSearch");
        srch.addEventListener("input",()=>renderList(srch.value.trim().toLowerCase()));
        pop.querySelector("#tplClose").addEventListener("click",()=>{ pop.remove(); btn.classList.remove("active"); });
        document.addEventListener("click",function outside(ev){ if(!pop.contains(ev.target) && ev.target!==btn){ pop.remove(); btn.classList.remove("active"); document.removeEventListener("click",outside); } });
        renderList("");
        srch.focus();
      });
    })();
    $("#cancelReply")?.addEventListener("click",()=>{ ui.reply=null; renderStage(); $("#msgInput")?.focus(); });
    document.querySelectorAll("[data-rmatt]").forEach(b=>b.addEventListener("click",()=>{ ui.draftAtts.splice(+b.dataset.rmatt,1); renderStage(); }));
    document.querySelectorAll("[data-rmsms]").forEach(b=>b.addEventListener("click",()=>{ ui.smsDraftMedia.splice(+b.dataset.rmsms,1); renderStage(); }));
    document.querySelectorAll("[data-sendnow]").forEach(b=>b.addEventListener("click",()=>sendScheduledNow(c,b.dataset.sendnow)));
    document.querySelectorAll("[data-cancelsched]").forEach(b=>b.addEventListener("click",()=>cancelScheduled(c,b.dataset.cancelsched)));

    // message actions
    document.querySelectorAll(".row").forEach(row=>{
      const mid=row.dataset.mid; const m=c.messages.find(x=>x.id===mid); if(!m) return;
      row.querySelectorAll(".actions [data-act]").forEach(btn=>{
        btn.addEventListener("click",e=>{ e.stopPropagation(); handleAct(c,m,btn.dataset.act,row); });
      });
      row.querySelectorAll(".react").forEach(rb=>rb.addEventListener("click",()=>toggleReact(c,m,rb.dataset.react)));
    });

    // lightbox
    document.querySelectorAll("[data-lb]").forEach(img=>img.addEventListener("click",()=>openLightbox(img.dataset.lb)));

    // panel actions
    $("#renameGrpBtn")?.addEventListener("click",()=>renameGroup(c));
    $("#leaveGrpBtn")?.addEventListener("click",()=>leaveGroup(c));
    $("#addMemBtn")?.addEventListener("click",()=>addMembers(c));
    $("#editFilterBtn")?.addEventListener("click",()=>editGroupFilter(c));
    $("#convertManualBtn")?.addEventListener("click",()=>convertToManual(c));
    document.querySelectorAll("[data-removemem]").forEach(b=>b.addEventListener("click",()=>removeMember(c,+b.dataset.removemem)));
    document.querySelectorAll("[data-jump]").forEach(b=>b.addEventListener("click",()=>jumpTo(b.dataset.jump)));

    // sms-specific
    $("#noteToggle")?.addEventListener("click",()=>{ ui.smsNote=!ui.smsNote; renderStage(); $("#msgInput")?.focus(); });
    $("#noteOnly")?.addEventListener("click",()=>{ ui.smsNote=true; renderStage(); $("#msgInput")?.focus(); });
    $("#reconsent")?.addEventListener("click",()=>setConsent(c,"opted_in"));
    /* SYNC STUB — owned by ehr. "Chart" chip on patient SMS threads. Hooks up
       to the EHR chart route keyed by the shared roster patient id
       (CRM STATE.contacts id <-> this thread's contactId). Intentionally
       inert until integration. NOT A BUG. */
    $("#openChartBtn")?.addEventListener("click",()=>toast("Opens in EHR after integration"));
    /* SYNC STUB — owned by crm. "Contact" chip on patient SMS threads. Hooks
       up to the CRM contact detail via the shared roster API
       (CRM STATE.contacts; consent flags map to CRM contact fields).
       Intentionally inert until integration. NOT A BUG. */
    $("#openContactBtn")?.addEventListener("click",()=>toast("Opens in CRM after integration"));
    /* SYNC STUB — owned by crm. "Open in CRM" on the contact detail panel —
       patient identity (name, phone, tags, consent) is CRM-owned; this panel
       stays a synced view over the shared roster (CRM STATE.contacts).
       Intentionally inert until integration. NOT A BUG. */
    $("#openCrmContact")?.addEventListener("click",()=>toast("Opens in CRM after integration"));
    $("#consentToggle")?.addEventListener("click",()=>{ const ct=contact(c.contactId); setConsent(c, ct&&ct.consent==="opted_out"?"opted_in":"opted_out"); });
    $("#apptSetBtn")?.addEventListener("click",()=>openApptPicker(c));
    $("#apptChangeBtn")?.addEventListener("click",()=>openApptPicker(c));
    $("#apptClearBtn")?.addEventListener("click",async()=>{ if(await confirmDialog({title:"Clear appointment",message:"Clear the next appointment? Any pending reminder texts will be canceled.",confirmLabel:"Clear",danger:true})) clearNextAppt(c); });
    $("#simInbound")?.addEventListener("click",()=>simulateInbound(c));
    $("#assignSel")?.addEventListener("change",e=>{ c.assignedTo=e.target.value?+e.target.value:null; persist(); renderStage(); });
    document.querySelectorAll("#statusSeg [data-status]").forEach(b=>b.addEventListener("click",()=>{ c.status=b.dataset.status; persist(); renderStage(); }));
    $("#threadAudit")?.addEventListener("click",()=>openAuditLog(c.id));
  }

  function autoGrow(t){ t.style.height="auto"; t.style.height=Math.min(t.scrollHeight,140)+"px"; }
  function scrollToBottom(){ const s=$("#scroller"); if(s) s.scrollTop=s.scrollHeight; }
  function jumpTo(mid){
    const el=document.querySelector(`.row[data-mid="${mid}"]`);
    if(el){ el.scrollIntoView({behavior:"smooth",block:"center"}); el.querySelector(".bubble")?.animate([{boxShadow:"0 0 0 3px var(--mint)"},{boxShadow:"0 0 0 0 transparent"}],{duration:1400}); }
  }

  async function handleAct(c,m,act,row){
    if(act==="reply"){ ui.reply=m.id; renderStage(); $("#msgInput")?.focus(); }
    else if(act==="pin"){ m.pinned=!m.pinned; persist(); MX.pinSync(c,m); toast(m.pinned?"Message pinned":"Message unpinned"); renderStage(); }
    else if(act==="del"){ if(await confirmDialog({title:"Delete message",message:"Delete this message?",confirmLabel:"Delete",danger:true})){ m.deleted=true; m.text=""; m.attachments=[]; m.reactions={}; persist(); MX.redactMsg(c,m); renderStage(); } }
    else if(act==="edit"){ startEdit(c,m,row); }
    else if(act==="react"){ openEmojiPop(c,m,row); }
  }

  function startEdit(c,m,row){
    const bubble=row.querySelector(".bubble");
    const orig=m.text;
    bubble.innerHTML=`<textarea style="width:100%;min-width:240px;border:1px solid var(--mint-600);border-radius:8px;padding:7px 9px;font-family:inherit;font-size:13.5px;resize:vertical;outline:none">${esc(orig)}</textarea>
      <div style="display:flex;gap:7px;margin-top:7px;justify-content:flex-end">
        <button class="btn" id="edCancel" style="padding:6px 12px;font-size:12px">Cancel</button>
        <button class="btn primary" id="edSave" style="padding:6px 12px;font-size:12px">Save</button>
      </div>`;
    const ta=bubble.querySelector("textarea"); ta.focus(); ta.setSelectionRange(orig.length,orig.length);
    bubble.querySelector("#edCancel").onclick=()=>renderStage();
    bubble.querySelector("#edSave").onclick=()=>{
      const v=ta.value.trim();
      if(!v){ toast("Message can't be empty"); return; }
      m.text=v; m.edited=true; persist(); MX.editMsg(c,m,v); renderStage();
    };
    ta.addEventListener("keydown",e=>{ if(e.key==="Enter"&&!e.shiftKey){ e.preventDefault(); bubble.querySelector("#edSave").click(); } if(e.key==="Escape") renderStage(); });
  }

  function openEmojiPop(c,m,row){
    document.querySelectorAll(".emoji-pop").forEach(p=>p.remove());
    const stack=row.querySelector(".stack");
    const pop=document.createElement("div");
    pop.className="emoji-pop";
    pop.innerHTML=EMOJIS.map(e=>`<button data-e="${e}">${e}</button>`).join("");
    stack.appendChild(pop);
    pop.querySelectorAll("button").forEach(b=>b.addEventListener("click",()=>{ toggleReact(c,m,b.dataset.e); }));
    const off=e=>{ if(!pop.contains(e.target)){ pop.remove(); document.removeEventListener("click",off); } };
    setTimeout(()=>document.addEventListener("click",off),0);
  }

  function toggleReact(c,m,emoji){
    m.reactions=m.reactions||{};
    const arr=m.reactions[emoji]||(m.reactions[emoji]=[]);
    const i=arr.indexOf(state.currentUserId);
    const adding=i<0;
    if(i>=0) arr.splice(i,1); else arr.push(state.currentUserId);
    if(!arr.length) delete m.reactions[emoji];
    MX.reactSync(c,m,emoji,adding);
    persist(); renderStage();
  }

  /* ---------- send / attachments ---------- */
  function sendMessage(c){
    if(c.type==="sms") return sendSms(c);
    const input=$("#msgInput");
    const text=(input?.value||"").trim();
    if(!text && !ui.draftAtts.length) return;
    if(MX.active() && c.mxRoomId){
      const atts=ui.draftAtts.slice(), replyId=ui.reply;
      ui.draftAtts=[]; ui.reply=null;
      if(input) input.value="";
      MX.sendInternal(c, text, replyId, atts);
      return;
    }
    const m={
      id:uid("m"), senderId:state.currentUserId, text, ts:Date.now(), channel:"internal",
      attachments:ui.draftAtts.slice(), reactions:{}, replyTo:ui.reply, edited:false, deleted:false,
      readBy:[state.currentUserId], pinned:false, flags:[], risk:null
    };
    c.messages.push(m);
    ui.draftAtts=[]; ui.reply=null;
    runRiskScan(c, m);          // scan all messages (in & out), incl. internal
    persist();
    renderStage();
    scrollToBottom();
    maybeAutoReply(c);
  }

  /* ---------- SMS (two-way texting scaffold) ---------- */
  function sendSms(c){
    const input=$("#msgInput");
    const text=(input?.value||"").trim();
    const ct=contact(c.contactId);
    const note = ui.smsNote===true;

    if(note){
      if(!text) return;
      const m={ id:uid("s"), channel:"sms", direction:"out", isNote:true, authorId:state.currentUserId, senderId:state.currentUserId,
        text, ts:Date.now(), deliveryStatus:"note", attachments:[], reactions:{}, replyTo:null, edited:false, deleted:false,
        readBy:[state.currentUserId], pinned:false, flags:[], risk:null };
      c.messages.push(m);
      runRiskScan(c, m);
      persist(); renderStage(); scrollToBottom();
      return;
    }

    if(ct && ct.consent==="opted_out"){ toast("Patient has opted out — can't text"); return; }
    const media = ui.smsDraftMedia.slice();   // MMS: attachments[] carries media (dataUrl = Twilio MediaUrl stand-in, type = MediaContentType)
    if(!text && !media.length) return;
    const now=Date.now();
    const base={ id:uid("s"), channel:"sms", direction:"out", isNote:false, authorId:state.currentUserId, senderId:state.currentUserId,
      text, ts:now, externalId:"SM"+uid(""), attachments:media, numMedia:media.length, reactions:{}, replyTo:null,
      edited:false, deleted:false, readBy:[state.currentUserId], pinned:false, flags:[], risk:null };
    ui.smsDraftMedia=[];
    const qh=effectiveQuietHours(state.currentUserId);
    if(inQuietWindow(qh, now)){
      // Quiet hours: hold and auto-release when the window ends (risk scan runs at release).
      const releaseAt=quietWindowEnd(qh, now);
      const m={ ...base, deliveryStatus:"scheduled", scheduleKind:"quiet", chosenAt:now, releaseAt };
      c.messages.push(m);
      logAudit("scheduled_deferred_quiet", c, {messageId:m.id, summary:`Auto-deferred (quiet hours) — sends ${fmtWhen(releaseAt)}`, meta:{releaseAt, numMedia:m.numMedia, textSnippet:auditSnip(text)}});
      persist(); renderStage(); scrollToBottom();
      toast("Quiet hours — will send at "+fmtWhen(releaseAt));
      return;
    }
    const m={ ...base, deliveryStatus:"queued" };
    c.messages.push(m);
    logAudit(m.numMedia?"mms_sent":"sms_sent", c, {messageId:m.id, summary:(m.numMedia?`Sent MMS (${m.numMedia} image${m.numMedia>1?"s":""})`:"Sent text")+(text?`: "${auditSnip(text)}"`:""), meta:{numMedia:m.numMedia, textSnippet:auditSnip(text), deliveryStatus:"queued"}});
    runRiskScan(c, m);          // scanning outbound too (per config: all messages)
    persist(); renderStage(); scrollToBottom();
    simulateDelivery(c, m);     // queued -> sent -> delivered
  }
  function simulateDelivery(c, m){
    const step=(status, delay)=>setTimeout(()=>{
      const live=conv(c.id); const mm=live&&live.messages.find(x=>x.id===m.id); if(!mm) return;
      mm.deliveryStatus=status; persist();
      if(ui.activeId===c.id) renderStage();
    }, delay);
    step("sent", 500);
    step("delivered", 1300);
  }

  /* ---------- scheduled / deferred send ---------- */
  function openSchedulePicker(c){
    const input=$("#msgInput");
    const text=(input?.value||"").trim();
    if(!text && !ui.smsDraftMedia.length){ toast("Type a message or attach an image to schedule"); return; }
    const ct=contact(c.contactId);
    if(ct && ct.consent==="opted_out"){ toast("Patient has opted out — can't schedule"); return; }
    const qh=effectiveQuietHours(state.currentUserId);
    const qhLabel = qh && qh.enabled ? (qh.start+"–"+qh.end) : "off";
    const def=Date.now()+60*60*1000; // default: 1 hour out
    openModal({
      title:"Schedule this text",
      body:`<label>Send date &amp; time</label>
        <input type="datetime-local" id="schedDT" value="${toLocalDTValue(def)}" min="${toLocalDTValue(Date.now())}" />
        <div style="display:flex;gap:7px;flex-wrap:wrap;margin-top:10px">
          <button type="button" class="btn" data-preset="1">In 1 hour</button>
          <button type="button" class="btn" data-preset="3">In 3 hours</button>
          <button type="button" class="btn" data-preset="t9">Tomorrow 9 AM</button>
        </div>
        <div style="font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5">Quiet hours: ${esc(qhLabel)}. A time inside quiet hours holds until the window ends.</div>`,
      confirm:"Schedule",
      onMount:mEl=>{
        const dt=mEl.querySelector("#schedDT");
        mEl.querySelectorAll("[data-preset]").forEach(b=>b.addEventListener("click",()=>{
          const p=b.dataset.preset; let t;
          if(p==="1") t=Date.now()+60*60*1000;
          else if(p==="3") t=Date.now()+3*60*60*1000;
          else { const d=new Date(Date.now()+864e5); d.setHours(9,0,0,0); t=d.getTime(); }
          dt.value=toLocalDTValue(t);
        }));
      },
      onConfirm:mEl=>{
        const ts=parseLocalDT(mEl.querySelector("#schedDT").value);
        if(!ts || ts<=Date.now()){ toast("Pick a time in the future"); return false; }
        scheduleSms(c, ts);
        return true;
      }
    });
  }
  function scheduleSms(c, chosenTs){
    const input=$("#msgInput");
    const text=(input?.value||"").trim();
    const media=ui.smsDraftMedia.slice();
    if(!text && !media.length){ toast("Type a message or attach an image to schedule"); return; }
    const ct=contact(c.contactId);
    if(ct && ct.consent==="opted_out"){ toast("Patient has opted out — can't schedule"); return; }
    const qh=effectiveQuietHours(state.currentUserId);
    const releaseAt = inQuietWindow(qh, chosenTs) ? quietWindowEnd(qh, chosenTs) : chosenTs;
    const m={ id:uid("s"), channel:"sms", direction:"out", isNote:false, authorId:state.currentUserId, senderId:state.currentUserId,
      text, ts:Date.now(), externalId:"SM"+uid(""), attachments:media, numMedia:media.length,
      deliveryStatus:"scheduled", scheduleKind:"manual", chosenAt:chosenTs, releaseAt,
      reactions:{}, replyTo:null, edited:false, deleted:false, readBy:[state.currentUserId], pinned:false, flags:[], risk:null };
    c.messages.push(m);
    ui.smsDraftMedia=[];
    logAudit("scheduled_created", c, {messageId:m.id, summary:`Scheduled for ${fmtWhen(releaseAt)}${releaseAt!==chosenTs?" (quiet hours)":""}`, meta:{chosenAt:chosenTs, releaseAt, numMedia:m.numMedia, textSnippet:auditSnip(text)}});
    persist(); renderStage(); scrollToBottom();
    toast("Scheduled for "+fmtWhen(releaseAt)+(releaseAt!==chosenTs?" (quiet hours)":""));
  }
  function cancelScheduled(c, mid){
    const i=c.messages.findIndex(x=>x.id===mid); if(i<0) return;
    const m=c.messages[i];
    logAudit("scheduled_canceled", c, {messageId:m.id, summary:`Canceled a scheduled text${m.text?`: "${auditSnip(m.text)}"`:""}`, meta:{releaseAt:m.releaseAt, textSnippet:auditSnip(m.text)}});
    c.messages.splice(i,1);
    persist(); renderStage(); toast("Scheduled text canceled");
  }
  function sendScheduledNow(c, mid){
    const m=c.messages.find(x=>x.id===mid); if(!m || m.deliveryStatus!=="scheduled") return;
    const ct=contact(c.contactId);
    if(ct && ct.consent==="opted_out"){ toast("Patient has opted out — can't send"); return; }
    m.deliveryStatus="queued"; m.ts=Date.now(); m.scheduleKind=null; m.releaseAt=null;
    logAudit("scheduled_sent", c, {messageId:m.id, summary:`Sent a scheduled text early${m.text?`: "${auditSnip(m.text)}"`:""}`, meta:{trigger:"manual", numMedia:m.numMedia, textSnippet:auditSnip(m.text)}});
    runRiskScan(c, m);
    persist(); renderStage(); scrollToBottom();
    simulateDelivery(c, m);
    toast("Sending now");
  }
  // No-backend release: sweep held messages whose release time has passed.
  function releaseDueScheduled(){
    const now=Date.now();
    const due=[];
    state.conversations.forEach(c=>{
      if(c.type!=="sms") return;
      c.messages.forEach(m=>{ if(m.deliveryStatus==="scheduled" && (m.releaseAt||0)<=now) due.push({c, m}); });
    });
    if(!due.length) return false;
    due.forEach(({c, m})=>{
      const ct=contact(c.contactId);
      if(ct && ct.consent==="opted_out"){
        m.deliveryStatus="canceled_optout";   // never text an opted-out patient
        logAudit("scheduled_canceled_optout", c, {messageId:m.id, actorId:null, actorName:"System", summary:`Scheduled text auto-canceled — patient opted out (STOP)`, meta:{textSnippet:auditSnip(m.text)}});
      } else {
        const aId=m.authorId;
        m.deliveryStatus="queued"; m.ts=Date.now(); m.scheduleKind=null; m.releaseAt=null;
        logAudit("scheduled_sent", c, {messageId:m.id, actorId:aId, summary:`Scheduled text released${m.text?`: "${auditSnip(m.text)}"`:""}`, meta:{trigger:"auto", numMedia:m.numMedia, textSnippet:auditSnip(m.text)}});
        runRiskScan(c, m);
      }
    });
    persist();
    due.forEach(({c, m})=>{ if(m.deliveryStatus==="queued") simulateDelivery(c, m); });
    if(ui.activeId) renderStage(); else render();
    return true;
  }

  /* ---------- appointment reminders ----------
     Delivery engine is canonical to Messaging (reuses the scheduled-send
     pipeline above verbatim — same consent/quiet-hours/risk-scan path).
     The appointment DATA is the part that's owned elsewhere; see the
     SYNC STUB on setNextAppt below.
  */
  function apptOffsetLabel(min){
    if(min%1440===0){ const d=min/1440; return d+" day"+(d===1?"":"s")+" before"; }
    if(min%60===0){ const h=min/60; return h+" hour"+(h===1?"":"s")+" before"; }
    return min+" minute"+(min===1?"":"s")+" before";
  }
  // Remove any pending (unsent) reminder texts tied to this contact's current appointment.
  function cancelApptReminders(c, reason){
    const stale = c.messages.filter(m=>m.deliveryStatus==="scheduled" && m.apptReminder);
    if(!stale.length) return;
    stale.forEach(m=>{
      logAudit("scheduled_canceled", c, {messageId:m.id, summary:`Appointment reminder canceled${reason?` — ${reason}`:""}`, meta:{apptReminder:true, offset:m.apptOffset, reason:reason||""}});
    });
    c.messages = c.messages.filter(m=>!(m.deliveryStatus==="scheduled" && m.apptReminder));
  }
  // Create one scheduled text per configured offset ahead of the contact's
  // nextAppt. Offsets whose fire time has already passed are skipped (no
  // retroactive sends). Quiet hours push the release time to the window end,
  // exactly like a normal scheduled text.
  function scheduleApptReminders(c){
    const ar = state.practice.apptReminders;
    if(!ar || !ar.enabled) return;
    const ct = contact(c.contactId);
    if(!ct || !ct.nextAppt) return;
    if(ct.consent==="opted_out") return;   // never schedule texts to an opted-out patient
    const tpl = (state.practice.smsTemplates||[]).find(t=>t.id===ar.templateId);
    if(!tpl) return;
    const apptMs = new Date(ct.nextAppt.startISO).getTime();
    if(!apptMs) return;
    const now = Date.now();
    const text = resolveMergeFields(tpl.body, c);
    const qh = effectiveQuietHours(state.currentUserId);
    let scheduledCount = 0;
    [...new Set(ar.offsets||[])].forEach(offsetMin=>{
      const chosenTs = apptMs - offsetMin*60000;
      if(chosenTs<=now) return;   // window for this offset already passed
      const releaseAt = inQuietWindow(qh, chosenTs) ? quietWindowEnd(qh, chosenTs) : chosenTs;
      const m={ id:uid("s"), channel:"sms", direction:"out", isNote:false, authorId:state.currentUserId, senderId:state.currentUserId,
        text, ts:now, externalId:"SM"+uid(""), attachments:[], numMedia:0,
        deliveryStatus:"scheduled", scheduleKind:"apptReminder", chosenAt:chosenTs, releaseAt,
        apptReminder:true, apptOffset:offsetMin, apptStartISO:ct.nextAppt.startISO,
        reactions:{}, replyTo:null, edited:false, deleted:false, readBy:[state.currentUserId], pinned:false, flags:[], risk:null };
      c.messages.push(m);
      logAudit("scheduled_created", c, {messageId:m.id, summary:`Appointment reminder scheduled — ${apptOffsetLabel(offsetMin)} (${fmtWhen(releaseAt)})`, meta:{apptReminder:true, offset:offsetMin, releaseAt, textSnippet:auditSnip(text)}});
      scheduledCount++;
    });
    return scheduledCount;
  }
  /* SYNC STUB — owned by calendar. setNextAppt is the manual entry it is
     today; the appointment DATA feed becomes a documented inbound stub:
     Calendar will eventually push {eventId, patientId, startISO, offsets[],
     channel} for each event, and this function (or its future equivalent)
     is the seam it lands on. Intentionally manual until integration.
     NOT A BUG. */
  function setNextAppt(c, startISO){
    const ct = contact(c.contactId); if(!ct) return;
    cancelApptReminders(c, "appointment updated");
    ct.nextAppt = { startISO, setBy: state.currentUserId, setAt: Date.now() };
    const n = scheduleApptReminders(c);
    persist(); renderStage();
    toast(n ? `Next appointment set — ${n} reminder${n===1?"":"s"} scheduled` : "Next appointment set");
  }
  function clearNextAppt(c){
    const ct = contact(c.contactId); if(!ct || !ct.nextAppt) return;
    cancelApptReminders(c, "appointment cleared");
    ct.nextAppt = null;
    persist(); renderStage();
    toast("Next appointment cleared");
  }
  function openApptPicker(c){
    const ct = contact(c.contactId); if(!ct) return;
    const cur = ct.nextAppt ? toLocalDTValue(new Date(ct.nextAppt.startISO).getTime()) : toLocalDTValue(Date.now()+24*60*60*1000);
    openModal({
      title: ct.nextAppt ? "Change next appointment" : "Set next appointment",
      body:`<label>Appointment date &amp; time</label>
        <input type="datetime-local" id="apptDT" value="${cur}" min="${toLocalDTValue(Date.now())}" />
        <div style="font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5">Reminders are scheduled automatically per your practice's reminder rules (Practice setup → Reminders).</div>`,
      confirm:"Save",
      onConfirm:mEl=>{
        const ts=parseLocalDT(mEl.querySelector("#apptDT").value);
        if(!ts || ts<=Date.now()){ toast("Pick a time in the future"); return false; }
        setNextAppt(c, new Date(ts).toISOString());
        return true;
      }
    });
  }

  /* ---------- broadcast messaging ----------
     One compose, many recipients — but each recipient still goes through
     the exact per-patient send path (consent check, quiet-hours defer,
     risk scan on release). No batch shortcuts around the compliance path.
  */
  function recentBroadcasts(){
    const groups = {};
    (state.smsAudit||[]).forEach(r=>{
      const bid = r.meta && r.meta.broadcastId; if(!bid) return;
      if(!groups[bid]) groups[bid] = { id:bid, ts:r.ts, count:0, textSnippet:r.meta.textSnippet||"" };
      groups[bid].count++;
      if(r.ts>groups[bid].ts) groups[bid].ts=r.ts;
    });
    return Object.values(groups).sort((a,b)=>b.ts-a.ts).slice(0,8);
  }
  function runBroadcast(rawText, contactIds, scheduleTs){
    if(!rawText.trim() || !contactIds.length) return null;
    const bcId = uid("bc");
    const now = Date.now();
    let sentCount=0, scheduledCount=0, deferredCount=0, skippedOptout=0;
    const qh = effectiveQuietHours(state.currentUserId);
    contactIds.forEach(cid=>{
      const ct = contact(cid); if(!ct) return;
      if(ct.consent==="opted_out"){ skippedOptout++; return; }
      let c = state.conversations.find(x=>x.type==="sms" && x.contactId===cid);
      if(!c){ c={ id:uid("sms"), type:"sms", contactId:cid, assignedTo:state.currentUserId, status:"open", pinned:false, messages:[] }; state.conversations.push(c); }
      const text = resolveMergeFields(rawText, c);
      const base={ id:uid("s"), channel:"sms", direction:"out", isNote:false, authorId:state.currentUserId, senderId:state.currentUserId,
        text, ts:now, externalId:"SM"+uid(""), attachments:[], numMedia:0, broadcastId:bcId,
        reactions:{}, replyTo:null, edited:false, deleted:false, readBy:[state.currentUserId], pinned:false, flags:[], risk:null };
      if(scheduleTs){
        const releaseAt = inQuietWindow(qh, scheduleTs) ? quietWindowEnd(qh, scheduleTs) : scheduleTs;
        const m={ ...base, deliveryStatus:"scheduled", scheduleKind:"broadcast", chosenAt:scheduleTs, releaseAt };
        c.messages.push(m);
        logAudit("scheduled_created", c, {messageId:m.id, summary:`Broadcast scheduled for ${fmtWhen(releaseAt)}`, meta:{broadcastId:bcId, textSnippet:auditSnip(text)}});
        scheduledCount++;
      } else if(inQuietWindow(qh, now)){
        const releaseAt = quietWindowEnd(qh, now);
        const m={ ...base, deliveryStatus:"scheduled", scheduleKind:"quiet", chosenAt:now, releaseAt };
        c.messages.push(m);
        logAudit("scheduled_deferred_quiet", c, {messageId:m.id, summary:`Broadcast auto-deferred (quiet hours) — sends ${fmtWhen(releaseAt)}`, meta:{broadcastId:bcId, textSnippet:auditSnip(text)}});
        deferredCount++;
      } else {
        const m={ ...base, deliveryStatus:"queued" };
        c.messages.push(m);
        logAudit("sms_sent", c, {messageId:m.id, summary:`Broadcast sent: "${auditSnip(text)}"`, meta:{broadcastId:bcId, textSnippet:auditSnip(text)}});
        runRiskScan(c, m);
        simulateDelivery(c, m);
        sentCount++;
      }
    });
    persist();
    render();
    return { sentCount, scheduledCount, deferredCount, skippedOptout, bcId };
  }
  function bContactRow(ct, selectedIds){
    const disabled = ct.consent==="opted_out";
    const chip = disabled ? '<span class="consent-chip out">Opted out</span>' : ct.consent==="opted_in" ? '<span class="consent-chip ok">Opted in</span>' : '<span class="consent-chip pend">Pending</span>';
    return `<div class="pick ${selectedIds.has(ct.id)?"sel":""} ${disabled?"disabled":""}" data-cid="${ct.id}" ${disabled?'style="opacity:.45;pointer-events:none"':""}>
      ${smsAvatar(ct,"s34")}
      <div class="pk-meta"><div class="pk-nm">${esc(ct.name)}</div><div class="pk-rl">${esc(fmtPhone(ct.phone))} · ${chip}</div></div>
      <div class="chk"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></div>
    </div>`;
  }
  function openBroadcast(){
    let selectedIds = new Set();
    let q = "", text = "", scheduleMode = "now", scheduleVal = toLocalDTValue(Date.now()+60*60*1000);

    function eligibleContacts(){
      const qq=q.trim().toLowerCase();
      return state.contacts.filter(ct=>!qq || ct.name.toLowerCase().includes(qq) || String(ct.phone).includes(qq));
    }
    function body(){
      const eligible = eligibleContacts();
      const optedInIds = state.contacts.filter(ct=>ct.consent==="opted_in").map(ct=>ct.id);
      const recent = recentBroadcasts();
      return `<div class="taxhint">Send one message to multiple patients at once. Each send still respects consent and quiet hours individually — opted-out patients are skipped, and quiet-hours recipients get a deferred send just like a normal text.</div>

        <label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Recipients (${selectedIds.size} selected)</label>
        ${searchBoxHtml("bcSearch","Search patients…",q)}
        <div style="margin:8px 0;display:flex;gap:8px">
          <button type="button" class="btn" id="bcSelectAll">Select all opted-in (${optedInIds.length})</button>
          <button type="button" class="btn" id="bcClearSel">Clear</button>
        </div>
        <div class="picker" style="max-height:180px">${eligible.length?eligible.map(ct=>bContactRow(ct,selectedIds)).join(""):'<div class="nomatch">No patients yet.</div>'}</div>

        <label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:16px 0 6px">Message</label>
        <textarea id="bcText" rows="4" placeholder="Write your broadcast message… merge tokens resolve per patient when sent">${esc(text)}</textarea>
        <div class="token-ref" style="margin-top:7px">${MERGE_TOKENS.map(t=>`<span class="token-chip">${t.token}</span>`).join(" ")}</div>

        <label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:16px 0 6px">Send</label>
        <div class="seg" style="margin-bottom:10px"><button type="button" data-bcmode="now" class="${scheduleMode==="now"?"on":""}">Send now</button><button type="button" data-bcmode="later" class="${scheduleMode==="later"?"on":""}">Schedule</button></div>
        ${scheduleMode==="later"?`<input type="datetime-local" id="bcSchedDT" value="${scheduleVal}" min="${toLocalDTValue(Date.now())}" />`:""}

        ${recent.length?`<label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:18px 0 6px">Recent broadcasts</label>
        <div style="display:flex;flex-direction:column;gap:6px">${recent.map(g=>`<div style="font-size:12px;color:var(--slate);display:flex;justify-content:space-between;gap:8px"><span>“${esc(g.textSnippet||"(no preview)")}”</span><span style="color:var(--muted);flex:none">${g.count} recipient${g.count===1?"":"s"} · ${fmtAlertTime(g.ts)}</span></div>`).join("")}</div>`:""}`;
    }
    function rerender(m){ refreshModalBody(m, body(), ()=>wire(m)); }
    function wire(m){
      const bs=m.querySelector("#bcSearch");
      if(bs){
        bs.oninput=()=>{ q=bs.value; rerender(m); };
        m.querySelector('[data-clr="bcSearch"]')?.addEventListener("click",()=>{ q=""; rerender(m); });
      }
      m.querySelectorAll(".picker .pick:not(.disabled)").forEach(row=>row.onclick=()=>{
        const id=row.dataset.cid;
        if(selectedIds.has(id)) selectedIds.delete(id); else selectedIds.add(id);
        rerender(m);
      });
      m.querySelector("#bcSelectAll")?.addEventListener("click",()=>{ state.contacts.forEach(ct=>{ if(ct.consent==="opted_in") selectedIds.add(ct.id); }); rerender(m); });
      m.querySelector("#bcClearSel")?.addEventListener("click",()=>{ selectedIds.clear(); rerender(m); });
      const ta=m.querySelector("#bcText"); if(ta) ta.oninput=()=>{ text=ta.value; };
      m.querySelectorAll("[data-bcmode]").forEach(b=>b.onclick=()=>{ scheduleMode=b.dataset.bcmode; rerender(m); });
      const sdt=m.querySelector("#bcSchedDT"); if(sdt) sdt.onchange=()=>{ scheduleVal=sdt.value; };
    }
    openModalCustom({
      title:"Broadcast to patients",
      size:"xl",
      body:body(),
      footer:`<button class="btn" id="mCancel">Cancel</button><button class="btn primary" id="bcSend">Send broadcast</button>`,
      onMount:wire,
      onFooter:m=>{
        m.querySelector("#mCancel").onclick=()=>closeModal();
        m.querySelector("#bcSend").onclick=()=>{
          const t=(m.querySelector("#bcText")?.value||"").trim();
          if(!t){ toast("Write a message to broadcast"); return; }
          if(!selectedIds.size){ toast("Select at least one patient"); return; }
          let ts=null;
          if(scheduleMode==="later"){
            ts=parseLocalDT(m.querySelector("#bcSchedDT").value);
            if(!ts || ts<=Date.now()){ toast("Pick a future time to schedule"); return; }
          }
          const res=runBroadcast(t, [...selectedIds], ts);
          if(!res) return;
          closeModal();
          const parts=[];
          if(res.sentCount) parts.push(`${res.sentCount} sent`);
          if(res.scheduledCount) parts.push(`${res.scheduledCount} scheduled`);
          if(res.deferredCount) parts.push(`${res.deferredCount} deferred (quiet hours)`);
          if(res.skippedOptout) parts.push(`${res.skippedOptout} skipped (opted out)`);
          toast("Broadcast: "+(parts.join(", ")||"nothing sent"));
        };
      }
    });
  }

  function simulateInbound(c){
    let inbMedia=[];
    openModal({
      title:"Simulate inbound text",
      body:`<label>Message from ${esc(contact(c.contactId)?.name||"patient")}</label>
        <input type="text" id="inbText" placeholder="Type what the patient texts…" />
        <div style="display:flex;align-items:center;gap:9px;margin-top:11px">
          <button type="button" class="btn" id="inbAttachBtn">Attach image (MMS)</button>
          <span id="inbMediaName" style="font-size:12px;color:var(--muted)"></span>
        </div>
        <input type="file" id="inbFile" accept="image/*" style="display:none" />
        <div style="font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5">Demo control (no backend). Try a high-risk phrase to see detection + alerts. “STOP” opts out; “START” opts back in.</div>`,
      confirm:"Receive text",
      onMount:mEl=>{
        const i=mEl.querySelector("#inbText"); i.focus();
        i.addEventListener("keydown",e=>{ if(e.key==="Enter"){ e.preventDefault(); mEl.parentNode.querySelector("#mOk").click(); } });
        const fileInp=mEl.querySelector("#inbFile"), nameEl=mEl.querySelector("#inbMediaName");
        mEl.querySelector("#inbAttachBtn").addEventListener("click",()=>fileInp.click());
        fileInp.addEventListener("change",()=>{
          const f=(fileInp.files||[])[0]; if(!f) return;
          const v=validateImageMedia(f);
          if(!v.ok){ toast(v.reason==="not_image"?`${f.name} isn't an image and was skipped`:`${f.name} is over 5 MB and was skipped`); return; }
          const reader=new FileReader();
          reader.onload=()=>{ inbMedia=[{name:f.name,type:f.type||"image/jpeg",size:f.size,dataUrl:reader.result}]; nameEl.textContent=f.name; };
          reader.readAsDataURL(f);
        });
      },
      onConfirm:mEl=>{
        const t=(mEl.querySelector("#inbText").value||"").trim();
        if(!t && !inbMedia.length){ return false; }
        receiveInbound(c, t, inbMedia);
        return true;
      }
    });
  }
  function receiveInbound(c, text, media){
    media = media || [];
    const ct=contact(c.contactId);
    const norm=(text||"").trim().toLowerCase();
    // TCPA keyword handling
    if(["stop","stopall","unsubscribe","cancel","quit","end"].includes(norm)){ if(ct){ ct.consent="opted_out"; ct.optOutAt=Date.now(); } }
    if(["start","unstop","yes"].includes(norm)){ if(ct){ ct.consent="opted_in"; ct.optOutAt=null; ct.consentAt=Date.now(); } }
    const m={ id:uid("s"), channel:"sms", direction:"in", isNote:false, authorId:null, senderId:null,
      text, ts:Date.now(), deliveryStatus:"received", externalId:"SM"+uid(""), attachments:media, numMedia:media.length, reactions:{}, replyTo:null,
      edited:false, deleted:false, readBy:[], pinned:false, flags:[], risk:null };
    c.messages.push(m);
    if(c.status==="resolved") c.status="open"; // patient replied -> reopen
    logAudit(m.numMedia?"mms_received":"sms_received", c, {messageId:m.id, actorId:null, actorName:"Patient", summary:(m.numMedia?`Inbound MMS (${m.numMedia})`:"Inbound text")+(text?`: "${auditSnip(text)}"`:""), meta:{numMedia:m.numMedia, textSnippet:auditSnip(text)}});
    if(["stop","stopall","unsubscribe","cancel","quit","end"].includes(norm)) logAudit("consent_optout", c, {actorId:null, actorName:"Patient", summary:`Patient texted "${(text||"").trim()}" — opted out (STOP)`, meta:{keyword:norm, source:"inbound"}});
    if(["start","unstop","yes"].includes(norm)) logAudit("consent_optin", c, {actorId:null, actorName:"Patient", summary:`Patient texted "${(text||"").trim()}" — opted in (START)`, meta:{keyword:norm, source:"inbound"}});
    runRiskScan(c, m);
    persist();
    if(ui.activeId===c.id) renderStage(); else render();
    scrollToBottom();
  }
  function setConsent(c, val){
    const ct=contact(c.contactId); if(!ct) return;
    ct.consent=val;
    if(val==="opted_out") ct.optOutAt=Date.now(); else { ct.optOutAt=null; ct.consentAt=Date.now(); }
    logAudit(val==="opted_out"?"consent_optout":"consent_optin", c, {summary:`Staff marked ${val==="opted_out"?"opted out (STOP)":"opted in (START)"}`, meta:{source:"manual"}});
    persist(); renderStage();
    toast(val==="opted_in"?"Marked opted in":"Marked opted out");
  }

  function openFilePicker(c){
    const inp=$("#fileInput");
    inp.value="";
    inp.onchange=()=>{
      const files=Array.from(inp.files||[]);
      let pending=files.length;
      if(!pending) return;
      files.forEach(f=>{
        if(f.size>MAX_ATT_BYTES){ toast(`${f.name} is over 5 MB and was skipped`); if(--pending===0) renderStage(); return; }
        const reader=new FileReader();
        reader.onload=()=>{
          ui.draftAtts.push({name:f.name,type:f.type||"application/octet-stream",size:f.size,dataUrl:reader.result});
          if(--pending===0){ renderStage(); const ta=$("#msgInput"); if(ta){ $("#sendBtn").disabled=false; ta.focus(); } }
        };
        reader.onerror=()=>{ toast("Couldn't read "+f.name); if(--pending===0) renderStage(); };
        reader.readAsDataURL(f);
      });
    };
    inp.click();
  }

  function validateImageMedia(meta){
    if(!meta || !(meta.type||"").startsWith("image/")) return { ok:false, reason:"not_image" };
    if((meta.size||0) > MAX_ATT_BYTES) return { ok:false, reason:"too_large" };
    return { ok:true };
  }
  function openSmsMediaPicker(c){
    const inp=$("#smsFileInput");
    inp.value="";
    inp.onchange=()=>{
      const files=Array.from(inp.files||[]);
      let pending=files.length;
      if(!pending) return;
      files.forEach(f=>{
        const v=validateImageMedia(f);
        if(!v.ok){ toast(v.reason==="not_image"?`${f.name} isn't an image and was skipped`:`${f.name} is over 5 MB and was skipped`); if(--pending===0) renderStage(); return; }
        const reader=new FileReader();
        reader.onload=()=>{
          ui.smsDraftMedia.push({name:f.name,type:f.type||"image/jpeg",size:f.size,dataUrl:reader.result});
          if(--pending===0){ renderStage(); const sb=$("#sendBtn"); if(sb) sb.disabled=false; $("#msgInput")?.focus(); }
        };
        reader.onerror=()=>{ toast("Couldn't read "+f.name); if(--pending===0) renderStage(); };
        reader.readAsDataURL(f);
      });
    };
    inp.click();
  }

  // light, optional "demo" liveliness: an online peer acknowledges in a 1:1
  function maybeAutoReply(c){
    if(MX.active()) return;   // live homeserver: real people answer
    if(c.type!=="dm") return;
    const other=prov(c.memberIds.find(id=>id!==state.currentUserId));
    if(!other || other.presence!=="online") return;
    c.__typing=true; renderStage();
    setTimeout(()=>{
      c.__typing=false;
      // mark my last messages as read by them
      c.messages.forEach(m=>{ if(m.senderId===state.currentUserId && !m.readBy.includes(other.id)) m.readBy.push(other.id); });
      if(c.id===ui.activeId){ persist(); renderStage(); scrollToBottom(); }
      else persist();
    }, 1500);
  }

  /* ---------- group management ---------- */
  function renameGroup(c){
    openModal({
      title:"Rename group",
      body:`<label>Group name</label><input type="text" id="grpName" value="${esc(c.name)}" maxlength="60" />`,
      confirm:"Save name",
      onMount:m=>{ const i=m.querySelector("#grpName"); i.focus(); i.setSelectionRange(i.value.length,i.value.length); },
      onConfirm:m=>{
        const gn=m.querySelector("#grpName");
        const v=gn.value.trim();
        if(!v){ flagFieldError(gn,"Enter a group name."); return false; }
        c.name=v; persist(); MX.renameSync(c,v); render(); toast("Group renamed"); return true;
      }
    });
  }
  async function leaveGroup(c){
    if(!(await confirmDialog({title:"Leave group",message:"Leave “"+c.name+"”? You'll need to be re-added to rejoin.",confirmLabel:"Leave",danger:true}))) return;
    MX.leaveSync(c);
    // For a smart group, snapshot to manual so leaving sticks instead of auto-rejoining.
    if(c.dynamic){ c.dynamic=false; c.filter=null; }
    c.memberIds=c.memberIds.filter(id=>id!==state.currentUserId);
    if(c.memberIds.length===0){ state.conversations=state.conversations.filter(x=>x.id!==c.id); }
    ui.activeId=state.conversations[0]?.id||null;
    persist(); render(); toast("You left the group");
  }
  async function removeMember(c,id){
    const p=prov(id);
    if(!(await confirmDialog({title:"Remove member",message:"Remove "+(p?p.name:"member")+" from the group?",confirmLabel:"Remove",danger:true}))) return;
    c.memberIds=c.memberIds.filter(x=>x!==id);
    MX.kickSync(c,id);
    persist(); renderStage(); toast((p?p.name:"Member")+" removed");
  }
  function addMembers(c){
    const candidates=state.providers.filter(p=>!c.memberIds.includes(p.id));
    if(!candidates.length){ toast("Everyone's already in this group"); return; }
    let sel=new Set();
    openModal({
      title:"Add members",
      body:`${searchBoxHtml("userSearch","Search people by name, role, location…","")}<div class="picker">${candidates.map(p=>pickRow(p,false)).join("")}</div>`,
      confirm:"Add to group",
      onMount:m=>{ wirePicker(m,sel); attachUserSearch(m); },
      onConfirm:m=>{
        if(!sel.size){ toast("Pick at least one provider"); return false; }
        sel.forEach(id=>c.memberIds.push(id));
        MX.inviteSync(c,[...sel]);
        persist(); renderStage(); toast(sel.size+" added to group"); return true;
      }
    });
  }
  async function convertToManual(c){
    if(!(await confirmDialog({title:"Convert to manual list",message:"Convert “"+c.name+"” to a manual list? Membership stops auto-updating and you can add/remove people directly.",confirmLabel:"Convert",danger:false}))) return;
    c.dynamic=false; c.filter=null;
    persist(); renderStage(); toast("Now a manual group");
  }
  function editGroupFilter(c){
    const filter = c.filter ? JSON.parse(JSON.stringify(c.filter)) : emptyFilter();
    let fq="";
    function body(){
      const matched=providersMatching(filter);
      const finalCount=uniq([c.createdBy, ...matched.map(p=>p.id)]).length;
      return `${searchBoxHtml("filterSearch","Search locations, titles, roles…",fq)}
        ${filterBuilderHtml(filter)}
        <div class="matchnote"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> <span><b>${matched.length}</b> provider${matched.length===1?"":"s"} match${matched.length===1?"es":""}${filterHasCriteria(filter)?` · group of ${finalCount}`:""}</span></div>
        ${filterPreviewHtml(filter)}`;
    }
    openModal({
      title:"Edit filter",
      size:"lg",
      body:body(),
      confirm:"Save filter",
      onMount:function mount(m){
        wireFilterChips(m,filter,()=>refreshModalBody(m,body(),()=>mount(m)));
        const fs=m.querySelector("#filterSearch");
        if(fs){ fs.oninput=()=>{ fq=fs.value; fs.parentNode.classList.toggle("has",!!fs.value); applyChipFilterDom(m,fq); }; }
        m.querySelector('[data-clr="filterSearch"]')?.addEventListener("click",()=>{ fq=""; if(fs){fs.value="";fs.parentNode.classList.remove("has");} applyChipFilterDom(m,""); fs?.focus(); });
        applyChipFilterDom(m,fq);
      },
      onConfirm:m=>{
        if(!filterHasCriteria(filter)){ toast("Choose at least one criterion"); return false; }
        const members=uniq([c.createdBy, ...providersMatching(filter).map(p=>p.id)]);
        if(members.length<2){ toast("This filter only includes the owner — widen it"); return false; }
        c.filter=JSON.parse(JSON.stringify(filter)); c.dynamic=true; c.memberIds=members;
        persist(); renderStage(); toast("Filter updated"); return true;
      }
    });
  }

  /* ---------- new conversation / group ---------- */
  const DIM = { location:{list:"locations",label:"Location"}, title:{list:"titles",label:"Title"}, role:{list:"roles",label:"Role"} };
  const DIMS = ["location","title","role"];
  function pluralize(s){ return /s$/i.test(s)?s:s+"s"; }
  const uniq = arr => [...new Set(arr)];

  function emptyFilter(){ return {location:[],title:[],role:[]}; }
  function filterHasCriteria(f){ return DIMS.some(d=>(f[d]||[]).length>0); }
  function filterMatch(p,f){
    return DIMS.every(d=>{ const v=f[d]||[]; return v.length===0 || v.includes(p[d]); });
  }
  function providersMatching(f){
    if(!filterHasCriteria(f)) return [];
    return state.providers.filter(p=>filterMatch(p,f));
  }
  function dynamicMemberIds(c){
    return uniq([c.createdBy, ...providersMatching(c.filter).map(p=>p.id)]);
  }
  function recomputeDynamicGroups(){
    let changed=false;
    state.conversations.forEach(c=>{
      if(c.mxRoomId) return;   // Matrix rooms: membership reconciles server-side (appservice, later milestone)
      if(c.type==="group" && c.dynamic && c.filter){
        const next=dynamicMemberIds(c);
        if(next.join(",")!==c.memberIds.join(",")){ c.memberIds=next; changed=true; }
      }
    });
    if(changed) persist();
    return changed;
  }
  function filterChips(f){
    const parts=[];
    DIMS.forEach(d=>{ (f[d]||[]).forEach(v=>parts.push(`<span class="attr-chip">${esc(DIM[d].label)}: ${esc(v)}</span>`)); });
    return parts.join("");
  }
  function suggestNameFromFilter(f){
    const roles=(f.role||[]).map(pluralize), titles=(f.title||[]).map(pluralize), locs=(f.location||[]);
    let base = roles.length?roles.join(" / ") : (titles.length?titles.join(" / "):"");
    if(base && locs.length) return base+" · "+locs.join(" / ");
    if(base) return base;
    if(locs.length) return locs.join(" / ")+" Team";
    return "";
  }

  function suggestGroupName(dim,val){ return dim==="location"?val+" Team":pluralize(val); }
  function matchesFor(others,dim,val){ return others.filter(p=>p[dim]===val).map(p=>p.id); }

  function filterBuilderHtml(filter){
    return DIMS.map(d=>{
      const vals=state.practice[DIM[d].list];
      return `<div class="filtcol">
        <div class="fc-h">${DIM[d].label}</div>
        <div class="chips">
          ${vals.length?vals.map(v=>`<button type="button" class="chip-t ${(filter[d]||[]).includes(v)?"on":""}" data-dim="${d}" data-val="${esc(v)}">${esc(v)}</button>`).join(""):`<span style="font-size:12px;color:var(--muted)">None yet — add in Practice setup.</span>`}
        </div>
      </div>`;
    }).join("");
  }
  function filterPreviewHtml(filter){
    if(!filterHasCriteria(filter)) return `<div class="preview"><div class="pv-empty">Pick one or more criteria to see who's included.</div></div>`;
    const matched=providersMatching(filter);
    if(!matched.length) return `<div class="preview"><div class="pv-empty">No providers match this combination.</div></div>`;
    return `<div class="preview">${matched.map(p=>`<div class="pv-row">${avatar(p.id,"s28")}<span class="pv-nm">${esc(p.name)}${p.id===state.currentUserId?" · you":""}</span></div>`).join("")}</div>`;
  }
  function wireFilterChips(modal,filter,onChange){
    modal.querySelectorAll(".chip-t").forEach(b=>b.onclick=()=>{
      const d=b.dataset.dim, v=b.dataset.val, arr=filter[d];
      const i=arr.indexOf(v); if(i>=0) arr.splice(i,1); else arr.push(v);
      onChange();
    });
  }

  function searchBoxHtml(id, placeholder, value){
    return `<div class="msearch ${value?"has":""}" data-for="${id}">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
      <input type="text" id="${id}" placeholder="${esc(placeholder)}" value="${esc(value)}" autocomplete="off" />
      <button type="button" class="clr" data-clr="${id}" title="Clear">×</button>
    </div>`;
  }
  function searchText(p){ return [p.name,p.credential,p.role,p.title,p.location].filter(Boolean).join(" ").toLowerCase(); }
  function applyChipFilterDom(m,q){
    q=(q||"").trim().toLowerCase();
    m.querySelectorAll(".filtcol").forEach(col=>{
      const chips=[...col.querySelectorAll(".chip-t")];
      if(!chips.length){ col.classList.toggle("hide",!!q); return; }
      let any=false;
      chips.forEach(ch=>{ const show=!q||ch.classList.contains("on")||ch.dataset.val.toLowerCase().includes(q); ch.style.display=show?"":"none"; if(show)any=true; });
      col.classList.toggle("hide",!any);
    });
  }
  function applyUserFilterDom(m,q){
    q=(q||"").trim().toLowerCase();
    const picker=m.querySelector(".picker"); let any=false;
    m.querySelectorAll(".picker .pick").forEach(row=>{
      const p=prov(+row.dataset.id);
      const show=!q||row.classList.contains("sel")||(p&&searchText(p).includes(q));
      row.classList.toggle("hide",!show); if(show)any=true;
    });
    let nm=m.querySelector("#userNoMatch");
    if(picker&&!any&&q){ if(!nm){ nm=document.createElement("div"); nm.id="userNoMatch"; nm.className="nomatch"; nm.textContent="No people match your search."; picker.appendChild(nm); } }
    else if(nm){ nm.remove(); }
  }
  function attachUserSearch(m){
    const us=m.querySelector("#userSearch"); if(!us) return;
    const apply=()=>{ us.parentNode.classList.toggle("has",!!us.value); applyUserFilterDom(m,us.value); };
    us.oninput=apply;
    m.querySelector('[data-clr="userSearch"]')?.addEventListener("click",()=>{ us.value=""; apply(); us.focus(); });
    apply();
  }

  function normalizePhone(raw){
    const d=String(raw||"").replace(/\D/g,"");
    if(d.length===10) return "+1"+d;
    if(d.length===11 && d[0]==="1") return "+"+d;
    return d?("+"+d):"";
  }
  function openOrCreateSmsThread(contactId){
    let c=state.conversations.find(x=>x.type==="sms" && x.contactId===contactId);
    if(!c){ c={ id:uid("sms"), type:"sms", contactId, assignedTo:state.currentUserId, status:"open", pinned:false, messages:[] }; state.conversations.push(c); persist(); }
    openConv(c.id);
  }
  function newSmsFlow(){
    let sub="existing", selContactId=null, q="", consentOn=true;
    function contactRow(ct){
      const chip = ct.consent==="opted_out"?'<span class="consent-chip out">Opted out</span>':ct.consent==="opted_in"?'<span class="consent-chip ok">Opted in</span>':'<span class="consent-chip pend">Pending</span>';
      return `<div class="pick ${selContactId===ct.id?"sel":""}" data-cid="${ct.id}">
        ${smsAvatar(ct,"s34")}
        <div class="pk-meta"><div class="pk-nm">${esc(ct.name)}</div><div class="pk-rl">${esc(fmtPhone(ct.phone))} · ${chip}</div></div>
        <div class="rdo" aria-hidden="true"></div>
      </div>`;
    }
    function body(){
      return `
        <div class="seg" style="margin-bottom:14px">
          <button data-sub="existing" class="${sub==="existing"?"on":""}">Existing patient</button>
          <button data-sub="new" class="${sub==="new"?"on":""}">New patient</button>
        </div>
        ${sub==="existing"
          ? `${searchBoxHtml("cSearch","Search patients by name or phone…",q)}
             <div class="picker">${state.contacts.length?state.contacts.map(contactRow).join(""):'<div class="nomatch">No patients yet — add one under “New patient”.</div>'}</div>`
          : `<label>Patient name</label>
             <input type="text" id="ctName" placeholder="e.g. Jordan Avery" maxlength="60" style="margin-bottom:12px" />
             <label>Mobile number</label>
             <input type="text" id="ctPhone" placeholder="+1 (619) 555-0142" style="margin-bottom:14px" />
             <div class="mini-toggle ${consentOn?"on":""}" id="consentNew"><span class="sw"></span> Patient has consented to texts (opt-in on file)</div>
             <div style="font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5">TCPA requires consent before texting. Without it the thread opens but sending stays locked until they opt in.</div>`}`;
    }
    function applyContactSearch(m){
      const qq=q.trim().toLowerCase();
      m.querySelectorAll(".picker .pick").forEach(row=>{
        const ct=contact(row.dataset.cid);
        const show=!qq || (ct && (ct.name.toLowerCase().includes(qq) || String(ct.phone).includes(qq) || fmtPhone(ct.phone).toLowerCase().includes(qq)));
        row.classList.toggle("hide",!show);
      });
    }
    openModal({
      title:"Text a patient",
      size:"lg",
      body:body(),
      confirm:"Open thread",
      onMount:function mount(m){
        m.querySelectorAll("[data-sub]").forEach(b=>b.onclick=()=>{ sub=b.dataset.sub; selContactId=null; refreshModalBody(m,body(),()=>mount(m)); });
        const cs=m.querySelector("#cSearch");
        if(cs){ cs.oninput=()=>{ q=cs.value; cs.parentNode.classList.toggle("has",!!cs.value); applyContactSearch(m); }; m.querySelector('[data-clr="cSearch"]').onclick=()=>{ q=""; cs.value=""; cs.parentNode.classList.remove("has"); applyContactSearch(m); cs.focus(); }; applyContactSearch(m); }
        m.querySelectorAll(".pick").forEach(row=>row.onclick=()=>{ selContactId=row.dataset.cid; m.querySelectorAll(".pick").forEach(r=>r.classList.remove("sel")); row.classList.add("sel"); });
        m.querySelector("#consentNew")?.addEventListener("click",function(){ consentOn=!consentOn; this.classList.toggle("on",consentOn); });
      },
      onConfirm:m=>{
        if(sub==="existing"){
          if(!selContactId){ toast("Pick a patient"); return false; }
          openOrCreateSmsThread(selContactId); return true;
        }
        const name=(m.querySelector("#ctName").value||"").trim();
        const phoneRaw=(m.querySelector("#ctPhone").value||"").trim();
        if(!name){ flagFieldError(m.querySelector("#ctName"),"Enter the patient's name."); return false; }
        const phone=normalizePhone(phoneRaw);
        if(phone.replace(/\D/g,"").length<10){ flagFieldError(m.querySelector("#ctPhone"),"Enter a valid mobile number."); return false; }
        const ct={ id:uid("ct"), name, phone, consent: consentOn?"opted_in":"pending", consentAt: consentOn?Date.now():null, optOutAt:null };
        state.contacts.push(ct); persist();
        openOrCreateSmsThread(ct.id); toast("Patient thread created"); return true;
      }
    });
  }

  function newConversationFlow(){
    const others=state.providers.filter(p=>p.id!==state.currentUserId);
    let mode="dm";                 // 'dm' | 'mgroup' | 'newgroup'
    let sel=new Set();             // selected providers (dm + manual group)
    let groupSel=null;             // selected existing group id (mgroup)
    let groupMode="manual";        // newgroup sub-mode: 'manual' (default) | 'filter'
    let filter=emptyFilter(), smart=true, groupName="", nameTouched=false;
    let filterQuery="", userQuery="", groupQuery="";
    let step="select";             // 'select' | 'decideGroup'
    let dontAsk=false;

    const provHaystack = p => [p.name, p.credential, p.role, p.title, p.location].filter(Boolean).join(" ").toLowerCase();
    const getPref = () => (state.prefs && state.prefs.multiSelect) || null;
    const setPref = v => { state.prefs = state.prefs||{}; state.prefs.multiSelect = v; persist(); };
    function firstNames(ids){ return ids.map(id=>prov(id)?prov(id).name.replace(/^Dr\.\s/,"").split(" ")[0]:"").filter(Boolean); }
    function suggestMultiName(ids){ const f=firstNames(ids); return f.slice(0,3).join(", ")+(f.length>3?` +${f.length-3}`:""); }
    function getOrCreateDM(other){
      let ex=state.conversations.find(c=>c.type==="dm"&&c.memberIds.includes(other)&&c.memberIds.includes(state.currentUserId)&&(!MX.active()||c.mxRoomId));
      if(ex) return ex;
      if(MX.active()){ MX.createDM(other); return null; }   // async: opens on room create
      ex={id:uid("c"),type:"dm",name:null,memberIds:[state.currentUserId,other],createdBy:state.currentUserId,pinned:false,messages:[]}; state.conversations.push(ex);
      return ex;
    }
    function createGroupFrom(ids,name){
      if(MX.active()){ MX.createGroup(ids,name,false); return null; }   // async: opens on room create
      const c={id:uid("c"),type:"group",name,memberIds:uniq([state.currentUserId,...ids]),createdBy:state.currentUserId,pinned:false,messages:[],dynamic:false,filter:null};
      state.conversations.push(c); persist(); return c;
    }

    function applyChipFilter(m){
      const q=filterQuery.trim().toLowerCase();
      m.querySelectorAll(".filtcol").forEach(col=>{
        const chips=[...col.querySelectorAll(".chip-t")];
        if(!chips.length){ col.classList.toggle("hide", !!q); return; }
        let anyVisible=false;
        chips.forEach(ch=>{ const show=!q||ch.classList.contains("on")||ch.dataset.val.toLowerCase().includes(q); ch.style.display=show?"":"none"; if(show)anyVisible=true; });
        col.classList.toggle("hide", !anyVisible);
      });
    }
    function applyUserFilter(m){
      const q=userQuery.trim().toLowerCase();
      let any=false;
      m.querySelectorAll(".picker .pick:not(.grow)").forEach(row=>{
        const p=prov(+row.dataset.id);
        const show=!q||row.classList.contains("sel")||(p&&provHaystack(p).includes(q));
        row.classList.toggle("hide",!show); if(show)any=true;
      });
      const picker=m.querySelector(".picker"); let nm=m.querySelector("#userNoMatch");
      if(picker&&!any&&q){ if(!nm){ nm=document.createElement("div"); nm.id="userNoMatch"; nm.className="nomatch"; nm.textContent="No people match your search."; picker.appendChild(nm);} } else if(nm) nm.remove();
    }
    function applyGroupFilter(m){
      const q=groupQuery.trim().toLowerCase(); let any=false;
      m.querySelectorAll(".glist .grow").forEach(row=>{
        const c=conv(row.dataset.gid);
        const show=!q||(c&&(c.name||"").toLowerCase().includes(q));
        row.classList.toggle("hide",!show); if(show)any=true;
      });
      const list=m.querySelector(".glist"); let nm=m.querySelector("#grpNoMatch");
      if(list&&!any&&q){ if(!nm){ nm=document.createElement("div"); nm.id="grpNoMatch"; nm.className="nomatch"; nm.textContent="No groups match your search."; list.appendChild(nm);} } else if(nm) nm.remove();
    }

    function groupRow(c){
      const smartBadge=c.dynamic?'<span class="smart-badge" style="margin-left:6px"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.7 4.4A9 9 0 0 0 20.5 15"/></svg> Smart</span>':"";
      return `<div class="pick grow ${groupSel===c.id?"sel":""}" data-gid="${c.id}">
        ${groupAvatar("s34")}
        <div class="pk-meta"><div class="pk-nm">${esc(c.name||"Group")}${smartBadge}</div><div class="pk-rl">${c.memberIds.length} member${c.memberIds.length===1?"":"s"}</div></div>
        <div class="rdo" aria-hidden="true"></div>
      </div>`;
    }

    function decideBody(){
      const ids=[...sel], pref=getPref();
      return `<div style="text-align:center;padding:4px 4px 2px">
          <div class="eill" style="margin:0 auto 12px;width:54px;height:54px;border-radius:15px"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
          <div style="font-family:'Instrument Serif',serif;font-size:22px;color:var(--ink)">You selected ${ids.length} people</div>
          ${pref===null?`<div style="font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5">Would you like to start a group conversation with them, or open separate direct messages?</div>`:`<div style="font-size:13px;color:var(--muted);margin-top:6px">Name your new group.</div>`}
        </div>
        <div style="margin-top:16px">
          <label>Group name</label>
          <input type="text" id="decideName" value="${esc(groupName)}" placeholder="${esc(suggestMultiName(ids))}" maxlength="60" />
        </div>
        ${pref===null?`<label class="mini-check" id="dontAskWrap"><span class="cbx ${dontAsk?"on":""}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></span> Don't ask me this again</label>
        <div style="margin-top:14px"><button class="btn" id="sepDms" style="width:100%">Open ${ids.length} separate direct messages instead</button></div>`:""}`;
    }

    function modeBody(){
      if(mode==="dm"){
        return `<label>Message which providers? <span style="font-weight:400;color:var(--muted)">(pick one, or several for a group)</span></label>
          ${searchBoxHtml("userSearch","Search people by name, role, location…",userQuery)}
          <div class="picker">${others.map(p=>pickRow(p,sel.has(p.id))).join("")}</div>`;
      }
      if(mode==="mgroup"){
        const groups=state.conversations.filter(c=>c.type==="group");
        return `<label>Open which group?</label>
          ${searchBoxHtml("groupSearch","Search groups by name…",groupQuery)}
          <div class="picker glist">${groups.length?groups.map(groupRow).join(""):'<div class="nomatch">No groups yet — create one under “New group”.</div>'}</div>`;
      }
      const matched = providersMatching(filter);
      const finalCount = uniq([state.currentUserId, ...matched.map(p=>p.id)]).length;
      const groupBody = groupMode==="filter" ? `
        ${searchBoxHtml("filterSearch","Search locations, titles, roles…",filterQuery)}
        ${filterBuilderHtml(filter)}
        <div class="matchnote"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg> <span><b>${matched.length}</b> provider${matched.length===1?"":"s"} match${matched.length===1?"es":""}${filterHasCriteria(filter)?` · group of ${finalCount}`:""}</span></div>
        ${filterPreviewHtml(filter)}
        <div class="smart-toggle ${smart?"on":""}" id="smartToggle"><div class="sw"></div><div class="st-txt"><div class="st-t">Keep in sync as people change</div><div class="st-d">${smart?"Smart group — membership auto-updates when providers are reassigned.":"One-time snapshot — members are fixed at creation."}</div></div></div>`
        : `<label>Members <span style="font-weight:400;color:var(--muted)">(pick one or more)</span></label>
        ${searchBoxHtml("userSearch","Search people by name, role, location…",userQuery)}
        <div class="picker">${others.map(p=>pickRow(p,sel.has(p.id))).join("")}</div>`;
      return `<label>Group name</label>
        <input type="text" id="grpNameNew" placeholder="e.g. Crisis Response" value="${esc(groupName)}" maxlength="60" style="margin-bottom:14px" />
        <div class="seg">
          <button data-gmode="manual" class="${groupMode==="manual"?"on":""}">Pick providers</button>
          <button data-gmode="filter" class="${groupMode==="filter"?"on":""}">By filter</button>
        </div>
        ${groupBody}`;
    }

    function bodyHtml(){
      if(step==="decideGroup") return decideBody();
      const tabs=[["dm","Direct message"],["mgroup","Message group"],["newgroup","New group"]];
      return `<div style="display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap">
          ${tabs.map(([k,l])=>`<button class="btn ${mode===k?"primary":""}" data-mode="${k}" style="flex:1;min-width:120px;padding-left:8px;padding-right:8px">${l}</button>`).join("")}
          <button class="btn" id="modeSms" style="flex:1;min-width:120px;padding-left:8px;padding-right:8px">Text a patient</button>
        </div>
        ${modeBody()}`;
    }

    function onFilterChange(m){ if(!nameTouched) groupName=suggestNameFromFilter(filter); refreshModalBody(m,bodyHtml(),()=>mount(m)); }

    function wireSearch(m){
      const fs=m.querySelector("#filterSearch");
      if(fs){ fs.oninput=()=>{ filterQuery=fs.value; fs.parentNode.classList.toggle("has",!!fs.value); applyChipFilter(m); }; applyChipFilter(m); }
      const us=m.querySelector("#userSearch");
      if(us){ us.oninput=()=>{ userQuery=us.value; us.parentNode.classList.toggle("has",!!us.value); applyUserFilter(m); }; applyUserFilter(m); }
      const gs=m.querySelector("#groupSearch");
      if(gs){ gs.oninput=()=>{ groupQuery=gs.value; gs.parentNode.classList.toggle("has",!!gs.value); applyGroupFilter(m); }; applyGroupFilter(m); }
      m.querySelectorAll("[data-clr]").forEach(btn=>btn.onclick=()=>{ const inp=m.querySelector("#"+btn.dataset.clr); if(!inp) return; inp.value=""; inp.dispatchEvent(new Event("input",{bubbles:true})); inp.focus(); });
    }

    function setOkLabel(m){ const ok=m.querySelector("#mOk"); if(ok) ok.textContent = step==="decideGroup" ? "Create group" : (mode==="mgroup"?"Open group":"Start conversation"); }

    function mount(m){
      setOkLabel(m);
      if(step==="decideGroup"){
        const dn=m.querySelector("#decideName"); if(dn){ dn.oninput=()=>{ groupName=dn.value; nameTouched=true; }; dn.focus(); }
        m.querySelector("#dontAskWrap")?.addEventListener("click",function(){ dontAsk=!dontAsk; this.querySelector(".cbx").classList.toggle("on",dontAsk); });
        m.querySelector("#sepDms")?.addEventListener("click",()=>{
          if(dontAsk) setPref("dms");
          const ids=[...sel]; let last=null; ids.forEach(id=>{ last=getOrCreateDM(id); }); persist();
          closeModal(); if(last) openConv(last.id); toast(ids.length+" direct messages opened");
        });
        return;
      }
      m.querySelectorAll("[data-mode]").forEach(b=>b.onclick=()=>{ mode=b.dataset.mode; sel.clear(); groupSel=null; refreshModalBody(m,bodyHtml(),()=>mount(m)); });
      m.querySelector("#modeSms")?.addEventListener("click",()=>{ closeModal(); newSmsFlow(); });

      const gn=m.querySelector("#grpNameNew");
      if(gn) gn.oninput=()=>{ groupName=gn.value; nameTouched=true; };

      m.querySelectorAll("[data-gmode]").forEach(b=>b.onclick=()=>{ groupMode=b.dataset.gmode; refreshModalBody(m,bodyHtml(),()=>mount(m)); });
      wireFilterChips(m,filter,()=>onFilterChange(m));
      m.querySelector("#smartToggle")?.addEventListener("click",()=>{ smart=!smart; refreshModalBody(m,bodyHtml(),()=>mount(m)); });

      m.querySelectorAll(".picker .pick:not(.grow)").forEach(row=>{
        row.onclick=()=>{ const id=+row.dataset.id; if(sel.has(id)){ sel.delete(id); row.classList.remove("sel"); } else { sel.add(id); row.classList.add("sel"); } };
      });
      m.querySelectorAll(".grow").forEach(row=>{
        row.onclick=()=>{ groupSel=row.dataset.gid; m.querySelectorAll(".grow").forEach(r=>r.classList.remove("sel")); row.classList.add("sel"); };
      });

      wireSearch(m);
    }

    openModal({
      title:"New message",
      size:"lg",
      body:bodyHtml(),
      confirm:"Start conversation",
      onMount:mount,
      onConfirm:m=>{
        if(step==="decideGroup"){
          const dn=m.querySelector("#decideName"); const nm=(dn?.value||"").trim()||suggestMultiName([...sel]);
          if(!nm){ flagFieldError(dn,"Enter a group name."); return false; }
          if(dontAsk) setPref("group");
          const c=createGroupFrom([...sel],nm); if(c){ openConv(c.id); toast("Group created"); } return true;
        }
        if(mode==="dm"){
          if(sel.size===0){ toast("Pick at least one person"); return false; }
          if(sel.size===1){ const ex=getOrCreateDM([...sel][0]); if(ex){ persist(); openConv(ex.id); } return true; }
          const pref=getPref();
          if(pref==="dms"){ const ids=[...sel]; let last=null; ids.forEach(id=>{ const d=getOrCreateDM(id); if(d) last=d; }); persist(); if(last) openConv(last.id); toast(ids.length+" direct messages opened"); return true; }
          if(!nameTouched) groupName=suggestMultiName([...sel]);
          step="decideGroup"; refreshModalBody(m,bodyHtml(),()=>mount(m)); return false;
        }
        if(mode==="mgroup"){
          if(!groupSel){ toast("Pick a group"); return false; }
          openConv(groupSel); return true;
        }
        const gn=m.querySelector("#grpNameNew"); const nm=(gn?.value||"").trim();
        if(!nm){ flagFieldError(gn,"Enter a group name to continue."); return false; }
        if(groupMode==="filter"){
          if(!filterHasCriteria(filter)){ toast("Choose at least one filter criterion"); return false; }
          const members=uniq([state.currentUserId, ...providersMatching(filter).map(p=>p.id)]);
          if(members.length<2){ toast("This filter only includes you — widen it"); return false; }
          if(MX.active()){ MX.createGroup(members.filter(x=>x!==state.currentUserId), nm, smart); return true; }
          const c={id:uid("c"),type:"group",name:nm,memberIds:members,createdBy:state.currentUserId,pinned:false,messages:[],dynamic:smart,filter:smart?JSON.parse(JSON.stringify(filter)):null};
          state.conversations.push(c); persist(); openConv(c.id); toast(smart?"Smart group created — it'll stay in sync":"Group created"); return true;
        } else {
          if(sel.size<1){ toast("Pick at least one member"); return false; }
          const c=createGroupFrom([...sel],nm); if(c){ openConv(c.id); toast("Group created"); } return true;
        }
      }
    });
  }
  function pickRow(p,selected){
    const loc = p.location?` · ${esc(p.location)}`:"";
    return `<div class="pick ${selected?"sel":""}" data-id="${p.id}">
      ${avatar(p.id,"s34")}
      <div class="pk-meta"><div class="pk-nm">${esc(p.name)}</div><div class="pk-rl">${esc(p.credential+" · "+p.role)}${loc}</div></div>
      <div class="chk"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></div>
    </div>`;
  }
  function wirePicker(m,sel){
    m.querySelectorAll(".pick").forEach(row=>{
      row.onclick=()=>{ const id=+row.dataset.id; if(sel.has(id)){sel.delete(id);row.classList.remove("sel");}else{sel.add(id);row.classList.add("sel");} };
    });
  }
  function refreshModalBody(modal,html,remount){
    modal.querySelector(".mbd").innerHTML=html; remount();
  }

  /* ---------- practice setup ---------- */
  function updateAlertsBadge(){
    const el=$("#alertsCount"); if(!el) return;
    // unseen outbox notifications + unacknowledged (new) risk alerts
    const n=unseenAlerts()+newRiskCount();
    el.textContent=n>9?"9+":String(n);
    el.style.display = n>0 ? "" : "none";
  }
  function fmtAlertTime(ts){
    const d=new Date(ts), now=new Date();
    const sameDay=d.toDateString()===now.toDateString();
    return sameDay ? d.toLocaleTimeString([], {hour:"numeric",minute:"2-digit"})
                   : d.toLocaleDateString([], {month:"short",day:"numeric"})+" "+d.toLocaleTimeString([], {hour:"numeric",minute:"2-digit"});
  }
  function openAlerts(){
    let atab="alerts", filt="all", resolveFor=null, noteDraft="";
    const FILTS=[["all","All"],["new","New"],["acknowledged","Ack'd"],["resolved","Resolved"]];

    function alertCard(a){
      const sev = a.severity==="high" ? '<span class="sev-pill high">High</span>' : '<span class="sev-pill medium">Med</span>';
      const st = a.status==="new" ? '<span class="st-chip stnew">New</span>'
        : a.status==="acknowledged" ? '<span class="st-chip stack">Ack’d</span>'
        : '<span class="st-chip stres">Resolved</span>';
      const src = a.source==="treatment-plan" ? '<span class="src-tag" data-sync-owner="treatment-plan">Treatment Plan</span>' : "";
      const title = a.source==="treatment-plan" ? "Treatment Plan risk flag" : esc(a.ruleNames.join(", ")||"Risk rule");
      const ctxBits=[];
      if(a.context) ctxBits.push(esc(a.context));
      if(a.patientName && !(a.context||"").includes(a.patientName)) ctxBits.push("Patient · "+esc(a.patientName));
      if(a.source==="treatment-plan" && !a.patientName && a.clientId) ctxBits.push("Client id · "+esc(a.clientId));
      if(a.terms && a.terms.length) ctxBits.push("matched "+esc(a.terms.slice(0,4).map(t=>"“"+t+"”").join(", ")));
      const metaLines=[`Flagged ${fmtAlertTime(a.ts)}`];
      if(a.ackAt) metaLines.push(`Acknowledged by ${esc(a.ackByName||"?")} · ${fmtAlertTime(a.ackAt)}`);
      if(a.resolvedAt) metaLines.push(`Resolved by ${esc(a.resolvedByName||"?")} · ${fmtAlertTime(a.resolvedAt)}`);
      let actions="";
      if(a.status==="new"){
        actions=`<div class="ra-actions"><button class="btn primary" data-ack="${a.id}">Acknowledge</button></div>`;
      }else if(a.status==="acknowledged"){
        actions = resolveFor===a.id
          ? `<div class="ra-resolve">
              <textarea id="raNote" placeholder="Resolution note (required) — what was done about this flag?">${esc(noteDraft)}</textarea>
              <div class="ra-actions">
                <button class="btn primary" data-confres="${a.id}">Resolve alert</button>
                <button class="btn" data-cancelres="${a.id}">Cancel</button>
              </div>
            </div>`
          : `<div class="ra-actions"><button class="btn" data-startres="${a.id}">Resolve…</button></div>`;
      }
      return `<div class="ra-item" data-alert="${a.id}">
        <div class="ra-body">
          <div class="ra-top">${sev}${st}${src}<span>${title}</span></div>
          ${ctxBits.length?`<div class="ra-ctx">${ctxBits.join(" · ")}</div>`:""}
          ${a.snippet?`<div class="ra-snip">“${esc(a.snippet)}”</div>`:""}
          <div class="ra-meta">${metaLines.join("<br/>")}</div>
          ${a.resolutionNote?`<div class="ra-notequote">${esc(a.resolutionNote)}</div>`:""}
          ${actions}
        </div>
      </div>`;
    }

    function alertsBody(){
      const all=(state.riskAlerts||[]);
      const count=k=>k==="all"?all.length:all.filter(a=>a.status===k).length;
      const rows=(filt==="all"?all:all.filter(a=>a.status===filt));
      const list=rows.length ? rows.map(alertCard).join("")
        : `<div class="empty" style="padding:26px 0"><p>${all.length?"No alerts in this state.":"No risk alerts yet. When a message trips a risk rule — or Treatment Plan sends a risk flag — it lands here for acknowledgement and resolution."}</p></div>`;
      return `<div style="font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5">Every risk fire is tracked new → acknowledged → resolved. Resolving requires a note; every transition is recorded on the alert and (for patient-associated alerts) in the audit log.</div>
        <div class="au-cats" style="margin-bottom:12px">${FILTS.map(([k,l])=>`<button type="button" class="au-chip ${filt===k?"on":""}" data-filt="${k}">${l} (${count(k)})</button>`).join("")}</div>
        <div class="oblist">${list}</div>`;
    }

    function outboxBody(){
      const list=(state.outbox||[]);
      const rows = list.length ? list.map(o=>{
      const icon = o.kind==="sms"
        ? `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`
        : `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>`;
      const statusLbl = o.status==="sent" ? "Sent" : "Held · quiet hours";
      const sevDot = o.severity==="high" ? '<span class="sev-pill high">High</span>' : '<span class="sev-pill medium">Med</span>';
      return `<div class="ob-item">
        <div class="ob-ic ${o.kind}">${icon}</div>
        <div class="ob-body">
          <div class="ob-subj">${sevDot} ${esc(o.subject)}</div>
          <div class="ob-to">to ${esc(o.toName)} · ${esc(o.toAddr)}</div>
          <div class="ob-snip">${esc(o.body)}</div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none">
          <span class="ob-status ${o.status}">${statusLbl}</span>
          <span class="ob-time">${fmtAlertTime(o.ts)}</span>
        </div>
      </div>`;
    }).join("") : `<div class="empty" style="padding:26px 0"><p>No notifications yet. When a message trips a risk rule, the email/SMS notifications it generates show up here.</p></div>`;
      return `<div style="font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5">Simulated notifications fired by your risk rules. “Held · quiet hours” means the recipient was in a quiet window and the rule didn't override it.</div>
        <div class="oblist">${rows}</div>`;
    }

    function body(){
      const nNew=newRiskCount();
      return `<div class="tabs">
          <button data-atab="alerts" class="${atab==="alerts"?"on":""}">Alerts${nNew?` (${nNew} new)`:""}</button>
          <button data-atab="outbox" class="${atab==="outbox"?"on":""}">Notification outbox</button>
        </div>
        ${atab==="alerts"?alertsBody():outboxBody()}`;
    }

    function rerender(m, focusNote){
      refreshModalBody(m, body(), ()=>{
        wire(m);
        if(focusNote){ const t=m.querySelector("#raNote"); if(t){ t.focus(); t.setSelectionRange(t.value.length,t.value.length); } }
      });
    }

    function wire(m){
      m.querySelectorAll("[data-atab]").forEach(b=>b.onclick=()=>{ atab=b.dataset.atab; rerender(m); });
      m.querySelectorAll("[data-filt]").forEach(b=>b.onclick=()=>{ filt=b.dataset.filt; resolveFor=null; noteDraft=""; rerender(m); });
      m.querySelectorAll("[data-ack]").forEach(b=>b.onclick=()=>{
        if(ackRiskAlert(b.dataset.ack)) toast("Alert acknowledged");
        rerender(m);
      });
      m.querySelectorAll("[data-startres]").forEach(b=>b.onclick=()=>{ resolveFor=b.dataset.startres; noteDraft=""; rerender(m, true); });
      m.querySelectorAll("[data-cancelres]").forEach(b=>b.onclick=()=>{ resolveFor=null; noteDraft=""; rerender(m); });
      m.querySelectorAll("[data-confres]").forEach(b=>b.onclick=()=>{
        const t=m.querySelector("#raNote");
        const note=(t?t.value:"").trim();
        if(!note){ flagFieldError(t, "A resolution note is required to resolve a risk alert."); return; }
        if(resolveRiskAlert(b.dataset.confres, note)){ resolveFor=null; noteDraft=""; toast("Alert resolved"); }
        rerender(m);
      });
      const noteEl=m.querySelector("#raNote");
      if(noteEl) noteEl.addEventListener("input", ()=>{ noteDraft=noteEl.value; });
    }

    openModalCustom({
      title:"Risk alerts & outbox",
      size:"xl",
      body:body(),
      footer:`<button class="btn primary" id="mDone">Done</button>`,
      onMount:m=>{ (state.outbox||[]).forEach(o=>o.seen=true); persist(); updateAlertsBadge(); wire(m); },
      onFooter:modal=>{ modal.querySelector("#mDone").onclick=()=>closeModal(); }
    });
  }

  function openAuditLog(filterConvId){
    let cat="all", convFilter=filterConvId||"", q="";
    const smsConvs=()=>state.conversations.filter(c=>c.type==="sms");
    const CATS=[["all","All"],["sent","Sent"],["received","Received"],["scheduled","Scheduled"],["consent","Consent"],["risk","Risk"],["alerts","Alerts"]];
    function filtered(){
      let rows=(state.smsAudit||[]).slice().reverse(); // newest first
      if(cat!=="all") rows=rows.filter(r=>r.category===cat);
      if(convFilter) rows=rows.filter(r=>r.conversationId===convFilter);
      if(q){ const s=q.toLowerCase(); rows=rows.filter(r=>((r.summary||"")+" "+(r.patientName||"")+" "+(r.actorName||"")+" "+r.type).toLowerCase().includes(s)); }
      return rows;
    }
    function catIcon(category){
      const map={
        sent:'<path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/>',
        received:'<path d="M12 5v14M19 12l-7 7-7-7"/>',
        scheduled:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
        consent:'<path d="M9 12l2 2 4-4"/><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/>',
        risk:'<path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>',
        alerts:'<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
        other:'<circle cx="12" cy="12" r="9"/>'
      };
      return `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">${map[category]||map.other}</svg>`;
    }
    function body(){
      const rows=filtered();
      const total=(state.smsAudit||[]).length;
      const convOpts=`<option value="">All patients</option>`+smsConvs().map(c=>{const ct=contact(c.contactId);return `<option value="${c.id}" ${convFilter===c.id?"selected":""}>${esc(ct?ct.name:"Patient")}</option>`;}).join("");
      const list = rows.length ? rows.map(r=>{
        const mb=[]; const me=r.meta||{};
        if(me.severity) mb.push("severity: "+me.severity);
        if(me.terms&&me.terms.length) mb.push("terms: "+me.terms.map(t=>"“"+t+"”").join(", "));
        else if(me.rules&&me.rules.length) mb.push(me.rules.join(", "));
        if(me.numMedia) mb.push(me.numMedia+" media");
        if(me.releaseAt) mb.push("sends "+fmtWhen(me.releaseAt));
        if(me.recipients) mb.push(me.recipients+" recipient"+(me.recipients>1?"s":""));
        return `<div class="au-item au-${r.category}">
          <div class="au-ic">${catIcon(r.category)}</div>
          <div class="au-body">
            <div class="au-top"><span class="au-type">${esc(AUDIT_LABELS[r.type]||r.type)}</span>${r.patientName?`<span class="au-pt">${esc(r.patientName)}</span>`:""}</div>
            <div class="au-sum">${esc(r.summary)}</div>
            ${mb.length?`<div class="au-meta">${esc(mb.join(" · "))}</div>`:""}
          </div>
          <div class="au-side"><span class="au-actor">${esc(r.actorName||"—")}</span><span class="au-time">${fmtAlertTime(r.ts)}</span></div>
        </div>`;
      }).join("") : `<div class="empty" style="padding:26px 0"><p>${total?"No events match these filters.":"No audit events yet. As you send, receive, schedule, change consent, or trip a risk rule on patient texts, every action is recorded here — append-only — and can be exported to CSV or JSON."}</p></div>`;
      return `<div class="au-hint">Append-only record of patient-SMS activity — sends, inbound, scheduling, consent (STOP/START), risk flags &amp; alerts. ${total} event${total===1?"":"s"} total${convFilter?` · filtered to one patient`:""}.</div>
        <div class="au-controls">
          <div class="au-cats">${CATS.map(([k,l])=>`<button type="button" class="au-chip ${cat===k?"on":""}" data-cat="${k}">${l}</button>`).join("")}</div>
          <div class="au-row2">
            <select class="ppick" id="auConv" style="max-width:220px">${convOpts}</select>
            <input type="text" id="auSearch" class="ppick" placeholder="Search events…" value="${esc(q)}" style="flex:1;min-width:140px" />
            <button type="button" class="btn" id="auCsv">Export CSV</button>
            <button type="button" class="btn" id="auJson">Export JSON</button>
          </div>
        </div>
        <div class="au-list">${list}</div>`;
    }
    function wire(m){
      m.querySelectorAll("[data-cat]").forEach(b=>b.onclick=()=>{ cat=b.dataset.cat; refreshModalBody(m,body(),()=>wire(m)); });
      const cs=m.querySelector("#auConv"); if(cs) cs.onchange=()=>{ convFilter=cs.value; refreshModalBody(m,body(),()=>wire(m)); };
      const se=m.querySelector("#auSearch"); if(se) se.oninput=()=>{ q=se.value; refreshModalBody(m,body(),()=>{ wire(m); const x=m.querySelector("#auSearch"); if(x){ x.focus(); x.setSelectionRange(x.value.length,x.value.length); } }); };
      const stamp=()=>new Date().toISOString().slice(0,10);
      m.querySelector("#auCsv")?.addEventListener("click",()=>{ const rows=filtered(); if(!rows.length){ toast("Nothing to export"); return; } downloadBlob(`credify_sms_audit_${stamp()}.csv`, auditToCSV(rows), "text/csv"); });
      m.querySelector("#auJson")?.addEventListener("click",()=>{ const rows=filtered(); if(!rows.length){ toast("Nothing to export"); return; } downloadBlob(`credify_sms_audit_${stamp()}.json`, JSON.stringify(rows,null,2), "application/json"); });
    }
    openModalCustom({
      title:"SMS audit log",
      size:"xl",
      body:body(),
      footer:`<button class="btn primary" id="mDone">Done</button>`,
      onMount:wire,
      onFooter:modal=>{ modal.querySelector("#mDone").onclick=()=>closeModal(); }
    });
  }
  function downloadBlob(filename, text, mime){
    try{
      const blob=new Blob([text], {type:mime||"text/plain"});
      const url=URL.createObjectURL(blob);
      const a=document.createElement("a"); a.href=url; a.download=filename;
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(()=>URL.revokeObjectURL(url), 1500);
      toast("Exported "+filename);
    }catch(e){ toast("Export isn't supported in this view"); }
  }
  function auditToCSV(rows){
    const cols=["timestamp","type","category","patient","actor","summary","conversationId","messageId","meta"];
    const q=v=>{ v=v==null?"":String(v); return /[",\n]/.test(v) ? '"'+v.replace(/"/g,'""')+'"' : v; };
    const lines=[cols.join(",")];
    rows.forEach(r=>lines.push([new Date(r.ts).toISOString(), r.type, r.category, r.patientName||"", r.actorName||"", r.summary||"", r.conversationId||"", r.messageId||"", JSON.stringify(r.meta||{})].map(q).join(",")));
    return lines.join("\n");
  }

  function openPracticeSetup(){
    let tab="locations", psQuery="";
    const clone = o => JSON.parse(JSON.stringify(o));
    let baseline = clone(state);   // committed snapshot to restore on Discard
    let dirty = false;
    let psModal = null;
    function markDirty(){ dirty=true; updateSaveUI(); }
    function updateSaveUI(){
      if(!psModal) return;
      const btn=psModal.querySelector("#psSave"); if(btn) btn.disabled=!dirty;
      const note=psModal.querySelector("#psDirty"); if(note) note.style.display=dirty?"inline":"none";
    }
    function commit(){ persist(); baseline=clone(state); dirty=false; render(); updateSaveUI(); toast("Practice setup saved"); }
    function discardAndClose(){ restoreState(baseline); persist(); render(); closeModal(); }
    function restoreState(snap){ // mutate live state in place so external references stay valid
      Object.keys(state).forEach(k=>{ if(!(k in snap)) delete state[k]; });
      Object.keys(snap).forEach(k=>{ state[k]=clone(snap[k]); });
    }
    const TABS=[["locations","Locations"],["titles","Titles"],["roles","Roles"],["providers","Providers"],["quiet","Quiet hours"],["risk","Risk alerts"],["reminders","Reminders"],["templates","Templates"]];
    const dimOf = t => t==="locations"?"location":t==="titles"?"title":t==="roles"?"role":null;
    const singular = t => ({locations:"location",titles:"title",roles:"role"}[t]||t);
    const counts = (dim,val) => state.providers.filter(p=>p[dim]===val).length;

    function tabsHtml(){
      return `<div class="tabs">${TABS.map(([k,l])=>`<button data-tab="${k}" class="${k===tab?"on":""}">${l}</button>`).join("")}</div>`;
    }
    function taxBody(){
      const list=state.practice[tab], dim=dimOf(tab);
      return `
        <div class="taxhint">Rename or remove values, or add new ones. Changes cascade to every provider and update the group-by options.</div>
        ${searchBoxHtml("psSearch","Search "+tab+"…",psQuery)}
        <div class="taxlist">
          ${list.length?list.map((v,i)=>`<div class="taxrow">
            <input type="text" value="${esc(v)}" data-idx="${i}" maxlength="48" />
            <span class="count">${counts(dim,v)} assigned</span>
            <button class="del" data-del="${i}" title="Remove ${esc(v)}">×</button>
          </div>`).join(""):`<div style="font-size:12.5px;color:var(--muted);padding:4px 2px">No ${tab} yet — add one below.</div>`}
        </div>
        <div class="taxadd">
          <input type="text" id="taxNew" placeholder="Add a ${singular(tab)}…" maxlength="48" />
          <button id="taxAddBtn">Add</button>
        </div>`;
    }
    function selFor(p,dim,listKey){
      const list=state.practice[listKey];
      return `<select data-pid="${p.id}" data-dim="${dim}" title="${dim}">
        <option value="" ${!p[dim]?"selected":""}>— ${dim} —</option>
        ${list.map(v=>`<option value="${esc(v)}" ${p[dim]===v?"selected":""}>${esc(v)}</option>`).join("")}
      </select>`;
    }
    function provBody(){
      return `<div class="taxhint">Assign each provider a location, title and role. These drive the group-by builder.</div>`+
        searchBoxHtml("psSearch","Search providers by name, role, location…",psQuery)+
        `<div class="provhead"><span class="ph-spacer"></span><div class="pr-sel pr-sel-head"><span>Location</span><span>Title</span><span>Role</span></div></div>`+
        state.providers.map(p=>`<div class="provrow" data-pid="${p.id}">
          ${avatar(p.id,"s34")}
          <div style="flex:1;min-width:0">
            <div class="pr-nm">${esc(p.name)}</div>
            <div class="pr-id">Provider ${p.id} · ${esc(p.credential)}</div>
          </div>
          <div class="pr-sel">${selFor(p,"location","locations")}${selFor(p,"title","titles")}${selFor(p,"role","roles")}</div>
        </div>`).join("");
    }
    function quietBody(){
      const qh=state.practice.quietHours||{enabled:false,start:"20:00",end:"07:00"};
      return `<div class="taxhint">During quiet hours, risk alerts are held back unless a rule is set to override. Set a practice default, then override per provider as needed.</div>
        <div class="qh-card">
          <div class="qh-row" style="margin-bottom:10px">
            <div class="mini-toggle ${qh.enabled?"on":""}" data-qh="practice-enabled"><span class="sw"></span> Practice default quiet hours</div>
          </div>
          <div class="qh-row" style="${qh.enabled?"":"opacity:.45;pointer-events:none"}">
            <label>From</label><input type="time" data-qh="practice-start" value="${esc(qh.start)}" />
            <label>to</label><input type="time" data-qh="practice-end" value="${esc(qh.end)}" />
            <span style="font-size:11.5px;color:var(--muted)">(overnight wrap supported)</span>
          </div>
        </div>
        <h4 style="font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px">Per-provider overrides</h4>
        ${state.providers.map(p=>{
          const o=p.quietHours||{override:false,enabled:true,start:"20:00",end:"07:00"};
          return `<div class="qh-prov" data-pid="${p.id}">
            ${avatar(p.id,"s34")}
            <div class="qh-nm">${esc(p.name)}</div>
            <div class="mini-toggle ${o.override?"on":""}" data-qhp="override" data-pid="${p.id}"><span class="sw"></span> Override</div>
            <div class="qh-row" style="${o.override?"":"opacity:.4;pointer-events:none"}">
              <input type="time" data-qhp="start" data-pid="${p.id}" value="${esc(o.start)}" />
              <span style="color:var(--muted)">–</span>
              <input type="time" data-qhp="end" data-pid="${p.id}" value="${esc(o.end)}" />
            </div>
          </div>`;
        }).join("")}`;
    }
    function ruleNotifySummary(r){
      const t=r.notify.type;
      if(t==="group"){ const g=conv(r.notify.groupId); return "Group · "+(g?g.name:"(none)"); }
      const names=(r.notify.providerIds||[]).map(id=>prov(id)?prov(id).name.replace(/^Dr\.\s/,""):"?");
      return (t==="provider"?"Provider · ":"Providers · ")+(names.join(", ")||"(none)");
    }
    function riskBody(){
      const groups=state.conversations.filter(c=>c.type==="group");
      return `<div class="taxhint">High-risk keywords scan every message (inbound & outbound, SMS & internal). Matches flag the message and notify your chosen recipients by email/SMS. <b>These default categories are a starting scaffold — review and adjust with your clinical team before relying on them; keyword detection is an aid, not a substitute for clinical judgment.</b></div>
        <div class="rule-tester">
          <label>Test a message <span style="color:var(--muted);font-weight:400">— see which rules would fire (nothing is sent)</span></label>
          <input type="text" id="riskTest" placeholder="Type a sample patient message…" />
          <div id="riskTestOut" class="rule-test-out"></div>
        </div>
        <button class="btn primary addrule-top" id="addRuleBtn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg> Add risk rule</button>
        ${(state.practice.riskRules||[]).map((r,ri)=>`
          <div class="rule-card" data-ri="${ri}">
            <div class="rule-head">
              <span class="rule-name">${esc(r.name)}</span>
              <span class="sev-pill ${r.severity}">${r.severity}</span>
              <div class="mini-toggle ${r.enabled?"on":""}" data-rule="enabled" data-ri="${ri}"><span class="sw"></span></div>
            </div>
            <div style="display:flex;flex-direction:column;gap:9px">
              <div>
                <label>Name</label>
                <input type="text" class="ppick" data-rule="name" data-ri="${ri}" value="${esc(r.name)}" maxlength="48" />
              </div>
              <div>
                <label>Keywords / phrases</label>
                ${(()=>{
                  const off=new Set(r.kwOff||[]), kws=r.keywords||[], active=kws.filter(k=>!off.has(k)).length, open=openKwRules.has(r.id);
                  return `<div class="kw-dd ${open?"open":""}">
                    <button type="button" class="kw-trigger" data-kwtoggle data-ri="${ri}">
                      <span class="kw-summary">${kws.length} keyword${kws.length===1?"":"s"}<span class="kw-dim"> · ${active} active</span></span>
                      <svg class="kw-chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M6 9l6 6 6-6"/></svg>
                    </button>
                    <div class="kw-panel">
                      <div class="kw-list">${kws.length ? kws.map((k,ki)=>{ const on=!off.has(k); return `<div class="kw-item ${on?"":"muted"}">
                        <button type="button" class="kw-sw ${on?"on":""}" data-kwtog data-ri="${ri}" data-ki="${ki}" title="${on?"Disable keyword":"Enable keyword"}"><span></span></button>
                        <span class="kw-txt">${esc(k)}</span>
                        <button type="button" class="kw-rm" data-kwrm data-ri="${ri}" data-ki="${ki}" title="Remove keyword">✕</button>
                      </div>`; }).join("") : `<div class="kw-empty">No keywords yet — add one below.</div>`}</div>
                      <div class="kw-add">
                        <input type="text" class="kw-input" data-kwadd data-ri="${ri}" placeholder="Add keyword or phrase…  (Enter; comma for several)" />
                        <button type="button" class="kw-addbtn" data-kwaddbtn data-ri="${ri}">+ Add</button>
                      </div>
                    </div>
                  </div>`;
                })()}
              </div>
              <div class="qh-row">
                <label>Severity</label>
                <select class="ppick" style="width:auto" data-rule="severity" data-ri="${ri}">
                  <option value="high" ${r.severity==="high"?"selected":""}>High</option>
                  <option value="medium" ${r.severity==="medium"?"selected":""}>Medium</option>
                </select>
                <label>Match</label>
                <select class="ppick" style="width:auto" data-rule="matchmode" data-ri="${ri}">
                  <option value="word" ${(r.matchMode||"word")==="word"?"selected":""}>Whole word</option>
                  <option value="contains" ${r.matchMode==="contains"?"selected":""}>Contains</option>
                </select>
                <div class="mini-toggle ${r.notify.channels.email?"on":""}" data-rule="ch-email" data-ri="${ri}"><span class="sw"></span> Email</div>
                <div class="mini-toggle ${r.notify.channels.sms?"on":""}" data-rule="ch-sms" data-ri="${ri}"><span class="sw"></span> SMS</div>
                <div class="mini-toggle ${r.overrideQuiet?"on":""}" data-rule="oq" data-ri="${ri}"><span class="sw"></span> Override quiet hours</div>
              </div>
              <div class="qh-row">
                <label>Notify</label>
                <select class="ppick" style="width:auto" data-rule="ntype" data-ri="${ri}">
                  <option value="provider" ${r.notify.type==="provider"?"selected":""}>One provider</option>
                  <option value="providers" ${r.notify.type==="providers"?"selected":""}>Several providers</option>
                  <option value="group" ${r.notify.type==="group"?"selected":""}>A group</option>
                </select>
                ${r.notify.type==="group"
                  ? `<select class="ppick" style="width:auto" data-rule="ngroup" data-ri="${ri}">
                      <option value="">(choose group)</option>
                      ${groups.map(g=>`<option value="${g.id}" ${r.notify.groupId===g.id?"selected":""}>${esc(g.name)}</option>`).join("")}
                     </select>`
                  : (()=>{
                      const sel = r.notify.providerIds||[];
                      const open = openNotifyDD.has(r.id);
                      const summary = sel.length ? (sel.length+" selected") : "Select providers…";
                      return `<div class="ntf-dd ${open?"open":""}" style="flex:1">
                        <button type="button" class="ntf-trigger" data-ntfddtoggle data-ri="${ri}">
                          <span>${esc(summary)}</span>
                          <svg class="ntf-chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M6 9l6 6 6-6"/></svg>
                        </button>
                        <div class="ntf-panel">
                          ${state.providers.map(p=>`<label class="ntf-item">
                            <span class="cbx ${sel.includes(p.id)?"on":""}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4 10-10"/></svg></span>
                            <input type="checkbox" ${sel.includes(p.id)?"checked":""} data-rule="nprov" data-ri="${ri}" data-pid="${p.id}" hidden />
                            <span class="ntf-nm">${esc(p.name.replace(/^Dr\.\s/,""))}</span>
                          </label>`).join("")}
                        </div>
                      </div>`;
                    })()}
              </div>
              <div class="rule-meta">Currently notifies: <b style="color:var(--pine)">${esc(ruleNotifySummary(r))}</b></div>
              <div><button class="rule-del" data-rule="del" data-ri="${ri}"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/></svg> Delete rule</button></div>
            </div>
          </div>`).join("")}`;
    }
    function templateBody(){
      const tpls=(state.practice.smsTemplates=state.practice.smsTemplates||[]);
      const tokenRef=MERGE_TOKENS.map(t=>`<span class="token-chip">${t.token}</span> <span style="font-size:11px;color:var(--muted)">${t.label}</span>`).join("<br/>");
      return `<div class="tpl-mgr-hint">
        Write reusable SMS messages with merge tokens that fill in automatically from the patient and provider on file.
        Use these tokens in your template body:<br/><div class="token-ref" style="flex-direction:column;gap:4px;margin-top:7px">${tokenRef}</div>
      </div>
      <div class="tpl-mgr-list" id="tplMgrList">
        ${tpls.length?tpls.map((t,i)=>`<div class="tpl-row" data-ti="${i}">
          <div class="tpl-row-head">
            <input class="tr-name" type="text" value="${esc(t.name)}" maxlength="60" placeholder="Template name" data-ti="${i}"/>
            <button class="tr-del" data-trdel="${i}" title="Delete template">×</button>
          </div>
          <textarea rows="3" data-trbody="${i}">${esc(t.body)}</textarea>
          <div class="tpl-row-foot">
            <span class="tpl-preview" id="tplPrev${i}">${esc(t.body)}</span>
          </div>
        </div>`).join(""):`<div class="tpl-empty" style="padding:12px 0">No templates yet — add one below.</div>`}
      </div>
      <div class="tpl-add-row">
        <input type="text" id="tplNewName" placeholder="New template name…" maxlength="60"/>
        <button class="btn primary" id="tplAddBtn">+ Add</button>
      </div>`;
    }
    function remindersBody(){
      const ar = state.practice.apptReminders = state.practice.apptReminders || {enabled:true, offsets:[], templateId:null};
      const tpls = state.practice.smsTemplates||[];
      const sorted = [...new Set(ar.offsets||[])].sort((a,b)=>b-a);
      return `<div class="taxhint">Automatically text patients ahead of their next appointment (set per-patient from the SMS panel). Sends respect consent and quiet hours like any other text.</div>
        <div class="qh-card">
          <div class="qh-row" style="margin-bottom:10px">
            <div class="mini-toggle ${ar.enabled?"on":""}" data-ar="enabled"><span class="sw"></span> Appointment reminders enabled</div>
          </div>
          <div style="${ar.enabled?"":"opacity:.45;pointer-events:none"}">
            <label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px">Send reminders</label>
            <div class="chips" style="margin-bottom:10px">
              ${sorted.length?sorted.map(min=>`<button type="button" class="chip-t on" data-arrm="${min}">${esc(apptOffsetLabel(min))} ✕</button>`).join(""):`<span style="font-size:11.5px;color:var(--muted)">No offsets configured — add one below.</span>`}
            </div>
            <div style="display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px">
              <button type="button" class="btn" data-arpreset="1440">+ 1 day before</button>
              <button type="button" class="btn" data-arpreset="120">+ 2 hours before</button>
              <button type="button" class="btn" data-arpreset="60">+ 1 hour before</button>
            </div>
            <div class="qh-row">
              <label>Custom</label>
              <input type="number" id="arCustom" min="1" max="20160" placeholder="minutes before" style="width:110px" />
              <button type="button" class="btn" id="arCustomAdd">+ Add</button>
            </div>
            <label style="font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:14px 0 6px">Template</label>
            <select class="ppick" id="arTemplate">
              ${tpls.map(t=>`<option value="${t.id}" ${ar.templateId===t.id?"selected":""}>${esc(t.name)}</option>`).join("")}
            </select>
          </div>
        </div>
        <div class="sync-note" data-sync-owner="calendar" style="margin-top:12px">Feeds from Credify Calendar after integration — the appointment data (event id, patient, start time, offsets, channel) will arrive from Calendar automatically; “Set next appointment” on a patient thread is the manual stand-in until then.</div>`;
    }
    function body(){
      tabsHtml();
      if(tab==="providers") return tabsHtml()+provBody();
      if(tab==="quiet") return tabsHtml()+quietBody();
      if(tab==="risk") return tabsHtml()+riskBody();
      if(tab==="reminders") return tabsHtml()+remindersBody();
      if(tab==="templates") return tabsHtml()+templateBody();
      return tabsHtml()+taxBody();
    }

    function applyPracticeSearch(modal){
      const inp=modal.querySelector("#psSearch"); const q=(psQuery||"").trim().toLowerCase();
      if(inp) inp.parentNode.classList.toggle("has", !!inp.value);
      let any=false;
      if(tab==="providers"){
        modal.querySelectorAll(".provrow").forEach(row=>{
          const p=prov(+row.dataset.pid);
          const show=!q || (p && searchText(p).includes(q));
          row.classList.toggle("hide", !show); if(show) any=true;
        });
      } else {
        modal.querySelectorAll(".taxrow").forEach(row=>{
          const v=(row.querySelector("input")?.value||"").toLowerCase();
          const show=!q || v.includes(q);
          row.classList.toggle("hide", !show); if(show) any=true;
        });
      }
      let nm=modal.querySelector("#psNoMatch");
      if(!any && q){ if(!nm){ nm=document.createElement("div"); nm.id="psNoMatch"; nm.className="nomatch"; nm.textContent="Nothing matches your search."; (modal.querySelector(".taxlist")||modal.querySelector(".mbd")).appendChild(nm); } }
      else if(nm){ nm.remove(); }
    }

    function rerender(modal){ refreshModalBody(modal,body(),()=>wire(modal)); }

    function wire(modal){
      modal.querySelectorAll("[data-tab]").forEach(b=>b.onclick=()=>{ tab=b.dataset.tab; psQuery=""; rerender(modal); });

      // search (filters the current tab's rows live)
      const ps=modal.querySelector("#psSearch");
      if(ps){
        ps.oninput=()=>{ psQuery=ps.value; applyPracticeSearch(modal); };
        modal.querySelector('[data-clr="psSearch"]')?.addEventListener("click",()=>{ psQuery=""; ps.value=""; applyPracticeSearch(modal); ps.focus(); });
      }

      if(tab==="locations"||tab==="titles"||tab==="roles"){
        const dim=dimOf(tab), list=state.practice[tab];
        // rename (commit on change/blur)
        modal.querySelectorAll(".taxrow input").forEach(inp=>{
          inp.onchange=()=>{
            const i=+inp.dataset.idx, oldV=list[i], newV=inp.value.trim();
            if(!newV){ inp.value=oldV; return; }
            if(list.some((x,xi)=>xi!==i && x.toLowerCase()===newV.toLowerCase())){ toast("That "+singular(tab)+" already exists"); inp.value=oldV; return; }
            if(newV===oldV) return;
            list[i]=newV;
            state.providers.forEach(p=>{ if(p[dim]===oldV) p[dim]=newV; });
            state.conversations.forEach(c=>{ if(c.filter && c.filter[dim]) c.filter[dim]=c.filter[dim].map(v=>v===oldV?newV:v); });
            recomputeDynamicGroups();
            markDirty(); render(); rerender(modal); toast(capitalize(singular(tab))+" renamed");
          };
        });
        modal.querySelectorAll("[data-del]").forEach(b=>b.onclick=async()=>{
          const i=+b.dataset.del, val=list[i], n=counts(dim,val);
          if(n>0 && !(await confirmDialog({title:"Remove "+singular(tab),message:`Remove “${val}”? ${n} provider${n===1?"":"s"} will be left unassigned.`,confirmLabel:"Remove",danger:true}))) return;
          state.providers.forEach(p=>{ if(p[dim]===val) p[dim]=""; });
          list.splice(i,1);
          state.conversations.forEach(c=>{ if(c.filter && c.filter[dim]) c.filter[dim]=c.filter[dim].filter(v=>v!==val); });
          recomputeDynamicGroups();
          markDirty(); render(); rerender(modal); toast("Removed "+val);
        });
        const addBtn=modal.querySelector("#taxAddBtn"), newInp=modal.querySelector("#taxNew");
        const doAdd=()=>{
          const v=(newInp.value||"").trim(); if(!v) return;
          if(list.some(x=>x.toLowerCase()===v.toLowerCase())){ toast("Already on the list"); return; }
          list.push(v); markDirty(); render(); rerender(modal);
          const ni=modal.querySelector("#taxNew"); if(ni) ni.focus(); toast(capitalize(singular(tab))+" added");
        };
        addBtn.onclick=doAdd;
        newInp.onkeydown=e=>{ if(e.key==="Enter"){ e.preventDefault(); doAdd(); } };
      } else if(tab==="providers"){
        modal.querySelectorAll(".pr-sel select").forEach(sel=>{
          sel.onchange=()=>{
            const p=prov(+sel.dataset.pid); if(!p) return;
            p[sel.dataset.dim]=sel.value;
            const changed=recomputeDynamicGroups();
            markDirty(); render();
            if(changed) toast("Smart group membership updated");
          };
        });
      } else if(tab==="quiet"){
        const qh=state.practice.quietHours;
        modal.querySelector('[data-qh="practice-enabled"]')?.addEventListener("click",()=>{ qh.enabled=!qh.enabled; markDirty(); rerender(modal); });
        modal.querySelector('[data-qh="practice-start"]')?.addEventListener("change",e=>{ qh.start=e.target.value; markDirty(); });
        modal.querySelector('[data-qh="practice-end"]')?.addEventListener("change",e=>{ qh.end=e.target.value; markDirty(); });
        modal.querySelectorAll('[data-qhp="override"]').forEach(b=>b.onclick=()=>{ const p=prov(+b.dataset.pid); p.quietHours.override=!p.quietHours.override; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-qhp="start"]').forEach(i=>i.onchange=()=>{ prov(+i.dataset.pid).quietHours.start=i.value; markDirty(); });
        modal.querySelectorAll('[data-qhp="end"]').forEach(i=>i.onchange=()=>{ prov(+i.dataset.pid).quietHours.end=i.value; markDirty(); });
      } else if(tab==="risk"){
        const rules=state.practice.riskRules;
        const ruleAt=el=>rules[+el.dataset.ri];
        modal.querySelectorAll('[data-rule="enabled"]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b); r.enabled=!r.enabled; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="name"]').forEach(i=>i.onchange=()=>{ ruleAt(i).name=i.value.trim()||"Untitled rule"; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-kwtoggle]').forEach(b=>b.onclick=()=>{ const id=ruleAt(b).id; if(openKwRules.has(id)) openKwRules.delete(id); else openKwRules.add(id); rerender(modal); });
        modal.querySelectorAll('[data-ntfddtoggle]').forEach(b=>b.onclick=()=>{ const id=ruleAt(b).id; if(openNotifyDD.has(id)) openNotifyDD.delete(id); else openNotifyDD.add(id); rerender(modal); });
        modal.querySelectorAll('[data-kwtog]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b), k=(r.keywords||[])[+b.dataset.ki]; if(k==null) return; r.kwOff=r.kwOff||[]; if(r.kwOff.includes(k)) r.kwOff=r.kwOff.filter(x=>x!==k); else r.kwOff.push(k); openKwRules.add(r.id); markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-kwrm]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b), ki=+b.dataset.ki, k=(r.keywords||[])[ki]; if(k==null) return; r.keywords.splice(ki,1); if(r.kwOff) r.kwOff=r.kwOff.filter(x=>x!==k); openKwRules.add(r.id); markDirty(); rerender(modal); });
        const addKw=(r,raw)=>{ let n=0; String(raw||"").split(",").map(s=>s.trim()).filter(Boolean).forEach(p=>{ if(!(r.keywords||[]).some(x=>x.toLowerCase()===p.toLowerCase())){ (r.keywords=r.keywords||[]).push(p); n++; } }); if(n) markDirty(); return n; };
        modal.querySelectorAll('[data-kwaddbtn]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b), inp=modal.querySelector(`[data-kwadd][data-ri="${b.dataset.ri}"]`); openKwRules.add(r.id); addKw(r, inp?inp.value:""); kwRefocus=r.id; rerender(modal); });
        modal.querySelectorAll('[data-kwadd]').forEach(inp=>inp.addEventListener("keydown",e=>{ if(e.key==="Enter"){ e.preventDefault(); const r=ruleAt(inp); openKwRules.add(r.id); addKw(r, inp.value); kwRefocus=r.id; rerender(modal); } }));
        modal.querySelectorAll('[data-rule="severity"]').forEach(s=>s.onchange=()=>{ ruleAt(s).severity=s.value; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="matchmode"]').forEach(s=>s.onchange=()=>{ ruleAt(s).matchMode=s.value; markDirty(); });
        modal.querySelectorAll('[data-rule="ch-email"]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b); r.notify.channels.email=!r.notify.channels.email; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="ch-sms"]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b); r.notify.channels.sms=!r.notify.channels.sms; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="oq"]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b); r.overrideQuiet=!r.overrideQuiet; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="ntype"]').forEach(s=>s.onchange=()=>{ const r=ruleAt(s); r.notify.type=s.value; if(r.notify.type==="group" && !r.notify.groupId){ const g=state.conversations.find(c=>c.type==="group"); r.notify.groupId=g?g.id:null; } if(r.notify.type==="provider" && (r.notify.providerIds||[]).length>1) r.notify.providerIds=[r.notify.providerIds[0]]; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="ngroup"]').forEach(s=>s.onchange=()=>{ ruleAt(s).notify.groupId=s.value||null; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="nprov"]').forEach(b=>b.onclick=()=>{ const r=ruleAt(b), pid=+b.dataset.pid; r.notify.providerIds=r.notify.providerIds||[];
          if(r.notify.type==="provider"){ r.notify.providerIds=[pid]; }
          else { const i=r.notify.providerIds.indexOf(pid); if(i>=0) r.notify.providerIds.splice(i,1); else r.notify.providerIds.push(pid); }
          openNotifyDD.add(r.id); markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-rule="del"]').forEach(b=>b.onclick=async()=>{ if(!(await confirmDialog({title:"Delete rule",message:"Delete this rule?",confirmLabel:"Delete",danger:true}))) return; rules.splice(+b.dataset.ri,1); markDirty(); rerender(modal); toast("Rule deleted"); });
        modal.querySelector("#addRuleBtn")?.addEventListener("click",()=>{ rules.push({id:uid("rule"),name:"New rule",severity:"medium",enabled:true,scan:"all",matchMode:"word",keywords:[],kwOff:[],notify:{type:"provider",providerIds:[state.currentUserId],groupId:null,channels:{email:true,sms:false}},overrideQuiet:false}); markDirty(); rerender(modal); });
        const tester=modal.querySelector("#riskTest"), tout=modal.querySelector("#riskTestOut");
        if(tester && tout){
          tester.addEventListener("input",()=>{
            const v=tester.value.trim();
            if(!v){ tout.className="rule-test-out"; tout.innerHTML=""; return; }
            const detail=scanDetail(v);
            if(!detail.length){ tout.className="rule-test-out clear"; tout.textContent="No rules match this message."; return; }
            tout.className="rule-test-out hit";
            tout.innerHTML=detail.map(d=>`<div class="rt-row"><span class="sev-pill ${d.rule.severity}">${d.rule.severity}</span> <b>${esc(d.rule.name)}</b> · ${esc(d.terms.map(t=>"“"+t+"”").join(", "))}</div>`).join("");
          });
        }
        if(kwRefocus!=null){ const ri=rules.findIndex(r=>r.id===kwRefocus); const inp=modal.querySelector(`[data-kwadd][data-ri="${ri}"]`); if(inp){ inp.focus(); } kwRefocus=null; }
      }
      else if(tab==="reminders"){
        const ar = state.practice.apptReminders = state.practice.apptReminders || {enabled:true, offsets:[], templateId:null};
        modal.querySelector('[data-ar="enabled"]')?.addEventListener("click",()=>{ ar.enabled=!ar.enabled; markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-arrm]').forEach(b=>b.onclick=()=>{ const min=+b.dataset.arrm; ar.offsets=(ar.offsets||[]).filter(x=>x!==min); markDirty(); rerender(modal); });
        modal.querySelectorAll('[data-arpreset]').forEach(b=>b.onclick=()=>{ const min=+b.dataset.arpreset; if((ar.offsets||[]).includes(min)){ toast("Already added"); return; } ar.offsets=[...(ar.offsets||[]),min]; markDirty(); rerender(modal); });
        const custInp=modal.querySelector("#arCustom"), custBtn=modal.querySelector("#arCustomAdd");
        const doCustomAdd=()=>{
          const v=+(custInp?.value||0);
          if(!v || v<1){ toast("Enter minutes before (whole number)"); return; }
          if((ar.offsets||[]).includes(v)){ toast("Already added"); return; }
          ar.offsets=[...(ar.offsets||[]),v]; markDirty(); rerender(modal);
        };
        custBtn?.addEventListener("click",doCustomAdd);
        custInp?.addEventListener("keydown",e=>{ if(e.key==="Enter"){ e.preventDefault(); doCustomAdd(); } });
        modal.querySelector("#arTemplate")?.addEventListener("change",e=>{ ar.templateId=e.target.value; markDirty(); });
      }
      else if(tab==="templates"){
        const tpls=(state.practice.smsTemplates=state.practice.smsTemplates||[]);
        modal.querySelectorAll("[data-ti] .tr-name").forEach(inp=>{
          inp.onchange=()=>{ const i=+inp.dataset.ti; if(tpls[i]) tpls[i].name=inp.value.trim()||"Untitled"; markDirty(); };
        });
        modal.querySelectorAll("[data-trbody]").forEach(ta=>{
          ta.oninput=()=>{ const i=+ta.dataset.trbody; if(tpls[i]){ tpls[i].body=ta.value; markDirty(); } };
        });
        modal.querySelectorAll("[data-trdel]").forEach(b=>b.onclick=async()=>{
          const i=+b.dataset.trdel;
          if(!(await confirmDialog({title:"Delete template",message:`Delete template "${tpls[i]&&tpls[i].name}"?`,confirmLabel:"Delete",danger:true}))) return;
          tpls.splice(i,1); markDirty(); rerender(modal); toast("Template deleted");
        });
        const addBtn=modal.querySelector("#tplAddBtn"), nameInp=modal.querySelector("#tplNewName");
        if(addBtn && nameInp){
          const doAdd=()=>{
            const name=(nameInp.value||"").trim(); if(!name){ toast("Enter a template name"); return; }
            tpls.push({ id:uid("tpl"), name, body:"" });
            markDirty(); rerender(modal);
            toast("Template added");
          };
          addBtn.onclick=doAdd;
          nameInp.onkeydown=e=>{ if(e.key==="Enter"){ e.preventDefault(); doAdd(); } };
        }
      }
      applyPracticeSearch(modal);
    }

    const closeGuard=async()=>{
      if(dirty){
        const go=await confirmDialog({title:"Unsaved changes",message:"Save your changes before closing?",confirmLabel:"Save & close",cancelLabel:"Discard"});
        if(go){ commit(); closeModal(); } else { discardAndClose(); }
      } else { closeModal(); }
    };
    openModalCustom({
      title:"Practice setup",
      size:"xl",
      body:body(),
      footer:`<span id="psDirty" class="ps-dirty" style="display:none">Unsaved changes</span>
              <button class="btn" id="psSave" disabled>Save</button>
              <button class="btn primary" id="mDone">Done</button>`,
      onMount:m=>{
        psModal=m; wire(m); updateSaveUI();
        // openModalCustom bound #mClose.onclick=closeModal and scrim.onclick before this ran;
        // override both so the × and scrim-click route through the dirty check instead.
        const x=m.querySelector("#mClose"); if(x) x.onclick=closeGuard;
        const scrim=$("#scrim"); scrim.onclick=e=>{ if(e.target===scrim) closeGuard(); };
      },
      onFooter:m=>{
        m.querySelector("#psSave").onclick=()=>commit();
        m.querySelector("#mDone").onclick=closeGuard;
      }
    });
  }
  const capitalize = s => s.charAt(0).toUpperCase()+s.slice(1);

  const MODAL_SIZE = s => ({lg:"lg",xl:"xl"}[s]||"");
  function openModal({title,body,confirm,onConfirm,onMount,size}){
    const scrim=$("#scrim");
    scrim.innerHTML=`<div class="modal ${MODAL_SIZE(size)}">
      <div class="mhd"><h3>${esc(title)}</h3><button class="x" id="mClose">×</button></div>
      <div class="mbd">${body}</div>
      <div class="mft"><button class="btn" id="mCancel">Cancel</button><button class="btn primary" id="mOk">${esc(confirm)}</button></div>
    </div>`;
    scrim.classList.remove("hidden");
    const modal=scrim.querySelector(".modal");
    const close=()=>{ scrim.classList.add("hidden"); scrim.innerHTML=""; };
    $("#mClose").onclick=close; $("#mCancel").onclick=close;
    scrim.onclick=e=>{ if(e.target===scrim) close(); };
    $("#mOk").onclick=()=>{ const r=onConfirm?onConfirm(modal):true; if(r!==false) close(); };
    if(onMount) onMount(modal);
  }
  function closeModal(){ const s=$("#scrim"); s.classList.add("hidden"); s.innerHTML=""; }

  // Credify-themed replacement for window.confirm(). Returns a Promise<boolean>.
  function confirmDialog({title, message, confirmLabel="Confirm", cancelLabel="Cancel", danger=false}){
    return new Promise(resolve=>{
      let cdScrim=document.getElementById("cdScrim");
      if(!cdScrim){
        cdScrim=document.createElement("div");
        cdScrim.id="cdScrim";
        cdScrim.style.cssText="position:fixed;inset:0;background:rgba(11,42,32,.42);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:9000;padding:20px";
        document.body.appendChild(cdScrim);
      }
      cdScrim.innerHTML=`<div class="modal cd-modal">
        <div class="mhd"><h3>${esc(title||"Please confirm")}</h3><button class="x" id="cdX">×</button></div>
        <div class="mbd"><p class="cd-msg">${esc(message||"")}</p></div>
        <div class="mft">
          <button class="btn" id="cdCancel">${esc(cancelLabel)}</button>
          <button class="btn primary ${danger?"danger":""}" id="cdOk">${esc(confirmLabel)}</button>
        </div>
      </div>`;
      cdScrim.style.display="grid";
      const done=v=>{ cdScrim.style.display="none"; cdScrim.innerHTML=""; cdScrim.onclick=null; resolve(v); };
      cdScrim.querySelector("#cdX").onclick=()=>done(false);
      cdScrim.querySelector("#cdCancel").onclick=()=>done(false);
      cdScrim.querySelector("#cdOk").onclick=()=>done(true);
      cdScrim.onclick=e=>{ if(e.target===cdScrim) done(false); };
      cdScrim.querySelector("#cdOk").focus();
    });
  }
  function openModalCustom({title,body,footer,onMount,onFooter,size}){
    const scrim=$("#scrim");
    scrim.innerHTML=`<div class="modal ${MODAL_SIZE(size)}">
      <div class="mhd"><h3>${esc(title)}</h3><button class="x" id="mClose">×</button></div>
      <div class="mbd">${body}</div>
      <div class="mft">${footer||""}</div>
    </div>`;
    scrim.classList.remove("hidden");
    const modal=scrim.querySelector(".modal");
    $("#mClose").onclick=closeModal;
    scrim.onclick=e=>{ if(e.target===scrim) closeModal(); };
    if(onMount) onMount(modal);
    if(onFooter) onFooter(modal);
  }

  function openLightbox(src){ $("#lightboxImg").src=src; $("#lightbox").classList.remove("hidden"); }
  $("#lightbox").addEventListener("click",()=>$("#lightbox").classList.add("hidden"));

  /* ---------- toast ---------- */
  function toast(msg){
    const t=document.createElement("div");
    t.className="toast"; t.innerHTML=`<span class="td"></span>${esc(msg)}`;
    $("#toasts").appendChild(t);
    setTimeout(()=>{ t.style.opacity="0"; t.style.transition="opacity .3s"; setTimeout(()=>t.remove(),300); },2600);
  }
  // Inline validation: turn a field red, focus it, scroll it in, and add a hint that clears on typing.
  function flagFieldError(input, msg){
    if(!input) return;
    input.classList.add("input-error");
    input.classList.remove("shake"); void input.offsetWidth; input.classList.add("shake");
    let hint = (input.nextElementSibling && input.nextElementSibling.classList?.contains("field-err")) ? input.nextElementSibling : null;
    if(!hint){
      hint=document.createElement("div"); hint.className="field-err";
      hint.innerHTML=`<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg><span></span>`;
      input.insertAdjacentElement("afterend", hint);
    }
    hint.querySelector("span").textContent = msg;
    input.focus();
    input.scrollIntoView({block:"center", behavior:"smooth"});
    input.addEventListener("input", ()=>{
      input.classList.remove("input-error");
      if(input.nextElementSibling && input.nextElementSibling.classList?.contains("field-err")) input.nextElementSibling.remove();
    }, {once:true});
  }


  /* =====================================================================
     MATRIX / SYNAPSE TRANSPORT — Milestone 1 (internal staff chat)
     Plain client-server REST over fetch — no SDK, no build step. E2EE is
     intentionally out of scope: the self-hosted homeserver stays readable
     so risk-keyword scanning and the audit trail keep working. Patient
     SMS stays on the demo/Twilio-stub path this milestone. The transport
     core below is byte-identical to the Node-tested adapter (27 checks
     green against a live local Synapse 1.157.2).
  ===================================================================== */
/*
   Matrix transport core — Synapse client-server API over plain fetch.
   No SDK, no browser globals: fetch + URL are injected/global, so this
   runs unchanged in the browser and in Node (tests). E2EE intentionally
   out of scope (self-hosted Synapse; server-readable for risk scan/audit).
===================================================================== */

const CS = '/_matrix/client/v3';

function createMatrixTransport(cfg){
  const baseUrl = String(cfg.baseUrl || '').replace(/\/+$/, '');
  const fetchImpl = cfg.fetchImpl || fetch;
  const log = cfg.log || (() => {});
  let token = cfg.accessToken || null;
  let userId = cfg.userId || null;
  let syncing = false;
  let since = cfg.since || null;
  let txnSeq = 0;

  function txn(){ return 'crd' + Date.now().toString(36) + '_' + (++txnSeq); }

  async function req(method, path, body, opts){
    const o = opts || {};
    const headers = {};
    if (token) headers['Authorization'] = 'Bearer ' + token;
    let payload;
    if (o.raw) { payload = body; if (o.contentType) headers['Content-Type'] = o.contentType; }
    else if (body !== undefined) { payload = JSON.stringify(body); headers['Content-Type'] = 'application/json'; }
    const res = await fetchImpl(baseUrl + path, { method, headers, body: payload });
    if (o.binary){
      if (!res.ok) throw mxError(res.status, await safeText(res));
      return await res.arrayBuffer();
    }
    const text = await safeText(res);
    let json = null;
    try { json = text ? JSON.parse(text) : null; } catch (_e) { /* non-JSON error body */ }
    if (!res.ok){
      const err = mxError(res.status, text, json);
      log('matrix error', method, path, err.message);
      throw err;
    }
    return json;
  }
  async function safeText(res){ try { return await res.text(); } catch (_e) { return ''; } }
  function mxError(status, text, json){
    const e = new Error((json && (json.errcode + ': ' + json.error)) || ('HTTP ' + status + ' ' + (text || '').slice(0, 120)));
    e.status = status; e.errcode = json && json.errcode;
    return e;
  }
  const enc = encodeURIComponent;

  /* ---------- auth ---------- */
  async function login(user, password){
    const r = await req('POST', CS + '/login', {
      type: 'm.login.password',
      identifier: { type: 'm.id.user', user },
      password,
      initial_device_display_name: 'Credify Secure Messaging'
    });
    token = r.access_token; userId = r.user_id;
    return { userId: r.user_id, accessToken: r.access_token, deviceId: r.device_id };
  }
  function setToken(t){ token = t.accessToken; userId = t.userId; }
  const whoami = () => req('GET', CS + '/account/whoami');
  const logout = () => req('POST', CS + '/logout', {});

  /* ---------- rooms / membership ---------- */
  async function createRoom(o){
    const body = {
      preset: o.isDirect ? 'trusted_private_chat' : 'private_chat',
      is_direct: !!o.isDirect,
      visibility: 'private',
      invite: o.inviteUserIds || []
    };
    if (o.name) body.name = o.name;
    const r = await req('POST', CS + '/createRoom', body);
    if (o.isDirect && (o.inviteUserIds || []).length === 1){
      try { await addDirect(o.inviteUserIds[0], r.room_id); } catch (e) { log('m.direct update failed', e.message); }
    }
    return r.room_id;
  }
  const joinRoom = (roomId) => req('POST', CS + '/rooms/' + enc(roomId) + '/join', {});
  const invite = (roomId, uid) => req('POST', CS + '/rooms/' + enc(roomId) + '/invite', { user_id: uid });
  const kick = (roomId, uid, reason) => req('POST', CS + '/rooms/' + enc(roomId) + '/kick', { user_id: uid, reason: reason || '' });
  const leave = (roomId) => req('POST', CS + '/rooms/' + enc(roomId) + '/leave', {});
  const setRoomName = (roomId, name) => req('PUT', CS + '/rooms/' + enc(roomId) + '/state/m.room.name', { name });
  const pinEvents = (roomId, eventIds) => req('PUT', CS + '/rooms/' + enc(roomId) + '/state/m.room.pinned_events', { pinned: eventIds });
  async function getPinnedEvents(roomId){
    try { return (await req('GET', CS + '/rooms/' + enc(roomId) + '/state/m.room.pinned_events')).pinned || []; }
    catch (e) { if (e.status === 404) return []; throw e; }
  }
  async function getMembership(roomId, uid){
    try { return (await req('GET', CS + '/rooms/' + enc(roomId) + '/state/m.room.member/' + enc(uid))).membership; }
    catch (e) { if (e.status === 404) return null; throw e; }
  }
  async function getRoomMembers(roomId){
    const r = await req('GET', CS + '/rooms/' + enc(roomId) + '/members?membership=join');
    return (r.chunk || []).map(ev => ({ userId: ev.state_key, displayName: ev.content && ev.content.displayname }));
  }
  async function getDirect(){
    try { return await req('GET', CS + '/user/' + enc(userId) + '/account_data/m.direct') || {}; }
    catch (e) { if (e.status === 404) return {}; throw e; }
  }
  async function addDirect(otherUserId, roomId){
    const map = await getDirect();
    const list = map[otherUserId] || [];
    if (!list.includes(roomId)) list.push(roomId);
    map[otherUserId] = list;
    return req('PUT', CS + '/user/' + enc(userId) + '/account_data/m.direct', map);
  }

  /* ---------- messages ---------- */
  async function sendEvent(roomId, type, content, txnId){
    const r = await req('PUT', CS + '/rooms/' + enc(roomId) + '/send/' + enc(type) + '/' + enc(txnId || txn()), content);
    return r.event_id;
  }
  function sendText(roomId, body, o){
    o = o || {};
    const content = { msgtype: 'm.text', body };
    if (o.replyToEventId) content['m.relates_to'] = { 'm.in_reply_to': { event_id: o.replyToEventId } };
    return sendEvent(roomId, 'm.room.message', content, o.txnId);
  }
  function sendEdit(roomId, targetEventId, newBody, o){
    return sendEvent(roomId, 'm.room.message', {
      msgtype: 'm.text',
      body: '* ' + newBody,
      'm.new_content': { msgtype: 'm.text', body: newBody },
      'm.relates_to': { rel_type: 'm.replace', event_id: targetEventId }
    }, o && o.txnId);
  }
  function sendFileEvent(roomId, kind, mxcUri, name, info, o){
    return sendEvent(roomId, 'm.room.message', {
      msgtype: kind === 'image' ? 'm.image' : 'm.file',
      body: name || 'attachment', url: mxcUri, info: info || {}
    }, o && o.txnId);
  }
  async function redact(roomId, eventId, reason){
    const r = await req('PUT', CS + '/rooms/' + enc(roomId) + '/redact/' + enc(eventId) + '/' + enc(txn()), { reason: reason || '' });
    return r.event_id;
  }
  const react = (roomId, targetEventId, key) => sendEvent(roomId, 'm.reaction', {
    'm.relates_to': { rel_type: 'm.annotation', event_id: targetEventId, key }
  });
  const sendReceipt = (roomId, eventId) => req('POST', CS + '/rooms/' + enc(roomId) + '/receipt/m.read/' + enc(eventId), {});
  const setTyping = (roomId, typing, timeoutMs) => req('PUT', CS + '/rooms/' + enc(roomId) + '/typing/' + enc(userId), typing ? { typing: true, timeout: timeoutMs || 6000 } : { typing: false });
  async function paginateBack(roomId, fromToken, limit){
    let path = CS + '/rooms/' + enc(roomId) + '/messages?dir=b&limit=' + (limit || 30);
    if (fromToken) path += '&from=' + enc(fromToken);
    const r = await req('GET', path);
    return { chunk: r.chunk || [], end: r.end || null };
  }

  /* ---------- media (Synapse >=1.11 authenticated media) ---------- */
  async function uploadMedia(bytes, contentType, filename){
    const r = await req('POST', '/_matrix/media/v3/upload?filename=' + enc(filename || 'file'), bytes, { raw: true, contentType });
    return r.content_uri;
  }
  function mxcParts(mxc){
    const m = /^mxc:\/\/([^/]+)\/(.+)$/.exec(mxc || '');
    return m ? { server: m[1], mediaId: m[2] } : null;
  }
  async function fetchMedia(mxc){
    const p = mxcParts(mxc);
    if (!p) throw new Error('bad mxc uri: ' + mxc);
    try {
      return await req('GET', '/_matrix/client/v1/media/download/' + enc(p.server) + '/' + enc(p.mediaId), undefined, { binary: true });
    } catch (e) {
      if (e.status === 404 || e.status === 400){ // older homeservers: legacy unauthenticated endpoint
        return await req('GET', '/_matrix/media/v3/download/' + enc(p.server) + '/' + enc(p.mediaId), undefined, { binary: true });
      }
      throw e;
    }
  }

  /* ---------- sync loop ---------- */
  function startSync(h){
    if (syncing) return;
    syncing = true;
    const timeoutMs = h.timeoutMs || 25000;
    if (h.since !== undefined) since = h.since;
    (async function loop(){
      let backoff = 1000;
      while (syncing){
        try {
          let path = CS + '/sync?timeout=' + (since ? timeoutMs : 0);
          if (since) path += '&since=' + enc(since);
          const r = await req('GET', path);
          since = r.next_batch;
          if (h.onBatch) h.onBatch(since);
          const rooms = r.rooms || {};
          for (const roomId of Object.keys(rooms.invite || {})){
            if (h.onInvite) h.onInvite(roomId, rooms.invite[roomId]);
          }
          for (const roomId of Object.keys(rooms.join || {})){
            const jr = rooms.join[roomId];
            for (const ev of ((jr.timeline || {}).events || [])){
              if (h.onRoomEvent) h.onRoomEvent(roomId, ev);
            }
            for (const ev of ((jr.state || {}).events || [])){
              if (h.onRoomEvent) h.onRoomEvent(roomId, ev);
            }
            for (const ev of ((jr.ephemeral || {}).events || [])){
              if (ev.type === 'm.typing' && h.onTyping) h.onTyping(roomId, (ev.content || {}).user_ids || []);
              if (ev.type === 'm.receipt' && h.onReceipt) h.onReceipt(roomId, flattenReceipts(ev.content));
            }
          }
          for (const roomId of Object.keys(rooms.leave || {})){
            if (h.onLeave) h.onLeave(roomId);
          }
          for (const ev of ((r.presence || {}).events || [])){
            if (h.onPresence) h.onPresence(ev.sender, (ev.content || {}).presence);
          }
          backoff = 1000;
        } catch (e) {
          if (!syncing) break;
          log('sync error, retrying', e.message);
          if (h.onError) h.onError(e);
          await new Promise(res => setTimeout(res, backoff));
          backoff = Math.min(backoff * 2, 15000);
        }
      }
    })();
  }
  function stopSync(){ syncing = false; }
  const getSyncSince = () => since;
  const getUserId = () => userId;

  return { login, setToken, whoami, logout,
    createRoom, joinRoom, invite, kick, leave, setRoomName, pinEvents, getPinnedEvents,
    getMembership, getRoomMembers, getDirect, addDirect,
    sendText, sendEdit, sendFileEvent, redact, react, sendReceipt, setTyping, paginateBack,
    uploadMedia, fetchMedia, mxcParts,
    startSync, stopSync, getSyncSince, getUserId, txn };
}

/* {eventId: {"m.read": {userId:{ts}}}} -> {userId: eventId} (latest wins per user) */
function flattenReceipts(content){
  const out = {};
  for (const eventId of Object.keys(content || {})){
    const reads = (content[eventId] || {})['m.read'] || {};
    for (const uid of Object.keys(reads)) out[uid] = eventId;
  }
  return out;
}

/* ---------- pure translation: Matrix events -> app-shaped ops ---------- */
function translateTimelineEvent(ev){
  if (!ev || !ev.type) return null;
  if (ev.type === 'm.room.redaction'){
    return { kind: 'redact', targetId: ev.redacts || (ev.content && ev.content.redacts), eventId: ev.event_id };
  }
  if (ev.type === 'm.reaction'){
    const rel = (ev.content || {})['m.relates_to'] || {};
    if (rel.rel_type !== 'm.annotation' || !rel.event_id) return null;
    return { kind: 'reaction', targetId: rel.event_id, key: rel.key, senderId: ev.sender, eventId: ev.event_id };
  }
  if (ev.type !== 'm.room.message') return null;
  const c = ev.content || {};
  const rel = c['m.relates_to'] || {};
  if (rel.rel_type === 'm.replace' && rel.event_id){
    const nc = c['m.new_content'] || {};
    return { kind: 'edit', targetId: rel.event_id, newBody: nc.body != null ? nc.body : String(c.body || '').replace(/^\* /, ''), eventId: ev.event_id };
  }
  const replyTo = (rel['m.in_reply_to'] && rel['m.in_reply_to'].event_id) || null;
  const msg = {
    id: ev.event_id, senderId: ev.sender, text: c.body || '', ts: ev.origin_server_ts || Date.now(),
    channel: 'internal', attachments: [], reactions: {}, replyTo, edited: false, deleted: false,
    readBy: [ev.sender], pinned: false, flags: [], risk: null,
    mx: { eventId: ev.event_id, txnId: (ev.unsigned && ev.unsigned.transaction_id) || null }
  };
  if ((c.msgtype === 'm.image' || c.msgtype === 'm.file') && c.url){
    msg.text = '';
    msg.attachments = [{ name: c.body || 'attachment', type: (c.info && c.info.mimetype) || '', size: (c.info && c.info.size) || 0, mxc: c.url, dataUrl: null }];
  }
  return { kind: 'message', msg };
}

/* Apply an op to a conversation's messages[] (same mutation style the app uses). */
function applyOp(messages, op){
  if (!op) return null;
  if (op.kind === 'message'){
    const byTxn = op.msg.mx && op.msg.mx.txnId && messages.find(m => m.mx && m.mx.pendingTxn === op.msg.mx.txnId);
    if (byTxn){ // reconcile optimistic echo
      byTxn.id = op.msg.id; byTxn.ts = op.msg.ts; byTxn.mx = { eventId: op.msg.id, txnId: op.msg.mx.txnId };
      return byTxn;
    }
    if (messages.some(m => m.id === op.msg.id)) return null; // duplicate delivery
    messages.push(op.msg);
    return op.msg;
  }
  if (op.kind === 'edit'){
    const t = messages.find(m => m.id === op.targetId);
    if (t){ t.text = op.newBody; t.edited = true; }
    return t || null;
  }
  if (op.kind === 'redact'){
    const t = messages.find(m => m.id === op.targetId);
    if (t){ t.deleted = true; t.text = ''; t.attachments = []; return t; }
    for (const m of messages){ // reaction redaction: look up which key/sender this event added
      const rec = m.mxReact && m.mxReact[op.targetId];
      if (rec){
        const list = (m.reactions || {})[rec.key] || [];
        const i = list.indexOf(rec.senderId);
        if (i >= 0) list.splice(i, 1);
        if (!list.length) delete m.reactions[rec.key];
        delete m.mxReact[op.targetId];
        return m;
      }
    }
    return null;
  }
  if (op.kind === 'reaction'){
    const t = messages.find(m => m.id === op.targetId);
    if (!t) return null;
    t.reactions = t.reactions || {};
    t.mxReact = t.mxReact || {};
    if (t.mxReact[op.eventId]) return t; // duplicate delivery
    const list = t.reactions[op.key] = t.reactions[op.key] || [];
    if (!list.includes(op.senderId)) list.push(op.senderId);
    t.mxReact[op.eventId] = { key: op.key, senderId: op.senderId };
    return t;
  }
  return null;
}

/* Per-user receipt pointer -> per-message readBy[], for all messages at/before the pointer. */
function deriveReadBy(messages, receipts, orderOf){
  for (const uid of Object.keys(receipts || {})){
    const upto = orderOf(receipts[uid]);
    if (upto == null || upto < 0) continue;
    for (const m of messages){
      const idx = orderOf(m.id);
      if (idx != null && idx <= upto && !m.readBy.includes(uid)) m.readBy.push(uid);
    }
  }
  return messages;
}

/* ---- MX: app glue (mode flag, sync intake, outbound ops, Server panel) ---- */
const MX=(function(){
  let t=null, connecting=false, __remintTried=false;
  const lastReceipt={};
  let typingConv=null, typingLastSent=0, typingTimer=null;
  let persistT=null, presT=null;
  const defaults=()=>({enabled:false, baseUrl:"http://localhost:8008", userId:null, accessToken:null, deviceId:null, since:null, provToMxid:{}});
  const cfg=()=>{ if(!state.mx) state.mx=defaults(); return state.mx; };
  const active=()=>!!(t && cfg().enabled);
  const userId=()=>cfg().userId||"";
  function domain(){ const u=userId(); const i=u.indexOf(":"); return i>0?u.slice(i+1):"localhost"; }
  function persistSoon(){ clearTimeout(persistT); persistT=setTimeout(persist,300); }
  function setDot(kind){
    const d=$("#mxDot"), l=$("#mxConnLabel");
    const k=kind||(connecting?"warn":(cfg().enabled?"on":"off"));
    if(d) d.className="mx-dot "+(k==="on"?"on":k==="warn"?"warn":"off");
    if(l) l.textContent = k==="on" ? (userId().split(":")[0]||"Server").replace(/^@/,"") : (k==="warn"?"Connecting":"Server");
  }
  function guessLocalpart(p){ return (p.name||"").replace(/^Dr\.\s*/i,"").split(" ")[0].toLowerCase().replace(/[^a-z0-9._=\-]/g,""); }
  function mxidFor(pid){ return (cfg().provToMxid||{})[pid]||null; }
  function selfPid(){ const map=cfg().provToMxid||{}; for(const k of Object.keys(map)) if(map[k]===userId()) return isNaN(+k)?k:+k; return null; }
  const canSeat=id=>{ const sp=selfPid(); return sp==null || sp===id; };
  function nextPid(){ return state.providers.reduce((a,p)=>Math.max(a,+p.id||0),0)+1; }
  function provFor(mxid, displayName){
    if(!mxid) return null;
    if(mxid===userId()){ const sp=selfPid(); return sp!=null?sp:state.currentUserId; }
    const map=cfg().provToMxid||{};
    for(const k of Object.keys(map)) if(map[k]===mxid){
      const pid=isNaN(+k)?k:+k;
      if(displayName){ const p=prov(pid); if(p && p.mxAuto && p.name!==displayName) p.name=displayName; }
      return pid;
    }
    const local=mxid.slice(1).split(":")[0];
    const id=nextPid();
    state.providers.push({ id, name:displayName||local.charAt(0).toUpperCase()+local.slice(1), credential:"", location:"Synapse", title:"", role:"Remote user", presence:"offline", mxAuto:true });
    map[id]=mxid; cfg().provToMxid=map;
    return id;
  }
  function convForRoom(roomId){ return state.conversations.find(c=>c.mxRoomId===roomId); }
  function ensureConv(roomId,h){
    let c=convForRoom(roomId);
    if(c) return c;
    h=h||{};
    c={ id:roomId, type:h.type||"group", name:h.name||null,
        memberIds:h.memberIds?h.memberIds.slice():[state.currentUserId],
        createdBy:state.currentUserId, pinned:false, messages:[], dynamic:false, filter:null,
        mxRoomId:roomId, mxHydrated:false };
    state.conversations.push(c);
    return c;
  }
  function safeRenderStage(){
    const inp=$("#msgInput");
    const v=inp?inp.value:null, ss=inp?inp.selectionStart:0, se=inp?inp.selectionEnd:0, hadFocus=inp&&document.activeElement===inp;
    const sc=$("#scroller"); const nearBottom=!sc || (sc.scrollHeight-sc.scrollTop-sc.clientHeight<80); const top=sc?sc.scrollTop:0;
    renderStage();
    const ni=$("#msgInput");
    if(ni && v!=null){ ni.value=v; autoGrow(ni); const sb=$("#sendBtn"); if(sb) sb.disabled=!v.trim() && !ui.draftAtts.length; if(hadFocus){ ni.focus(); try{ ni.setSelectionRange(ss,se); }catch(_e){} } }
    const ns=$("#scroller"); if(ns) ns.scrollTop = nearBottom ? ns.scrollHeight : top;
  }
  function rerender(c){ if(ui.activeId===c.id) safeRenderStage(); else renderConvList(); }
  function dataUrlToBytes(du){ const b=atob(String(du).split(",")[1]||""); const u=new Uint8Array(b.length); for(let i=0;i<b.length;i++) u[i]=b.charCodeAt(i); return u; }
  function bytesToDataUrl(buf,type){ return new Promise(res=>{ const fr=new FileReader(); fr.onload=()=>res(fr.result); fr.readAsDataURL(new Blob([buf],{type:type||"application/octet-stream"})); }); }
  function resolveMedia(c,m){
    (m.attachments||[]).forEach(a=>{
      if(!a.mxc || a.dataUrl || a.mxLoading) return;
      if((a.size||0)>MAX_ATT_BYTES*2) return;
      a.mxLoading=true;
      t.fetchMedia(a.mxc).then(buf=>bytesToDataUrl(buf,a.type)).then(du=>{ a.dataUrl=du; delete a.mxLoading; persistSoon(); rerender(c); }).catch(()=>{ delete a.mxLoading; });
    });
  }
  const eid=m=>(m.mx&&m.mx.eventId)||m.id;
  const isReal=id=>String(id).charAt(0)==="$";
  /* Best-effort chat-attachment index (v2 files-bridge, docs/FILES-BRIDGE.md): when a file
     event is seen over /sync, report its metadata to the module backend so other modules (EHR)
     can list a client's chat files without a Matrix token. Deduped in-session by eventId; the
     server also dedupes by eventId. No-op when there is no backend (standalone file use) or
     before hydrateFromServer wires the bridge. Never blocks the UI; the appservice writer
     supersedes this when that milestone lands. */
  const _reportedFiles=new Set();
  const FILE_MSGTYPES={ "m.image":1, "m.file":1, "m.video":1, "m.audio":1 };
  function reportFileEvent(roomId,ev){
    try{
      const R=window.CredifyServer&&window.CredifyServer.reportFile;
      if(!R) return;
      const c=(ev&&ev.content)||{};
      if(!FILE_MSGTYPES[c.msgtype] || typeof c.url!=="string" || c.url.slice(0,6)!=="mxc://") return;
      const eventId=ev.event_id;
      if(!eventId || _reportedFiles.has(eventId)) return;
      _reportedFiles.add(eventId);
      const info=c.info||{};
      const p=R({
        roomId:roomId,
        eventId:eventId,
        mxcUri:c.url,
        filename:c.body||"attachment",
        mime:(info&&info.mimetype)||null,
        size:(info&&Number.isFinite(info.size))?info.size:null,
        senderMxid:ev.sender,
        sentAt:new Date(ev.origin_server_ts||Date.now()).toISOString()
      });
      if(p&&typeof p.then==="function"){
        // Only transient failures (network / 5xx) get retried on a later sighting; 2xx/4xx are terminal.
        p.then(res=>{ if(!res||res.status===0||res.status>=500) _reportedFiles.delete(eventId); })
         .catch(()=>{ _reportedFiles.delete(eventId); });
      }
    }catch(_e){}
  }
  function intake(roomId,ev,silent){
    const c=ensureConv(roomId,{});
    let fresh=null;
    if(ev.type==="m.room.name"){
      if(ev.content && ev.content.name){ c.name=ev.content.name; if(c.type==="dm") c.type="group"; }
    } else if(ev.type==="m.room.member"){
      const pid=provFor(ev.state_key, ev.content&&ev.content.displayname);
      const ms=ev.content&&ev.content.membership;
      if(ms==="join"){ if(!c.memberIds.includes(pid)) c.memberIds.push(pid); }
      else if(ms==="leave"||ms==="ban"){ c.memberIds=c.memberIds.filter(x=>x!==pid); }
      if(!c.name && c.memberIds.length===2) c.type="dm";
    } else {
      const op=translateTimelineEvent(ev);
      if(op){
        if(op.kind==="message"){ const pid=provFor(ev.sender,null); op.msg.senderId=pid; op.msg.readBy=[pid]; }
        if(op.kind==="reaction") op.senderId=provFor(op.senderId,null);
        const res=applyOp(c.messages,op);
        if(op.kind==="message" && res===op.msg){
          fresh=res;
          if(res.senderId!==state.currentUserId) runRiskScan(c,res);
          resolveMedia(c,res);
        }
        if(op.kind==="message") reportFileEvent(roomId,ev);
      }
    }
    if(!silent){
      persistSoon();
      if(ui.activeId===c.id){ safeRenderStage(); if(fresh) scrollToBottom(); }
      else renderConvList();
    }
    return fresh;
  }
  async function hydrate(roomId){
    const c=ensureConv(roomId,{});
    if(c.mxHydrated) return; c.mxHydrated=true;
    try{
      const mem=await t.getRoomMembers(roomId);
      const ids=[]; mem.forEach(m2=>{ const pid=provFor(m2.userId,m2.displayName); if(pid!=null && !ids.includes(pid)) ids.push(pid); });
      if(ids.length) c.memberIds=ids;
      if(!c.name && c.memberIds.length===2) c.type="dm";
      const page=await t.paginateBack(roomId,null,40);
      page.chunk.slice().reverse().forEach(ev=>intake(roomId,ev,true));
      c.messages.sort((a,b)=>a.ts-b.ts);
      persistSoon(); rerender(c); renderConvList();
    }catch(e){ console.warn("[mx] hydrate",e); }
  }
  function startLoop(){
    t.startSync({
      since: cfg().since||null,
      timeoutMs: 25000,
      onBatch: b=>{ cfg().since=b; connecting=false; setDot("on"); persistSoon(); },
      onInvite: async roomId=>{ try{ await t.joinRoom(roomId); ensureConv(roomId,{}); hydrate(roomId); }catch(e){ console.warn("[mx] join",e); } },
      onRoomEvent: (roomId,ev)=>{ if(!convForRoom(roomId)){ ensureConv(roomId,{}); hydrate(roomId); } intake(roomId,ev,false); },
      onReceipt: (roomId,receipts)=>{
        const c=convForRoom(roomId); if(!c) return;
        const orderOf=id=>{ const i=c.messages.findIndex(m2=>m2.id===id || (m2.mx&&m2.mx.eventId===id)); return i<0?null:i; };
        Object.keys(receipts).forEach(u2=>{
          const pid=provFor(u2,null);   // keep provider ids numeric — an object-key round-trip would stringify them
          if(pid===state.currentUserId) return;
          const upto=orderOf(receipts[u2]); if(upto==null) return;
          c.messages.forEach((m2,idx)=>{ if(idx<=upto && !m2.readBy.includes(pid)) m2.readBy.push(pid); });
        });
        persistSoon(); rerender(c);
      },
      onTyping: (roomId,userIds)=>{
        const c=convForRoom(roomId); if(!c) return;
        const others=userIds.filter(u=>u!==userId());
        others.forEach(u=>{ const p=prov(provFor(u,null)); if(p) p.presence="online"; });
        const now=others.length>0;
        if(c.__typing!==now){ c.__typing=now; if(ui.activeId===c.id) safeRenderStage(); }
      },
      onPresence: (u2,pres)=>{
        const p=prov(provFor(u2,null)); if(!p) return;
        p.presence = pres==="online" ? "online" : pres==="unavailable" ? "away" : "offline";
        clearTimeout(presT); presT=setTimeout(renderConvList,400);
      },
      onLeave: roomId=>{
        const c=convForRoom(roomId); if(!c) return;
        state.conversations=state.conversations.filter(x=>x!==c);
        if(ui.activeId===c.id) ui.activeId=state.conversations[0]?.id||null;
        persistSoon(); render();
      },
      onError: ()=>setDot("warn")
    });
  }
  async function connect(baseUrl,user,pass,localparts){
    connecting=true; setDot("warn");
    const nt=createMatrixTransport({ baseUrl, log:(...a)=>console.warn("[mx]",...a) });
    const r=await nt.login(user,pass);
    t=nt;
    const c0=cfg();
    c0.enabled=true; c0.baseUrl=baseUrl; c0.userId=r.userId; c0.accessToken=r.accessToken; c0.deviceId=r.deviceId; c0.since=null;
    const dom=domain();
    const map={};
    Object.keys(localparts||{}).forEach(pid=>{ const lp=(localparts[pid]||"").trim(); if(lp) map[pid]=lp.startsWith("@") ? lp : ("@"+lp+":"+dom); });
    c0.provToMxid=map;
    persist();
    const sp=selfPid();
    if(sp!=null && sp!==state.currentUserId){ state.currentUserId=sp; persist(); }
    startLoop();
    connecting=false; setDot("on");
    toast("Connected to Synapse as "+r.userId);
    render();
  }
  function resume(){
    const c0=cfg();
    t=createMatrixTransport({ baseUrl:c0.baseUrl, log:(...a)=>console.warn("[mx]",...a) });
    t.setToken({ accessToken:c0.accessToken, userId:c0.userId });
    connecting=true; setDot("warn");
    t.whoami().then(()=>{ startLoop(); connecting=false; setDot("on"); })
      .catch(e=>{
        connecting=false;
        if(e.status===401){
          const drop=()=>{ c0.enabled=false; c0.accessToken=null; t=null; persist(); setDot("off"); toast("Synapse session expired \u2014 reconnect from the Server panel"); render(); };
          const R=window.CredifyServer&&window.CredifyServer.remint;
          if(R&&!__remintTried){ __remintTried=true; R().then(tok=>{ if(tok) connectWithToken(tok.baseUrl||c0.baseUrl,tok.mxid,tok.accessToken).catch(drop); else drop(); }).catch(drop); }
          else drop();
        }
        else startLoop();
      });
  }
  /* Passwordless connect: server-minted token from POST /api/matrix/token (platform bridge). */
  async function connectWithToken(baseUrl,mxUserId,accessToken){
    connecting=true; setDot("warn");
    const nt=createMatrixTransport({ baseUrl, log:(...a)=>console.warn("[mx]",...a) });
    nt.setToken({ accessToken, userId:mxUserId });
    await nt.whoami();
    t=nt;
    const c0=cfg();
    c0.enabled=true; c0.baseUrl=baseUrl; c0.userId=mxUserId; c0.accessToken=accessToken; c0.deviceId=null; c0.since=null;
    persist();
    const sp=selfPid();
    if(sp!=null && sp!==state.currentUserId){ state.currentUserId=sp; persist(); }
    __remintTried=false;
    startLoop();
    connecting=false; setDot("on");
    toast("Connected to Synapse as "+mxUserId);
    render();
  }
  function disconnect(forget){
    if(t) t.stopSync();
    const c0=cfg();
    c0.enabled=false;
    if(forget){ c0.accessToken=null; c0.userId=null; c0.deviceId=null; c0.since=null; }
    t=null; connecting=false;
    persist(); setDot("off"); render();
  }
  function hardReset(){ if(t) t.stopSync(); t=null; connecting=false; setDot("off"); }
  function boot(){ setDot(); if(cfg().enabled && cfg().accessToken) resume(); }
  /* ----- outbound ----- */
  function stopTypingNow(){
    clearTimeout(typingTimer); typingTimer=null; typingLastSent=0;
    if(t && typingConv && typingConv.mxRoomId) t.setTyping(typingConv.mxRoomId,false).catch(()=>{});
    typingConv=null;
  }
  function noteTyping(c){
    if(!active() || !c || c.type==="sms" || !c.mxRoomId) return;
    typingConv=c;
    const now=Date.now();
    if(now-typingLastSent>3000){ typingLastSent=now; t.setTyping(c.mxRoomId,true,5000).catch(()=>{}); }
    clearTimeout(typingTimer); typingTimer=setTimeout(stopTypingNow,4000);
  }
  function mkPending(over){
    return Object.assign({ id:"pend_"+t.txn(), senderId:state.currentUserId, text:"", ts:Date.now(), channel:"internal",
      attachments:[], reactions:{}, replyTo:null, edited:false, deleted:false,
      readBy:[state.currentUserId], pinned:false, flags:[], risk:null }, over);
  }
  async function sendInternal(c,text,replyId,atts){
    stopTypingNow();
    const room=c.mxRoomId;
    if(text){
      const txnId=t.txn();
      const m=mkPending({ text, replyTo:replyId||null, mx:{ pendingTxn:txnId } });
      c.messages.push(m);
      runRiskScan(c,m);
      persist(); safeRenderStage(); scrollToBottom();
      const replyEid = replyId && isReal(replyId) ? replyId : undefined;
      t.sendText(room,text,{ txnId, replyToEventId:replyEid })
        .then(id2=>{ m.id=id2; m.mx={ eventId:id2, txnId }; persistSoon(); })
        .catch(e=>{ m.mx.failed=true; toast("Send failed: "+e.message); safeRenderStage(); });
    }
    for(const a of (atts||[])){
      const txnId=t.txn();
      const m=mkPending({ attachments:[a], mx:{ pendingTxn:txnId } });
      c.messages.push(m);
      persist(); safeRenderStage(); scrollToBottom();
      try{
        const mxc=await t.uploadMedia(dataUrlToBytes(a.dataUrl), a.type||"application/octet-stream", a.name);
        a.mxc=mxc;
        const kind=(a.type||"").startsWith("image/")?"image":"file";
        const id2=await t.sendFileEvent(room,kind,mxc,a.name,{ mimetype:a.type, size:a.size },{ txnId });
        m.id=id2; m.mx={ eventId:id2, txnId };
        persistSoon();
      }catch(e){ m.mx.failed=true; toast("Attachment failed: "+e.message); safeRenderStage(); }
    }
  }
  function editMsg(c,m,newText){
    if(!active() || !c.mxRoomId || c.type==="sms" || !isReal(eid(m))) return;
    t.sendEdit(c.mxRoomId, eid(m), newText).catch(e=>toast("Edit didn't sync: "+e.message));
  }
  function redactMsg(c,m){
    if(!active() || !c.mxRoomId || c.type==="sms" || !isReal(eid(m))) return;
    t.redact(c.mxRoomId, eid(m)).catch(e=>toast("Delete didn't sync: "+e.message));
  }
  function reactSync(c,m,emoji,adding){
    if(!active() || !c.mxRoomId || c.type==="sms" || !isReal(eid(m))) return;
    if(adding){
      t.react(c.mxRoomId, eid(m), emoji)
        .then(id2=>{ m.mxReact=m.mxReact||{}; m.mxReact[id2]={ key:emoji, senderId:state.currentUserId }; persistSoon(); })
        .catch(e=>toast("Reaction didn't sync: "+e.message));
    } else {
      const mr=m.mxReact||{};
      const hit=Object.keys(mr).find(k=>mr[k].key===emoji && mr[k].senderId===state.currentUserId);
      if(hit){ delete mr[hit]; t.redact(c.mxRoomId,hit).catch(()=>{}); persistSoon(); }
    }
  }
  function pinSync(c,m){
    if(!active() || !c.mxRoomId || c.type==="sms") return;
    const ids=c.messages.filter(x=>x.pinned && isReal(eid(x))).map(x=>eid(x));
    t.pinEvents(c.mxRoomId,ids).catch(()=>{});
  }
  function receiptSync(c){
    if(!active() || !c || c.type==="sms" || !c.mxRoomId) return;
    const last=[...c.messages].reverse().find(m2=>isReal(m2.id));
    if(!last || lastReceipt[c.id]===last.id) return;
    lastReceipt[c.id]=last.id;
    t.sendReceipt(c.mxRoomId,last.id).catch(()=>{});
  }
  /* ----- room lifecycle ----- */
  async function createDM(pid){
    const p=prov(pid), mxid=mxidFor(pid);
    if(!mxid){ toast((p?p.name:"That provider")+" isn't mapped to a Synapse user yet \u2014 open the Server panel to map them"); return; }
    try{
      const roomId=await t.createRoom({ isDirect:true, inviteUserIds:[mxid] });
      const c=ensureConv(roomId,{ type:"dm", memberIds:[state.currentUserId,pid] });
      c.mxHydrated=true;
      if(serverMode) api("POST","/rooms",{roomId,kind:"dm"});
      persist(); exitSearch(); openConv(c.id);
    }catch(e){ toast("Couldn't start conversation: "+e.message); }
  }
  async function createGroup(ids,name,fromSmart){
    const inv=[], skip=[];
    uniq(ids).forEach(id2=>{
      if(id2===state.currentUserId) return;
      const mx=mxidFor(id2);
      if(mx) inv.push(mx); else skip.push(prov(id2)?prov(id2).name:String(id2));
    });
    try{
      const roomId=await t.createRoom({ name, inviteUserIds:inv, isDirect:false });
      const members=uniq([state.currentUserId, ...ids.filter(i2=>mxidFor(i2))]);
      const c=ensureConv(roomId,{ type:"group", name, memberIds:members });
      c.mxHydrated=true;
      if(serverMode) api("POST","/rooms",{roomId,kind:"group",name});
      persist(); openConv(c.id);
      toast(fromSmart ? "Group created \u2014 smart membership pauses while connected to Synapse" : "Group created");
      if(skip.length) toast("Not invited (unmapped): "+skip.join(", "));
    }catch(e){ toast("Couldn't create group: "+e.message); }
  }
  function renameSync(c,name){ if(active() && c.mxRoomId){ t.setRoomName(c.mxRoomId,name).catch(e=>toast("Rename didn't sync: "+e.message)); if(serverMode) api("POST","/rooms",{roomId:c.mxRoomId,kind:c.type==="dm"?"dm":"group",name}); } }
  function leaveSync(c){ if(active() && c.mxRoomId) t.leave(c.mxRoomId).catch(()=>{}); }
  function kickSync(c,pid){ if(!active() || !c.mxRoomId) return; const mx=mxidFor(pid); if(mx) t.kick(c.mxRoomId,mx,"Removed from group").catch(e=>toast("Remove didn't sync: "+e.message)); }
  function inviteSync(c,pids){
    if(!active() || !c.mxRoomId) return;
    const skip=[];
    pids.forEach(pid=>{ const mx=mxidFor(pid); if(mx) t.invite(c.mxRoomId,mx).catch(e=>toast("Invite failed: "+e.message)); else skip.push(prov(pid)?prov(pid).name:String(pid)); });
    if(skip.length) toast("Not invited (unmapped): "+skip.join(", "));
  }
  /* ----- Server panel ----- */
  function openPanel(){
    const c0=cfg();
    const rows=state.providers.map(p=>{
      const cur=(c0.provToMxid||{})[p.id]||"";
      const lp=cur ? cur.replace(/^@/,"").split(":")[0] : guessLocalpart(p);
      return '<div class="nm">'+esc(p.name)+'</div><input data-mxmap="'+p.id+'" value="'+esc(lp)+'" placeholder="localpart" autocomplete="off"/>';
    }).join("");
    openModalCustom({
      title:"Synapse server (Matrix)",
      size:"lg",
      body:
        '<label>Homeserver URL</label><input id="mxUrl" value="'+esc(c0.baseUrl||"http://localhost:8008")+'" placeholder="https://synapse.yourdomain.com" autocomplete="off"/>' +
        '<label style="margin-top:8px;display:block">Your Matrix username (localpart)</label><input id="mxUser" placeholder="e.g. maya" autocomplete="off"/>' +
        '<label style="margin-top:8px;display:block">Password</label><input id="mxPass" type="password" autocomplete="off"/>' +
        '<div style="margin-top:12px;font-weight:600;font-size:12.5px">Provider \u2192 Synapse user mapping</div>' +
        '<div class="mxmap">'+rows+'</div>' +
        '<div class="mx-note">Milestone 1: internal staff chat runs on your self-hosted Synapse; patient SMS stays in demo mode. No end-to-end encryption by design \u2014 the server stays readable so risk-keyword scanning and the audit trail keep working. Your session token is stored in this browser; use Disconnect on shared machines.</div>',
      footer:
        '<span id="mxStatus" style="margin-right:auto;font-size:12px;opacity:.8">'+(c0.enabled?("Connected as "+esc(c0.userId||"")):"Not connected")+'</span>' +
        (c0.enabled?'<button class="btn" id="mxDisc">Disconnect</button>':"") +
        '<button class="btn primary" id="mxGo">'+(c0.enabled?"Reconnect":"Connect")+'</button>',
      onFooter:m=>{
        const st=m.querySelector("#mxStatus");
        const disc=m.querySelector("#mxDisc");
        if(disc) disc.addEventListener("click",()=>{ disconnect(true); closeModal(); toast("Disconnected \u2014 back to demo mode"); });
        m.querySelector("#mxGo").addEventListener("click",async()=>{
          const url=(m.querySelector("#mxUrl").value||"").trim().replace(/\/+$/,"");
          const user=(m.querySelector("#mxUser").value||"").trim();
          const pass=m.querySelector("#mxPass").value||"";
          if(!/^https?:\/\//.test(url)){ flagFieldError(m.querySelector("#mxUrl"),"Enter the homeserver URL (starting with http or https)."); return; }
          if(!user){ flagFieldError(m.querySelector("#mxUser"),"Enter your Matrix username."); return; }
          if(!pass){ flagFieldError(m.querySelector("#mxPass"),"Enter your password."); return; }
          const localparts={};
          m.querySelectorAll("[data-mxmap]").forEach(i2=>{ localparts[i2.dataset.mxmap]=i2.value; });
          st.textContent="Connecting\u2026"; m.querySelector("#mxGo").disabled=true;
          try{
            if(t) t.stopSync();
            await connect(url,user,pass,localparts);
            closeModal();
          }catch(e){
            const go=m.querySelector("#mxGo"); if(go) go.disabled=false;
            connecting=false; setDot();
            st.textContent = e.errcode==="M_FORBIDDEN" ? "Login failed \u2014 check username/password" : ("Couldn't connect: "+e.message);
          }
        });
      }
    });
  }
  /* Admin-only "Test tools" panel (railfoot → #testToolsBtn). Houses reset controls used to
     re-test provisioning/signup. Backend also enforces admin + same-org on each endpoint. */
  function openTestTools(){
    if(!(window.CredifyServer&&window.CredifyServer.isAdmin)){ toast("Admin only"); return; }
    openModalCustom({
      title:"Test tools (admin)",
      size:"lg",
      body:
        '<div class="mx-note">Reset controls for testing provisioning &amp; signup. Destructive — use on test users only.</div>' +
        '<div style="margin-top:14px;padding-top:10px;border-top:1px solid #e5e7eb">' +
        '<div style="font-weight:600;font-size:12.5px;color:#b91c1c">Delete Matrix identity</div>' +
        '<div class="mx-note" style="margin-top:2px">Deletes ONLY the Matrix account + mapping for one user (their Credify login/account are untouched). The next sign-in re-provisions a fresh Matrix identity.</div>' +
        '<label style="margin-top:6px;display:block">User email</label><input id="mxDelEmail" placeholder="user@credifyfast.com" autocomplete="off"/>' +
        '<div style="margin-top:6px"><button class="btn" id="mxDelBtn">Delete Matrix identity (test)</button><span id="mxDelStatus" style="margin-left:8px;font-size:11.5px;opacity:.85"></span></div>' +
        '</div>' +
        '<div style="margin-top:16px;padding-top:10px;border-top:1px solid #e5e7eb">' +
        '<div style="font-weight:600;font-size:12.5px;color:#b91c1c">Delete Credify user (core + login)</div>' +
        '<div class="mx-note" style="margin-top:2px">Fully removes a <b>pristine</b> test user from the Credify directory (core) AND their login account, so signup/provisioning can be re-tested. Handled by the EHR (admin-gated). Fails safely if the user owns any records (tasks, notes, dispatches) &mdash; only untouched test users delete. Also delete their Matrix identity above if they had one.</div>' +
        '<label style="margin-top:6px;display:block">User email</label><input id="userDelEmail" placeholder="user@credifyfast.com" autocomplete="off"/>' +
        '<div style="margin-top:6px"><button class="btn" id="userDelBtn">Delete Credify user (test)</button><span id="userDelStatus" style="margin-left:8px;font-size:11.5px;opacity:.85"></span></div>' +
        '</div>',
      footer:'<button class="btn primary" id="ttDone">Done</button>',
      onFooter:m=>{
        const done=m.querySelector("#ttDone"); if(done) done.addEventListener("click",()=>closeModal());
        const delBtn=m.querySelector("#mxDelBtn");
        if(delBtn){
          delBtn.addEventListener("click",async()=>{
            const em=(m.querySelector("#mxDelEmail").value||"").trim();
            const dst=m.querySelector("#mxDelStatus");
            if(!em||!em.includes("@")){ flagFieldError(m.querySelector("#mxDelEmail"),"Enter the user's email."); return; }
            if(!confirm("Delete the Matrix identity for "+em+"?\nThis deactivates their Synapse account and removes the mapping. Their Credify account is untouched. For testing only.")) return;
            delBtn.disabled=true; dst.textContent="Deleting…";
            try{
              const r=await window.CredifyServer.deleteMatrixIdentity(em);
              if(r&&r.ok&&r.json&&r.json.deleted){ dst.textContent="Deleted "+(r.json.mxid||"")+(r.json.synapseDeactivated?" (Synapse deactivated)":""); }
              else if(r&&r.ok&&r.json){ dst.textContent="No Matrix identity for that user"; }
              else { dst.textContent="Failed: "+((r&&r.json&&r.json.error&&r.json.error.code)||(r&&r.status)||"error"); }
            }catch(_e){ dst.textContent="Request failed"; }
            delBtn.disabled=false;
          });
        }
        const uBtn=m.querySelector("#userDelBtn");
        if(uBtn){
          uBtn.addEventListener("click",async()=>{
            const em=(m.querySelector("#userDelEmail").value||"").trim();
            const ust=m.querySelector("#userDelStatus");
            if(!em||!em.includes("@")){ flagFieldError(m.querySelector("#userDelEmail"),"Enter the user's email."); return; }
            if(!confirm("Delete the Credify user "+em+"?\nThis removes their CORE directory record AND their login account so signup/provisioning can be re-tested. It fails safely if they own any records. For testing only.")) return;
            uBtn.disabled=true; ust.textContent="Deleting…";
            try{
              const r=await window.CredifyServer.deleteCredifyUser(em);
              const d=r&&r.json&&r.json.data;
              if(r&&r.ok&&d){
                const parts=[];
                parts.push(d.coreDeleted?"core deleted":"no core user");
                if(d.skipped==="secret-not-configured") parts.push("login skipped (secret unset)");
                else if(d.error) parts.push("login error: "+d.error);
                else parts.push(d.loginDeleted?"login deleted":"no login user");
                ust.textContent=parts.join(" · ");
              } else if(r&&r.status===409){ ust.textContent=(r.json&&r.json.error&&r.json.error.message)||"User owns records — cannot delete"; }
              else if(r&&r.status===403){ ust.textContent="Admin only (403)"; }
              else if(r&&r.status===401){ ust.textContent="Not signed in to the EHR (401)"; }
              else { ust.textContent="Failed: "+((r&&r.json&&r.json.error&&r.json.error.code)||(r&&r.status)||"error"); }
            }catch(_e){ ust.textContent="Request failed"; }
            uBtn.disabled=false;
          });
        }
      }
    });
  }
  /* Open the shared contact room for an EHR deep-link (Increment A). The roomId comes from
     POST /api/rooms/for-contact (the service found-or-created it + invited us); accept the invite,
     surface the conversation, and activate it. */
  async function openContactRoom(roomId, meta){
    if(!t || !roomId) return null;
    try{ await t.joinRoom(roomId); }catch(_e){ /* already a member — fine */ }
    const c=ensureConv(roomId, { name:(meta&&meta.name)||null });
    if(meta&&meta.contactId) c.contactId=meta.contactId; // enables the header Chart link back to the EHR
    hydrate(roomId);
    openConv(c.id);
    return c.id;
  }

  return { active, defaults, boot, openPanel, openTestTools, hardReset, connectWithToken,
    sendInternal, editMsg, redactMsg, reactSync, pinSync, receiptSync, noteTyping,
    createDM, createGroup, renameSync, leaveSync, kickSync, inviteSync,
    openContactRoom, canSeat, userId, selfPid };
})();

  /* ---------- global wiring ---------- */
  $("#searchInput").addEventListener("input",e=>{ ui.search=e.target.value; ui.searchLoc=null; renderConvList(); });
  $("#newBtn").addEventListener("click",newConversationFlow);
  $("#broadcastBtn").addEventListener("click",openBroadcast);
  $("#practiceBtn").addEventListener("click",openPracticeSetup);
  $("#goBackBtn").addEventListener("click",()=>{ history.back(); });
  $("#mxConnBtn").addEventListener("click",()=>MX.openPanel());
  $("#testToolsBtn").addEventListener("click",()=>MX.openTestTools());
  // #alertsBtn now lives inside re-rendered stage markup (empty state / .thead);
  // bound in renderStage()'s empty-state branch and in wireStage(c) instead of here.
  $("#auditBtn").addEventListener("click",()=>openAuditLog());
  $("#resetBtn").addEventListener("click",async()=>{
    if(!(await confirmDialog({title:"Reset demo data",message:"Reset all messaging data back to the seeded demo? This clears any messages you've added.",confirmLabel:"Reset",danger:true}))) return;
    MX.hardReset(); state=seed(); state.mx=MX.defaults(); save(state); ui={activeId:state.conversations[0].id,search:"",searchLoc:null,reply:null,draftAtts:[],smsDraftMedia:[],panelOpen:true,emojiFor:null,smsNote:false};
    $("#searchInput").value=""; render(); updateAlertsBadge(); toast("Messaging reset to seed data");
  });
  document.addEventListener("keydown",e=>{
    if(e.key!=="Escape") return;
    if(!$("#lightbox").classList.contains("hidden")){ $("#lightbox").classList.add("hidden"); return; }
    if(!$("#scrim").classList.contains("hidden")) closeModal();   // Esc dismisses any open modal
  });

  /* ---------- rail resize (desktop only; calendar sidebar pattern) ---------- */
  const RAIL_MIN=300, RAIL_MAX=500;   /* floor keeps the conversation list usable; railfoot wraps below its natural width */
  function clampRailW(w){ return Math.max(RAIL_MIN, Math.min(RAIL_MAX, w)); }
  (function(){
    const handle=$("#railResize"), appEl=$("#app"), rail=$("#rail");
    if(!handle||!appEl||!rail) return;
    /* hide on touch devices — mobile stays full-screen (<=760px CSS hides it too) */
    if(window.matchMedia && window.matchMedia("(pointer:coarse)").matches){ handle.style.display="none"; return; }
    /* apply persisted width (absent key = 344px CSS default; no migrate needed) */
    if(typeof state.railW==="number") appEl.style.setProperty("--rail-w", clampRailW(state.railW)+"px");
    let dragging=false, startX=0, startW=0;
    handle.addEventListener("mousedown",e=>{
      e.preventDefault();
      dragging=true; startX=e.clientX; startW=rail.offsetWidth;
      handle.classList.add("active");
      document.body.style.cursor="col-resize";
      document.body.style.userSelect="none";
    });
    document.addEventListener("mousemove",e=>{
      if(!dragging) return;
      appEl.style.setProperty("--rail-w", clampRailW(startW + e.clientX - startX)+"px");
    });
    document.addEventListener("mouseup",()=>{
      if(!dragging) return;
      dragging=false;
      handle.classList.remove("active");
      document.body.style.cursor="";
      document.body.style.userSelect="";
      state.railW=rail.offsetWidth;   /* persist across reloads */
      persist();
    });
  })();

  /* ---------- Credify platform bridge: SSO session pickup + auto-connect ----------
     Contract: platform/docs/SSO.md 4.1. First API response 401/403 from a LIVE backend
     => redirect to login; network error / no backend => silent standalone demo mode.
     Matrix content itself never flows through /api — Synapse stays the source of truth. */
  const API_BASE="/api";
  /* The core+login "delete Credify user" test-reset is owned by the EHR (admin-gated) — messaging has
     no DELETE on core `users`/the login DB (HANDOFF §5B). Called cross-origin with the fleet-wide
     credify_token cookie (domain .credifyfast.com); the EHR must allow this origin in CORS_ORIGINS. */
  const EHR_API_BASE="https://ehr.credifyfast.com/api/v1";
  let serverMode=false;
  window.CredifyServer={ remint:null, reportFile:null, isAdmin:false, deleteMatrixIdentity:null, deleteCredifyUser:null };
  async function api(method,path,body){
    try{
      const r=await fetch(API_BASE+path,{ method, credentials:"include",
        headers: body?{"Content-Type":"application/json"}:undefined,
        body: body?JSON.stringify(body):undefined });
      let j=null; try{ j=await r.json(); }catch(_e){}
      console.log("[api]",method,path,r.status); /* method+path+status only — never the body */
      return { ok:r.ok, status:r.status, json:j };
    }catch(_e){ console.log("[api]",method,path,"network-error"); return { ok:false, status:0, json:null }; }
  }
  function dirProviderFor(u,displayName){
    let p=state.providers.find(x=>x.coreUserId===u.id);
    if(!p){
      const id=state.providers.reduce((a,x)=>Math.max(a,+x.id||0),0)+1;
      p={ id, name:displayName||u.email, credential:"", location:"Directory", title:"",
          role:String(u.role||"").replace(/_/g," "), presence:"offline", mxAuto:true, coreUserId:u.id };
      state.providers.push(p);
    } else if(displayName && p.name!==displayName){ p.name=displayName; }
    return p;
  }
  async function hydrateFromServer(){
    const r=await api("GET","/state");
    if(r.status===401||r.status===403){
      location.href="https://login.credifyfast.com/login?redirect="+encodeURIComponent(location.href);
      return;
    }
    if(!r.ok||!r.json) return; /* no backend — standalone file use stays intact */
    serverMode=true;
    const s=r.json, c0=state.mx||(state.mx=MX.defaults());
    const byUser={}; (s.identities||[]).forEach(i=>{ if(i&&i.userId) byUser[i.userId]=i; });
    (s.directory||[]).forEach(u=>{
      const ident=byUser[u.id];
      const nm=[u.firstName,u.lastName].map(x=>(x||"").trim()).filter(Boolean).join(" ")||u.email;
      const p=dirProviderFor(u,(ident&&ident.displayName)||nm);
      if(ident&&ident.mxid){ c0.provToMxid=c0.provToMxid||{}; c0.provToMxid[p.id]=ident.mxid; } /* server wins */
    });
    if(s.matrix&&s.matrix.publicBaseUrl&&!c0.enabled) c0.baseUrl=s.matrix.publicBaseUrl;
    window.CredifyServer.remint=async()=>{ const t2=await api("POST","/matrix/token"); return (t2.ok&&t2.json&&t2.json.accessToken)?t2.json:null; };
    window.CredifyServer.reportFile=(body)=>api("POST","/files",body); /* v2 files-bridge: best-effort chat-attachment index */
    window.CredifyServer.isAdmin=!!(s.me&&s.me.role==="admin"); /* gates the railfoot "Test tools" panel (backend also enforces) */
    window.CredifyServer.deleteMatrixIdentity=(email)=>api("POST","/matrix/identities/delete",{email}); /* admin test reset: Matrix side only */
    window.CredifyServer.deleteCredifyUser=async(email)=>{ /* admin test reset: core+login user, orchestrated by the EHR (cross-origin) */
      try{
        const r=await fetch(EHR_API_BASE+"/users/test-delete",{ method:"POST", credentials:"include",
          headers:{"Content-Type":"application/json"}, body:JSON.stringify({email}) });
        let j=null; try{ j=await r.json(); }catch(_e){}
        return { ok:r.ok, status:r.status, json:j };
      }catch(_e){ return { ok:false, status:0, json:null }; }
    };
    { const ttb=$("#testToolsBtn"); if(ttb) ttb.classList.toggle("hidden",!window.CredifyServer.isAdmin); } /* admin-only railfoot button */
    persist();
    if(s.me&&s.me.mxid&&!MX.active()){
      const tok=await window.CredifyServer.remint();
      if(tok){ try{ await MX.connectWithToken(tok.baseUrl||c0.baseUrl,tok.mxid,tok.accessToken); }catch(_e){ console.warn("[mx] auto-connect failed",_e&&_e.message); } }
    }
    /* EHR "Message this client" deep link (v2 Increment A): ?contact=<id>[&name=<n>] →
       find-or-create the shared contact room server-side, then join + open it. */
    if(s.me&&s.me.mxid&&MX.active()){
      const params=new URLSearchParams(location.search);
      const contactParam=params.get("contact");
      if(contactParam){
        const nameParam=params.get("name")||undefined;
        const r=await api("POST","/rooms/for-contact",{contactId:contactParam,name:nameParam});
        if(r.ok&&r.json&&r.json.roomId){
          try{ await MX.openContactRoom(r.json.roomId,{name:nameParam,contactId:r.json.contactId||contactParam}); }catch(_e){ console.warn("[contact] open failed",_e&&_e.message); }
        }
        try{ history.replaceState({},"",location.pathname); }catch(_e){}
      }
    }
    render();
  }

  /* ---------- boot ---------- */
  recomputeDynamicGroups();
  if(ui.activeId){ const c=conv(ui.activeId); if(c) markRead(c); }
  render();
  updateAlertsBadge();
  releaseDueScheduled();
  setInterval(releaseDueScheduled, 30000);
  MX.boot();
  hydrateFromServer();
})();
</script>
</body>
</html>