/* ============================================================================
   KMB Concierge — design system (on-brand: KMB blue + white + yellow)
   ============================================================================ */
:root{
  --navy:#0A2C63; --blue:#134CA6; --blue-bright:#2E7BD6; --sky:#6FA8E0;
  --yellow:#F6B82E; --yellow-deep:#E9A81A;
  --teal:#15B2A6; --teal-deep:#0C8A80; --rose:#E48F86; --green:#19A974;
  --indigo:#5B6CD6; --grey:#9AA7B8;
  --canvas:#EFF4FB; --surface:#FFFFFF;
  --ink:#0E2747; --ink2:#566580; --ink3:#647488; --hair:#E6ECF4;
  --blue-soft:#EAF2FD; --yellow-soft:#FEF4DA; --teal-soft:#E0F5F2; --rose-soft:#FBE7E3;
  --green-soft:#E2F5EE; --indigo-soft:#ECEEFB; --grey-soft:#EEF1F6;
  --hero:linear-gradient(135deg,#0A2C63 0%,#134CA6 52%,#2E7BD6 118%);
  --night:radial-gradient(130% 90% at 50% -10%,#1b4f9e 0%,#0e2f63 45%,#081d3f 100%);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans Thai","Sarabun",Arial,sans-serif;
  --sh-card:0 6px 20px rgba(19,76,166,.07);
  --sh-pop:0 16px 40px rgba(10,44,99,.18);
  --sh-float:0 14px 34px rgba(10,44,99,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --rail-w:240px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow:hidden;}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#cdd8e6;border-radius:8px;}
.tnum{font-variant-numeric:tabular-nums;}
[hidden]{display:none !important;}
.rtl{direction:rtl;text-align:right;}

/* ---------- KMB logo ---------- */
.logo{display:inline-flex;align-items:center;gap:8px;}
.logo .mark{display:flex;align-items:center;font-weight:800;letter-spacing:.3px;line-height:1;}
.logo .slash{width:9px;height:22px;border-radius:3px;background:linear-gradient(160deg,#FFD45E,var(--yellow));
  transform:skewX(-12deg);margin-right:6px;}
.logo .kmb{font-size:21px;}
.logo .sub{font-size:8px;letter-spacing:2.6px;font-weight:700;opacity:.75;text-transform:uppercase;margin-left:7px;}
.logo.light .kmb,.logo.light .sub{color:#fff;}
.logo.dark .kmb{color:var(--navy);} .logo.dark .sub{color:var(--blue);}

/* ============================ APP SHELL ============================ */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);
  border-bottom:1px solid var(--hair);flex-shrink:0;z-index:30;box-shadow:0 1px 0 rgba(10,44,99,.03);}
.topbar .spacer{flex:1;}
.tb-ctl{display:flex;align-items:center;gap:8px;}
.pill-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#3d4a5f;white-space:nowrap;
  background:var(--canvas);border:1px solid var(--hair);padding:7px 11px;border-radius:999px;transition:.2s var(--ease);}
.pill-btn:hover{border-color:#cfdcec;}
.pill-btn svg{width:14px;height:14px;}
.pill-btn .lng{color:var(--blue);font-weight:800;}
.mode-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid;transition:.2s var(--ease);white-space:nowrap;}
.mode-chip .dot{width:8px;height:8px;border-radius:50%;}
.mode-chip.demo{color:var(--yellow-deep);background:var(--yellow-soft);border-color:rgba(246,184,46,.45);}
.mode-chip.demo .dot{background:var(--yellow);}
.mode-chip.online{color:var(--teal-deep);background:var(--teal-soft);border-color:rgba(21,178,166,.4);}
.mode-chip.online .dot{background:var(--teal);box-shadow:0 0 0 3px rgba(21,178,166,.18);}

.body{flex:1;display:flex;min-height:0;position:relative;}
.main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;}
/* premium feel: subtle fade/slide when a role view mounts */
.main.view-in{animation:viewIn .32s var(--ease);}
@keyframes viewIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

/* desktop left rail (role switcher) — hidden on mobile */
.rail{display:none;}
@media(min-width:900px){
  .rail{display:flex;flex-direction:column;gap:4px;width:var(--rail-w);flex-shrink:0;background:var(--surface);
    border-right:1px solid var(--hair);padding:14px 12px;overflow-y:auto;}
  .rail .rail-h{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);
    padding:8px 12px 6px;}
  .rail .ritem{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:var(--ink2);
    font-weight:700;font-size:14px;transition:.18s var(--ease);}
  .rail .ritem:hover{background:var(--canvas);}
  .rail .ritem.on{background:var(--blue-soft);color:var(--blue);}
  .rail .ritem svg{width:20px;height:20px;flex-shrink:0;}
  .rail .ritem .sub{display:block;font-size:10.5px;font-weight:600;color:var(--ink3);margin-top:1px;}
  .rail .ritem.on .sub{color:var(--blue-bright);}
  .rail .ritem .rlb{flex:1;min-width:0;}
  .rail .divider{height:1px;background:var(--hair);margin:8px 12px;}
  .bottomnav{display:none !important;}
  .main{padding-bottom:0;}
}

/* mobile bottom nav (role switcher) */
.bottomnav{display:flex;background:var(--surface);border-top:1px solid var(--hair);
  padding:7px 4px calc(7px + env(safe-area-inset-bottom));flex-shrink:0;z-index:30;box-shadow:0 -6px 20px rgba(10,44,99,.05);}
.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--ink3);
  font-size:9.5px;font-weight:700;}
.bottomnav button svg{width:21px;height:21px;}
.bottomnav button .ico{width:46px;height:25px;display:flex;align-items:center;justify-content:center;border-radius:9px;transition:.2s var(--ease);}
.bottomnav button.on{color:var(--blue);}
.bottomnav button.on .ico{background:var(--blue-soft);}

/* ============================ VIEW PRIMITIVES ============================ */
.view{display:none;}
.view.on{display:block;}
.maxw{max-width:1080px;margin:0 auto;}

/* hero header (per-view) */
.vhero{background:var(--hero);color:#fff;padding:18px 18px 20px;position:relative;overflow:hidden;}
.vhero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,168,224,.4),transparent 65%);}
.vhero .vh-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;gap:10px;}
.vhero .vh-role{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;opacity:.92;}
.vhero .vh-role .ri{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;}
.vhero .vh-role .ri svg{width:17px;height:17px;}
.vhero h1{margin:14px 0 3px;font-size:24px;font-weight:800;letter-spacing:-.01em;position:relative;z-index:1;}
.vhero .vh-sub{font-size:12.5px;opacity:.84;position:relative;z-index:1;max-width:90%;}
.founder{display:flex;align-items:center;gap:9px;}
.founder .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#fff,#dCe9fb);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 0 4px var(--yellow);}
.founder .ft{font-size:9.5px;text-align:right;line-height:1.25;opacity:.95;}
.founder .ft b{font-size:12px;font-weight:700;display:block;}

.search{margin-top:14px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 13px;color:#eaf2fd;font-size:13px;position:relative;z-index:1;}
.search svg{width:16px;height:16px;opacity:.85;}

.pad{padding:16px;}

/* KPI cards */
.kpis{display:flex;gap:10px;flex-wrap:wrap;}
.kpi{flex:1;min-width:150px;background:var(--surface);border-radius:18px;padding:14px 13px;box-shadow:var(--sh-card);position:relative;overflow:hidden;}
.kpi .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:9px;}
.kpi .ic svg{width:17px;height:17px;}
.kpi.blue .ic{background:var(--blue-soft);color:var(--blue);}
.kpi.teal .ic{background:var(--teal-soft);color:var(--teal-deep);}
.kpi.amber .ic{background:var(--yellow-soft);color:var(--yellow-deep);}
.kpi.green .ic{background:var(--green-soft);color:var(--green);}
.kpi .num{font-size:26px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:.4px;}
.kpi .lab{font-size:11px;color:var(--ink2);margin-top:5px;font-weight:600;line-height:1.25;}
.kpi .delta{position:absolute;top:12px;right:12px;font-size:9px;font-weight:800;color:var(--teal-deep);background:var(--teal-soft);padding:2px 7px;border-radius:999px;}

/* overnight recap banner (marketing) — the pitch in one glance */
.night-recap{display:flex;align-items:center;gap:13px;background:var(--night);color:#fff;border-radius:18px;padding:13px 15px;margin-bottom:12px;box-shadow:var(--sh-card);position:relative;overflow:hidden;}
.night-recap::after{content:"";position:absolute;right:-30px;top:-44px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(110,168,224,.35),transparent 65%);}
.night-recap .nr-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none;position:relative;z-index:1;}
.night-recap .nr-ic svg{width:20px;height:20px;color:#FFD45E;}
.night-recap .nr-body{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;position:relative;z-index:1;}
.night-recap .nr-head{font-size:11.5px;font-weight:600;line-height:1.35;opacity:.96;}
.night-recap .nr-head b{font-weight:800;color:#FFD45E;}
.night-recap .nr-body .nr-stats{flex:none;}
.night-recap .nr-stats{display:flex;gap:16px;flex:1;min-width:0;position:relative;z-index:1;}
.night-recap .nr-stats > div{display:flex;flex-direction:column;}
.night-recap .nr-stats b{font-size:21px;font-weight:800;line-height:1;letter-spacing:.4px;}
.night-recap .nr-stats span{font-size:9.5px;opacity:.82;margin-top:3px;font-weight:600;white-space:nowrap;}
.night-recap .nr-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;opacity:.92;position:relative;z-index:1;flex:none;}
.night-recap .nr-live .d{width:7px;height:7px;border-radius:50%;background:#52e0b8;}
@keyframes nrpulse{0%{box-shadow:0 0 0 0 rgba(82,224,184,.6);}70%{box-shadow:0 0 0 7px rgba(82,224,184,0);}100%{box-shadow:0 0 0 0 rgba(82,224,184,0);}}
.night-recap .nr-live .d{animation:nrpulse 1.8s infinite;}
@media(max-width:380px){.night-recap .nr-stats{gap:11px;} .night-recap .nr-stats b{font-size:19px;}}

.section-h{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);margin:18px 2px 10px;display:flex;align-items:center;gap:8px;}
.section-h svg{width:14px;height:14px;flex-shrink:0;}

/* filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.fc{white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--surface);border:1px solid var(--hair);
  padding:8px 14px;border-radius:999px;box-shadow:var(--sh-card);transition:.18s var(--ease);}
.fc.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 16px rgba(19,76,166,.28);}
.fc .c{opacity:.6;margin-left:5px;}

/* ---------- lead card ---------- */
.lead{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:13px 14px;margin-bottom:11px;box-shadow:var(--sh-card);position:relative;cursor:pointer;transition:.18s var(--ease);}
.lead:hover{border-color:#dbe4ef;box-shadow:0 8px 22px rgba(19,76,166,.10);}
.lead.hot{border-left:3px solid var(--yellow);}
.lead .av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:var(--blue-soft);position:relative;flex-shrink:0;}
.lead .av .ch{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px #fff;}
.lead .av .ch svg{width:11px;height:11px;}
.lead .mid{flex:1;min-width:0;}
.lead .nm{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--ink);flex-wrap:wrap;overflow-wrap:anywhere;}
.lead .nm .tag{font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--yellow-deep);
  background:var(--yellow-soft);border:1px solid rgba(246,184,46,.4);padding:2px 6px;border-radius:999px;}
.lead .nm .tag.vip{color:#7a5200;background:linear-gradient(135deg,#FFE49A,#F6C244);border-color:#E9A81A;}
.lead .nm .tag.wait{color:var(--ink2);background:#EEF1F6;border-color:var(--hair);}
/* surgeon choice / waitlist / VIP block (fiche) */
.dbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.dbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--hair);color:var(--ink2);background:#EEF1F6;}
.dbadge svg{width:11px;height:11px;}
.dbadge.vip{color:#7a5200;background:linear-gradient(135deg,#FFE49A,#F6C244);border-color:#E9A81A;}
.dbadge.wait{color:var(--yellow-deep);background:var(--yellow-soft);border-color:rgba(246,184,46,.4);}
.dbadge.hot{color:var(--blue);background:var(--blue-soft);border-color:#cfe0f6;}
.dsuggest{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding:9px 11px;border-radius:11px;background:var(--blue-soft);color:var(--blue);font-size:12px;line-height:1.4;}
.dsuggest svg{width:15px;height:15px;flex:none;margin-top:1px;}
.dsuggest b{color:var(--navy);}
/* post-op follow-up (safe module) */
.po-label{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;}
.po-checks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.poch{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;border:1px solid var(--hair);color:var(--ink2);background:#EEF1F6;}
.poch svg{width:11px;height:11px;}
.poch.done{color:var(--teal-deep);background:var(--teal-soft);border-color:rgba(21,178,166,.4);}
.poch.due{color:var(--yellow-deep);background:var(--yellow-soft);border-color:rgba(246,184,46,.4);}
.porow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);padding:8px 0;border-top:1px solid var(--hair);}
.porow svg{width:15px;height:15px;flex:none;}
.porow > span{flex:1;}
.porow.warn{color:var(--yellow-deep);}
.porow.ok{color:var(--teal-deep);}
.porow.danger{color:var(--red);font-weight:700;}
.btn-xs{padding:5px 10px !important;font-size:11px !important;flex:none;}
.po-guard{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding:9px 11px;border-radius:11px;background:#F4F7FB;color:var(--ink2);font-size:11.5px;line-height:1.45;border:1px dashed #cfdcec;}
.po-guard svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--blue);}
/* recommended next action banner (fiche) */
.nextact{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,var(--blue-soft),#fff);border:1px solid #cfe0f6;border-radius:14px;padding:11px 13px;margin:2px 0 14px;}
.nextact svg{width:20px;height:20px;color:var(--blue);flex:none;}
.nextact .nal{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3);}
.nextact .nav{font-size:14.5px;font-weight:800;color:var(--navy);margin-top:1px;}
/* PDPA consent chip (fiche header) */
.cchip{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;letter-spacing:.2px;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;}
.cchip svg{width:10px;height:10px;}
.cchip.given{color:var(--teal-deep);background:var(--teal-soft);}
.cchip.pending{color:var(--yellow-deep);background:var(--yellow-soft);}
/* person-level scope switcher (marketing / sales) */
.personfilter{margin-bottom:8px;align-items:center;}
.personfilter .pf-lab{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3);white-space:nowrap;flex:none;}
.personfilter .fc{display:inline-flex;align-items:center;gap:5px;}
.fc svg{width:13px;height:13px;flex:none;}   /* any icon inside a filter chip stays chip-sized */
.viewas-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);margin:0 2px 14px;}
.viewas-note svg{width:13px;height:13px;flex:none;}
.lead .sm{font-size:11.5px;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lead .tags{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.proc{font-size:10px;font-weight:700;color:var(--blue);background:var(--blue-soft);padding:3px 9px;border-radius:999px;}
.budget{font-size:10.5px;font-weight:800;color:var(--ink);background:var(--canvas);border:1px solid var(--hair);padding:3px 9px;border-radius:999px;}
.budget.tbd{color:var(--ink3);font-weight:700;}
.lead .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.lead .tm{font-size:10px;color:var(--ink3);font-weight:700;white-space:nowrap;}
.lead .hd{font-size:9.5px;color:var(--ink3);display:flex;align-items:center;gap:3px;}
.lead .hd svg{width:11px;height:11px;}

/* status pills (4-colour set + extended) */
.pill{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pill .d{width:6px;height:6px;border-radius:50%;}
.s-blue{color:var(--blue);background:var(--blue-soft);} .s-blue .d{background:var(--blue);}
.s-amber{color:var(--yellow-deep);background:var(--yellow-soft);} .s-amber .d{background:var(--yellow);}
.s-indigo{color:#3d4db8;background:var(--indigo-soft);} .s-indigo .d{background:var(--indigo);}
.s-teal{color:var(--teal-deep);background:var(--teal-soft);} .s-teal .d{background:var(--teal);}
.s-tealdk{color:#0a6f67;background:var(--teal-soft);} .s-tealdk .d{background:var(--teal-deep);}
.s-navy{color:var(--navy);background:#dde8f7;} .s-navy .d{background:var(--navy);}
.s-green{color:#0c7a52;background:var(--green-soft);} .s-green .d{background:var(--green);}
.s-grey{color:var(--ink2);background:var(--grey-soft);} .s-grey .d{background:var(--grey);}

/* ---------- pipeline (kanban) ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;}
.kcol{flex:0 0 240px;min-width:240px;background:var(--canvas);border:1px solid var(--hair);border-radius:16px;padding:10px;}
.kcol .kh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);padding:4px 4px 10px;}
.kcol .kh .kh-meta{display:flex;align-items:center;gap:6px;flex:none;}
.kcol .kh .kv{color:var(--blue);font-weight:800;font-size:11px;}
.kcol .kh .n{background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:1px 8px;font-size:10px;}
.kcard{background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px;margin-bottom:9px;box-shadow:var(--sh-card);cursor:pointer;transition:.15s var(--ease);}
.kcard:hover{border-color:#dbe4ef;}
.kcard .kn{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;overflow-wrap:anywhere;}
.kcard .kmeta{font-size:11px;color:var(--ink2);margin-top:4px;}
.kcard .kfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.kav{width:20px;height:20px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.kcard .kn .tag{font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:999px;flex:none;}
.kcard .kn .tag.vip{color:#7a5200;background:linear-gradient(135deg,#FFE49A,#F6C244);border:1px solid #E9A81A;}

/* ---------- doctor agenda ---------- */
.agenda-day{font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin:14px 2px 8px;}
.op{display:flex;gap:12px;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px;margin-bottom:11px;box-shadow:var(--sh-card);cursor:pointer;}
.op.done{opacity:.72;}
.op .time{flex-shrink:0;text-align:center;background:var(--blue-soft);border-radius:12px;padding:9px 11px;min-width:62px;}
.op .time .hh{font-size:17px;font-weight:800;color:var(--blue);line-height:1;}
.op .time .dur{font-size:9.5px;color:var(--ink3);margin-top:3px;font-weight:700;}
.op .oi{flex:1;min-width:0;}
.op .oi .opn{font-weight:700;font-size:15px;overflow-wrap:anywhere;}
.op .oi .opp{font-size:12px;color:var(--ink2);margin-top:3px;}
.op .oi .opa{font-size:11.5px;color:var(--ink3);margin-top:5px;}
.op .surgeon{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);margin-top:7px;}
.op .surgeon svg{width:14px;height:14px;flex-shrink:0;}

/* ---------- chat (light, on-brand) ---------- */
.chat-wrap{display:flex;flex-direction:column;height:100%;}
.chero{background:var(--hero);color:#fff;padding:14px 16px 13px;flex-shrink:0;position:relative;overflow:hidden;transition:background .9s var(--ease);}
.chero.night{background:var(--night);}
.chero::after{content:"";position:absolute;right:-30px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(110,168,224,.4),transparent 65%);}
.chead{display:flex;align-items:center;gap:11px;position:relative;z-index:1;}
.lea{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#fff,#e3eefb);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 0 4px var(--yellow);flex-shrink:0;}
/* clinic-provided concierge photo (KBRAND.assistant.avatar) — fills the avatar, keeps the ring */
.lea.hasimg,.row .ra.hasimg{overflow:hidden;}
.lea.hasimg img,.row .ra.hasimg img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.cid{flex:1;min-width:0;}
.cid .n{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:7px;}
.cid .n .on{width:7px;height:7px;border-radius:50%;background:#52e0b8;box-shadow:0 0 0 3px rgba(82,224,184,.3);}
.cid .s{font-size:11px;opacity:.82;}
.cbadge{font-size:10px;font-weight:800;background:rgba(246,184,46,.92);color:#3a2a00;padding:5px 9px;border-radius:999px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.cbadge svg{width:11px;height:11px;}
.cmeta{display:flex;gap:8px;margin-top:11px;position:relative;z-index:1;flex-wrap:wrap;}
.chip{font-size:10.5px;font-weight:600;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:5px;}
.qualbar{display:flex;gap:6px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;}
.seg{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;font-weight:700;padding:7px;border-radius:10px;color:var(--ink3);background:var(--grey-soft);transition:.25s var(--ease);}
.seg svg{width:12px;height:12px;opacity:0;transition:.25s var(--ease);}
.seg.lit{color:var(--teal-deep);background:var(--teal-soft);}
.seg.lit svg{opacity:1;}
.chat{flex:1;overflow-y:auto;padding:16px;background:var(--canvas);}
.convlist{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;}
.cl-chip{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--ink2);
  background:var(--canvas);border:1px solid var(--hair);border-radius:999px;padding:5px 11px 5px 6px;}
.cl-chip.on{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);}
.cl-chip .f{width:22px;height:22px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;position:relative;overflow:visible;color:#fff;}
.cl-chip .f .ch{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px var(--surface);}
.cl-chip .f .ch svg{width:8px;height:8px;}
.cl-chip.on .f .ch{box-shadow:0 0 0 1.5px var(--blue-soft);}
.day{text-align:center;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--ink3);text-transform:uppercase;margin-bottom:14px;}
.row{display:flex;margin-bottom:11px;align-items:flex-end;gap:8px;}
.row.me{justify-content:flex-end;}
.row .ra{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#fff,#e3eefb);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;box-shadow:0 0 0 1.5px var(--yellow);flex-shrink:0;}
.bub{max-width:78%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.46;word-wrap:break-word;white-space:pre-line;animation:rise .3s var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.bub.ai{background:var(--surface);color:var(--ink);border-bottom-left-radius:6px;border-left:3px solid var(--yellow);box-shadow:var(--sh-card);}
.bub.me{background:var(--blue);color:#fff;border-bottom-right-radius:6px;box-shadow:0 6px 16px rgba(19,76,166,.22);}
/* a photo the client sent (or the AI shared) — rendered inline, then routed to a human */
.bub.hasimg{padding:4px;max-width:230px;}
.bub .cimg{display:block;width:100%;border-radius:13px;}
.bub.hasimg .cap{padding:7px 8px 5px;font-size:13px;line-height:1.4;}
.bub.staff{background:var(--teal);color:#fff;border-bottom-left-radius:6px;}
.bub .cursor{display:inline-block;width:2px;height:1em;background:var(--blue);margin-left:1px;vertical-align:-2px;animation:blink .9s steps(1) infinite;}
@keyframes blink{50%{opacity:.2;}}
.typing{display:flex;gap:4px;background:var(--surface);padding:13px 15px;border-radius:18px;border-bottom-left-radius:6px;width:fit-content;box-shadow:var(--sh-card);border-left:3px solid var(--yellow);}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);animation:breathe 1.2s var(--ease) infinite;}
.typing i:nth-child(2){animation-delay:.18s;} .typing i:nth-child(3){animation-delay:.36s;}
@keyframes breathe{0%,100%{opacity:.35;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}
.book{max-width:86%;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--sh-float);border:1px solid var(--hair);border-top:3px solid var(--teal);margin-bottom:11px;animation:rise .4s var(--ease) both;}
.book .t{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--teal-soft);color:var(--teal-deep);font-weight:800;font-size:13px;}
.book .t .ck{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;}
.book .t .ck svg{width:13px;height:13px;}
.book .b{padding:12px 14px;display:flex;flex-direction:column;gap:7px;}
.book .li{font-size:12.5px;color:var(--ink2);display:flex;gap:8px;}
.book .li b{color:var(--ink);font-weight:700;min-width:96px;}
.book .pdpa{padding:9px 14px;border-top:1px solid var(--hair);background:var(--teal-soft);color:var(--teal-deep);font-size:10.5px;font-weight:600;line-height:1.35;}
/* 24/7 deposit payment card (Kook AI never touches card data — hands off to a secure provider) */
.book.pay{border-top-color:var(--yellow);}
.book.pay .t{background:var(--yellow-soft);color:var(--yellow-deep);}
.book.pay .t .ck{background:var(--yellow);}
.book .paybtn{margin:2px 14px 12px;padding:12px 14px;border:0;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 28px);}
.book .paybtn:hover{background:var(--blue-bright);}
.book .paid{margin:2px 14px 12px;padding:12px 14px;border-radius:12px;background:var(--teal-soft);color:var(--teal-deep);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px;}
.book .paid svg{width:15px;height:15px;}
.composer{display:flex;align-items:center;gap:9px;padding:11px 14px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hair);flex-shrink:0;}
.composer .f{flex:1;background:var(--canvas);border:1px solid var(--hair);border-radius:999px;padding:11px 15px;color:var(--ink3);font-size:13px;display:flex;align-items:center;gap:8px;}
.composer.live .f{border-color:var(--teal);color:var(--ink);background:var(--teal-soft);}
.composer .f .g{margin-left:auto;font-size:11px;color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;}
.composer .f .g svg{width:13px;height:13px;}
.composer .f input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;}
.composer .f input::placeholder{color:var(--ink3);}
.composer .f input:disabled{color:var(--ink3);cursor:default;}
.composer .snd{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(19,76,166,.3);}
.composer .snd svg{width:18px;height:18px;}
.skiphint{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:20;font-size:11px;font-weight:700;color:#fff;
  white-space:nowrap;background:rgba(10,44,99,.75);padding:7px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;}

/* ---------- cockpit ---------- */
.funnel{display:flex;flex-direction:column;gap:8px;}
.fstep{background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-card);}
.fstep .fbar{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));}
.fstep .flab{flex:1;font-size:13px;font-weight:700;}
.fstep .fcount{font-size:17px;font-weight:800;}
.fstep .fpct{font-size:10.5px;color:var(--ink3);font-weight:700;min-width:42px;text-align:right;}
.barlist{display:flex;flex-direction:column;gap:9px;}
.barrow{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.barrow .bl{width:96px;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barrow .bt{flex:1;height:9px;background:var(--grey-soft);border-radius:6px;overflow:hidden;}
.barrow .bt i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),#46d3c8);}
.barrow .bv{font-weight:800;font-size:12px;min-width:64px;text-align:right;}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.statbig{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:15px;box-shadow:var(--sh-card);}
.statbig .v{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:.4px;}
.statbig .l{font-size:11px;color:var(--ink2);font-weight:600;margin-top:4px;}
.statbig.hl{background:linear-gradient(135deg,#0c8a80,#15B2A6);color:#fff;border:0;}
.statbig.hl .v,.statbig.hl .l{color:#fff;}

/* ---------- fiche (bottom sheet / side panel) ---------- */
.backdrop{position:fixed;inset:0;background:rgba(10,44,99,.32);opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:80;}
.backdrop.show{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92%;background:var(--canvas);border-radius:22px 22px 0 0;z-index:90;
  transform:translateY(100%);transition:transform .42s var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh-pop);}
.sheet.show{transform:none;}
@media(min-width:900px){
  .sheet{left:auto;top:0;bottom:0;width:440px;max-height:none;border-radius:0;transform:translateX(100%);}
  .sheet.show{transform:none;}
}
.sheet .grip{width:40px;height:4px;border-radius:3px;background:var(--hair);margin:9px auto 2px;flex-shrink:0;}
@media(min-width:900px){.sheet .grip{display:none;}}
.sheet-scroll{overflow-y:auto;padding:10px 18px 18px;}
.fh{display:flex;gap:13px;align-items:center;padding:8px 0 14px;}
.fh .fav{width:54px;height:54px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--yellow);flex-shrink:0;}
.fh .fn{font-size:19px;font-weight:800;}
.fh .fm{font-size:12px;color:var(--ink2);margin-top:2px;}
.fsec{margin-top:14px;}
.fsec .fst{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;}
.card-soft{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:13px 14px;}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;}
.kv .k{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px;font-weight:700;}
.kv .v{font-size:13.5px;color:var(--ink);font-weight:700;margin-top:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.kv .v .ia{font-size:8px;font-weight:800;color:var(--blue);background:var(--blue-soft);padding:1px 5px;border-radius:999px;}
.money3{display:flex;gap:8px;}
.money3 .m{flex:1;background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px;text-align:center;}
.money3 .m .mv{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.3px;}
.money3 .m .ml{font-size:9.5px;color:var(--ink3);font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.3px;}
.money3 .m.budget{background:var(--blue-soft);border-color:transparent;} .money3 .m.budget .mv{color:var(--blue);}
.money3 .m.quote{background:var(--yellow-soft);border-color:transparent;} .money3 .m.quote .mv{color:var(--yellow-deep);}
.money3 .m.rev{background:var(--teal-soft);border-color:transparent;} .money3 .m.rev .mv{color:var(--teal-deep);}
.card-mist{background:var(--blue-soft);border-radius:14px;padding:13px 14px;font-size:13px;line-height:1.5;color:var(--ink);}
.timeline{position:relative;padding-left:18px;}
.timeline::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--hair);}
.tl{position:relative;padding:0 0 13px;font-size:12.5px;color:var(--ink);}
.tl:last-child{padding-bottom:0;}
.tl::before{content:"";position:absolute;left:-18px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--canvas);}
.tl .tt{font-size:10px;color:var(--ink3);font-weight:700;}
.next{background:var(--yellow-soft);border:1px solid rgba(246,184,46,.35);border-radius:13px;padding:12px 13px;display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--ink);font-weight:600;}
.next svg{width:18px;height:18px;color:var(--yellow-deep);flex-shrink:0;}
.facts{display:flex;flex-direction:column;gap:9px;margin-top:18px;}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:14px;font-size:14px;font-weight:700;transition:.18s var(--ease);}
.btn svg{width:17px;height:17px;}
.btn:active{transform:scale(.985);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(21,178,166,.32);}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(19,76,166,.3);}
.btn-row{display:flex;gap:9px;}
.btn-row .btn{flex:1;font-size:12.5px;padding:12px 8px;}
.btn-ghost{background:var(--surface);color:var(--blue);border:1.5px solid var(--blue-soft);}

/* toast */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:200;white-space:nowrap;
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:12px 18px;border-radius:999px;box-shadow:var(--sh-pop);
  display:flex;align-items:center;gap:9px;transition:.35s var(--ease);max-width:90vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .ck{color:var(--teal);}
@media(min-width:900px){.toast{bottom:24px;}}

/* role switcher sheet (mobile) */
.rs-sheet .rs-item{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;background:var(--surface);border:1px solid var(--hair);margin-bottom:9px;}
.rs-sheet .rs-item.on{border-color:var(--blue);background:var(--blue-soft);}
.rs-sheet .rs-item .ri{width:38px;height:38px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.rs-sheet .rs-item .ri svg{width:20px;height:20px;}
.rs-sheet .rs-item .rt{flex:1;}
.rs-sheet .rs-item .rt b{font-size:14px;font-weight:800;}
.rs-sheet .rs-item .rt .rd{font-size:11px;color:var(--ink2);margin-top:1px;}

.empty{text-align:center;color:var(--ink3);padding:40px 20px;font-size:13px;}
.empty svg{width:44px;height:44px;}
.note{font-size:11px;color:var(--ink3);text-align:center;padding:12px;line-height:1.5;}

/* ---- a11y + robustness (review pass) ---- */
button:focus-visible,a:focus-visible,[onclick]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:inherit;}
.sheet:focus-visible{outline:2px solid var(--blue);}
*{scrollbar-width:thin;scrollbar-color:#cdd8e6 var(--canvas);}
@media(max-width:600px){
  .kanban{flex-direction:column;overflow:visible;}
  .kcol{flex:1 1 auto;min-width:0;}
}
@media(max-width:899px){
  .pill-btn,.mode-chip,.fc{min-height:40px;}
  /* the role/identity is already shown in the bottom nav on mobile — hide the topbar chip to keep the bar uncrowded */
  .tb-ctl .identity{display:none;}
}
/* narrow phones: drop the "HOSPITAL" wordmark so logo + bell + lang + mode-chip fit on one row */
@media(max-width:470px){
  .logo .sub{display:none;}
  .tb-ctl{gap:6px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* desktop: keep the patient conversation in a phone-like centred column (not stretched) */
@media(min-width:900px){
  .chat-wrap{max-width:760px;margin:0 auto;width:100%;border-left:1px solid var(--hair);border-right:1px solid var(--hair);}
}

/* admin: services & starting prices */
.svc-cat-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3);margin:16px 2px 8px;}
.svc-list{display:flex;flex-direction:column;gap:8px;}
.svc-row{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px 12px;}
.svc-row .svc-top{display:flex;align-items:center;gap:8px;}
.svc-row .svc-name{flex:1;min-width:0;font:inherit;font-weight:700;font-size:14px;color:var(--ink);border:1px solid transparent;border-radius:8px;padding:6px 8px;background:#F6F9FE;}
.svc-row .svc-name:focus{outline:none;border-color:var(--blue-bright);background:#fff;}
.svc-row .svc-del{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--hair);background:#fff;color:var(--ink3);font-size:13px;font-weight:800;cursor:pointer;}
.svc-row .svc-del:hover{color:var(--red);border-color:rgba(215,80,59,.4);background:#FDEEEB;}
.svc-row .svc-mid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.svc-row .svc-price{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ink2);}
.svc-row .svc-price input{width:96px;border:1px solid var(--hair);border-radius:8px;padding:7px 8px;font:inherit;font-weight:800;color:var(--blue);text-align:right;}
.svc-row .svc-unit{font-size:10.5px;font-weight:700;color:var(--ink3);margin-left:2px;}
.svc-tiers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;}
.svc-tier{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--ink2);background:#F6F9FE;border:1px solid var(--hair);border-radius:9px;padding:4px 7px;}
.svc-tier .sz{min-width:24px;text-align:center;color:var(--blue);font-weight:800;}
.svc-tier input{width:62px;border:0;border-bottom:1px solid var(--hair);background:transparent;font:inherit;font-weight:800;color:var(--blue);text-align:right;padding:2px 0;}
.svc-tier input:focus{outline:none;border-bottom-color:var(--blue-bright);}
.svc-tier-add{font:inherit;font-size:11px;font-weight:800;color:var(--blue);background:#EAF2FD;border:1px solid #cfe0f6;border-radius:9px;padding:5px 9px;cursor:pointer;}
.svc-mode{font:inherit;font-size:11px;font-weight:800;color:var(--ink2);background:#fff;border:1px solid var(--hair);border-radius:999px;padding:5px 11px;cursor:pointer;margin-left:auto;}
.svc-row .svc-tog{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);font-weight:600;cursor:pointer;}
.svc-add{align-self:flex-start;font:inherit;font-size:12px;font-weight:800;color:var(--blue);background:#fff;border:1px dashed #cfdcec;border-radius:10px;padding:8px 13px;margin:8px 0 2px;cursor:pointer;}
.svc-savenote{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--ink3);font-weight:600;margin:18px 0 6px;}
.svc-savenote svg{width:13px;height:13px;}

/* ---- calendar (meetings + sales-team availability) ---- */
.cal-tabs{display:flex;gap:6px;background:var(--canvas);border:1px solid var(--hair);border-radius:12px;padding:4px;margin-bottom:14px;}
.cal-tab{flex:1;font-size:12.5px;font-weight:700;color:var(--ink2);padding:9px 8px;border-radius:9px;transition:.18s var(--ease);}
.cal-tab.on{background:var(--surface);color:var(--blue);box-shadow:var(--sh-card);}
.cal-sub,.av-sub{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:2px 0 8px;}
.cal-day{margin-bottom:16px;}
.cal-dh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.cal-date{font-weight:800;font-size:14px;color:var(--ink);}
.cal-avs{display:flex;gap:6px;flex-wrap:wrap;}
.av-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px 3px 3px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--ink2);}
.av-chip .ini{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:8.5px;font-weight:800;}
.av-chip.free{border-color:rgba(21,178,166,.4);background:var(--teal-soft);color:var(--teal-deep);}
.av-chip.free .ini{background:#fff;color:var(--teal-deep);}
.av-chip.full{border-color:rgba(246,184,46,.4);background:var(--yellow-soft);color:var(--yellow-deep);}
.av-chip.off{opacity:.55;}
.mtg{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px 12px;margin-bottom:7px;cursor:pointer;transition:.16s var(--ease);}
.mtg:hover{border-color:var(--sky);box-shadow:var(--sh-card);}
.mtg.done{opacity:.62;}
.mtg .m-time{min-width:46px;font-weight:800;font-size:14px;color:var(--blue);font-variant-numeric:tabular-nums;border-right:1px solid var(--hair);padding-right:11px;}
.mtg .m-body{flex:1;min-width:0;}
.mtg .m-title{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtg .m-sub{font-size:11.5px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ava{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;flex:none;}
.ava.big{width:38px;height:38px;font-size:13px;}
.av-list{display:flex;flex-direction:column;gap:12px;}
.av-card{background:var(--surface);border:1px solid var(--hair);border-radius:15px;padding:13px;}
.av-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.av-id b{display:block;font-size:14px;color:var(--ink);}
.av-id span{font-size:11px;color:var(--ink3);font-weight:600;}
.av-days{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px;}
.av-days .wd{width:36px;height:34px;border-radius:9px;border:1px solid var(--hair);background:var(--canvas);font-size:11px;font-weight:800;color:var(--ink3);transition:.16s var(--ease);}
.av-days .wd.on{background:var(--blue);border-color:var(--blue);color:#fff;}
.av-hours{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px;}
.av-hours .av-sub{margin:0 4px 0 0;}
.av-hours .stp{display:inline-flex;align-items:center;gap:4px;background:var(--canvas);border:1px solid var(--hair);border-radius:10px;padding:3px;}
.av-hours .stp button{width:28px;height:28px;border-radius:7px;background:var(--surface);font-size:16px;font-weight:800;color:var(--blue);line-height:1;}
.av-hours .stp b{min-width:48px;text-align:center;font-size:12.5px;color:var(--ink);}
.av-hours .dash{color:var(--ink3);font-weight:800;}
.av-auto{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--teal-soft);border:1px solid rgba(21,178,166,.3);border-radius:11px;padding:9px 11px;}
.av-auto input{width:17px;height:17px;accent-color:var(--teal);}
.av-auto svg{width:14px;height:14px;color:var(--teal-deep);}

/* ---- notifications (bell + role-scoped feed) ---- */
.pill-btn.bell{position:relative;padding:7px 9px;}
.pill-btn.bell .bdg{position:absolute;top:-5px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--yellow);color:var(--navy);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff;}
.alert-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.alert{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--hair);border-left:3px solid var(--blue);border-radius:13px;padding:11px 12px;transition:.16s var(--ease);cursor:pointer;}
.alert:hover{box-shadow:var(--sh-card);}
.alert[disabled]{cursor:default;opacity:.9;}
.alert .a-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);flex:none;}
.alert .a-ic svg{width:17px;height:17px;}
.alert .a-tx{flex:1;min-width:0;}
.alert .a-tx b{display:block;font-size:13.5px;color:var(--ink);}
.alert .a-tx span{display:block;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.alert .a-go{color:var(--ink3);flex:none;}
.alert .a-go svg{width:18px;height:18px;}
.alert.amber{border-left-color:var(--yellow-deep);}
.alert.amber .a-ic{background:var(--yellow-soft);color:var(--yellow-deep);}
.alert.teal{border-left-color:var(--teal);}
.alert.teal .a-ic{background:var(--teal-soft);color:var(--teal-deep);}
.alert.indigo{border-left-color:var(--indigo);}
.alert.indigo .a-ic{background:var(--indigo-soft);color:var(--indigo);}
.alert.navy{border-left-color:var(--navy);}
.alert.navy .a-ic{background:var(--blue-soft);color:var(--navy);}

/* ---- connected channels (director deployment story) ---- */
.chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.chan{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--hair);border-radius:13px;padding:11px 12px;}
.chan .chan-dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.04);}
.chan .chan-id{display:flex;flex-direction:column;min-width:0;}
.chan .chan-id b{font-size:13px;color:var(--ink);}
.chan .chan-st{font-size:10.5px;font-weight:700;}
.chan.teal .chan-st{color:var(--teal-deep);}
.chan.amber .chan-st{color:var(--yellow-deep);}
.chan.grey .chan-st{color:var(--ink3);}
@media(min-width:560px){.chan-grid{grid-template-columns:1fr 1fr 1fr;}}

/* ---- search (find a patient) ---- */
.searchbar{display:flex;align-items:center;gap:9px;background:var(--canvas);border:1px solid var(--hair);border-radius:13px;padding:11px 13px;margin:6px 0 12px;position:sticky;top:0;z-index:2;}
.searchbar .si{color:var(--ink3);display:inline-flex;flex:none;}
.searchbar .si svg{width:18px;height:18px;}
.searchbar input{flex:1;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);outline:none;}
.searchbar input::placeholder{color:var(--ink3);font-weight:500;}
.search-res{display:flex;flex-direction:column;gap:9px;}

/* ---- auth (online-mode sign-in) ---- */
.pill-btn.auth.on{color:var(--teal-deep);background:var(--teal-soft);border-color:rgba(21,178,166,.4);}
.pill-btn.auth .who{font-weight:800;max-width:90px;overflow:hidden;text-overflow:ellipsis;}
.auth-sheet{padding:6px 0 4px;}
.auth-l{display:block;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink3);margin:0 0 6px;}
.auth-in{width:100%;border:1px solid var(--hair);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface);outline:none;}
.auth-in:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.auth-id{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:13px 14px;}
.auth-id svg{width:22px;height:22px;color:var(--blue);flex:none;}
.auth-id b{display:block;font-size:15px;}
.auth-id span{display:block;font-size:12px;color:var(--ink2);margin-top:2px;word-break:break-all;}

/* ============================================================ */
/*  DEMO WOW LAYER — trend chart, live lead, micro-animations   */
/* ============================================================ */

/* cockpit trend chart */
.trendcard{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px 12px 8px;box-shadow:var(--sh-card);}
.trendcard svg{display:block;width:100%;height:auto;}
.tgrid{stroke:var(--hair);stroke-width:1;}
.tylab{font-size:9.5px;font-weight:700;fill:var(--ink3);}
.txlab{font-size:9.5px;font-weight:700;fill:var(--ink3);}
.tlast{font-size:11px;font-weight:800;fill:var(--navy);}
.tline{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:trendDraw 1.2s .15s cubic-bezier(.3,.7,.3,1) forwards;}
.tarea{opacity:0;animation:trendFade .8s .55s ease forwards;}
.tdot{fill:var(--blue);stroke:#fff;stroke-width:2;}
.tcross{stroke:var(--sky);stroke-width:1.2;stroke-dasharray:3 3;opacity:0;transition:opacity .15s;}
.trend-tip{position:absolute;top:6px;left:8px;opacity:0;transition:opacity .15s;background:var(--navy);color:#fff;border-radius:9px;
  padding:6px 10px;font-size:11px;line-height:1.35;pointer-events:none;box-shadow:0 6px 18px rgba(10,44,99,.35);}
.trend-tip b{display:block;font-size:13px;letter-spacing:.3px;}
@keyframes trendDraw{to{stroke-dashoffset:0;}}
@keyframes trendFade{to{opacity:1;}}

/* live lead arrival — golden halo + slide-in, LIVE tag pulse */
.lead.live-in{animation:liveIn .6s cubic-bezier(.2,.85,.3,1.05) both;border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft),0 14px 34px rgba(246,184,46,.28);}
.lead .nm .tag.livehot{color:#fff;background:linear-gradient(135deg,#E4573D,#D7503B);border:1px solid #b53f2d;animation:livePulse 1.1s ease-in-out infinite;}
@keyframes liveIn{from{opacity:0;transform:translateY(-16px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.night-recap .nr-live{font:inherit;border:0;cursor:pointer;}

/* booking card: golden shine sweep + check pop when it appears */
.book{position:relative;}
.book::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,220,120,.34) 50%,transparent 68%);
  transform:translateX(-110%);animation:bookShine 1s .5s ease-out forwards;pointer-events:none;}
.book .t .ck{animation:ckPop .5s .25s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes bookShine{to{transform:translateX(110%);}}
@keyframes ckPop{from{transform:scale(0);}to{transform:scale(1);}}

/* funnel + bar lists grow in from the left */
.fstep .fbar{transform-origin:left center;animation:growX .8s cubic-bezier(.25,.8,.3,1) both;}
.funnel .fstep:nth-child(2) .fbar{animation-delay:.08s;} .funnel .fstep:nth-child(3) .fbar{animation-delay:.16s;} .funnel .fstep:nth-child(4) .fbar{animation-delay:.24s;}
.barrow .bt i{transform-origin:left center;animation:growX .7s cubic-bezier(.25,.8,.3,1) both;}
.barlist .barrow:nth-child(2) .bt i{animation-delay:.07s;} .barlist .barrow:nth-child(3) .bt i{animation-delay:.14s;}
.barlist .barrow:nth-child(4) .bt i{animation-delay:.21s;} .barlist .barrow:nth-child(5) .bt i{animation-delay:.28s;}
@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* KPI / stat cards entrance stagger */
.kpis .kpi,.cards2 .statbig{animation:cardIn .45s cubic-bezier(.2,.8,.3,1) both;}
.kpis .kpi:nth-child(2),.cards2 .statbig:nth-child(2){animation-delay:.06s;}
.kpis .kpi:nth-child(3),.cards2 .statbig:nth-child(3){animation-delay:.12s;}
.kpis .kpi:nth-child(4),.cards2 .statbig:nth-child(4){animation-delay:.18s;}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* human-handoff guardrail: card badge + fiche banner */
.lead .nm .tag.handoff{color:#fff;background:linear-gradient(135deg,#E4573D,#D7503B);border:1px solid #b53f2d;}
.handoffbar{display:flex;align-items:flex-start;gap:10px;background:#FBE7E3;border:1px solid rgba(215,80,59,.45);border-radius:14px;padding:11px 13px;margin:2px 0 12px;font-size:12.5px;color:#7c2d1f;}
.handoffbar b{display:block;font-weight:700;line-height:1.4;}
.handoffbar .hr{display:inline-block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:#fff;border-radius:999px;padding:2px 8px;color:#a23a2a;}

/* "try it live" chip + AI quick replies + PWA install */
.cl-chip.try{color:#7a5200;background:linear-gradient(135deg,#FFF3D6,#FFE49A);border-color:#F6D87A;font-weight:800;animation:tryGlow 2.4s ease-in-out infinite;}
.cl-chip.try.on{color:#5a3c00;border-color:#E9A81A;box-shadow:0 0 0 2px var(--yellow-soft);animation:none;}
@keyframes tryGlow{0%,100%{box-shadow:0 0 0 0 rgba(246,184,46,0);}50%{box-shadow:0 0 0 4px rgba(246,184,46,.25);}}
@media (prefers-reduced-motion: reduce){.cl-chip.try{animation:none;}}
.qrow{display:flex;gap:7px;align-items:center;padding:8px 14px 0;overflow-x:auto;background:var(--surface);border-top:1px solid var(--hair);}
.qrow .qrlab{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink3);white-space:nowrap;flex:none;}
.qrow .qrlab svg{width:11px;height:11px;color:var(--yellow-deep);}
.qrow .qrchip{font:inherit;font-size:11.5px;font-weight:600;color:var(--blue);background:var(--blue-soft);border:1px solid #cfe0f6;border-radius:999px;padding:6px 11px;cursor:pointer;white-space:nowrap;flex:none;}
.qrow .qrchip:hover{background:#dcebfc;}
.pill-btn.install{color:#fff;background:linear-gradient(135deg,var(--teal-deep),var(--teal));border-color:transparent;}
.pill-btn.install svg{transform:rotate(90deg);}

/* unified cross-platform history: channel-switch divider inside a thread */
.chswitch{display:flex;align-items:center;gap:10px;margin:14px 0;}
.chswitch .l{flex:1;height:1px;background:var(--hair);}
.chswitch .pillsw{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink2);
  background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:5px 11px;white-space:nowrap;}
.chswitch .pillsw b{color:var(--ink);}
.chswitch .cdot{width:9px;height:9px;border-radius:50%;flex:none;}

/* alert bell badge breathing + card hover lift */
.pill-btn.bell .bdg{animation:bdgPulse 2.2s ease-in-out infinite;}
@keyframes bdgPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.lead{transition:box-shadow .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);}
.lead:hover{transform:translateY(-2px);}
.kcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,76,166,.12);}
.kpi{transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,76,166,.10);}

@media (prefers-reduced-motion: reduce){
  .tline,.tarea,.lead.live-in,.tag.livehot,.book::after,.book .t .ck,.fstep .fbar,.barrow .bt i,
  .kpis .kpi,.cards2 .statbig,.pill-btn.bell .bdg{animation:none;}
  .tline{stroke-dashoffset:0;} .tarea{opacity:1;}
  .lead:hover,.kcard:hover,.kpi:hover{transform:none;}
}