/* HealthAfrrik global responsive safety layer. Loaded after page CSS. */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;margin:0;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{font:inherit;max-width:100%}
button,.button,[role="button"],a.icon-btn{min-height:44px;touch-action:manipulation}
.page,.dash-content,.consult-main,.main,main{min-width:0;max-width:100%}
.table-card,.table-wrap,.message-list{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Base/mobile layout first. */
.dashboard-shell{grid-template-columns:minmax(0,1fr)!important}
.sidebar{position:fixed!important;top:0!important;bottom:0!important;left:-290px!important;width:min(280px,88vw)!important;height:100dvh!important;z-index:1000!important;overflow-y:auto!important;overscroll-behavior:contain;transition:left .22s ease!important}
.sidebar.open{left:0!important}
.mobile-menu{display:grid!important}
.dash-top,.topbar,.consult-top{min-height:64px!important;height:auto!important;padding:10px 14px!important;gap:10px}
.dash-content,.page,.consult-main{padding:14px!important}
.hero,.welcome,.profile-hero,.wallet-hero,.two-col,.detail-grid,.form-grid,.service-list,.rate-grid,.stats-grid{grid-template-columns:minmax(0,1fr)!important}
.hero,.welcome,.wallet-hero{padding:20px!important}
.hero h1{font-size:clamp(1.75rem,8vw,2.5rem)!important}
.hero-stat{justify-self:stretch!important;max-width:none!important}
.professional-grid{grid-template-columns:minmax(0,1fr)!important}
.searchbar{width:100%;max-width:none!important}
.searchbar button{flex:0 0 auto}
.section-title{align-items:flex-start!important;gap:8px;flex-wrap:wrap}
.top-actions{gap:8px!important}
.brand img,.consult-top img{max-width:170px;height:auto!important}
.call-controls,.device-row,.msg-form{display:flex;flex-wrap:wrap;gap:10px}
.call-controls>*{flex:1 1 120px}
.device-row>*{flex:1 1 220px;min-width:0}
.msg-form input{min-width:0}
.video-stage,.video-stage video{width:100%!important;min-height:300px!important;height:min(58dvh,520px)!important}
.video-stage .local{width:min(32vw,150px)!important;height:auto!important;aspect-ratio:4/3;right:10px!important;bottom:10px!important}
.message-list{height:min(55dvh,520px)!important}
.bubble{max-width:88%!important;overflow-wrap:anywhere}
.profile-photo,.pro-photo{height:auto!important;aspect-ratio:4/3;object-fit:cover}

@media (min-width:560px){
  .dash-content,.page,.consult-main{padding:20px!important}
  .professional-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats-grid,.rate-grid,.service-list,.detail-grid,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero,.welcome{padding:26px!important}
}
@media (min-width:861px){
  .dashboard-shell{grid-template-columns:260px minmax(0,1fr)!important}
  .sidebar{position:sticky!important;left:0!important;top:0!important;width:260px!important;height:100vh!important;z-index:40!important}
  .mobile-menu{display:none!important}
  .dash-top,.topbar{padding-left:30px!important;padding-right:30px!important}
  .dash-content{padding:26px 30px 60px!important}
  .page{padding:28px 34px 60px!important}
  .consult-main{padding:24px!important}
  .professional-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero{grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr)!important}
  .welcome,.wallet-hero{flex-direction:row!important}
  .two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (min-width:1180px){
  .professional-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width:380px){
  .dash-top,.topbar,.consult-top{padding-inline:10px!important}
  .dash-content,.page,.consult-main{padding-inline:10px!important}
  .brand img,.consult-top img{max-width:145px}
  .pill{padding:7px 9px!important;font-size:13px!important}
}

/* =========================================================
   HealthAfrrik 2026 interface system
   Shared progressive enhancement for every application screen.
   ========================================================= */
:root{
  --ha-bg:#f4f8f6;
  --ha-surface:rgba(255,255,255,.94);
  --ha-surface-strong:#fff;
  --ha-text:#152622;
  --ha-muted:#667972;
  --ha-line:#e4ece9;
  --ha-primary:#0c5c48;
  --ha-primary-strong:#084c3c;
  --ha-success:#0b9a68;
  --ha-warning:#b56a09;
  --ha-danger:#d64045;
  --ha-radius-sm:12px;
  --ha-radius:18px;
  --ha-radius-lg:26px;
  --ha-shadow-sm:0 8px 24px rgba(23,42,79,.06);
  --ha-shadow:0 18px 50px rgba(23,42,79,.10);
  --ha-focus:0 0 0 4px rgba(23,105,232,.14);
}
html{background:var(--ha-bg);scroll-behavior:smooth}
body{background:radial-gradient(circle at 90% -10%,rgba(23,105,232,.08),transparent 28rem),var(--ha-bg);color:var(--ha-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:var(--ha-primary);text-underline-offset:3px}
a:hover{color:var(--ha-primary-strong)}
h1,h2,h3,h4,strong{letter-spacing:-.018em}
h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.12}
h2{font-size:clamp(1.35rem,3.8vw,2rem);line-height:1.2}
.muted,.detail,.form-note,small{color:var(--ha-muted)}

.card,.panel,.detail-card,.appointment-card,.waiting-box,.auth-card,.table-card,.profile-card,.service-option{
  background:var(--ha-surface)!important;
  border:1px solid var(--ha-line)!important;
  border-radius:var(--ha-radius)!important;
  box-shadow:var(--ha-shadow-sm)!important;
  backdrop-filter:saturate(130%) blur(10px);
}
.card:hover,.service-option:hover{box-shadow:var(--ha-shadow)!important}
.panel,.detail-card,.appointment-card,.waiting-box{padding:clamp(16px,3vw,24px)!important}
.auth-wrap{min-height:100dvh;padding:24px 14px;display:grid;place-items:center}
.auth-card{width:min(100%,720px);padding:clamp(22px,5vw,42px)!important}
.brand-logo{max-height:48px;width:auto;margin-bottom:20px}

input,select,textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid #d7e0ec;border-radius:13px;background:#fff;color:var(--ha-text);outline:none;transition:border-color .18s,box-shadow .18s,transform .18s
}
textarea{min-height:110px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#b9cec6}
input:focus,select:focus,textarea:focus{border-color:var(--ha-primary);box-shadow:var(--ha-focus)}
.field label{display:block;margin:0 0 7px;font-size:.87rem;font-weight:750;color:#344b44}
.field small{display:block;margin-top:6px;font-size:.78rem}
.form-note.error{color:var(--ha-danger);font-weight:650}
.form-note.success{color:var(--ha-success);font-weight:650}

button,.primary,.secondary,.light,.ghost{
  border-radius:13px!important;font-weight:750!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important
}
button:not(:disabled):active,.primary:active,.secondary:active{transform:translateY(1px)}
.primary{background:linear-gradient(135deg,var(--ha-primary),#09513f)!important;color:#fff!important;border:1px solid transparent!important;box-shadow:0 10px 24px rgba(23,105,232,.22)!important;text-decoration:none}
.primary:hover{box-shadow:0 14px 30px rgba(23,105,232,.28)!important;color:#fff!important}
.secondary{background:#fff!important;color:#29473e!important;border:1px solid #dbe9e4!important}
.secondary:hover{border-color:#bad0c7!important;background:#f7faf8!important}
button:focus-visible,.primary:focus-visible,.secondary:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ha-focus)!important}
button:disabled{opacity:.6;cursor:not-allowed}

.sidebar{background:linear-gradient(180deg,#102b24,#12382f)!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:18px 0 45px rgba(11,26,48,.12)!important}
.sidebar .brand{padding:20px 18px!important}
.sidebar .nav{padding:8px 12px 20px!important;display:grid;gap:4px}
.sidebar .nav a{border-radius:12px!important;padding:11px 12px!important;color:rgba(255,255,255,.76)!important;text-decoration:none;transition:.18s ease}
.sidebar .nav a:hover,.sidebar .nav a.active{background:rgba(255,255,255,.09)!important;color:#fff!important;transform:translateX(2px)}
.sidebar .nav img{filter:brightness(0) invert(1);opacity:.75}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.08)!important;padding:14px!important}
.sidebar-footer strong,.sidebar-footer span{color:#fff!important}
.sidebar-footer span{opacity:.68}
.dash-top,.topbar{background:rgba(244,247,251,.84)!important;backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid rgba(220,228,239,.85)!important;position:sticky!important;top:0;z-index:30}

.pill,.tag{border-radius:999px!important;font-weight:700!important;letter-spacing:.005em}
.pill{background:#f3f8f6!important;border:1px solid #e1ebe7!important;color:#405950!important}
.tag.green{background:#e9f9f2!important;color:#087a52!important;border:1px solid #c8efdf!important}
.tag.amber{background:#fff6e8!important;color:#9a5b08!important;border:1px solid #f5dfba!important}
.tag.blue{background:#eaf4f0!important;color:#0a5845!important;border:1px solid #d4e8e0!important}
.status-dot{box-shadow:0 0 0 4px rgba(21,170,111,.11)}

.stats-grid{gap:14px!important}
.stat-card{padding:18px!important;min-height:132px;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-28px;top:-30px;background:rgba(23,105,232,.055)}
.stat-card strong{font-size:clamp(1.65rem,4vw,2.15rem)!important;color:#17332b}
.stat-card small{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.stat-icon{border-radius:14px!important;background:#eff7f4!important;border:1px solid #dceee7!important}

.welcome,.wallet-hero,.hero{border-radius:var(--ha-radius-lg)!important;box-shadow:var(--ha-shadow)!important}
.booking-row,.table-row{border-bottom:1px solid #edf3f1!important;padding-block:14px!important}
.booking-row:last-child,.table-row:last-child{border-bottom:0!important}
.table-person img,.person,.avatar,.mini-user img{object-fit:cover;border:2px solid #fff;box-shadow:0 4px 14px rgba(23,42,79,.12)}

.meter{gap:8px!important;flex-wrap:wrap}
.chart{align-items:end;gap:8px!important;min-height:220px;padding-top:18px}
.bar-wrap{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.bar{width:min(26px,72%);min-height:8px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#178064,#0c5c48)!important;box-shadow:0 6px 14px rgba(23,105,232,.16)}
.bar-wrap span{font-size:.72rem;color:var(--ha-muted)}

.call-controls{padding:12px;background:rgba(10,23,42,.78);backdrop-filter:blur(14px);border-radius:18px}
.video-stage{border-radius:24px!important;overflow:hidden;background:#0b1c17!important;box-shadow:var(--ha-shadow)}
.message-list{background:linear-gradient(180deg,#fbfdfc,#f5f8fc)!important;border:1px solid var(--ha-line);border-radius:18px;padding:14px}
.bubble{border-radius:18px!important;box-shadow:0 4px 14px rgba(27,52,89,.06)}

@media (min-width:861px){
  .main{min-height:100dvh}
  .dash-content,.page{max-width:1600px;margin-inline:auto;width:100%}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width:559px){
  .auth-wrap{padding:0;background:#fff}
  .auth-card{min-height:100dvh;width:100%;border:0!important;border-radius:0!important;box-shadow:none!important;padding:24px 16px 34px!important}
  .top-actions .pill{display:none}
  .stat-card{min-height:116px}
  .booking-row{align-items:flex-start!important;gap:11px!important;flex-wrap:wrap}
  .booking-row>.primary,.booking-row>.secondary{width:100%;text-align:center}
  .chart{overflow-x:auto;min-width:540px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Native-control neutralization + HealthAfrrik modal system */
a,a:visited,a:hover,a:active{color:inherit!important;text-decoration:none!important}
button,input,select,textarea{-webkit-appearance:none;appearance:none;border-radius:0}
button{background:none;color:inherit}
/* Keep text readable on navy-green primary actions after native-control reset. */
.primary,.primary:visited,.primary:hover,.primary:active,button.primary,.searchbar button,.pro-actions .book{color:#fff!important}
select{background-image:linear-gradient(45deg,transparent 50%,#61766e 50%),linear-gradient(135deg,#61766e 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px!important}
input[type="checkbox"],input[type="radio"]{width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border:1.5px solid #c7d2e0;background:#fff;display:inline-grid;place-content:center;vertical-align:middle}
input[type="checkbox"]{border-radius:6px!important}input[type="radio"]{border-radius:50%!important}
input[type="checkbox"]::before{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:.12s}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--ha-primary);border-color:var(--ha-primary)}
input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}
input[type="radio"]::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:.12s}
input[type="radio"]:checked::before{transform:scale(1)}
.ha-ui-root{position:fixed;inset:0;pointer-events:none;z-index:2147483000}.ha-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);opacity:0;min-width:min(360px,calc(100vw - 28px));max-width:min(520px,calc(100vw - 28px));padding:18px 20px;border-radius:18px;background:rgba(11,51,42,.96);color:#fff;box-shadow:0 28px 80px rgba(7,38,31,.28);display:flex;align-items:flex-start;gap:12px;transition:.18s ease;pointer-events:auto;backdrop-filter:blur(18px)}.ha-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.ha-toast-mark{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#4fa483;box-shadow:0 0 0 5px rgba(79,164,131,.13)}.ha-toast.ha-success .ha-toast-mark{background:#32d296}.ha-toast.ha-error .ha-toast-mark{background:#ff6b74}.ha-toast-copy{font-weight:720;line-height:1.45;overflow-wrap:anywhere}
.ha-dialog-backdrop{position:absolute;inset:0;background:rgba(8,18,33,.48);display:grid;place-items:center;padding:18px;opacity:0;transition:.15s;pointer-events:auto;backdrop-filter:blur(6px)}.ha-dialog-backdrop.show{opacity:1}.ha-dialog{width:min(440px,100%);background:#fff;border:1px solid #e3e9f1;border-radius:22px;padding:20px;box-shadow:0 30px 90px rgba(8,22,43,.25);transform:translateY(8px) scale(.985);transition:.15s}.ha-dialog-backdrop.show .ha-dialog{transform:none}.ha-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.ha-dialog h3{margin:0;font-size:1.15rem}.ha-dialog-x{width:38px;height:38px;min-height:38px;border:1px solid #e4ece9!important;border-radius:11px!important;background:#f7f9fc!important;font-size:24px;line-height:1;cursor:pointer}.ha-dialog-message{margin:10px 0 14px;color:#667972}.ha-dialog-label{display:block;font-size:.82rem;font-weight:800;margin:0 0 6px}.ha-dialog-input{width:100%}.ha-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.ha-dialog-actions button{min-width:100px}

/* Compact consultation workspaces: one viewport, no page scrolling. */
body.consult-session{height:100dvh;overflow:hidden;background:#edf4f1}
.consult-session .consult-shell{height:100dvh;min-height:0!important;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#f7faf8,#edf3f9)}
.consult-session .consult-top{flex:0 0 56px!important;min-height:56px!important;height:56px!important;padding:7px 12px!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(14px);border-bottom:1px solid #e2e8f0}
.consult-session .consult-top img{height:30px!important;max-width:150px!important}
.consult-session .consult-main{flex:1;min-height:0;width:100%;max-width:1180px!important;margin:0 auto!important;padding:8px!important;overflow:hidden}
.consult-session .consult-card{height:100%;min-height:0;padding:10px!important;border-radius:18px!important;display:flex;flex-direction:column;overflow:hidden;background:#fff!important;border:1px solid #dfe9e5!important;box-shadow:0 14px 38px rgba(21,44,78,.08)!important}
.consult-session .person-head{min-height:42px;gap:9px!important;flex:0 0 auto}.consult-session .person-head img.person{width:40px!important;height:40px!important;border-radius:12px!important}.consult-session .person-head strong{font-size:.9rem}.consult-session .person-head .muted{font-size:.73rem}
.consult-session .meter{flex:0 0 auto;margin:6px 0!important;gap:5px!important;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}.consult-session .meter::-webkit-scrollbar{display:none}.consult-session .meter .pill,.consult-session .meter .tag{white-space:nowrap;font-size:13px!important;padding:5px 8px!important;min-height:26px}
.consult-session .incoming,.consult-session .permission-error{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 28px));margin:0!important;padding:16px!important;box-shadow:0 24px 70px rgba(10,25,47,.24);background:#fff!important;border-radius:18px!important}.consult-session .incoming[hidden],.consult-session .permission-error[hidden]{display:none!important}
.consult-call-session .consult-card{position:relative}.consult-call-session .video-stage{flex:1;min-height:0!important;height:auto!important;border-radius:15px!important;margin:0!important;background:#08111f}.consult-call-session .video-stage>video,.consult-call-session .video-stage #remote{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover}.consult-call-session .video-stage .local{width:clamp(92px,20vw,170px)!important;height:auto!important;aspect-ratio:4/3;right:8px!important;bottom:8px!important;border-radius:12px!important}.consult-voice-session .voice-avatar{height:100%!important;min-height:0!important;font-size:clamp(18px,5vw,28px)!important;border-radius:15px}
.consult-call-session .device-row{flex:0 0 auto;margin:6px 0 0!important;gap:5px!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.consult-call-session .device-row::-webkit-scrollbar{display:none}.consult-call-session .device-row>*{flex:0 1 180px!important;min-width:110px!important;min-height:36px!important;height:36px!important;padding:6px 28px 6px 9px!important;font-size:13px!important;border-radius:10px!important}.consult-call-session .device-row button{padding:6px 10px!important;white-space:nowrap}
.consult-call-session .call-controls{flex:0 0 auto;margin:6px 0 0!important;gap:6px!important;flex-wrap:nowrap!important}.consult-call-session .call-controls>*{flex:1 1 0!important;min-width:0!important;min-height:38px!important;padding:7px 9px!important;font-size:13px!important;border-radius:11px!important}
.consult-chat-session .typing{flex:0 0 18px;min-height:18px;font-size:13px}.consult-chat-session .message-list{flex:1;min-height:0!important;height:auto!important;margin:4px 0 6px!important;padding:9px!important;border-radius:14px!important;overflow-y:auto!important;overflow-x:hidden!important}.consult-chat-session .bubble{max-width:min(80%,640px)!important;margin:5px 0!important;padding:8px 10px!important;border-radius:13px!important;font-size:13px}.consult-chat-session .bubble small{display:block;font-size:13px;margin-top:3px}.consult-chat-session .msg-form{flex:0 0 auto;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:5px!important}.consult-chat-session .msg-form input{height:40px!important;min-height:40px!important;padding:7px 10px!important}.consult-chat-session .msg-form button{min-height:40px!important;padding:7px 11px!important;font-size:13px}.consult-chat-session .file-note{flex:0 0 auto;font-size:13px;margin-top:3px}
@media(min-width:700px){.consult-session .consult-main{padding:10px!important}.consult-session .consult-card{padding:12px!important}.consult-session .consult-top{padding-inline:18px!important}.consult-chat-session .bubble{font-size:13px}}
@media(max-height:620px){.consult-session .consult-top{flex-basis:48px!important;min-height:48px!important;height:48px!important}.consult-session .consult-top img{height:26px!important}.consult-session .person-head{min-height:34px}.consult-session .person-head img.person{width:34px!important;height:34px!important}.consult-call-session .device-row>*{height:32px!important;min-height:32px!important}.consult-call-session .call-controls>*{min-height:34px!important}.consult-chat-session .file-note{display:none}}

/* Sidebar scroll isolation: keep dashboard navigation independent of page scroll. */
.sidebar{
  height:100dvh!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding-bottom:50px!important;
}
@media (min-width:861px){
  .sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
  }
  .dashboard-shell{display:block!important}
  .main{margin-left:260px!important}
}
@media (max-width:860px){
  .main{margin-left:0!important}
}


/* Mobile navigation trigger: responsive, centered, and fills its touch container. */
@media (max-width:860px){
  .mobile-menu{
    width:clamp(46px,12vw,54px)!important;
    min-width:clamp(46px,12vw,54px)!important;
    height:clamp(46px,12vw,54px)!important;
    min-height:clamp(46px,12vw,54px)!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    font-size:clamp(28px,8vw,36px)!important;
    text-align:center!important;
    overflow:hidden;
  }
}
#topUserImage,#sidebarUserImage{cursor:pointer}

/* Mobile fixed header + primary bottom navigation (2026-10-02). */
@media (max-width:860px){
  .dash-top,
  .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    z-index:900!important;
    margin:0!important;
  }
  .main{
    padding-top:68px!important;
  }
  .topbar + .page,
  .topbar + main,
  .topbar + .main{
    padding-top:82px!important;
  }
  body.ha-has-mobile-nav{
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  body.ha-has-mobile-nav .dash-content,
  body.ha-has-mobile-nav .page{
    padding-bottom:calc(94px + env(safe-area-inset-bottom))!important;
  }
  .ha-mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:950;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    min-height:68px;
    padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    background:rgba(255,255,255,.96);
    border-top:1px solid #dce8e3;
    box-shadow:0 -12px 32px rgba(16,43,36,.10);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
  }
  .ha-mobile-bottom-nav a{
    min-width:0;
    min-height:54px;
    padding:5px 3px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:12px;
    color:#5e706a!important;
    font-size:13px;
    font-weight:760;
    line-height:1.05;
    text-align:center;
    text-decoration:none!important;
    -webkit-tap-highlight-color:transparent;
  }
  .ha-mobile-bottom-nav a[aria-current="page"]{
    background:#e8f3ef;
    color:#0c5c48!important;
  }
  .ha-mobile-bottom-nav svg{
    width:22px;
    height:22px;
    flex:0 0 22px;
    stroke:currentColor;
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .ha-mobile-bottom-nav span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (min-width:861px){
  .ha-mobile-bottom-nav{display:none!important}
}

/* =========================================================
   Platform-wide responsive typography system (2026-10-02)
   Fluid type from compact phones through large desktop displays.
   Loaded last so legacy fixed-pixel page styles cannot freeze text sizes.
   ========================================================= */
:root{
  --ha-type-xs:clamp(.70rem,.66rem + .16vw,.79rem);
  --ha-type-sm:clamp(.78rem,.73rem + .20vw,.88rem);
  --ha-type-base:clamp(.91rem,.84rem + .27vw,1.03rem);
  --ha-type-md:clamp(1rem,.91rem + .35vw,1.15rem);
  --ha-type-lg:clamp(1.12rem,.99rem + .52vw,1.38rem);
  --ha-type-xl:clamp(1.35rem,1.12rem + .88vw,1.78rem);
  --ha-type-2xl:clamp(1.62rem,1.24rem + 1.45vw,2.30rem);
  --ha-type-3xl:clamp(1.92rem,1.37rem + 2.10vw,2.95rem);
  --ha-leading-tight:1.14;
  --ha-leading-copy:1.55;
}

html{font-size:100%}
body:not(.consult-session){font-size:var(--ha-type-base)!important;line-height:var(--ha-leading-copy)!important}
body:not(.consult-session) h1,
body:not(.consult-session) .hero h1,
body:not(.consult-session) .page-title,
body:not(.consult-session) .profile-info>h1{
  font-size:var(--ha-type-3xl)!important;
  line-height:var(--ha-leading-tight)!important;
}
body:not(.consult-session) .dash-top h1,
body:not(.consult-session) .topbar h1{
  font-size:var(--ha-type-xl)!important;
  line-height:1.2!important;
}
body:not(.consult-session) h2,
body:not(.consult-session) .section-title h2,
body:not(.consult-session) .welcome h2{
  font-size:var(--ha-type-2xl)!important;
  line-height:1.18!important;
}
body:not(.consult-session) h3,
body:not(.consult-session) .card-title,
body:not(.consult-session) .panel-title{
  font-size:var(--ha-type-xl)!important;
  line-height:1.24!important;
}
body:not(.consult-session) h4{font-size:var(--ha-type-lg)!important;line-height:1.28!important}

body:not(.consult-session) p,
body:not(.consult-session) li,
body:not(.consult-session) td,
body:not(.consult-session) .lead,
body:not(.consult-session) .detail,
body:not(.consult-session) .description,
body:not(.consult-session) .booking-copy,
body:not(.consult-session) .appointment-copy{
  font-size:var(--ha-type-base)!important;
}
body:not(.consult-session) th,
body:not(.consult-session) label,
body:not(.consult-session) .field label,
body:not(.consult-session) .nav a,
body:not(.consult-session) .view-link,
body:not(.consult-session) .meta,
body:not(.consult-session) .section-title p,
body:not(.consult-session) .pro-specialty,
body:not(.consult-session) .mini-user strong{
  font-size:var(--ha-type-sm)!important;
}
body:not(.consult-session) small,
body:not(.consult-session) .muted,
body:not(.consult-session) .form-note,
body:not(.consult-session) .mini-user span,
body:not(.consult-session) .service-chip,
body:not(.consult-session) .pill,
body:not(.consult-session) .tag,
body:not(.consult-session) .badge,
body:not(.consult-session) .status-badge,
body:not(.consult-session) .eyebrow,
body:not(.consult-session) .kicker{
  font-size:var(--ha-type-xs)!important;
}

body:not(.consult-session) input,
body:not(.consult-session) select,
body:not(.consult-session) textarea{
  font-size:var(--ha-type-base)!important;
  line-height:1.35!important;
}
body:not(.consult-session) button:not(.icon-btn):not(.mobile-menu):not(.ha-dialog-x),
body:not(.consult-session) .primary,
body:not(.consult-session) .secondary,
body:not(.consult-session) .ghost,
body:not(.consult-session) .light,
body:not(.consult-session) .danger,
body:not(.consult-session) .button,
body:not(.consult-session) [role="button"]:not(.icon-btn){
  font-size:var(--ha-type-sm)!important;
  line-height:1.2!important;
}

body:not(.consult-session) .stat-card strong,
body:not(.consult-session) .wallet-badge strong,
body:not(.consult-session) .hero-stat strong,
body:not(.consult-session) .metric-value,
body:not(.consult-session) .amount,
body:not(.consult-session) .balance{
  font-size:var(--ha-type-2xl)!important;
  line-height:1.08!important;
}
body:not(.consult-session) .stat-card small,
body:not(.consult-session) .wallet-badge small,
body:not(.consult-session) .hero-stat span,
body:not(.consult-session) .metric-label{
  font-size:var(--ha-type-xs)!important;
}

/* Navigation remains readable without stealing space on small screens. */
@media (max-width:860px){
  .sidebar .nav a{font-size:clamp(.86rem,.80rem + .25vw,.96rem)!important}
  .dash-top h1,.topbar h1{font-size:clamp(1.05rem,.91rem + .60vw,1.30rem)!important}
  .ha-mobile-bottom-nav a{font-size:clamp(.66rem,.61rem + .20vw,.75rem)!important}
  .ha-mobile-bottom-nav svg{width:clamp(20px,5.5vw,23px);height:clamp(20px,5.5vw,23px);flex-basis:clamp(20px,5.5vw,23px)}
}

/* Very narrow screens: preserve hierarchy without oversized wrapping. */
@media (max-width:380px){
  :root{
    --ha-type-base:clamp(.88rem,.84rem + .16vw,.94rem);
    --ha-type-md:clamp(.96rem,.91rem + .20vw,1.04rem);
    --ha-type-lg:clamp(1.06rem,.98rem + .32vw,1.18rem);
    --ha-type-xl:clamp(1.22rem,1.08rem + .58vw,1.42rem);
    --ha-type-2xl:clamp(1.43rem,1.19rem + .95vw,1.72rem);
    --ha-type-3xl:clamp(1.68rem,1.31rem + 1.45vw,2.08rem);
  }
}

/* Compact consultation workspaces also scale, but stay intentionally dense. */
.consult-session{font-size:clamp(.78rem,.73rem + .18vw,.88rem)!important}
.consult-session .person-head strong{font-size:clamp(.80rem,.74rem + .22vw,.92rem)!important}
.consult-session .person-head .muted{font-size:clamp(.68rem,.64rem + .15vw,.76rem)!important}
.consult-session .meter .pill,
.consult-session .meter .tag{font-size:clamp(.64rem,.60rem + .12vw,.70rem)!important}
.consult-call-session .device-row>*,
.consult-call-session .call-controls>*,
.consult-chat-session .msg-form button{font-size:clamp(.69rem,.64rem + .16vw,.78rem)!important}
.consult-chat-session .typing{font-size:clamp(.67rem,.63rem + .14vw,.75rem)!important}
.consult-chat-session .bubble{font-size:clamp(.76rem,.70rem + .22vw,.88rem)!important}
.consult-chat-session .bubble small,
.consult-chat-session .file-note{font-size:clamp(.61rem,.58rem + .12vw,.68rem)!important}

/* Prevent user/device font settings from causing clipped controls. */
button,input,select,textarea,a,.pill,.tag,.badge{overflow-wrap:anywhere}

/* Chat role alignment: professional is always right, client is always left. */
.consult-chat-session .message-list{display:flex!important;flex-direction:column!important;align-items:stretch!important}
.consult-chat-session .bubble.professional{align-self:flex-end!important;margin-left:auto!important;margin-right:0!important;text-align:left}
.consult-chat-session .bubble.client{align-self:flex-start!important;margin-left:0!important;margin-right:auto!important;text-align:left}

/* Video consultation desktop focus: keep the call workspace narrow and viewport-bound. */
@media (min-width:700px){
  .consult-video-session .consult-main{
    width:100%!important;
    max-width:424px!important;
    padding:10px 12px!important;
  }
  .consult-video-session .consult-card{
    width:100%!important;
    max-width:400px!important;
    margin:0 auto!important;
    height:100%!important;
    max-height:calc(100dvh - 76px)!important;
  }
  .consult-video-session .video-stage{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    flex:1 1 auto!important;
  }
  .consult-video-session .video-stage>video,
  .consult-video-session .video-stage #remote{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .consult-video-session .video-stage .local{
    width:min(34%,136px)!important;
  }
}

/* Desktop consultation workspace sizing: keep all live consultation surfaces compact and viewport-aware. */
@media (min-width:861px){
  .consult-video-session .consult-main,
  .consult-voice-session .consult-main,
  .consult-chat-session .consult-main{
    width:100%!important;
    max-width:424px!important;
    padding:10px 12px!important;
  }
  .consult-video-session .consult-card,
  .consult-voice-session .consult-card,
  .consult-chat-session .consult-card{
    width:100%!important;
    max-width:400px!important;
    margin:0 auto!important;
    max-height:calc(100dvh - 92px)!important;
    overflow:hidden!important;
  }
  .consult-video-session .consult-card,
  .consult-voice-session .consult-card{
    display:flex!important;
    flex-direction:column!important;
  }
  .consult-video-session .video-stage,
  .consult-voice-session .video-stage{
    min-height:0!important;
    height:clamp(240px,48dvh,500px)!important;
    flex:1 1 auto!important;
  }
  .consult-video-session .video-stage>video,
  .consult-video-session .video-stage #remote{
    height:100%!important;
    min-height:0!important;
  }
  .consult-voice-session .voice-avatar{
    height:100%!important;
    min-height:220px!important;
  }
  .consult-chat-session .consult-card{
    display:flex!important;
    flex-direction:column!important;
  }
  .consult-chat-session .message-list{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:220px!important;
    max-height:calc(100dvh - 310px)!important;
  }
  .consult-video-session #switchCam{
    display:none!important;
  }
}


/* Global consultation signaling: visible on every authenticated app page. */
.ha-signal-root{position:fixed;inset:0;z-index:2147483200;pointer-events:none;display:grid;place-items:center;padding:18px}.ha-signal-popup{width:min(430px,calc(100vw - 28px));display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid rgba(11,83,69,.16);border-radius:22px;box-shadow:0 28px 90px rgba(7,38,31,.28);padding:18px;opacity:0;transform:translateY(10px) scale(.98);transition:.18s ease;pointer-events:auto}.ha-signal-popup.show{opacity:1;transform:none}.ha-signal-icon{width:42px;height:42px;border-radius:14px;background:#0b5345;color:#fff;display:grid;place-items:center;font-size:28px;line-height:1;font-weight:400;flex:0 0 auto}.ha-signal-copy{min-width:0;flex:1}.ha-signal-copy>strong{display:block;color:#0b332a;font-size:clamp(1rem,.96rem + .22vw,1.1rem);line-height:1.25;margin:1px 0 6px}.ha-signal-copy>p{margin:0;color:#49635d;font-size:clamp(.9rem,.87rem + .16vw,.98rem);line-height:1.45}.ha-signal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}.ha-signal-actions button{min-height:40px;padding:9px 13px;white-space:nowrap}@media(max-width:520px){.ha-signal-root{align-items:start;padding-top:calc(76px + env(safe-area-inset-top))}.ha-signal-popup{border-radius:18px}.ha-signal-actions{justify-content:stretch}.ha-signal-actions button{flex:1}}

/* Viewport horizontal-scroll rail: mirrors wide tables/content so users never need
   to reach the bottom of a long component just to scroll it sideways. */
.ha-horizontal-scroll-rail{
  position:fixed;
  left:0;
  right:0;
  bottom:10px;
  z-index:880;
  height:18px;
  padding:4px 12px;
  pointer-events:none;
  display:none;
}
.ha-horizontal-scroll-rail.is-visible{display:block}
.ha-horizontal-scroll-rail-track{
  width:100%;
  height:14px;
  overflow-x:auto;
  overflow-y:hidden;
  pointer-events:auto;
  scrollbar-width:auto;
  scrollbar-color:#5f8578 #dfe9e5;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 22px rgba(17,52,43,.13);
}
.ha-horizontal-scroll-rail-track::-webkit-scrollbar{height:10px}
.ha-horizontal-scroll-rail-track::-webkit-scrollbar-track{background:#dfe9e5;border-radius:999px}
.ha-horizontal-scroll-rail-track::-webkit-scrollbar-thumb{background:#5f8578;border-radius:999px;border:2px solid #dfe9e5}
.ha-horizontal-scroll-rail-spacer{height:1px}
@media(max-width:860px){
  body.ha-has-mobile-nav .ha-horizontal-scroll-rail{bottom:74px}
}
@media(min-width:861px){.ha-horizontal-scroll-rail{left:272px}}


/* Shared mobile drawer behavior: close control + click-outside backdrop. */
.ha-sidebar-backdrop{display:none}
@media (max-width:860px){
  .ha-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:990;
    display:block;
    background:rgba(7,22,18,.46);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  .ha-sidebar-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.ha-sidebar-open{overflow:hidden!important}
  .sidebar{z-index:1000!important}
  .mobile-menu{position:relative;z-index:1010!important}
  .mobile-menu.is-open{
    font-size:clamp(32px,9vw,40px)!important;
    font-weight:400!important;
  }
}

/* Mobile Safari form-control zoom prevention: keep all editable/selectable controls at 16px or larger. */
@media (max-width:860px){
  input,
  select,
  textarea{
    font-size:16px!important;
  }
}

/* Realtime consultation dialogs stay centered on every viewport. */
.ha-signal-root{align-items:center!important;justify-items:center!important;padding:18px!important}.ha-signal-popup.ha-incoming-call .ha-signal-icon{animation:haRingPulse 1s ease-in-out infinite}@keyframes haRingPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media(max-width:520px){.ha-signal-root{align-items:center!important;padding:18px!important}.ha-signal-popup{max-height:calc(100dvh - 36px);overflow:auto}}

/* =========================================================
   Global mobile viewport stability — prevents page content from
   widening/rescaling the entire Safari visual viewport and app chrome.
   ========================================================= */
@media (max-width:860px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  body{
    position:relative;
  }
  .dashboard-shell,
  .main,
  main,
  .dash-content,
  .page,
  #app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .main,
  main,
  .dash-content,
  .page,
  #app{
    overflow-x:clip!important;
  }
  .dash-content > *,
  .page > *,
  #app > *{
    min-width:0!important;
    max-width:100%;
  }
  .dash-top,
  .topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .dash-top > *,
  .topbar > *{
    min-width:0!important;
  }
  .sidebar{
    width:min(280px,calc(100dvw - 24px))!important;
    max-width:calc(100dvw - 24px)!important;
    min-width:0!important;
    contain:layout paint;
  }
  .sidebar .nav,
  .sidebar .nav a,
  .sidebar-footer,
  .mini-user{
    min-width:0!important;
    max-width:100%!important;
  }
  .sidebar .nav a,
  .mini-user strong,
  .mini-user span{
    overflow-wrap:anywhere;
  }
  .mobile-menu{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    flex:0 0 50px!important;
    font-size:30px!important;
  }
  .mobile-menu.is-open{
    font-size:34px!important;
  }
  .ha-sidebar-backdrop,
  .ha-mobile-bottom-nav,
  .ha-signal-root,
  .ha-dialog-root,
  .ha-toast-root{
    max-width:100dvw!important;
  }
  .ha-mobile-bottom-nav{
    width:100%!important;
    overflow:hidden!important;
  }
  img,
  video,
  canvas,
  svg,
  iframe{
    max-width:100%!important;
  }
  input,
  select,
  textarea,
  [contenteditable="true"]{
    font-size:16px!important;
    max-width:100%!important;
  }
  pre,
  code,
  .ch-bubble,
  .ch-timeline-card,
  .booking-row,
  .appointment-card,
  .card,
  .panel{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Global profile-image containment: header/sidebar avatars must never use intrinsic image size. */
#topUserImage,
.dash-top .avatar,
.topbar .avatar{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  flex:0 0 42px!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  overflow:hidden!important;
}
#sidebarUserImage,
.sidebar .mini-user img{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  flex:0 0 40px!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  overflow:hidden!important;
}
.dash-top .top-actions,
.topbar .top-actions,
.sidebar .mini-user{
  min-width:0!important;
  align-items:center!important;
}
@media(max-width:860px){
  #topUserImage,
  .dash-top .avatar,
  .topbar .avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    flex-basis:38px!important;
  }
  #sidebarUserImage,
  .sidebar .mini-user img{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    flex-basis:38px!important;
  }
}