/* ============================================================================ KMB Concierge — design system (on-brand: KMB blue + white + yellow) ============================================================================ */ /* Anuphan (latin + thai, 400-700) lives in assets/fonts; fonts.css declares the faces */ @import url("assets/fonts/fonts.css"); /* NEUTRAL CHROME is "Ronde de Nuit" paper: warm ivory surfaces, warm ink, brass-tinted hairlines. ACCENT tokens (navy/blue/sky/yellow/teal/hero...) stay brand-owned: KBRAND.theme overrides them per client, so they keep their original defaults here. */ :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:#A39B8B; --canvas:#F3EDE1; --surface:#FDFBF6; --field:#F6F1E6; --ink:#2E2A21; --ink2:#67604F; --ink3:#837A67; --hair:#E4DAC6; --blue-soft:#EAF2FD; --yellow-soft:#FEF4DA; --teal-soft:#E0F5F2; --rose-soft:#FBE7E3; --green-soft:#E2F5EE; --indigo-soft:#ECEEFB; --grey-soft:#EFE8DA; --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:'Anuphan',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans Thai","Sarabun",Arial,sans-serif; --sh-card:0 6px 18px rgba(90,72,44,.07); --sh-pop:0 16px 40px rgba(58,45,24,.20); --sh-float:0 14px 34px rgba(58,45,24,.16); --ease:cubic-bezier(.22,.61,.36,1); --rail-w:240px; } /* ---------- dark mode: set data-theme="dark" on . Surfaces go near-black, text inverts, accents brighten for contrast, soft chip tints become low-alpha. ---------- */ /* dark neutrals warmed a touch to match the paper language (EPS stays black/gold: accents untouched, only the greys lean warm instead of blue-cold) */ :root[data-theme="dark"]{ --canvas:#0B0A08; --surface:#17150F; --field:#1F1C15; --ink:#F2EFE7; --ink2:#B5AC9B; --ink3:#8B8271; --hair:#2B2820; --blue:#4F92E6; --blue-bright:#6BA6EE; --sky:#8FBEF0; --yellow-deep:#F3C24B; --teal-deep:#46D6C6; --green:#3FCB8E; --indigo:#8E9BEF; --rose:#EDA097; --blue-soft:rgba(79,146,230,.16); --yellow-soft:rgba(246,184,46,.15); --teal-soft:rgba(21,178,166,.17); --rose-soft:rgba(228,143,134,.16); --green-soft:rgba(25,169,116,.17); --indigo-soft:rgba(91,108,214,.18); --grey-soft:rgba(154,167,184,.13); --night:radial-gradient(130% 90% at 50% -10%,#242028 0%,#161318 45%,#0B0A0C 100%); --sh-card:0 6px 20px rgba(0,0,0,.42); --sh-pop:0 16px 40px rgba(0,0,0,.6); --sh-float:0 14px 34px rgba(0,0,0,.55); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#34373f;} *{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:#D8CDB4;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(90,72,44,.04);} .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.book{color:#231a05;font-weight:800;border:0;background:linear-gradient(180deg,#ffd98a,#efb02f);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);} .pill-btn.book:hover{filter:brightness(1.03);} .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 .4s cubic-bezier(.2,.72,.24,1);} @keyframes viewIn{from{opacity:0;transform:translateY(9px);}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(90,72,44,.06);} .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:12px 16px 14px;position:relative;overflow:hidden;} .vhero::after{content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;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:8px;font-size:11.5px;font-weight:700;opacity:.92;} .vhero .vh-role .ri{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;} .vhero .vh-role .ri svg{width:15px;height:15px;} .vhero h1{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:-.01em;position:relative;z-index:1;} .vhero .vh-sub{font-size:12px;opacity:.84;position:relative;z-index:1;max-width:92%;} /* collapsible section explainer (💡): full note by default, a tiny toggle once dismissed */ .hero-note{margin-top:8px;display:flex;gap:8px;align-items:center;max-width:660px;position:relative;z-index:1; font:600 11.5px/1.4 var(--sans);color:rgba(255,255,255,.9);background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);padding:6px 6px 6px 11px;border-radius:11px;} .hero-note .hn-i{flex:none;} .hero-note .hn-t{flex:1;min-width:0;} .hero-note .hn-x{flex:none;width:20px;height:20px;border-radius:50%;border:0;background:rgba(255,255,255,.16); color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;} .hero-note .hn-x:hover{background:rgba(255,255,255,.28);} /* once dismissed the toggle sits in the hero corner (out of flow) so the band is at its shortest */ .hero-hint-show{position:absolute;right:16px;bottom:12px;width:26px;height:26px;border-radius:8px; border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);font-size:13px;cursor:pointer;z-index:2;line-height:1;padding:0;} .hero-hint-show:hover{background:rgba(255,255,255,.2);} .founder{display:flex;align-items:center;gap:9px;} .founder .av{width:32px;height:32px;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:13px; box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 0 3px var(--yellow);} .founder .ft{font-size:9.5px;text-align:right;line-height:1.25;opacity:.95;} .founder .ft b{font-size:11.5px;font-weight:700;display:block;} .search{margin-top:12px;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:16px;padding:12px 12px;box-shadow:var(--sh-card);position:relative;overflow:hidden;} .kpi .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:7px;} .kpi .ic svg{width:16px;height:16px;} .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:23px;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:12px;} .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:12px 13px;margin-bottom:11px;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:8px 14px 9px;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:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(110,168,224,.4),transparent 65%);} /* brass-thin base line anchors the header to the paper below (neutral chrome) */ .chero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.14);z-index:1;} .chead{display:flex;align-items:center;gap:10px;position:relative;z-index:1;} .lea{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#FFFEFA,#F0E8D7);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 0 3px var(--yellow);flex-shrink:0;} /* clinic-provided concierge photo (KBRAND.assistant.avatar) — fills the avatar, keeps the ring */ .lea.glyph .ai-glyph,.row .ra.glyph .ai-glyph{width:66%;height:66%;display:block;} .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:14.5px;letter-spacing:.01em;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);animation:onGlow 2.6s var(--ease) infinite;} @keyframes onGlow{0%,100%{box-shadow:0 0 0 3px rgba(82,224,184,.3);}50%{box-shadow:0 0 0 5px rgba(82,224,184,.12);}} @media (prefers-reduced-motion:reduce){.cid .n .on{animation:none;}} .cid .s{font-size:10.5px;opacity:.82;letter-spacing:.02em;} .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;} /* header "Start over" for a try-it / interview chat: quiet outline, not the gold badge */ .cbadge--reset{background:transparent;color:var(--ink2);border:1px solid var(--hair);cursor:pointer;transition:.16s var(--ease);} .cbadge--reset:hover{border-color:var(--blue-soft);color:var(--blue);} .cbadge--reset svg{width:12px;height:12px;} .cbadge svg{width:11px;height:11px;} .cmeta{display:flex;gap:7px;margin-top:7px;position:relative;z-index:1;flex-wrap:wrap;} /* meta chips read as engraved micro-labels (Ronde de Nuit language), tracking kept modest because they can carry Thai script */ .chip{font-size:10px;font-weight:700;letter-spacing:.05em;white-space:nowrap;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);padding:3px 10px;border-radius:4px;display:flex;align-items:center;gap:5px;} .chip svg{width:12px;height:12px;flex-shrink:0;} .qualbar{display:flex;gap:6px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;} /* mobile: the brand header must not eat the conversation. One tight row, chips scroll horizontally instead of wrapping, qualification bar slims down. */ @media(max-width:899px){ .chero{padding:6px 12px 7px;} .lea{width:28px;height:28px;font-size:12px;} .cid .n{font-size:13.5px;} .cid .s{font-size:9.5px;} .cbadge{font-size:9px;padding:4px 8px;} .cmeta{margin-top:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:1px;} .cmeta::-webkit-scrollbar{display:none;} .chip{flex-shrink:0;padding:2px 8px;font-size:9.5px;} .qualbar{padding:6px 12px;gap:5px;} .seg{padding:5px 4px;font-size:9.5px;} .chat{padding:14px 12px;} } .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:18px 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;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);} .cl-chip:hover{border-color:var(--ink3);} /* honesty label heading the DEMO conversation strip (live mode never shows it) */ .cl-lab{display:flex;align-items:center;flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border:1px dashed var(--hair);border-radius:999px;padding:4px 10px;} .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 divider: hairline rules on both sides, like the night ledger's tstamps */ .day{display:flex;align-items:center;gap:12px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin-bottom:16px;} .day::before,.day::after{content:"";flex:1;height:1px;background:var(--hair);} .row{display:flex;margin-bottom:14px;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,#FFFEFA,#F0E8D7);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:min(74%,34rem);padding:13px 16px;border-radius:16px;font-size:14px;line-height:1.72;word-wrap:break-word;white-space:pre-line;animation:rise .34s var(--ease) both;} /* a touch of breathing room between the paragraphs the model returns (blank lines) */ .bub.ai{letter-spacing:.002em;} @keyframes rise{from{opacity:0;transform:translateY(9px) scale(.985);}to{opacity:1;transform:none;}} /* AI bubbles sit on paper with a true hairline; the accent stays the brand's (left rule) */ .bub.ai{background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-left:3px solid var(--yellow);border-bottom-left-radius:5px;box-shadow:var(--sh-card);} /* neutral warm shadow: the old hardcoded blue glow leaked KMB onto every brand */ .bub.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px;box-shadow:0 8px 18px -6px rgba(58,45,24,.28);} /* 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:5px;box-shadow:0 8px 18px -6px rgba(58,45,24,.28);} .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:16px;border:1px solid var(--hair);border-left:3px solid var(--yellow);border-bottom-left-radius:5px;width:fit-content;box-shadow:var(--sh-card);} .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:16px;overflow:hidden;box-shadow:var(--sh-float);border:1px solid var(--hair);border-top:3px solid var(--teal);margin-bottom:11px;animation:rise .42s 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:12.5px;letter-spacing:.03em;} .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(--field);border:1px solid var(--hair);border-radius:999px;padding:11px 15px;color:var(--ink3);font-size:13px;display:flex;align-items:center;gap:8px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);} /* the field wakes up under the hand: brand ring, paper lifts to surface */ .composer .f:focus-within{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 3px var(--blue-soft);} .composer.live .f{border-color:var(--teal);color:var(--ink);background:var(--teal-soft);} .composer.live .f:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px 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 8px 18px -6px rgba(58,45,24,.35);transition:transform .15s var(--ease),filter .15s var(--ease);} .composer .snd:hover{filter:brightness(1.06);} .composer .snd:active{transform:scale(.94);} /* voice dictation mic (feature-detected: absent when the browser has no SpeechRecognition) */ .micbtn{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--hair);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:.15s;} .micbtn svg{width:19px;height:19px;} .micbtn:hover{color:var(--blue);border-color:var(--blue-bright);} .micbtn.rec{background:#D7503B;border-color:#D7503B;color:#fff;animation:micpulse 1.1s ease-in-out infinite;} @keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(215,80,59,.45)}50%{box-shadow:0 0 0 9px rgba(215,80,59,0)}} @media (prefers-reduced-motion:reduce){.micbtn.rec{animation:none}} .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(46,42,33,.8);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:9px;} .statbig{background:var(--surface);border:1px solid var(--hair);border-radius:15px;padding:12px 13px;box-shadow:var(--sh-card);} .statbig .v{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:.4px;} .statbig .l{font-size:10.5px;color:var(--ink2);font-weight:600;margin-top:3px;} .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(35,29,18,.36);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 .44s cubic-bezier(.32,.72,0,1);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:12px 20px 22px;} .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:18px;} .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:14px 16px;} .kv{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px;} .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);} /* the interview flip: the funnel's conversion CTA. A real filled brass button that reads on both the dark EPS chat and the light KMB chat. */ .iv-flip-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:12px;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:#231a05; background:linear-gradient(180deg,#ffd98a,#efb02f);box-shadow:0 8px 20px -8px rgba(0,0,0,.55); transition:filter .16s var(--ease),transform .12s var(--ease);} .iv-flip-cta svg{width:15px;height:15px;} .iv-flip-cta:hover{filter:brightness(1.04);} .iv-flip-cta:active{transform:scale(.98);} /* THE FLIP, as a popup (not a chat bubble): the Kopilot pitch on top of the demo */ .ivflip-ov{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(4,5,9,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;pointer-events:none;transition:opacity .28s var(--ease);} .ivflip-ov.on{opacity:1;pointer-events:auto;} .ivflip-card{width:100%;max-width:420px;position:relative;border-radius:22px;padding:26px 22px 22px; background:linear-gradient(180deg,#171a22,#10131a);border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -30px rgba(0,0,0,.9);transform:translateY(10px) scale(.98);transition:transform .28s var(--ease);} .ivflip-ov.on .ivflip-card{transform:none;} .ivflip-x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12); background:transparent;color:#9aa3b2;font-size:19px;line-height:1;cursor:pointer;} .ivflip-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F0C36D;} .ivflip-card h3{font-size:22px;font-weight:900;color:#fff;margin:8px 0 4px;letter-spacing:-.01em;} .ivflip-sub{font-size:13px;color:#c7cdd8;margin:0 0 12px;} .ivflip-pitch{font-size:13.5px;line-height:1.62;color:#9aa3b2;margin:0 0 18px;white-space:pre-line;} .ivflip-card .ivflip-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:0;border-radius:13px;cursor:pointer; font-family:inherit;font-size:14.5px;font-weight:800;color:#231a05;background:linear-gradient(180deg,#ffd98a,#efb02f);box-shadow:0 8px 20px -8px rgba(0,0,0,.55);} .ivflip-card .ivflip-cta svg{width:16px;height:16px;} .ivflip-keep{display:block;width:100%;margin-top:10px;padding:11px;border:0;background:transparent;color:#9aa3b2;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;} .ivflip-keep:hover{color:#c7cdd8;} /* 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;} /* listing manager: per-item photos + fields + status */ .lst-ph{display:flex;gap:6px;flex-wrap:wrap;} .lst-ph .th{position:relative;} .lst-ph img,.lst-ph video{width:56px;height:56px;object-fit:cover;border-radius:9px;display:block;background:#eef2f8;} .lst-ph video{background:#000;} .lst-ph .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none;} .lst-ph .rm{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;border:0;background:var(--red,#d7503b);color:#fff;font-size:11px;line-height:1;cursor:pointer;} .lst-ph .add{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;width:56px;height:56px;border-radius:9px;border:1px dashed var(--blue-bright);background:transparent;color:var(--blue);font-size:10px;font-weight:800;cursor:pointer;padding:4px;} .lst-flds{display:flex;flex-wrap:wrap;gap:8px;} .lst-flds label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--ink3);font-weight:800;text-transform:uppercase;letter-spacing:.3px;} .lst-flds input,.lst-flds select{padding:6px 8px;border:1px solid var(--hair);border-radius:8px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:#fff;min-width:82px;text-transform:none;letter-spacing:0;} .lst-flds input:focus,.lst-flds select:focus{outline:none;border-color:var(--blue-bright);} .lst-care{width:100%;box-sizing:border-box;border:1px solid var(--hair);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px;color:var(--ink);background:#F6F9FE;resize:vertical;min-height:38px;} .lst-care:focus{outline:none;border-color:var(--blue-bright);background:#fff;} .lst-wm{align-self:flex-start;border:1px solid var(--hair);background:#fff;color:var(--ink2);font-weight:800;font-size:11.5px;border-radius:8px;padding:6px 11px;cursor:pointer;} .lst-wm:hover{border-color:var(--blue-bright);color:var(--blue);} /* watermark editor */ .wm-ov{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,18,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} .wm-card{width:100%;max-width:440px;max-height:92vh;overflow:auto;background:var(--surface,#fff);border-radius:20px;padding:18px 16px 16px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);} .wm-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);background:#fff;color:var(--ink3);font-size:17px;cursor:pointer;} .wm-h{font-size:17px;font-weight:900;color:var(--ink);} .wm-sub{font-size:12px;color:var(--ink3);margin:3px 0 12px;} .wm-stage{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;touch-action:none;user-select:none;} .wm-stage>#wmImg{width:100%;display:block;} .wm-drag{position:absolute;cursor:grab;} .wm-drag:active{cursor:grabbing;} #wmLogo{width:26%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));} .wm-txt{color:#fff;font-weight:800;font-size:19px;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap;padding:2px 4px;} .wm-row{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:12.5px;font-weight:700;color:var(--ink2);} .wm-row span{flex:none;min-width:70px;} .wm-row input:not([type=range]){flex:1;border:1px solid var(--hair);border-radius:8px;padding:7px 9px;font:inherit;font-weight:700;color:var(--ink);} .wm-row input[type=range]{flex:1;} .wm-apply{width:100%;margin-top:14px;} .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;} /* ---- tone presets (owner picks how the agent speaks; live example) ---- */ .tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 4px;} .tp-card{text-align:left;font:inherit;background:var(--surface);border:1.5px solid var(--hair);border-radius:14px; padding:12px 13px;cursor:pointer;transition:.16s var(--ease);} .tp-card:hover{border-color:var(--blue-bright);} .tp-card.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 6px 16px rgba(19,76,166,.14);} .tp-card .tp-n{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--ink);} .tp-card .tp-check{margin-left:auto;color:var(--blue);opacity:0;transition:.16s var(--ease);} .tp-card .tp-check svg{width:15px;height:15px;} .tp-card.on .tp-check{opacity:1;} /* grow-the-team recruitment board (the non-SaaS marketplace) */ .mk-card{border:1px solid var(--hair);border-radius:14px;background:var(--surface);padding:13px 15px;margin-top:10px;} .mk-card.soon{border-style:dashed;opacity:.8;} .mk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .mk-head b{font-size:14.5px;font-weight:800;} .mk-desc{margin-top:4px;font-size:12.5px;color:var(--ink2);line-height:1.5;} .tp-card .tp-d{font-size:11px;color:var(--ink2);font-weight:600;line-height:1.4;margin-top:6px;} .tp-ex-label{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.6px; text-transform:uppercase;color:var(--ink3);margin:18px 2px 9px;} .tp-ex-label .d{width:7px;height:7px;border-radius:50%;background:#52e0b8;box-shadow:0 0 0 3px rgba(82,224,184,.28);} .tp-ex{background:var(--canvas);border:1px solid var(--hair);border-radius:16px;padding:15px 13px 9px;} .tp-ex .row:last-child{margin-bottom:5px;} .tp-note{font-size:11px;color:var(--ink3);line-height:1.55;margin:12px 2px 4px;} /* ---- 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;} /* interviewer "ask as the boss" chips: brass tint, set apart from the client ones */ .qrow .qrlab--guide{color:var(--yellow-deep);} .qrow .qrchip--guide{color:var(--yellow-deep);background:rgba(240,195,109,.14);border-color:rgba(240,195,109,.55);} .qrow .qrchip--guide:hover{background:rgba(240,195,109,.24);} /* interview SKILL-LOAD flash: the employee "trains" on the vertical before the chat */ .iv-skill{position:fixed;inset:0;z-index:9999;background:#0b0e12;display:flex;align-items:center;justify-content:center;transition:opacity .55s ease;} .iv-skill.out{opacity:0;pointer-events:none;} .iv-skill-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:2.1;color:#d4af6a;max-width:min(560px,90vw);width:100%;padding:0 22px;} .iv-skill-ln{opacity:0;transform:translateY(5px);animation:ivSkIn .32s cubic-bezier(.2,.7,.3,1) forwards;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .iv-skill-ln.done{margin-top:10px;color:#7fc7a4;font-weight:700;font-size:17px;letter-spacing:.02em;} @keyframes ivSkIn{to{opacity:1;transform:none;}} .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;} } /* ---- iOS "add to home screen" hint ---- */ .ios-ov{position:fixed;inset:0;z-index:10060;display:flex;align-items:flex-end;justify-content:center;padding:0 14px calc(20px + env(safe-area-inset-bottom));background:rgba(6,10,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);} .ios-card{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:16px 16px 14px;position:relative;text-align:center;box-shadow:var(--sh-pop);} .ios-x{position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:50%;border:1px solid var(--hair);background:var(--surface);color:var(--ink3);font-size:16px;cursor:pointer;} .ios-h{display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:800;color:var(--ink);} .ios-h svg{width:16px;height:16px;color:var(--blue);} .ios-b{font-size:12.5px;line-height:1.5;color:var(--ink2);margin:7px 6px 8px;white-space:pre-line;} .ios-share{font-size:22px;color:var(--blue);animation:iosBob 1.4s ease-in-out infinite;} @keyframes iosBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}} @media (prefers-reduced-motion: reduce){.ios-share{animation:none;}} /* ---- care sheet card (the AI sends it into the thread, in the customer's language) ---- */ .book.care .t .ck{color:var(--green);} .book.care .care-body{white-space:pre-line;font-size:12.5px;line-height:1.6;color:var(--ink2);padding:2px;} /* structured care sheet card: one iconed row per keeping fact */ .book.caresheet{border-top-color:var(--green);} .book.caresheet .t .ck{color:var(--green);} .book.caresheet .cs-body{padding:8px 12px 10px;display:flex;flex-direction:column;gap:1px;} .cs-row{display:grid;grid-template-columns:24px auto 1fr;align-items:baseline;gap:8px;padding:7px 4px;border-bottom:1px solid var(--hair);} .cs-row:last-of-type{border-bottom:0;} .cs-ic{font-size:15px;line-height:1.2;text-align:center;} .cs-k{font-weight:800;font-size:12px;color:var(--ink);white-space:nowrap;} .cs-v{font-size:12.5px;line-height:1.5;color:var(--ink2);} .cs-row.cs-warn{grid-template-columns:24px 1fr;background:rgba(230,150,30,.1);border-radius:8px;border-bottom:0;margin:2px 0;} .cs-row.cs-warn .cs-v{color:var(--ink);font-weight:600;} .cs-foot{margin-top:8px;padding:8px 4px 2px;font-size:11px;line-height:1.5;color:var(--ink3);border-top:1px dashed var(--hair);} [dir=rtl] .cs-row{grid-template-columns:1fr auto 24px;} /* ---- PromptPay deposit QR (customer taps "pay deposit") ---- */ .pp-ov{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,10,18,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} .pp-card{width:100%;max-width:320px;background:#fff;border-radius:22px;padding:20px 18px 18px;position:relative;text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);} .pp-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid #E6ECF4;background:#fff;color:#647488;font-size:17px;cursor:pointer;} .pp-brand{display:flex;align-items:center;justify-content:center;margin-bottom:2px;} .pp-logo{font-weight:900;font-size:19px;letter-spacing:.2px;background:linear-gradient(90deg,#003D7A,#0098DA 55%,#00B2C9);-webkit-background-clip:text;background-clip:text;color:transparent;} .pp-merchant{font-size:13px;font-weight:700;color:#0E2747;margin-bottom:12px;} .pp-qr{display:flex;align-items:center;justify-content:center;padding:10px;background:#fff;border:1px solid #E6ECF4;border-radius:14px;} .pp-qr-img{width:100%;height:auto;max-width:230px;image-rendering:pixelated;border-radius:6px;} .pp-amt{font-size:26px;font-weight:800;color:#0E2747;margin-top:12px;letter-spacing:.3px;} .pp-note{font-size:11px;line-height:1.5;color:#647488;margin:6px 4px 14px;} .pp-confirm{width:100%;} /* ---- dark-mode surface fixes for the few hard-coded light literals ---- */ :root[data-theme="dark"] .svc-name, :root[data-theme="dark"] .lst-care, :root[data-theme="dark"] .svc-tier, :root[data-theme="dark"] .lst-flds input, :root[data-theme="dark"] .lst-flds select, :root[data-theme="dark"] .svc-price input, :root[data-theme="dark"] .wm-row input:not([type=range]){background:var(--field);color:var(--ink);} :root[data-theme="dark"] .svc-name:focus, :root[data-theme="dark"] .lst-care:focus{background:var(--field);} :root[data-theme="dark"] .svc-del, :root[data-theme="dark"] .svc-mode, :root[data-theme="dark"] .lst-wm, :root[data-theme="dark"] .wm-x, :root[data-theme="dark"] .handoffbar .hr, :root[data-theme="dark"] .av-chip.free .ini{background:var(--surface);} :root[data-theme="dark"] .svc-add{background:var(--surface);border-color:var(--hair);} :root[data-theme="dark"] .svc-tier-add, :root[data-theme="dark"] .qrow .qrchip{border-color:transparent;} :root[data-theme="dark"] .qrow .qrchip:hover{background:var(--blue-soft);} :root[data-theme="dark"] .dbadge, :root[data-theme="dark"] .poch, :root[data-theme="dark"] .lead .nm .tag.wait{background:var(--grey-soft);} :root[data-theme="dark"] .po-guard{background:var(--grey-soft);border-color:var(--hair);} :root[data-theme="dark"] .handoffbar{background:rgba(215,80,59,.14);color:#f0b5a8;} :root[data-theme="dark"] .lst-ph img{background:#000;} :root[data-theme="dark"] .pill-btn.bell .bdg{box-shadow:0 0 0 2px var(--surface);} /* ---- UX polish: neutral empty stat pills, tactile press feedback, clear focus ---- */ .money3 .m.empty{background:var(--grey-soft);} .money3 .m.empty .mv{color:var(--ink3);font-weight:700;} /* tap feedback everywhere (native-app feel), only on touch so it never fights desktop hover */ @media (hover:none){ .pill-btn:active,.cl-chip:active,.fc:active,.btn:active,.paybtn:active,.pp-confirm:active, .lead:active,.kcard:active,.op:active,.mtg:active,.ritem:active,.rs-item:active, .bottomnav button:active,.mode-chip:active,.svc-mode:active,.svc-add:active,.lst-wm:active, .cbadge:active,.nextact:active,.book:active{transform:scale(.975);} } .pill-btn,.cl-chip,.fc,.btn,.paybtn,.mode-chip,.cbadge,.svc-mode,.svc-add,.lst-wm{transition:transform .12s var(--ease),background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease);} /* keyboard focus is visible; mouse/touch clicks stay clean */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible, [role="button"]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;border-radius:8px;} button:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none;} /* ---- premium motion: per-card stagger on view switch, nav pop, stat depth ---- */ /* staggerCards() tags up to 16 cards with .stg + an inline animation-delay on tab change */ .stg{animation:cardIn .44s cubic-bezier(.2,.72,.24,1) both;} /* bottom-nav: the freshly-active icon springs in when you switch role */ .bottomnav button.on .ico{animation:navPop .34s cubic-bezier(.34,1.56,.5,1);} @keyframes navPop{0%{transform:scale(.82);}55%{transform:scale(1.09);}100%{transform:scale(1);}} /* stat cards get the same tactile depth lift as the KPI tiles */ .statbig{transition:transform .18s var(--ease),box-shadow .18s var(--ease);} .statbig:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,76,166,.10);} .op,.mtg{transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease);} .op:hover,.mtg:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(19,76,166,.08);} @media (prefers-reduced-motion: reduce){ .stg,.main.view-in,.bottomnav button.on .ico{animation:none;} .statbig:hover,.op:hover,.mtg:hover{transform:none;box-shadow:none;} } /* ---------- LIVE unified inbox (white-label tenant opened with ?live=1) ---------- The owner's real conversations. Reuses the app's card / chip / bubble language; everything var-driven so dark mode (EPS default) works untouched. */ .lv-wrap{display:flex;flex-direction:column;height:100%;min-height:0;} .lv-head{padding:14px 16px 10px;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;} .lv-title{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;color:var(--ink);} .lv-live{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-soft);border-radius:999px;padding:3px 9px;} .lv-live .d{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:breathe 1.6s var(--ease) infinite;} .lv-sub{font-size:11.5px;color:var(--ink3);margin-top:3px;} .lv-search{display:flex;align-items:center;gap:8px;background:var(--canvas);border:1px solid var(--hair);border-radius:999px;padding:8px 13px;margin-top:10px;color:var(--ink3);} .lv-search svg{width:14px;height:14px;flex:none;} .lv-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none;} .lv-search input::placeholder{color:var(--ink3);} .lv-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0 2px;} .lv-filters .fc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:6px 11px;} .lv-filters .cdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;} .lv-fsep{width:1px;height:16px;background:var(--hair);margin:0 3px;flex:none;} .lv-list{flex:1;overflow-y:auto;padding:10px 12px 24px;background:var(--canvas);} .lvrow{padding:12px 13px;margin-bottom:9px;} .lvrow .sm{margin-top:3px;} .lvrow .tags{margin-top:7px;} .lvrow.lvdone{opacity:.6;} .lvchip{display:inline-flex;align-items:center;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2.5px 8px;border-radius:999px;border:1px solid var(--hair);color:var(--ink2);background:var(--canvas);} .lvchip.q{color:var(--blue);background:var(--blue-soft);border-color:transparent;} .lvchip.dep{color:var(--teal-deep);background:var(--teal-soft);border-color:transparent;} .lvchip.hot{color:#8a5200;background:var(--yellow-soft);border-color:rgba(233,168,26,.5);} .lvchip.mute{color:#a23a2a;background:#FBE7E3;border-color:rgba(215,80,59,.4);} .lvchip.done{color:var(--ink3);background:var(--grey-soft);border-color:transparent;} :root[data-theme="dark"] .lvchip.mute{color:#f0b5a8;background:rgba(215,80,59,.16);} :root[data-theme="dark"] .lvchip.hot{color:#f3cd7e;} /* decision-trace chips under a shadow draft (reasoning backlog v1) */ .lv-trace{display:flex;flex-wrap:wrap;gap:5px;margin:7px 2px 2px;justify-content:flex-end;} .lvchip.lv-tr{font-size:8.5px;} .lvchip.lv-tr.ok{color:var(--teal-deep);background:var(--teal-soft);border-color:transparent;} .lvchip.lv-tr.warn{color:#8a5200;background:var(--yellow-soft);border-color:rgba(233,168,26,.5);} .lvchip.lv-tr.bad{color:#a23a2a;background:#FBE7E3;border-color:rgba(215,80,59,.4);} :root[data-theme="dark"] .lvchip.lv-tr.bad{color:#f0b5a8;background:rgba(215,80,59,.16);} :root[data-theme="dark"] .lvchip.lv-tr.warn{color:#f3cd7e;} /* thread */ .lv-thead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;} .lv-backbtn{width:34px;height:34px;border-radius:50%;flex:none;background:var(--canvas);border:1px solid var(--hair);color:var(--ink2);display:flex;align-items:center;justify-content:center;} .lv-backbtn svg{width:16px;height:16px;transform:scaleX(-1);} .lv-thead .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;position:relative;flex:none;} .lv-thead .av .ch{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface);} .lv-thead .av .ch svg{width:9px;height:9px;} .lv-tid{flex:1;min-width:0;} .lv-tid .n{font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .lv-tid .s{font-size:11px;color:var(--ink3);margin-top:1px;} .lv-tacts{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end;} .lv-tacts .fc{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:6px 10px;} .lv-chipsrow{display:flex;flex-wrap:wrap;gap:5px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--hair);flex-shrink:0;} .handoffbar.lv{margin:10px 14px 0;flex-shrink:0;} .chat.lv{padding-bottom:20px;} /* owner-perspective bubbles: customer LEFT (surface), AI RIGHT (existing .ai look, corners flipped), TEAM RIGHT in teal — visually distinct from the AI */ .lv-cav{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;} .bub.cust{background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-bottom-left-radius:5px;box-shadow:var(--sh-card);} .bub.lv-ai{border-bottom-left-radius:16px;border-bottom-right-radius:5px;border-left:1px solid var(--hair);border-right:3px solid var(--yellow);} .bub.team{background:var(--teal);color:#fff;border-bottom-right-radius:5px;box-shadow:0 8px 18px -6px rgba(58,45,24,.28);} .lv-who{display:block;font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.75;margin-bottom:2px;} .lv-time{font-size:9px;color:var(--ink3);align-self:flex-end;margin:0 2px 3px;flex:none;} .row.pending{opacity:.55;} /* shadow drafts: folded strip, clearly a draft, never a sent message */ .lv-shadow{margin:0 0 11px;} .lv-shadow summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--ink3);background:var(--canvas);border:1.5px dashed var(--hair);border-radius:999px;padding:4px 11px;margin-left:auto;float:right;clear:both;} .lv-shadow summary::-webkit-details-marker{display:none;} .lv-shadow[open] summary{color:var(--ink2);} .lv-shadow .row{clear:both;padding-top:8px;} .lv-shadow .bub.draft{background:var(--canvas);border:1.5px dashed var(--hair);color:var(--ink2);border-bottom-right-radius:6px;} /* composer: textarea + send, disabled while a reply is in flight */ .lv-composer{display:flex;align-items:flex-end;gap:9px;padding:11px 14px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hair);flex-shrink:0;} .lv-composer textarea{flex:1;min-width:0;max-height:120px;resize:none;border:1px solid var(--hair);background:var(--canvas);border-radius:18px;padding:11px 15px;font:inherit;font-size:13.5px;line-height:1.45;color:var(--ink);outline:none;} .lv-composer textarea:focus{border-color:var(--blue);} .lv-composer textarea:disabled{color:var(--ink3);} .lv-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);} .lv-composer .snd svg{width:18px;height:18px;} .lv-composer .snd:disabled{opacity:.55;} .lv-composer.sending textarea{opacity:.7;} /* ============================================================================ INTERVIEW SOLO MODE — ?interview=1 sets body.iv-solo (inline boot, index.html). A job interview must not look like the CRM demo: hide the product chrome (profile rail + bottom nav + role pill, demo-sample chips, demo-mode chip), let the chat breathe, and show the candidate's CV in a right rail on desktop. ============================================================================ */ body.iv-solo .rail, body.iv-solo .bottomnav, body.iv-solo .convlist, body.iv-solo .mode-chip, body.iv-solo .pill-btn.identity{display:none !important;} @media(min-width:900px){ body.iv-solo .chat-wrap{max-width:860px;} } /* candidate rail (#ivRail, static block injected by index.html): desktop only */ #ivRail{display:none;} #ivRailBtn,#ivRailBk{display:none;} @media(min-width:1100px){ body.iv-solo #ivRail{display:block;width:300px;flex-shrink:0;overflow-y:auto; background:var(--surface);border-left:1px solid var(--hair); padding:22px 20px calc(22px + env(safe-area-inset-bottom));} } /* mobile: the candidate rail is reachable in ONE tap as a bottom sheet */ @media(max-width:1099px){ body.iv-solo #ivRailBtn{display:inline-flex;align-items:center;gap:6px;position:fixed;right:12px; top:calc(env(safe-area-inset-top) + 10px);z-index:60;font:800 12px var(--font);letter-spacing:.02em; color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:999px; padding:7px 13px;box-shadow:0 8px 22px -10px rgba(0,0,0,.4);cursor:pointer;} body.iv-solo #ivRail{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;width:auto; max-height:82vh;overflow-y:auto;background:var(--surface);border-top:1px solid var(--hair); border-radius:20px 20px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom)); transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.8,.25,1); box-shadow:0 -14px 44px -14px rgba(0,0,0,.45);} body.iv-solo.iv-rail-open #ivRail{transform:none;} body.iv-solo #ivRailBk{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.42); opacity:0;pointer-events:none;transition:opacity .3s;} body.iv-solo.iv-rail-open #ivRailBk{opacity:1;pointer-events:auto;} } #ivRail .ivr-lab{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px;} /* photo medallion: brass ring on canopy night, the casting identity inside the app. The monogram is painted underneath; the portrait (img) covers it, and if the photo 404s the inline onerror removes the img so the letter shows through (office pattern). */ #ivRail .ivr-mono{position:relative;overflow:hidden;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:26px;font-weight:700;color:#F0C36D;border:2px solid #B08D57; background:radial-gradient(120% 120% at 30% 22%,#1C4234 0%,#0A211A 72%); box-shadow:0 0 0 5px rgba(176,141,87,.14);margin-bottom:12px;} #ivRail .ivr-mono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:50%; transform:scale(1.4);transform-origin:50% 24%;} /* half-body portraits: zoom toward the face */ #ivRail .ivr-nm{font-size:21px;font-weight:800;color:var(--ink);line-height:1.2;} #ivRail .ivr-live{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--ink2);border:1px solid var(--hair);border-radius:999px;padding:5px 10px;margin-top:9px;} #ivRail .ivr-live .dot{width:7px;height:7px;border-radius:50%;background:#F0C36D;box-shadow:0 0 0 3px rgba(240,195,109,.2);} #ivRail .ivr-rl{font-size:13px;font-weight:700;color:var(--ink2);margin-top:11px;} #ivRail .ivr-vt{font-size:12px;color:var(--ink3);margin-top:2px;} #ivRail .ivr-sec{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:16px 0 7px;} #ivRail .ivr-langs{display:flex;flex-wrap:wrap;gap:5px;} #ivRail .ivr-langs span{font-size:11px;font-weight:700;color:var(--ink2);border:1px solid var(--hair);border-radius:6px;padding:3px 8px;} #ivRail .ivr-cv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} #ivRail .ivr-cv li{position:relative;padding-left:17px;font-size:12.5px;line-height:1.55;color:var(--ink2);} #ivRail .ivr-cv li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;transform:rotate(45deg);border:1px solid #B08D57;}