/* =====================================================================
   HIPAA LINK — Realistic product UI mocks (matches the actual platform)
   Loaded on Home + feature pages. Self-contained; uses site-kit tokens.
   ===================================================================== */

/* ---- shared avatar-initials call cells (audio / group) ---- */
.gridcall{ position:relative; background:#0c0f12; padding:10px; display:grid; gap:10px; }
.gridcall.g1{ grid-template-columns:1fr; }
.gridcall.g4{ grid-template-columns:1fr 1fr; }
.gcell{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10;
  background:linear-gradient(150deg,#2f8f83,#3bb8a4); display:flex; align-items:center; justify-content:center; }
.gcell.b{ background:linear-gradient(150deg,#3a5f96,#6fa4d9); }
.gcell.p{ background:linear-gradient(150deg,#6b5aa8,#8a7bba); }
.gcell.o{ background:linear-gradient(150deg,#b8752f,#e0a05a); }
.gcell .ini{ width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:22px; }
.gcell .gname{ position:absolute; left:9px; bottom:8px; font-size:11px; font-weight:600; color:#fff; background:rgba(10,14,18,.55); padding:3px 8px; border-radius:12px; backdrop-filter:blur(3px); }
.gcell .gmic{ position:absolute; right:8px; bottom:8px; width:22px; height:22px; border-radius:50%; background:rgba(10,14,18,.55); display:flex; align-items:center; justify-content:center; color:#fff; }
.gcell .gmic .ic{ width:12px; height:12px; }
.gridcall .gbar{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 0 4px; }
.gridcall .gbar .cbtn{ width:40px; height:40px; }

/* ---- Secure Fax UI mock ---- */
.faxui{ background:#fff; font-size:12px; }
.faxui-tabs{ display:flex; gap:22px; padding:12px 18px 0; border-bottom:1px solid var(--divider); }
.faxui-tabs span{ padding-bottom:10px; font-weight:700; font-size:12px; color:var(--text-muted); letter-spacing:.03em; border-bottom:2px solid transparent; }
.faxui-tabs span.active{ color:var(--teal-deep); border-bottom-color:var(--brand-teal); }
.faxui-numrow{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; }
.faxui-num{ font-size:13px; color:var(--text-secondary); }
.faxui-num b{ color:var(--text-primary); }
.faxui-send{ background:var(--brand-teal); color:#fff; font-weight:700; font-size:12px; padding:8px 14px; border-radius:8px; }
.faxui-sec{ padding:11px 18px; border-top:1px solid var(--divider); background:var(--surface-2); }
.faxui-sechead{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px; letter-spacing:.05em; color:var(--text-primary); }
.faxui-sechead .ic{ width:15px; height:15px; color:var(--teal-deep); }
.faxui-table{ width:100%; border-collapse:collapse; }
.faxui-table th{ text-align:left; font-size:10.5px; font-weight:700; color:var(--text-muted); padding:9px 18px; border-bottom:1px solid var(--divider); text-transform:uppercase; letter-spacing:.04em; }
.faxui-table td{ padding:10px 18px; border-bottom:1px solid var(--divider); color:var(--text-secondary); }
.faxui-table td:first-child{ color:var(--text-primary); font-weight:600; }
.faxui-table .c{ text-align:center; } .faxui-table .r{ text-align:right; white-space:nowrap; }
.faxui-table .mono{ font-family:ui-monospace, monospace; font-size:11px; color:var(--teal-deep); }
.faxui-foot{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; color:var(--text-muted); font-size:11px; }

/* ---- client queue mock ---- */
.qmock{ background:#fff; }
.qmock .qhead{ padding:16px 18px; background:linear-gradient(150deg,var(--teal-bg-2),var(--calm-bg)); border-bottom:1px solid var(--divider); }
.qmock .qhead .qt{ font-weight:800; font-size:15px; }
.qmock .qhead .qs{ font-size:12.5px; color:var(--text-secondary); margin-top:3px; }
.qmock .qcard{ margin:14px 16px; border:1px solid var(--divider); border-radius:14px; padding:14px; box-shadow:var(--sh-sm); }
.qmock .qc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.qmock .qc-top .nm{ font-weight:700; font-size:14px; }
.qmock .qc-top .mn{ font-size:11.5px; color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; }
.qmock .qc-top .mn .ic{ width:13px; height:13px; }
.qmock .qc-row{ display:flex; align-items:center; gap:9px; }
.qmock .qc-row .ini{ width:38px; height:38px; border-radius:50%; background:var(--teal-deep); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.qmock .qc-startwrap{ display:flex; flex:1; }
.qmock .qc-start{ flex:1; background:var(--brand-teal); color:#fff; font-weight:700; font-size:13px; padding:10px; border-radius:9px 0 0 9px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.qmock .qc-caret{ width:30px; background:var(--brand-teal); color:#fff; border-radius:0 9px 9px 0; border-left:2px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; flex:0 0 30px; }
.qmock .qc-caret .ic{ width:15px; height:15px; }ap:7px; }
.qmock .qc-start .ic{ width:15px; height:15px; }
.qmock .qc-ico{ width:38px; height:38px; border-radius:9px; background:var(--surface-2); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.qmock .qc-ico .ic{ width:16px; height:16px; }
.qmock .qwait{ display:flex; align-items:center; gap:9px; padding:11px 16px; border-top:1px solid var(--divider); color:var(--text-muted); font-size:12.5px; }
.qmock .qwait .ini{ width:30px; height:30px; border-radius:50%; background:#c98a4b; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* ---- in-call chat mock ---- */
.chatmock{ background:#fff; display:flex; flex-direction:column; }
.chatmock .ch-head{ padding:13px 16px; border-bottom:1px solid var(--divider); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.chatmock .ch-head .ic{ width:16px; height:16px; color:var(--teal-deep); }
.chatmock .ch-body{ padding:16px; display:flex; flex-direction:column; gap:14px; background:var(--page-bg); }
.chatmock .msg{ max-width:80%; }
.chatmock .msg .meta{ font-size:10.5px; color:var(--text-muted); margin-bottom:4px; }
.chatmock .msg .bub{ padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.4; }
.chatmock .msg.them{ align-self:flex-start; }
.chatmock .msg.them .bub{ background:#fff; border:1px solid var(--divider); border-bottom-left-radius:4px; }
.chatmock .msg.me{ align-self:flex-end; text-align:right; }
.chatmock .msg.me .bub{ background:var(--teal-bg); color:var(--teal-deep); border-bottom-right-radius:4px; text-align:left; }
.chatmock .msg .file{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--divider); }
.chatmock .msg .file .fi{ width:32px; height:32px; border-radius:8px; background:var(--teal-bg); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
.chatmock .msg .file .fi .ic{ width:16px; height:16px; }
.chatmock .msg .file .fn{ font-size:12px; font-weight:600; color:var(--text-primary); line-height:1.25; display:block; }
.chatmock .msg .file .fs{ font-size:11px; color:var(--text-muted); line-height:1; display:block; }
.chatmock .ch-input{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--divider); }
.chatmock .ch-input .clip{ color:var(--text-muted); } .chatmock .ch-input .clip .ic{ width:18px; height:18px; }
.chatmock .ch-input .box{ flex:1; font-size:12.5px; color:var(--text-muted); background:var(--surface-2); border-radius:10px; padding:9px 12px; }
.chatmock .ch-input .snd{ width:34px; height:34px; border-radius:9px; background:var(--brand-teal); color:#fff; display:flex; align-items:center; justify-content:center; }
.chatmock .ch-input .snd .ic{ width:16px; height:16px; }

/* ---- screen share mock (participant column + shared desktop) ---- */
.sharemock{ background:#0c0f12; display:grid; grid-template-columns:82px 1fr; gap:8px; padding:8px; }
.sharemock .scol{ display:flex; flex-direction:column; gap:8px; }
.sharemock .scell{ border-radius:9px; overflow:hidden; aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center; }
.sharemock .scell .ini{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.45); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.sharemock .sshare{ border-radius:10px; overflow:hidden; background:#e9edf1; position:relative; min-height:290px; display:flex; flex-direction:column; }
.sharemock .win-top{ height:26px; background:#d3dae1; display:flex; align-items:center; gap:5px; padding:0 10px; }
.sharemock .win-top .wd{ width:9px; height:9px; border-radius:50%; }
.sharemock .win-body{ flex:1; padding:16px; display:flex; flex-direction:column; gap:9px; }
.sharemock .win-body .wline{ height:9px; border-radius:5px; background:#c3ccd6; }
.sharemock .sharetag{ position:absolute; top:32px; left:50%; transform:translateX(-50%); background:rgba(11,114,133,.92); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:99px; display:inline-flex; align-items:center; gap:6px; z-index:2; }
.sharemock .sharetag .ic{ width:13px; height:13px; }

/* ---- whiteboard mock ---- */
.wbmock{ background:#fff; position:relative; }
.wbmock .wb-toolbar{ position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--divider); box-shadow:var(--sh-md); border-radius:12px; padding:6px; z-index:2; }
.wbmock .wb-tool{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
.wbmock .wb-tool.on{ background:var(--teal-bg); color:var(--teal-deep); }
.wbmock .wb-tool .ic{ width:17px; height:17px; }
.wbmock .wb-sep{ width:1px; height:22px; background:var(--divider); margin:0 3px; }
.wbmock .wb-sw{ width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--divider); }
.wbmock .wb-canvas{ height:300px; background-image:radial-gradient(var(--divider) 1px, transparent 1px); background-size:22px 22px; position:relative; }
.wbmock .wb-canvas svg{ position:absolute; inset:0; width:100%; height:100%; }
.wbmock .wb-note{ position:absolute; background:#fdf3c7; border:1px solid #e6d48a; border-radius:6px; padding:8px 10px; font-size:11.5px; color:#6b5a12; box-shadow:var(--sh-sm); font-family:var(--font-accent); font-size:16px; }

/* ---------- shared app frame chrome already in site-kit (.appwin/.appbar) ---------- */

/* ============ PROVIDER DASHBOARD ============ */
.dash{ background:#fff; font-size:13px; color:var(--text-primary); }
.dash-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--divider); }
.dash-top .logo-mini{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; letter-spacing:-.01em; }
.dash-top .logo-mini b{ color:var(--brand-teal); }
.dash-top .logo-mini .lm{ width:22px; height:22px; border-radius:6px; background:var(--teal-deep); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.dash-top .logo-mini .lm .ic{ width:14px; height:14px; }
.dash-prov{ display:flex; align-items:center; gap:9px; }
.dash-prov .pt{ text-align:right; line-height:1.25; }
.dash-prov .pt .n{ font-weight:800; font-size:12px; }
.dash-prov .pt .s{ font-size:10.5px; color:var(--text-muted); }
.dash-prov .pa{ width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--calm-blue); flex:0 0 30px; }
.dash-body{ display:grid; grid-template-columns:200px 1fr; gap:16px; padding:16px; background:#fbfcfd; }

/* client queue card */
.q-card{ border:1px solid var(--divider); border-left:3px solid var(--brand-teal); border-radius:10px; overflow:hidden; background:#fff; }
.q-head{ background:var(--surface-2); padding:9px 12px; }
.q-head .t{ font-weight:800; font-size:11.5px; letter-spacing:.05em; }
.q-head .u{ font-size:10.5px; color:var(--text-muted); }
.q-item{ padding:11px 12px; }
.q-row1{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.q-name{ font-weight:800; font-size:13px; }
.q-min{ font-size:10.5px; color:#127a41; background:var(--green-bg); border-radius:20px; padding:3px 8px; display:inline-flex; align-items:center; gap:4px; }
.q-min .ic{ width:11px; height:11px; }
.q-actions{ display:flex; align-items:center; gap:6px; }
.q-avatar{ width:34px; height:34px; border-radius:50%; background:var(--calm-blue); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 34px; font-size:13px; position:relative; }
.q-start{ flex:1; background:#1DAA5A; color:#fff; font-weight:700; font-size:12px; padding:8px 10px; border-radius:7px; display:inline-flex; align-items:center; gap:6px; justify-content:center; }
.q-start .ic{ width:14px; height:14px; }
.q-caret{ background:#1DAA5A; color:#fff; border-radius:7px; padding:8px 6px; display:flex; align-items:center; }
.q-caret .ic{ width:12px; height:12px; }
.q-ico{ width:30px; height:30px; border-radius:7px; border:1px solid var(--divider); display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.q-ico .ic{ width:14px; height:14px; }
.q-tiles{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.q-tile{ border:1px solid var(--divider); border-radius:9px; padding:11px 6px; text-align:center; color:var(--teal-deep); position:relative; background:#fff; }
.q-tile .ic{ width:20px; height:20px; margin:0 auto 5px; }
.q-tile .tl{ font-size:10px; font-weight:700; color:var(--text-secondary); line-height:1.2; }
.q-tile .nb{ position:absolute; top:-6px; right:-4px; font-size:7px; font-weight:800; background:var(--brand-teal); color:#fff; padding:1px 4px; border-radius:4px; letter-spacing:.04em; }

/* my room panel */
.room{ border:1px solid var(--divider); border-radius:10px; overflow:hidden; background:#fff; }
.room-tabs{ display:flex; border-bottom:1px solid var(--divider); }
.room-tabs span{ padding:11px 16px; font-weight:800; font-size:11.5px; letter-spacing:.04em; color:var(--text-muted); border-bottom:2px solid transparent; }
.room-tabs span.active{ color:var(--brand-teal); border-bottom-color:var(--brand-teal); }
.room-body{ display:grid; grid-template-columns:1fr 190px; gap:18px; padding:18px; }
.room h3{ font-size:19px; font-weight:800; }
.room .avail{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#127a41; font-weight:600; margin-top:5px; }
.room .avail .ic{ width:14px; height:14px; }
.room .share{ font-size:12.5px; color:var(--teal-deep); margin:16px 0 8px; }
.room .linkrow{ display:flex; border:1px solid var(--input-border); border-radius:8px; overflow:hidden; }
.room .linkrow .pfx{ background:var(--surface-2); color:var(--text-muted); font-size:11.5px; padding:9px 10px; border-right:1px solid var(--input-border); white-space:nowrap; }
.room .linkrow .val{ padding:9px 10px; font-size:12px; font-weight:600; }
.room .btns{ display:flex; gap:9px; margin-top:9px; }
.room .copy{ flex:1; background:var(--brand-teal); color:#fff; font-weight:700; font-size:12px; padding:9px; border-radius:7px; text-align:center; }
.room .invite{ flex:1; border:1px solid var(--input-border); color:var(--teal-deep); font-weight:700; font-size:12px; padding:9px; border-radius:7px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.room .invite .ic{ width:13px; height:13px; }
.room .togs{ margin-top:16px; }
.tog-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:12px; color:var(--text-secondary); }
.tog-row .lbl{ display:inline-flex; align-items:center; gap:6px; }
.tog-row .lbl .ic{ width:13px; height:13px; color:var(--calm-blue); }
.tog{ width:34px; height:19px; border-radius:99px; background:#cfd8e0; position:relative; flex:0 0 34px; }
.tog::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s; }
.tog.on{ background:var(--brand-teal); }
.tog.on::after{ left:17px; }
.room-self{ border-radius:12px; overflow:hidden; background:#2b3540; aspect-ratio:3/4; position:relative; }
.room-self .ctrls{ position:absolute; right:8px; top:8px; display:flex; flex-direction:column; gap:7px; }
.room-self .ctrls .cb{ width:28px; height:28px; border-radius:50%; background:rgba(20,30,38,.6); color:#fff; display:flex; align-items:center; justify-content:center; }
.room-self .ctrls .cb .ic{ width:14px; height:14px; }

/* ============ CLIENT STATUS POPOVER ============ */
.statuspop{ width:210px; background:#fff; border:1px solid var(--divider); border-radius:12px; box-shadow:var(--sh-lg); padding:15px; font-size:13px; }
.statuspop .h{ font-weight:800; font-size:11.5px; letter-spacing:.06em; color:var(--text-primary); }
.statuspop .nm{ font-weight:800; margin-top:10px; }
.statuspop .live{ display:inline-flex; align-items:center; gap:8px; color:#127a41; font-weight:700; font-size:12.5px; margin-top:2px; }
.statuspop .live .ic{ width:14px; height:14px; }
.statuspop .divide{ border-top:1px solid var(--divider); margin:12px 0; }
.statuspop .line{ display:flex; align-items:center; gap:9px; padding:5px 0; color:var(--text-secondary); font-size:12.5px; }
.statuspop .line .ic{ width:15px; height:15px; color:var(--text-muted); }

/* ============ INVITE DIALOG ============ */
.invite-dlg{ width:300px; background:#fff; border:1px solid var(--divider); border-radius:12px; box-shadow:var(--sh-lg); overflow:hidden; }
.invite-hd{ display:flex; align-items:center; gap:10px; padding:15px 16px 12px; }
.invite-hd .t{ font-weight:800; font-size:12.5px; letter-spacing:.05em; }
.invite-hd .sel{ margin-left:0; border:1px solid var(--input-border); border-radius:7px; padding:6px 10px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:16px; }
.invite-hd .sel .ic{ width:13px; height:13px; color:var(--text-muted); }
.invite-hd .x{ margin-left:auto; color:var(--brand-teal); }
.invite-hd .x .ic{ width:16px; height:16px; }
.invite-bd{ padding:0 16px 16px; }
.invite-bd .fl{ font-size:12px; font-weight:700; margin:10px 0 5px; }
.invite-bd .in{ border:1px solid var(--input-border); border-radius:7px; padding:9px 11px; font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.invite-bd .in .flag{ font-size:13px; }
.invite-bd .msg{ background:var(--surface-2); border:1px solid var(--divider); border-radius:8px; padding:11px; font-size:11.5px; color:var(--text-secondary); line-height:1.5; margin-top:6px; }
.invite-bd .msg a, .invite-bd .msg .lk{ color:var(--teal-deep); }
.invite-bd .fl-row{ display:flex; align-items:center; justify-content:space-between; }
.invite-bd .flag-sel{ border:1px solid var(--input-border); border-radius:6px; padding:3px 7px; font-size:11px; display:inline-flex; gap:6px; align-items:center; }
.invite-send{ width:100%; background:#8a94a3; color:#fff; font-weight:700; font-size:12.5px; padding:11px; border-radius:8px; text-align:center; margin-top:14px; }
.invite-send.on{ background:var(--brand-teal); }
.invite-radios{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.invite-radios label{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.invite-radios .rd{ width:14px; height:14px; border-radius:50%; border:2px solid var(--input-border); flex:0 0 14px; }
.invite-radios .rd.on{ border-color:var(--brand-teal); box-shadow:inset 0 0 0 3px var(--brand-teal); }
.invite-bd .daterow{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.invite-bd .datein{ border:1px solid var(--input-border); border-radius:7px; padding:8px 10px; font-size:12px; display:flex; align-items:center; gap:8px; flex:1; }
.invite-bd .datein .ic{ width:14px; height:14px; color:var(--teal-deep); }

/* ============ CLIENT CHECK-IN ============ */
.checkin{ background:linear-gradient(160deg,#eef9fb 0%, #e9f1fb 100%); padding:26px 22px 34px; text-align:center; }
.checkin .ci-logo{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:15px; letter-spacing:-.01em; margin-bottom:18px; }
.checkin .ci-logo b{ color:var(--brand-teal); }
.checkin .ci-logo .lm{ width:22px; height:22px; border-radius:6px; background:var(--teal-deep); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.checkin .ci-logo .lm .ic{ width:14px; height:14px; }
.checkin .ci-card{ background:#fff; border:1px solid var(--divider); border-radius:16px; box-shadow:var(--sh-md); padding:26px 24px; max-width:340px; margin:0 auto; }
.checkin .ci-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; overflow:hidden; background:var(--calm-blue); color:#fff; font-weight:700; font-size:22px; display:flex; align-items:center; justify-content:center; }
.checkin .ci-invited{ font-size:12.5px; color:var(--text-muted); }
.checkin .ci-prov{ font-size:18px; font-weight:800; color:var(--text-primary); margin:3px 0 18px; }
.checkin .ci-lbl{ font-size:12px; font-weight:700; color:var(--text-primary); text-align:left; margin-bottom:6px; }
.checkin .ci-input{ border:1.5px solid var(--input-border); border-radius:9px; padding:12px 13px; font-size:13.5px; color:var(--text-muted); text-align:left; display:flex; align-items:center; gap:8px; }
.checkin .ci-input .ic{ width:16px; height:16px; color:var(--text-muted); }
.checkin .ci-join{ background:var(--brand-teal); color:#fff; font-weight:700; font-size:14px; padding:12px; border-radius:9px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; }
.checkin .ci-join .ic{ width:16px; height:16px; }
.checkin .ci-note{ font-size:11.5px; color:var(--text-muted); margin-top:12px; display:inline-flex; align-items:center; gap:6px; }
.checkin .ci-note .ic{ width:13px; height:13px; color:var(--green); }

/* ============ CLIENT CHECK-IN (real: photo left, panel right) ============ */
.checkin2{ display:grid; grid-template-columns:1fr 1.15fr; background:#fff; min-height:230px; }
.checkin2 .ci2-photo{ position:relative; overflow:hidden; }
.checkin2 .ci2-panel{ padding:26px 24px; display:flex; flex-direction:column; justify-content:center; }
.checkin2 .ci2-welcome{ font-size:22px; font-weight:800; line-height:1.2; color:var(--text-primary); margin:0 0 18px; }
.checkin2 .ci2-provrow{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.checkin2 .ci2-prov{ font-size:15px; color:var(--text-secondary); flex:1; }
.checkin2 .ci2-flag{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--input-border); border-radius:7px; padding:5px 8px; font-size:13px; color:var(--text-muted); }
.checkin2 .ci2-flag .ic{ width:13px; height:13px; }
.checkin2 .ci2-input{ border:1.5px solid var(--brand-teal); border-radius:7px; padding:12px 13px; font-size:14px; color:var(--text-muted); box-shadow:0 0 0 3px rgba(59,184,164,.14); }
.checkin2 .ci2-continue{ background:#8a9099; color:#fff; font-weight:700; font-size:14px; text-align:center; padding:12px; border-radius:7px; margin-top:12px; }
@media (max-width:520px){ .checkin2{ grid-template-columns:1fr; } .checkin2 .ci2-photo{ min-height:150px; } }

/* ---- SOAP progress note document mock ---- */
.soapdoc{ background:#fff; padding:22px 22px 26px; }
.soapdoc .sd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:2px solid var(--brand-teal); padding-bottom:12px; }
.soapdoc .sd-brand{ font-family:var(--font-ui); font-weight:800; font-size:13px; color:var(--text-primary); letter-spacing:-.01em; }
.soapdoc .sd-brand b{ color:var(--teal-deep); }
.soapdoc .sd-brand .pn{ color:var(--text-muted); font-weight:700; font-size:10px; letter-spacing:.14em; margin-left:6px; }
.soapdoc .sd-tid{ text-align:right; font-size:8.5px; color:var(--text-muted); font-family:ui-monospace, monospace; line-height:1.5; }
.soapdoc .sd-tid .l{ letter-spacing:.12em; color:#b6c0c7; }
.soapdoc .sd-title{ color:var(--teal-deep); font-family:var(--font-ui); font-size:16px; font-weight:800; margin:16px 0 6px; }
.soapdoc .sd-rule{ height:2px; background:var(--divider); margin-bottom:8px; }
.soapdoc .sd-sec{ font-size:10px; font-weight:800; letter-spacing:.09em; color:var(--text-primary); margin:16px 0 9px; }
.soapdoc .sd-li{ display:flex; gap:9px; align-items:center; margin:8px 0; }
.soapdoc .sd-li .dot{ width:4px; height:4px; border-radius:50%; background:var(--calm-blue); flex:0 0 4px; }
.soapdoc .sd-li .bar{ height:8px; border-radius:4px; background:linear-gradient(90deg,#eef3f4,#e4ebec,#eef3f4); }

/* ---- EMDR hero orb (shared with feature-emdr) ---- */
.emdr-hero-build{ position:relative; }
.ehb-stage{ position:relative; border-radius:var(--radius-xl); background:#2b3138; aspect-ratio:16/9; overflow:hidden; box-shadow:var(--sh-lg); }
.ehb-orb{ position:absolute; top:50%; left:8%; width:58px; height:58px; border-radius:50%; background:#42E2FF; transform:translate(-50%,-50%); box-shadow:0 0 44px 6px rgba(66,226,255,.45); }
.ehb-tp{ position:absolute; top:14px; right:16px; font-size:11px; font-weight:700; letter-spacing:.04em; color:#cfd6da; background:rgba(0,0,0,.28); padding:5px 10px; border-radius:7px; }
.ehb-chip{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:var(--teal-deep); background:#fff; border:1px solid var(--divider); box-shadow:var(--sh-md); padding:8px 13px; border-radius:99px; }
.ehb-chip .d{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(29,170,90,.18); }
@media (prefers-reduced-motion: no-preference){ .ehb-orb{ animation:ehbmove 2.4s ease-in-out infinite alternate; } }
@keyframes ehbmove{ from{ left:8%; } to{ left:92%; } }

/* ---- Assessment (GAD-7) preview matrix (shared with feature-assessments) ---- */
.asmt-prev{ background:#fff; }
.asmt-prev .ap-head{ background:linear-gradient(160deg,#fff,var(--teal-bg-2)); padding:16px 18px; border-bottom:1px solid var(--divider); }
.asmt-prev .ap-head h4{ font-size:17px; margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.asmt-prev .ap-head h4 .s{ font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.asmt-prev .ap-head .hint{ font-size:11.5px; color:var(--text-muted); margin-top:5px; display:flex; align-items:center; gap:6px; }
.asmt-prev .ap-steps{ display:flex; gap:10px; padding:12px 18px; border-bottom:1px solid var(--divider); }
.asmt-prev .ap-steps span{ font-size:11.5px; font-weight:700; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
.asmt-prev .ap-steps span .n{ width:18px; height:18px; border-radius:50%; border:1px solid var(--input-border); display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.asmt-prev .ap-steps span.on{ color:var(--teal-deep); }
.asmt-prev .ap-steps span.on .n{ background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; }
.asmt-prev .ap-body{ padding:16px 18px 18px; }
.asmt-prev .ap-q{ font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:12px; line-height:1.4; }
.asmt-matrix{ width:100%; border-collapse:collapse; }
.asmt-matrix th{ font-size:9.5px; font-weight:700; color:var(--text-secondary); text-align:center; padding:6px 4px; border-bottom:1px solid var(--divider); line-height:1.2; }
.asmt-matrix th:first-child{ text-align:left; }
.asmt-matrix td{ font-size:11px; color:var(--text-secondary); padding:9px 4px; border-bottom:1px solid var(--divider); }
.asmt-matrix td.q{ text-align:left; padding-right:8px; }
.asmt-matrix td.o{ text-align:center; }
.asmt-matrix .rad{ width:15px; height:15px; border-radius:50%; border:1.5px solid var(--input-border); display:inline-block; }

/* ============ CALL UI (desktop) ============ */
.callui{ position:relative; background:#0c0f12; aspect-ratio:16/11; overflow:hidden; }
.callui .stage-img{ position:absolute; left:0; right:0; top:0; bottom:62px; }
.callui .stage-img image-slot, .callui .stage-img img{ width:100%; height:100%; object-fit:cover; }
.callui .brand{ position:absolute; top:12px; right:14px; z-index:3; display:flex; align-items:center; gap:6px; font-weight:800; font-size:13px; color:#fff; }
.callui .brand b{ color:var(--teal-light); }
.callui .brand .lm{ width:18px; height:18px; }
.callui .self{ position:absolute; top:12px; left:12px; z-index:3; width:120px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.35); background:#1a2028; box-shadow:var(--sh-md); }
.callui .self image-slot, .callui .self img{ width:100%; height:100%; object-fit:cover; }
.callui .self .yl{ position:absolute; left:6px; bottom:5px; font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.callui .namelabel{ position:absolute; left:12px; bottom:70px; z-index:5; font-size:11px; font-weight:600; color:#fff; background:rgba(10,14,18,.6); padding:4px 9px; border-radius:14px; backdrop-filter:blur(3px); }
.callui .dockbar{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px 12px; background:#0c0f12; border-top:1px solid rgba(255,255,255,.08); }
.callui .dockgroup{ display:flex; align-items:center; gap:14px; }
.callui .dockgroup.center{ gap:16px; }
.cui-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; color:#eef4f5; font-size:9px; font-weight:600; }
.cui-btn .cc{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.cui-btn .cc .ic{ width:17px; height:17px; }
.cui-btn.end .cc{ background:#e5484d; }
.cui-btn.timer .cc{ width:auto; padding:0 11px; border-radius:18px; gap:5px; font-size:10px; font-weight:700; }
.cui-btn.timer .cc .ic{ width:13px; height:13px; }
.callui .leftcount{ display:flex; align-items:center; gap:6px; color:#eef4f5; font-size:12px; }
.callui .leftcount .cc{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.callui .leftcount .cc .ic{ width:15px; height:15px; }

/* ============ CALL UI (mobile) ============ */
.callui-m{ width:230px; margin:0 auto; border-radius:30px; border:7px solid #10151b; background:#0c0f12; overflow:hidden; position:relative; box-shadow:var(--sh-lg); }
.callui-m .statusbar{ display:flex; align-items:center; justify-content:space-between; padding:7px 14px 4px; color:#fff; font-size:9px; background:#000; }
.callui-m .mbrand{ text-align:center; padding:7px 0 8px; font-weight:800; font-size:12px; color:#fff; background:#000; }
.callui-m .mbrand b{ color:var(--teal-light); }
.callui-m .mstage{ position:relative; aspect-ratio:9/15; background:#1a2028; }
.callui-m .mstage image-slot, .callui-m .mstage img{ width:100%; height:100%; object-fit:cover; }
.callui-m .mself{ position:absolute; top:10px; left:10px; width:64px; aspect-ratio:3/4; border-radius:9px; overflow:hidden; border:2px solid rgba(255,255,255,.6); background:#222; }
.callui-m .mself image-slot, .callui-m .mself img{ width:100%; height:100%; object-fit:cover; }
.callui-m .mname{ position:absolute; left:10px; bottom:10px; background:rgba(10,14,18,.7); color:#fff; font-size:10px; font-weight:600; padding:5px 9px; border-radius:16px; display:flex; align-items:center; gap:6px; }
.callui-m .mname .ic{ width:11px; height:11px; color:var(--teal-light); }
.callui-m .mbar{ display:flex; align-items:center; justify-content:center; gap:11px; padding:12px 0 6px; background:#0c0f12; }
.callui-m .mb{ width:34px; height:34px; border-radius:50%; background:#3a434d; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
.callui-m .mb .ic{ width:16px; height:16px; }
.callui-m .mb.red{ background:#e5484d; }
.callui-m .navbar{ height:20px; background:#0c0f12; display:flex; align-items:center; justify-content:center; }
.callui-m .navbar::after{ content:""; width:64px; height:4px; border-radius:3px; background:rgba(255,255,255,.55); }

@media (max-width:1024px){
  .dash-body{ grid-template-columns:1fr; }
  .room-body{ grid-template-columns:1fr; }
  .room-self{ aspect-ratio:16/9; max-width:240px; }
  .invite-row{ grid-template-columns:1fr !important; }
}