/* Physo — design system, soft-UI revision.
   Apple-style physicality on a soft grey canvas: white surfaces read as
   raised (dual soft shadows + a top inner highlight, almost no borders),
   inputs read as pressed-in, controls have real default/pressed states.
   Teal stays the single working tint; the coral dot is the brand mark.
   Depth vocabulary — exactly three levels, used consistently:
     --shadow  raised card        --raise  raised control (pill/thumb)
     --inset   pressed-in well (inputs, tracks)                        */
:root {
  --bg: #E9EBEF; --card: #FCFDFE; --ink: #1A1D21; --ink-soft: #69727F;
  --line: rgba(26,29,33,.07); --well: #EEF0F4;
  --teal: #0F766E; --teal-soft: #E2F0EE; --coral: #F95C4B;
  --amber: #B45309; --amber-soft: #FBEEDC; --green: #15803D; --green-soft: #E2F1E6;
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans",
          system-ui, sans-serif;
  --r: 20px; --r-sm: 14px;
  --shadow: 0 1px 2px rgba(26,29,33,.04), 0 12px 28px rgba(26,29,33,.09),
            inset 0 1px 0 rgba(255,255,255,.9);
  --raise: 0 1px 2px rgba(26,29,33,.07), 0 4px 12px rgba(26,29,33,.08),
           inset 0 1px 0 rgba(255,255,255,.95);
  --inset: inset 0 1.5px 4px rgba(26,29,33,.09), inset 0 -1px 0 rgba(255,255,255,.75);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
/* Taps must never become text selections (Android turns those into a
   "tap to search" panel over the UI). Message/notes text stays copyable. */
button, nav.tabs, .vh, .seg, .chip, .att, .avatar, label.f, .chev,
.pcard, .pk-row, .appt-card, .ex-row, .slot-row, .busy-day, .week-band,
.av-head, .cal-grid, .cal-head, .stat, .install-bar, .rq-rate, .dir-row,
#csWrap, #obWrap, .cm-card {
  user-select: none; -webkit-user-select: none; }
#csWrap input, #csWrap textarea, #obWrap input, #obWrap textarea {
  user-select: text; -webkit-user-select: text; }
body { background: var(--bg); color: var(--ink); font-family: var(--body);
       min-height: 100dvh; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ── App frame ── */
#app { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; }
header.top { display: flex; align-items: center; justify-content: space-between;
             padding: 18px 2px 12px; position: sticky; top: 0; z-index: 5;
             background: linear-gradient(var(--bg) 78%, rgba(233,235,239,0)); }
.logo { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.logo b { color: var(--coral); }
.logo small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
              color: var(--ink-soft); text-transform: uppercase; margin-top: -2px; }
.h-actions { display: flex; gap: 8px; }

/* ── Tab bar — frosted, iOS style ── */
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
           background: rgba(249,250,252,.78);
           -webkit-backdrop-filter: blur(22px) saturate(1.8);
           backdrop-filter: blur(22px) saturate(1.8);
           border-top: 1px solid rgba(255,255,255,.7);
           box-shadow: 0 -8px 24px rgba(26,29,33,.06);
           display: flex; justify-content: center; }
nav.tabs .in { display: flex; width: 100%; max-width: 560px; }
nav.tabs button { flex: 1; padding: 10px 0 max(10px, env(safe-area-inset-bottom));
                  font-size: 10.5px; color: var(--ink-soft); display: flex;
                  flex-direction: column; align-items: center; gap: 3px; }
nav.tabs button .ic { font-size: 20px; line-height: 1; }
nav.tabs button.on { color: var(--teal); font-weight: 700; }

/* ── Cards & common ── */
.card { background: linear-gradient(180deg, #FFFFFF, #FAFBFD);
        border: 1px solid rgba(255,255,255,.65); border-radius: var(--r);
        box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h3 { font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-soft); font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 14.5px;
       border: 1px solid transparent; transition: box-shadow .12s, transform .12s; }
.btn-teal { background: linear-gradient(180deg, #148378, #0C6A62); color: #fff;
            box-shadow: 0 1px 2px rgba(12,106,98,.35), 0 5px 14px rgba(12,106,98,.28),
                        inset 0 1px 0 rgba(255,255,255,.22); }
.btn-line { background: linear-gradient(180deg, #FFFFFF, #F5F6F9); color: var(--ink);
            border-color: rgba(255,255,255,.8); box-shadow: var(--raise); }
.btn-soft { background: var(--teal-soft); color: var(--teal);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.btn-coral { background: linear-gradient(180deg, #FA6C5C, #F04A38); color: #fff;
             box-shadow: 0 4px 12px rgba(240,74,56,.3), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:active { transform: translateY(1px) scale(.99); box-shadow: var(--inset); }
.chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px;
        font-weight: 700; }
.chip.video { background: var(--teal-soft); color: var(--teal); }
.chip.inperson { background: var(--amber-soft); color: var(--amber); }
.chip.paid { background: var(--green-soft); color: var(--green); }
.chip.unpaid { background: var(--amber-soft); color: var(--amber); }
.empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 28px 10px; }
.empty .big { font-size: 34px; display: block; margin-bottom: 8px; }

/* ── Forms — pressed-in wells ── */
label.f { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
          margin: 12px 0 5px; }
.inp, textarea.inp, select.inp {
  width: 100%; background: var(--well); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 15px; outline: none;
  box-shadow: var(--inset); }
.inp:focus { border-color: var(--teal); background: #fff;
             box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
textarea.inp { min-height: 84px; resize: vertical; }
/* iOS segmented control: inset track, raised white thumb */
.seg { display: flex; background: var(--well); border-radius: 999px; padding: 3px;
       box-shadow: var(--inset); }
.seg button { flex: 1; border-radius: 999px; padding: 8px 0; font-size: 13.5px;
              font-weight: 700; color: var(--ink-soft); transition: all .15s; }
.seg button.on { background: linear-gradient(180deg, #FFFFFF, #F8F9FB); color: var(--ink);
                 box-shadow: 0 1px 4px rgba(26,29,33,.16), inset 0 1px 0 #fff; }

/* ── Views ── */
main section { display: none; }
main section.on { display: block; animation: rise .18s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.vh { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px 14px; }
.vh h2 { font-weight: 800; font-size: 30px; letter-spacing: -.02em; }

/* ── Calendar ── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 17px; letter-spacing: -.01em; }
.cal-nav { width: 38px; height: 38px; border-radius: 13px;
           background: linear-gradient(180deg, #FFFFFF, #F5F6F9);
           box-shadow: var(--raise); font-size: 16px; }
.cal-nav:active { box-shadow: var(--inset); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { text-align: center; font-size: 10.5px; font-weight: 700;
                 color: var(--ink-soft); padding: 4px 0; }
.cal-day { aspect-ratio: 1; border-radius: 13px; background: var(--well);
           display: flex; flex-direction: column; box-shadow: inset 0 1px 2px rgba(26,29,33,.05);
           align-items: center; justify-content: center; gap: 2px; font-size: 13.5px; }
.cal-day.dim { opacity: .35; }
.cal-day.today { background: #fff; box-shadow: var(--raise), 0 0 0 2px var(--teal);
                 font-weight: 800; }
.cal-day.sel { background: linear-gradient(180deg, #148378, #0C6A62); color: #fff;
               box-shadow: 0 4px 10px rgba(12,106,98,.3); }
.cal-day .n { font-size: 10px; font-weight: 800; color: var(--teal);
              background: var(--teal-soft); border-radius: 999px; padding: 0 6px; min-width: 16px; }
.cal-day.sel .n { background: rgba(255,255,255,.25); color: #fff; }
.appt { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line);
        align-items: center; }
.appt:last-child { border-bottom: 0; }
.appt .t { font-weight: 800; font-size: 14px; min-width: 62px; }
.appt .t small { display: block; color: var(--ink-soft); font-weight: 600; }
.avatar { width: 38px; height: 38px; border-radius: 13px; background: var(--teal-soft);
          color: var(--teal); display: grid; place-items: center; font-weight: 800;
          font-size: 14px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }

/* ── Patient / consult ── */
.note { border-left: 3px solid var(--teal-soft); padding: 8px 12px; margin: 10px 0; }
.note .when { font-size: 11.5px; font-weight: 700; color: var(--teal); }
.note p { font-size: 14.5px; margin-top: 3px; white-space: pre-wrap; }
.note .atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.att { font-size: 12px; font-weight: 700; background: var(--well);
       box-shadow: var(--inset); border-radius: 999px; padding: 4px 10px; }
video.upl { width: 100%; border-radius: var(--r-sm); margin-top: 6px; max-height: 220px;
            background: #000; }

/* ── Modal — sheet with grabber ── */
#modal { position: fixed; inset: 0; z-index: 30; display: none; align-items: flex-end;
         justify-content: center; background: rgba(26,29,33,.38);
         -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#modal.on { display: flex; }
#modal .sheet { background: linear-gradient(180deg, #FFFFFF, #F9FAFC); width: 100%;
                max-width: 560px; border-radius: 28px 28px 0 0;
                padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
                max-height: 88dvh; overflow: auto; animation: up .22s ease;
                box-shadow: 0 -18px 50px rgba(26,29,33,.22); }
#modal .sheet::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
                        margin-top: -16px; width: 40px; height: 5px; border-radius: 3px;
                        background: rgba(26,29,33,.16); }
@keyframes up { from { transform: translateY(40px); opacity: .6; } to { transform: none; } }
/* full-page sheets (chat): the conversation owns the whole screen */
#modal .sheet.full { position: relative; height: 100dvh; max-height: 100dvh;
  border-radius: 0; display: flex; flex-direction: column;
  padding-top: calc(14px + env(safe-area-inset-top)); }
#modal .sheet.full::before { display: none; }
#modal .sheet.full .x { position: absolute; float: none;
  top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2; }
#modal .sheet.full h3 { padding-right: 46px; }
#modal .sheet.full .chat-thread { flex: 1; max-height: none; }
.sheet h3 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 4px; }
.sheet .x { position: sticky; float: right; top: 0; width: 32px; height: 32px;
            border-radius: 50%; background: var(--well); box-shadow: var(--inset);
            font-size: 15px; }
.m-actions { display: flex; gap: 10px; margin-top: 18px; }
.m-actions .btn { flex: 1; }

/* ── Analytics ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: linear-gradient(180deg, #FFFFFF, #FAFBFD);
        border: 1px solid rgba(255,255,255,.65); border-radius: var(--r);
        box-shadow: var(--shadow); padding: 14px; }
.stat b { font-family: var(--disp); font-size: 26px; display: block; letter-spacing: -.02em; }
.stat span { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
canvas.chart { width: 100%; height: 160px; }

/* ── Search — pressed-in well ── */
.search { display: flex; align-items: center; gap: 8px; background: var(--well);
          box-shadow: var(--inset); border-radius: 999px; padding: 10px 16px;
          margin-bottom: 12px; }
.search input { border: 0; outline: none; flex: 1; font-size: 15px; background: none; }

.fab { position: fixed; right: max(16px, calc(50vw - 264px)); bottom: 86px; z-index: 15;
       width: 56px; height: 56px; border-radius: 19px;
       background: linear-gradient(180deg, #148378, #0C6A62); color: #fff;
       font-size: 26px; box-shadow: 0 10px 26px rgba(12,106,98,.42), inset 0 1px 0 rgba(255,255,255,.25);
       display: grid; place-items: center; }
.fab:active { transform: translateY(1px) scale(.98); }

/* ── Print (Management Plan + Invoice) ── */
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  body { background: #fff; }
  #printArea { display: block; font-family: var(--body); color: #111; padding: 8mm; }
  .p-head { display: flex; justify-content: space-between; align-items: flex-start;
            border-bottom: 2.5px solid #0F766E; padding-bottom: 10px; }
  .p-head h1 { font-family: var(--disp); font-size: 20pt; }
  .p-head .who { text-align: right; font-size: 10pt; line-height: 1.5; }
  .p-title { font-size: 13pt; font-weight: 800; margin: 14px 0 4px; color: #0F766E;
             letter-spacing: .06em; text-transform: uppercase; }
  .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; font-size: 11pt;
            margin: 8px 0; }
  .p-grid b { font-weight: 700; }
  .p-body { font-size: 11.5pt; line-height: 1.65; white-space: pre-wrap; margin-top: 6px; }
  table.p-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11pt; }
  table.p-table th { text-align: left; border-bottom: 1.5px solid #111; padding: 6px 4px;
                     font-size: 10pt; text-transform: uppercase; letter-spacing: .04em; }
  table.p-table td { padding: 8px 4px; border-bottom: 1px solid #ddd; }
  .p-total { text-align: right; font-size: 13pt; font-weight: 800; margin-top: 10px; }
  .p-foot { margin-top: 18mm; display: flex; justify-content: space-between;
            align-items: flex-end; font-size: 10pt; color: #555; }
  .p-sign { text-align: center; }
  .p-sign .line { border-top: 1px solid #111; width: 60mm; margin-bottom: 4px; }
}

/* ── Round 2 additions ── */
.logo #hdrWho { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 600;
                color: var(--ink-soft); letter-spacing: 0; text-transform: none; margin-top: 1px; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.note-day { border-left: 3px solid var(--teal-soft); padding: 8px 12px; margin: 10px 0; }
.note-day .when { font-size: 12px; font-weight: 800; color: var(--teal); }
.note-day ul { margin: 4px 0 0 16px; font-size: 14.5px; }
.note-day ul li { margin: 3px 0; white-space: pre-wrap; }
.note-day ul li small { color: var(--ink-soft); }
.note-day img.upl { width: 100%; border-radius: var(--r-sm); margin-top: 6px; max-height: 260px;
                    object-fit: contain; background: var(--well); }
.doc-prev { background: var(--well); box-shadow: var(--inset); border-radius: var(--r-sm);
            padding: 14px; margin: 12px 0; font-size: 14px; }
.doc-prev .dp-head { font-weight: 800; color: var(--teal); font-size: 12px;
                     text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.doc-prev .dp-body { white-space: pre-wrap; line-height: 1.55; }
.doc-prev table { width: 100%; border-collapse: collapse; }
.doc-prev td { padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.doc-prev .dp-total { text-align: right; font-weight: 800; margin-top: 8px; }
.plan-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
            border-bottom: 1px solid var(--line); }
.plan-row:last-child { border-bottom: 0; }
.chat-thread { max-height: 46dvh; overflow: auto; display: flex; flex-direction: column;
               gap: 8px; padding: 6px 2px; }
.msg { align-self: flex-end; background: linear-gradient(180deg, #148378, #0C6A62); color: #fff;
       border-radius: 18px 18px 5px 18px; box-shadow: 0 2px 8px rgba(12,106,98,.22);
       padding: 9px 13px; max-width: 85%; font-size: 14.5px; }
.msg .m-meta { display: flex; gap: 10px; align-items: center; justify-content: space-between;
               margin-top: 4px; }
.msg small { color: rgba(255,255,255,.75); font-size: 10.5px; }
.msg a { color: #CFF5EF; word-break: break-all; }
.msg .wa { font-size: 12px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 2px 9px; }
.chat-inp { display: flex; gap: 8px; margin-top: 10px; }
.chat-inp input { flex: 1; }

/* ── Round 3: elegant tappable cards ── */
.appt-card { display: flex; align-items: center; gap: 10px; background: #F3F5F8;
             border-radius: 15px; padding: 13px 14px;
             margin: 8px 0; cursor: pointer; }
.appt-card:active { background: #ECEEF2; transform: scale(.99); }
.ac-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chev { color: var(--ink-soft); font-size: 22px; line-height: 1; flex: none; }
.pcard { display: flex; align-items: center; gap: 12px;
         background: linear-gradient(180deg, #FFFFFF, #FAFBFD);
         border: 1px solid rgba(255,255,255,.65); border-radius: var(--r);
         box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; cursor: pointer; }
.pcard:active { transform: scale(.99); }
.pk-row { display: flex; align-items: center; gap: 10px; background: #F3F5F8;
          border-radius: 13px; padding: 9px 12px; margin: 6px 0; cursor: pointer; }
.pk-row:active { background: #ECEEF2; }
.pk-sel { display: flex; align-items: center; gap: 10px; background: var(--teal-soft);
          border-radius: 15px; padding: 11px 12px;
          box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* ── Splash + patient ── */
.splash { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #0F1411;
          display: grid; place-items: center; text-align: center; }
.sp-bg { position: absolute; inset: -4%; background-size: cover; background-position: center;
         filter: grayscale(1) contrast(1.05); }
.sp-scrim { position: absolute; inset: 0;
            background: linear-gradient(rgba(10,14,11,.72), rgba(10,14,11,.85)); }
.sp-in { position: relative; padding: 24px; }
.sp-logo { font-family: var(--disp); font-weight: 800; color: #F6F4F1;
           font-size: clamp(64px, 12vw, 100px); letter-spacing: -.02em; line-height: 1; }
.sp-logo b { color: var(--coral); }
.sp-sub { font-family: ui-monospace, monospace; color: #F6F4F1; font-size: clamp(11px, 1.8vw, 14px);
          letter-spacing: .18em; margin-top: 6px; }
.sp-btns { display: flex; flex-direction: column; gap: 12px; margin: 34px auto 0;
           max-width: 300px; }
.sp-btn { border-radius: 999px; padding: 15px; font-size: 16px; font-weight: 700;
          background: var(--teal); color: #fff; }
.sp-btn.ghost { background: none; border: 2px solid rgba(246,244,241,.6); color: #F6F4F1; }
.sp-btn:active { transform: scale(.98); }
.sp-foot { color: #8FA394; font-size: 11px; margin-top: 30px;
           font-family: ui-monospace, monospace; }
.msg.them { align-self: flex-start; background: #F3F5F8; color: var(--ink);
            box-shadow: none; border-radius: 18px 18px 18px 5px; }
.msg.them small { color: var(--ink-soft); }
.msg.them a { color: var(--teal); }
video.ex-vid { width: 100%; max-height: 320px; border-radius: var(--r-sm);
               background: #fff; box-shadow: var(--raise); margin-top: 10px; }

/* ── Physo round: icons, splash zoom, directory, library ── */
nav.tabs .ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
                   stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes spzoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.sp-bg { opacity: 0; transition: opacity 2.2s ease; filter: grayscale(1) contrast(1.05);
         will-change: opacity, transform; }
.sp-bg.show { opacity: 1; }
.busy-grid { display: flex; gap: 6px; margin: 4px 0 8px; }
.busy-day { flex: 1; text-align: center; }
.busy-day small { color: var(--ink-soft); font-size: 10px; line-height: 1.2; display: block;
                  margin-bottom: 4px; }
.slot { display: block; height: 8px; border-radius: 3px; background: var(--teal-soft);
        margin: 2px 0; }
.slot.busy { background: #D9BFA6; }
.region-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px;
                margin-bottom: 4px; -webkit-overflow-scrolling: touch; }
.rchip { flex: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px;
         font-weight: 700; color: var(--ink-soft);
         background: linear-gradient(180deg, #FFFFFF, #F5F6F9); box-shadow: var(--raise); }
.rchip.on { background: linear-gradient(180deg, #148378, #0C6A62); color: #fff;
            box-shadow: 0 4px 10px rgba(12,106,98,.3), inset 0 1px 0 rgba(255,255,255,.25); }
.ex-region { font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
             text-transform: uppercase; color: var(--teal); margin: 14px 0 4px; }
.ex-row { display: flex; align-items: center; gap: 10px; background: #F3F5F8;
          border-radius: 13px; padding: 12px 14px; margin: 6px 0; cursor: pointer; }
.ex-row:active { background: #ECEEF2; transform: scale(.99); }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
          opacity: .55; flex: none; }
.ex-play { color: var(--teal); font-size: 12px; background: var(--teal-soft);
           border-radius: 999px; padding: 4px 10px;
           box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* adherence dots + library alignment */
.adh-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%;
           background: #DDE0E6; box-shadow: inset 0 1px 2px rgba(26,29,33,.12);
           margin-right: 4px; }
.adh-dot.on { background: var(--green); box-shadow: 0 1px 3px rgba(21,128,61,.35); }
.ex-row .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-play { margin-left: auto; flex: none; }
.ex-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); }

/* day slot picker */
.busy-day.tap { cursor: pointer; border-radius: 10px; padding: 2px; }
.busy-day.tap:active { background: var(--teal-soft); }
.slot-list { max-height: 52dvh; overflow: auto; margin-top: 10px; }
.slot-row { display: flex; justify-content: space-between; align-items: center; width: 100%;
            background: linear-gradient(180deg, #FFFFFF, #F7F8FA); box-shadow: var(--raise);
            border-radius: 13px; padding: 12px 16px; margin: 8px 2px; font-size: 15px; }
.slot-row span { font-size: 12px; color: var(--teal); font-weight: 700; }
.slot-row.busy { opacity: .55; box-shadow: none; background: var(--well); }
.slot-row.busy span { color: var(--amber); }
.slot-row.past { opacity: .35; box-shadow: none; background: var(--well); }
.slot-row:not(.busy):not(.past):active { box-shadow: var(--inset); transform: translateY(1px); }

/* ── This week — stacked day bands (bold uppercase, deepening shade) ── */
.week-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
                text-transform: uppercase; color: var(--ink-soft); margin: 20px 4px 8px; }
.week-stack { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
              border: 1px solid rgba(255,255,255,.65); margin-bottom: 14px; }
.week-band .wb-head { width: 100%; display: flex; align-items: baseline;
                      justify-content: space-between; padding: 15px 18px; text-align: left; }
.week-band .wb-day { font-family: var(--disp); font-weight: 800; font-size: 23px;
                     letter-spacing: -.01em; text-transform: uppercase; }
.week-band .wb-meta { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.week-band:nth-child(1) { background: #FBFCFD; }
.week-band:nth-child(2) { background: #F3F5F8; }
.week-band:nth-child(3) { background: #ECEEF2; }
.week-band:nth-child(4) { background: #E4E7EC; }
.week-band:nth-child(5) { background: #DDE0E6; }
.week-band:nth-child(6) { background: #D5D9E0; }
.week-band.open { background: #fff; }
.week-band.open .wb-day { color: var(--teal); }
.week-band .wb-body { padding: 0 12px 12px; }
.week-band .wb-body .appt-card { background: #F3F5F8; }

/* ── Onboarding wizard ── */
#obWrap { position: fixed; inset: 0; z-index: 55; background: var(--bg);
          overflow: auto; }
.ob { max-width: 480px; margin: 0 auto; padding: 30px 20px 60px; }
.ob h2 { font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 18px 0 6px; }
.ob > .muted { font-size: 14px; line-height: 1.55; }
.ob-dots { display: flex; gap: 7px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #D5D9E0;
          transition: all .2s; }
.ob-dot.on { width: 22px; border-radius: 5px; background: var(--teal); }
.ob-dot.done { background: var(--teal); opacity: .45; }
.ob-btns { display: flex; gap: 10px; margin-top: 22px; }
.ob-btns .grow { flex: 1; }
.ob-li { display: flex; gap: 11px; margin: 10px 0; font-size: 14px; line-height: 1.45; }
.ob-li > span:first-child { flex: none; width: 22px; text-align: center; color: var(--teal); }

/* ── Carousel studio ── */
#csWrap { position: fixed; inset: 0; z-index: 56; background: var(--bg); overflow-y: auto; }
.cs { max-width: 520px; margin: 0 auto; padding: 18px 18px 80px; }
.cs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cs-stage { position: relative; }
#csCv { width: 100%; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
  display: block; touch-action: none; cursor: pointer; }
.cs-nav { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.cs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; }
.cs-chip { flex: none; border: 2px solid transparent; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cs-chip.on { border-color: var(--teal); }
.cs-col { width: 34px; height: 34px; border: none; border-radius: 8px; padding: 0;
  background: none; cursor: pointer; }
.cs-edit { position: absolute; z-index: 5; font-size: 15px; line-height: 1.35;
  border: 2px solid var(--teal); border-radius: 8px; padding: 6px 8px;
  background: var(--card, #fff); color: var(--ink, #222); resize: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.av-fmt { display: flex; align-items: center; gap: 6px; font-size: 13px;
          font-weight: 600; color: var(--ink-soft); }
.av-fmt input { width: 18px; height: 18px; accent-color: var(--teal); }

/* ── In-app dialogs (replaces native alert/confirm) ── */
#dlgWrap { position: fixed; inset: 0; z-index: 90; display: none; }
#dlgWrap.on { display: grid; place-items: center; padding: 26px; }
.dlg-scrim { position: absolute; inset: 0; background: rgba(26,29,33,.42);
             -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg { position: relative; background: linear-gradient(180deg, #fff, var(--card));
       border-radius: 22px; box-shadow: 0 18px 50px rgba(26,29,33,.28),
       inset 0 1px 0 rgba(255,255,255,.9); padding: 22px; width: 100%;
       max-width: 340px; animation: rise .18s ease; }
.dlg-msg { font-size: 15px; line-height: 1.6; white-space: pre-wrap;
           word-break: break-word; }
.dlg-btns { display: flex; gap: 10px; margin-top: 18px; }
.dlg-btns .btn { flex: 1; }

/* ── Selectable service rows (patient booking) ── */
.rq-rate { cursor: pointer; }
.rq-rate.sel { background: var(--teal-soft); box-shadow: inset 0 0 0 1.5px var(--teal); }

/* ── Availability accordion ── */
.av-day { border-radius: 14px; background: #F3F5F8; margin: 8px 0; padding: 4px 12px; }
.av-day.open { background: #fff; box-shadow: var(--raise); padding-bottom: 12px; }
.av-head { width: 100%; display: flex; align-items: center; gap: 10px;
           padding: 11px 2px; text-align: left; }
.av-head b { width: 40px; font-size: 14px; flex: none; }
.av-head .grow { font-size: 12.5px; }

/* ── Notifications bell + readable document previews + plan comments ── */
#bellBtn { position: relative; }
.badge { position: absolute; top: -6px; right: -6px; background: var(--coral); color: #fff;
         border-radius: 999px; font-size: 10.5px; font-weight: 800; min-width: 18px;
         height: 18px; display: grid; place-items: center; padding: 0 5px;
         box-shadow: 0 2px 6px rgba(240,74,56,.4); }
.doc-prev.big { font-size: 15.5px; line-height: 1.7; padding: 18px; }
.doc-prev.big .dp-head { font-size: 13px; }
.doc-prev.big td { font-size: 15.5px; padding: 8px 2px; }
.dp-comment { background: #fff; border-radius: 12px; padding: 9px 12px; margin: 6px 0;
              font-size: 14px; box-shadow: 0 1px 3px rgba(26,29,33,.07); }
.dp-comment small { color: var(--ink-soft); }

/* ── Install prompt bar ── */
.install-bar { display: flex; align-items: center; gap: 12px;
               background: linear-gradient(180deg, #FFFFFF, #FAFBFD);
               border: 1px solid rgba(255,255,255,.65); border-radius: var(--r);
               box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 14px; }
.install-bar b { font-size: 14.5px; display: block; }
.install-bar span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.install-bar .shr { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.install-bar .shr svg { width: 14px; height: 14px; stroke: var(--teal); fill: none;
                        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.install-bar .ib-x { width: 30px; height: 30px; border-radius: 50%; flex: none;
                     background: var(--well); box-shadow: var(--inset); font-size: 13px;
                     color: var(--ink-soft); }