*/
.waiting-overlay{
position: absolute; inset: 0;
z-index: 7;
display: none;
align-items: center; justify-content: center;
flex-direction: column; gap: 14px;
padding: 24px; text-align: center;
color: white;
background:
radial-gradient(ellipse at center, rgba(13,59,102,.85), rgba(6,24,42,.95));
backdrop-filter: blur(4px);
}
.waiting-overlay.show{display: flex}
.waiting-overlay .pulse{
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-2));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 0 rgba(98,217,200,.6);
animation: brand-pulse 2s ease-in-out infinite;
}
.waiting-overlay .pulse .icon{width: 28px; height: 28px; color: white}
.waiting-overlay h3{margin: 0; color: white; font-size: 18px; font-weight: 700; letter-spacing: -.01em}
.waiting-overlay p{margin: 0; max-width: 360px; color: rgba(255,255,255,.78); font-size: 13.5px; line-height: 1.6}
/* In-call ribbon — fades pre-call buttons after joining */
.video-stage.is-incall .pre-call{opacity: 0; pointer-events: none; transition: opacity .35s ease}
.video-stage:not(.is-incall) .in-call{opacity: 0; pointer-events: none}
.video-stage .in-call,
.video-stage .pre-call{transition: opacity .25s ease}
/* Pulsing primary button — used on the patient's "Join now" CTA */
.btn-pulse{
animation: btn-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(27,154,170,.55);
}
@keyframes btn-pulse{
0%,100% {box-shadow: 0 0 0 0 rgba(27,154,170,.55)}
50% {box-shadow: 0 0 0 14px rgba(27,154,170,0)}
}
.video-stage .scan-overlay{
position: absolute; inset: 0;
background: rgba(6,24,42,.92);
color: white;
display: none; flex-direction: column;
align-items: center; justify-content: center;
z-index: 10; padding: 24px; text-align: center;
}
.video-stage .scan-overlay.show{display: flex}
.video-stage .scan-overlay video{
width: 240px; height: 320px;
border-radius: 12px;
border: 2px solid var(--vs-accent);
background: black;
}
.video-stage .scan-overlay .scan-progress{
width: 80%; max-width: 380px; height: 8px;
background: rgba(255,255,255,.18);
border-radius: 4px; overflow: hidden; margin-top: 16px;
}
.video-stage .scan-overlay .scan-bar{
height: 100%;
background: linear-gradient(90deg, var(--vs-accent), var(--vs-accent-2));
width: 0%; transition: width .25s;
}
.video-stage .scan-overlay .scan-status{
font-size: 14px; color: var(--vs-accent-3);
margin-top: 8px;
}
.video-stage .controls{
display: flex; gap: 8px; padding: 12px 14px;
background: linear-gradient(0deg, #06182a, #0a2236);
flex-wrap: wrap; align-items: center;
border-top: 1px solid rgba(255,255,255,.06);
}
/* In-call control button — circle/pill mute/cam toggles, with active states */
.video-stage .controls .ctrl-btn{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px; border-radius: 999px;
background: rgba(255,255,255,.08); color: white;
border: 1px solid rgba(255,255,255,.12);
font: 600 13px/1 var(--vs-font); cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.video-stage .controls .ctrl-btn:hover{background: rgba(255,255,255,.16)}
.video-stage .controls .ctrl-btn .icon{width: 16px; height: 16px}
.video-stage .controls .ctrl-btn.is-muted,
.video-stage .controls .ctrl-btn.is-off{
background: rgba(208,74,46,.18); border-color: rgba(208,74,46,.45); color: #ffb9aa;
}
.video-stage .controls .ctrl-btn.is-muted .icon,
.video-stage .controls .ctrl-btn.is-off .icon{color: #ffb9aa}
@media (max-width: 720px){
.video-stage .controls .ctrl-btn .ctrl-lbl{display: none}
.video-stage .controls .ctrl-btn{padding: 9px 12px}
}
.consult-side{display: flex; flex-direction: column; gap: 12px; min-height: 0}
.consult-side .panel{
background: white;
border-radius: var(--vs-radius);
border: 1px solid var(--vs-line);
box-shadow: var(--vs-shadow-1);
overflow: hidden;
display: flex; flex-direction: column; min-height: 0;
}
.consult-side .panel-head{
padding: 11px 16px;
border-bottom: 1px solid var(--vs-line);
font-weight: 700; font-size: 13px;
color: var(--vs-primary);
display: flex; align-items: center; gap: 8px;
background: var(--vs-bg);
text-transform: uppercase; letter-spacing: .5px;
}
.consult-side .panel-body{padding: 14px 16px; overflow: auto; flex: 1; font-size: 13.5px; min-height: 0}
.chat-list{display: flex; flex-direction: column; gap: 10px; padding: 4px 2px}
.chat-msg{
padding: 9px 13px;
border-radius: 14px 14px 14px 4px;
background: var(--vs-bg-2);
max-width: 78%; word-wrap: break-word;
font-size: 13.5px; line-height: 1.45;
border: 1px solid var(--vs-line);
color: var(--vs-ink);
}
.chat-msg.me{
margin-left: auto;
border-radius: 14px 14px 4px 14px;
background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-2));
color: white; border-color: transparent;
}
.chat-msg.me .meta{color: rgba(255,255,255,.85)}
.chat-msg .meta{
font-size: 11px; color: var(--vs-muted); margin-bottom: 3px;
font-weight: 600; letter-spacing: .2px;
text-transform: capitalize;
}
.chat-msg .meta time{font-variant-numeric: tabular-nums; font-weight: 500}
.chat-msg .body{font-weight: 400}
.chat-empty{
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 28px 16px; text-align: center;
color: var(--vs-muted); font-size: 12.5px; line-height: 1.55;
}
.chat-empty .icon{width: 28px; height: 28px; color: var(--vs-muted-2)}
.chat-input{
display: flex; gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--vs-line);
background: var(--vs-surface-2);
align-items: center;
}
.chat-input input{
flex: 1; padding: 10px 14px;
border: 1px solid var(--vs-line); border-radius: 999px;
font: 500 13.5px/1.4 var(--vs-font); background: white;
min-height: 38px;
transition: border-color .14s ease, box-shadow .14s ease;
}
.chat-input input:focus{
outline: 0; border-color: var(--vs-accent);
box-shadow: 0 0 0 4px rgba(155,231,231,.45);
}
.chat-input .btn{padding: 10px 14px; border-radius: 999px}
/* ---------- prescription editor ---------- */
.rx-grid{display: grid; gap: 8px}
.rx-row{
display: grid;
grid-template-columns: 1.4fr .8fr .8fr .8fr .8fr 1fr 30px;
gap: 6px; align-items: center;
}
.rx-row input,.rx-row select{
padding: 7px 9px; font-size: 12.5px;
border: 1px solid var(--vs-line); border-radius: 6px; width: 100%;
background: white;
}
.rx-row input:focus,.rx-row select:focus{outline: 0; border-color: var(--vs-accent); box-shadow: 0 0 0 2px rgba(27,154,170,.15)}
.rx-row .btn-x{
background: transparent; border: 0;
color: var(--vs-warn); cursor: pointer;
font-size: 18px; line-height: 1;
}
.rx-row .btn-x:hover{color: #a83824}
.rx-section{
border: 1px solid var(--vs-line);
border-radius: var(--vs-radius-sm);
padding: 14px 16px; margin-bottom: 12px;
background: var(--vs-surface);
}
.rx-section h4{
margin: 0 0 10px; color: var(--vs-primary);
font-size: 12.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .6px;
display: flex; align-items: center; gap: 8px;
}
.rx-section h4::before{
content: ""; width: 4px; height: 14px;
background: linear-gradient(180deg, var(--vs-accent), var(--vs-accent-2));
border-radius: 2px;
}
/* ---------- status banner ---------- */
.status-banner{
position: fixed; top: 0; left: 0; right: 0;
padding: 8px 16px;
background: var(--vs-pending); color: white;
text-align: center; font-size: 12.5px; font-weight: 600;
z-index: 100; display: none;
letter-spacing: .3px;
}
.status-banner.show{display: block}
/* ---------- stage banner (consultation room) ---------- */
.stage-banner{
display: none;
align-items: center; gap: 12px;
background: white;
border: 1px solid var(--vs-line);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 14px;
box-shadow: var(--vs-shadow-1);
}
.stage-banner .stage-pill{
display: inline-block;
background: var(--vs-accent); color: white;
padding: 4px 12px; border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: .5px; text-transform: uppercase;
white-space: nowrap;
}
.stage-banner .stage-msg{
flex: 1; color: var(--vs-ink-2); font-size: 13.5px; font-weight: 500;
}
.stage-banner .stage-arrow{
display: inline-flex; gap: 3px; align-items: center;
font-size: 11px; color: var(--vs-muted-2); flex-shrink: 0;
}
.stage-banner .stage-arrow span{
width: 16px; height: 4px; border-radius: 2px;
background: var(--vs-line);
}
.stage-banner .stage-arrow span.on{background: var(--vs-accent)}
/* ---------- utility ---------- */
.row-flex{display: flex; gap: 10px; align-items: center; flex-wrap: wrap}
.spread{display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap}
.text-center{text-align: center}
.text-right{text-align: right}
.muted{color: var(--vs-muted)}
.text-sm{font-size: 12.5px}
.text-lg{font-size: 15px}
.hidden{display: none !important}
.spacer{flex: 1}
.divider{height: 1px; background: var(--vs-line); margin: 16px 0}
.dim{opacity: .65}
/* ============================================================
STITCH "Clinical Modernism" upgrade — additive components.
These add polish without breaking any existing class.
============================================================ */
/* Glass overlay — for floating bars, popovers, "active call" pills.
Never use on primary content blocks (kills readability). */
.glass{
background: rgba(255,255,255,.80);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 12px 40px rgba(10,46,87,.10);
}
/* Tonal section — subtle blue-tinted band (uses surface-container-low).
Good for grouping a row of bento cards inside a hero or gallery. */
.tonal{background: var(--vs-bg-2); border-radius: var(--vs-radius); padding: 24px}
.tonal-deep{background: var(--vs-bg-3); border-radius: var(--vs-radius); padding: 24px}
/* KPI tile — large number + label, no chrome. Use inside a .card or .grid. */
.kpi{
display: flex; flex-direction: column; gap: 6px;
padding: 18px 20px;
background: var(--vs-surface);
border: 1px solid var(--vs-line);
border-radius: var(--vs-radius);
position: relative;
}
.kpi-label{
font-family: var(--vs-font-data);
font-size: 12px; color: var(--vs-muted); font-weight: 500;
letter-spacing: .4px; text-transform: uppercase;
}
.kpi-value{
font-family: var(--vs-font-data);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
font-size: 32px; font-weight: 600; color: var(--vs-primary);
line-height: 1.05; letter-spacing: -.02em;
}
.kpi-trend{font-size: 12px; color: var(--vs-muted); display: inline-flex; gap: 4px; align-items: center}
.kpi-trend.up{color: var(--vs-ok)}
.kpi-trend.down{color: var(--vs-warn)}
/* Scan ring — concentric SVG/CSS rings used on /scan and during in-call
patient capture. Mark the parent with `.scan-ring` and render the
progress + pulse rings inside via SVG conic-gradient or stroke-dasharray.
Minimum DOM:
*/
.scan-ring{
position: relative;
width: 320px; height: 320px;
margin: 0 auto;
display: grid; place-items: center;
isolation: isolate;
}
.scan-ring-glow{
position: absolute; inset: -10px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(155,231,231,.55), rgba(155,231,231,0) 70%);
filter: blur(20px);
z-index: 0; pointer-events: none;
}
.scan-ring-progress{
--p: 0;
position: absolute; inset: 0;
border-radius: 50%;
/* Conic gradient navy → teal, masked to a 4px ring */
background: conic-gradient(
from -90deg,
var(--vs-primary) 0deg,
var(--vs-accent) calc(var(--p) * 3.6deg),
rgba(227,234,241,.55) calc(var(--p) * 3.6deg) 360deg
);
-webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 4px));
mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 4px));
z-index: 1;
}
.scan-ring-pulse{
--bpm: 72;
position: absolute; inset: 18px;
border-radius: 50%;
border: 2px solid rgba(98,217,200,.35);
animation: scan-pulse calc(60s / var(--bpm)) ease-in-out infinite;
z-index: 2;
}
@keyframes scan-pulse{
0%,100%{transform: scale(1); box-shadow: 0 0 0 0 rgba(98,217,200,.45)}
50% {transform: scale(1.04); box-shadow: 0 0 0 14px rgba(98,217,200,0)}
}
.scan-ring-readout{
position: relative; z-index: 3;
text-align: center;
}
.scan-ring-camera{
/* Optional: face video centered inside the ring */
position: absolute; inset: 28px;
border-radius: 50%;
overflow: hidden; background: #000;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
z-index: 2;
}
.scan-ring-camera video{width: 100%; height: 100%; object-fit: cover}
/* Sparkline — drop a 60×16 inline SVG/canvas inside.
The class just sets the colour + size envelope. */
.sparkline{
display: inline-block;
width: 60px; height: 16px;
color: var(--vs-accent);
vertical-align: middle;
}
.sparkline.warn{color: var(--vs-warn)}
.sparkline.ok{color: var(--vs-ok)}
.sparkline svg, .sparkline path{
width: 100%; height: 100%; fill: none;
stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
/* Pill nav-style chip filter — used on "Find a doctor" filters */
.chip-row{display: flex; gap: 8px; flex-wrap: wrap}
.chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 999px;
background: var(--vs-surface); border: 1px solid var(--vs-line);
font: 500 13px/1 var(--vs-font); color: var(--vs-ink-2);
cursor: pointer; transition: all .14s ease;
}
.chip:hover{border-color: var(--vs-accent); color: var(--vs-primary)}
.chip.active{
background: var(--vs-primary); color: white; border-color: var(--vs-primary);
}
/* Floating "Active Consultation" pill — appears on top of any page when
a call is in progress. Use `class="floating-pill glass"`. */
.floating-pill{
position: fixed; right: 22px; bottom: 22px;
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px 10px 12px;
border-radius: 999px;
font: 600 13px/1 var(--vs-font); color: var(--vs-primary);
z-index: 60; cursor: pointer; text-decoration: none;
}
.floating-pill .live-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--vs-warn);
animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink{0%,100%{opacity: 1}50%{opacity: .35}}
/* Skeleton loader — replace text/blocks while async data arrives.
Use `class="skel"` plus an inline width/height. */
.skel{
display: inline-block;
background: linear-gradient(90deg, var(--vs-bg-2) 0%, var(--vs-bg-3) 50%, var(--vs-bg-2) 100%);
background-size: 200% 100%;
border-radius: 8px;
animation: skel-shine 1.4s linear infinite;
color: transparent !important;
}
@keyframes skel-shine{0%{background-position: 200% 0}100%{background-position: -200% 0}}
/* Tabbed segmented control — slimmer than auth-tabs, for in-page tabs. */
.seg{
display: inline-flex; padding: 4px;
background: var(--vs-bg-2); border-radius: 12px;
}
.seg button{
border: 0; background: transparent; cursor: pointer;
padding: 8px 16px; border-radius: 8px;
font: 600 13px/1 var(--vs-font); color: var(--vs-muted);
transition: all .14s ease;
}
.seg button:hover{color: var(--vs-primary)}
.seg button.active{
background: var(--vs-surface); color: var(--vs-primary);
box-shadow: 0 1px 3px rgba(10,46,87,.06), 0 4px 12px rgba(10,46,87,.04);
}
/* Status badge — pill, muted bg + bold ink (Stitch-style). Replaces the
loud .tag for places where the legacy uppercase look is too shouty. */
.badge{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font: 600 12px/1.4 var(--vs-font);
background: var(--vs-bg-2); color: var(--vs-ink-2);
}
.badge::before{
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: .8;
}
.badge.ok {background: #d6f5e3; color: #0a7a4d}
.badge.warn {background: #fde2dc; color: #883121}
.badge.pending {background: #fff3d4; color: #7a5400}
.badge.info {background: #d6ebff; color: #0d3b66}
.badge.live {background: var(--vs-primary); color: white}
.badge.live::before{background: var(--vs-accent-3); animation: live-blink 1.6s ease-in-out infinite}