/* New Life Hospital V2 Stage 3 shared UI */
html,body{max-width:100%;overflow-x:hidden}.brand-image-only,.patient-login-brand,.patient-login-mobile-logo{display:flex;align-items:center;justify-content:center}.brand-image-only img{display:block;max-width:100%;height:auto}.site-branding .brand-image-only{width:100%}.nlh-update-banner{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:10000;width:min(720px,calc(100% - 24px));transform:translateX(-50%);display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:#0f172a;color:#fff;box-shadow:0 24px 65px rgba(15,23,42,.35)}.nlh-update-banner div{display:flex;flex-direction:column;gap:3px}.nlh-update-banner span{color:#cbd5e1;font-size:12px}.nlh-update-banner button{min-height:40px;border-color:rgba(255,255,255,.2);background:#fff;color:#0f766e}.nlh-update-banner [data-update-later]{background:transparent;color:#fff}.presence-status{display:inline-flex!important;align-items:center;gap:6px;margin-top:4px;font-size:11px!important;font-weight:800!important}.presence-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#94a3b8}.presence-status.online{color:#087443!important}.presence-status.online::before{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}.presence-status.typing{color:#0f766e!important}.presence-status.typing::before{background:#14b8a6;animation:nlhPresencePulse 1s ease-in-out infinite}.presence-status.offline{color:#64748b!important}.msg{position:relative}.msg-menu-hint{position:absolute;right:7px;top:4px;color:#64748b;font-weight:900;opacity:.45}.msg.internal-note{border:1px dashed #f59e0b!important;background:#fff8e8!important}.msg.internal-note::before{content:"Internal note · not visible to patient";display:block;margin-bottom:5px;color:#a15c00;font-size:10px;font-weight:850}.message-tools-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}.message-tools-overlay.hidden{display:none!important}.message-tools-sheet{width:min(620px,100%);max-height:min(86dvh,760px);overflow:auto;padding:12px 16px 20px;border-radius:24px 24px 18px 18px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.35)}.message-tools-handle{width:48px;height:5px;margin:0 auto 10px;border-radius:999px;background:#cbd5e1}.message-tools-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.message-tools-title button{width:38px;height:38px;padding:0;border-radius:50%;font-size:23px}.message-tools-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.message-tools-actions button{min-height:48px;justify-content:flex-start;text-align:left}.message-details-panel{margin-top:14px;padding:15px;border:1px solid #dfe8e6;border-radius:16px;background:#f8fbfa}.message-details-panel.hidden{display:none}.message-details-list{display:grid;gap:0;margin:0}.message-details-list>div{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr);gap:12px;padding:9px 0;border-bottom:1px solid #e5ecea}.message-details-list dt{color:#64748b;font-size:12px;font-weight:800}.message-details-list dd{margin:0;word-break:break-word;font-size:13px}.install-attention{position:relative;overflow:hidden;border-color:#0f766e!important;background:linear-gradient(115deg,#075e58,#0f9488,#1685c4,#0f766e)!important;background-size:260% 260%!important;color:#fff!important;box-shadow:0 12px 28px rgba(15,118,110,.28);animation:nlhInstallGradient 5s ease infinite,nlhInstallGlow 2.2s ease-in-out infinite}.install-attention::after{content:"";position:absolute;top:-80%;left:-35%;width:24%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(22deg);animation:nlhInstallShine 3.4s ease-in-out infinite}.pin-memory-note{margin-top:-4px;padding:9px 11px;border-radius:10px;background:#ecfdf5;color:#087443;font-weight:700}.patient-login-readonly-mobile{background:#f3f7f6!important;color:#365c58!important}.patient-profile-card{width:min(620px,100%)}.page-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.page-card-heading h1{margin:4px 0 0}.page-card-heading small{color:#64748b;font-weight:800}.install-phone-stage[data-install-app]{cursor:pointer}.install-phone-stage[data-install-app]:focus-visible{outline:4px solid rgba(20,184,166,.28);outline-offset:8px;border-radius:32px}.patient-menu-panel{max-height:min(78dvh,620px);overflow:auto}.chat-page .composer{touch-action:manipulation}.patient-chat-page .composer{will-change:bottom}.patient-login-shell,.hero-card,.card{animation:nlhPageEnter .35s ease-out}.hidden{display:none!important}
@keyframes nlhPageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes nlhPresencePulse{50%{transform:scale(1.35);opacity:.55}}@keyframes nlhInstallGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes nlhInstallGlow{50%{box-shadow:0 16px 36px rgba(22,133,196,.42),0 0 0 5px rgba(20,184,166,.08)}}@keyframes nlhInstallShine{0%,48%{left:-35%}72%,100%{left:130%}}
@media(max-width:700px){.nlh-update-banner{grid-template-columns:1fr 1fr}.nlh-update-banner div{grid-column:1/-1}.message-tools-actions{grid-template-columns:1fr}.message-details-list>div{grid-template-columns:1fr;gap:3px}.message-tools-sheet{border-radius:22px 22px 12px 12px}.page-card-heading{align-items:center}.grid-actions{width:100%}}
@media(prefers-reduced-motion:reduce){.install-attention,.install-attention::after,.presence-status::before,.patient-login-shell,.hero-card,.card{animation:none!important}}


/* NLH STAGE 3B USABILITY FIXES START */
.chat-page .chat-shell{display:flex;flex-direction:column}.chat-page .message-list{flex:1 1 auto;min-height:0}.chat-page .notice-panel,.chat-page .chat-status,.chat-page .composer{flex:0 0 auto}.auth-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.auth-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#f7fbfa;font-size:13px;font-weight:800}.profile-detail-list{display:grid;gap:12px;margin-top:18px}.profile-detail-row{padding:15px;border:1px solid var(--line);border-radius:16px;background:#fbfdfd}.profile-detail-value{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.profile-detail-value span{color:var(--muted);font-size:13px;font-weight:800}.profile-detail-value strong{max-width:68%;text-align:right;overflow-wrap:anywhere}.profile-change-request{margin-top:12px}.profile-change-request>summary{list-style:none;width:max-content}.profile-change-request>summary::-webkit-details-marker{display:none}.profile-change-request form{margin-top:12px;padding:12px;border-radius:13px;background:#f2f8f7}.profile-direct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.profile-direct-actions form{margin:0}.profile-direct-actions form button{margin:0}.profile-signout{color:#b42318;border-color:#f2c3bf}.chat-status{display:none;min-height:0;padding:0 14px;background:#fff;color:var(--muted);font-size:12px;font-weight:750}.chat-status.visible{display:block;padding-top:6px;padding-bottom:6px}.chat-status.error{color:#b42318;background:#fff2f1}.chat-status.ok{color:#087443;background:#eefbf5}.message-history-loader{align-self:center;display:flex;justify-content:center;width:100%;padding:3px 0 8px}.message-history-loader .btn{background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(15,31,30,.08)}.patient-chat-page .message-list{background:radial-gradient(circle at 20% 10%,rgba(15,118,110,.055),transparent 34%),#eef5f2}.patient-chat-page .msg{border:1px solid rgba(15,118,110,.08);line-height:1.42;box-shadow:0 5px 16px rgba(15,31,30,.06)}.patient-chat-page .msg.mine{background:#d8f7eb;border-bottom-right-radius:6px}.patient-chat-page .msg.theirs{background:#fff;border-bottom-left-radius:6px}.patient-chat-page .msg-sender{letter-spacing:.01em}.patient-chat-page .notice-panel{box-shadow:0 5px 18px rgba(15,31,30,.05)}.notice-actions{display:flex;flex-wrap:wrap;gap:8px}.notice-actions .btn{margin:0}.chat-page.staff-chat-view,.chat-page.admin-chat-view{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.chat-page.staff-chat-view>.topbar,.chat-page.admin-chat-view>.topbar{flex:0 0 auto}.staff-chat-grid.collaboration-grid{flex:1 1 auto;min-height:0;height:auto}.staff-chat-grid.collaboration-grid>.chat-shell{height:100%;min-height:0}.mobile-details-toggle,.mobile-sidebar-head,.chat-details-backdrop{display:none}.chat-topbar-actions{display:flex;align-items:center;gap:10px}.chat-details-backdrop{border:0;border-radius:0;margin:0;padding:0}.collaboration-sidebar{min-height:0}.collaboration-sidebar .mobile-sidebar-head{align-items:center;justify-content:space-between;margin:-2px -2px 10px;padding:6px 4px 10px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.chat-page.staff-chat-view,.chat-page.admin-chat-view{height:100dvh;min-height:0}.collaboration-topbar{position:relative;z-index:20;flex-wrap:wrap;min-height:68px;padding:8px 10px}.collaboration-topbar>div:first-child{min-width:0;flex:1}.collaboration-topbar>div:first-child b,.collaboration-topbar>div:first-child small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-chat-grid.collaboration-grid{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:0;overflow:hidden}.staff-chat-grid.collaboration-grid>.chat-shell{height:100%;min-height:0}.mobile-details-toggle{display:inline-flex}.collaboration-sidebar{position:fixed;inset:0 auto 0 0;z-index:1002;width:min(90vw,390px);max-height:none;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow-y:auto;border-right:1px solid var(--line);background:#fff;box-shadow:18px 0 45px rgba(15,23,42,.2);transform:translateX(-105%);transition:transform .2s ease}.collaboration-sidebar .mobile-sidebar-head{display:flex}.chat-details-backdrop{display:block;position:fixed;inset:0;z-index:1001;background:rgba(15,23,42,.46);opacity:0;pointer-events:none;transition:opacity .2s ease}.chat-details-open .collaboration-sidebar{transform:translateX(0)}.chat-details-open .chat-details-backdrop{opacity:1;pointer-events:auto}.chat-details-open{overflow:hidden}.collaboration-grid .chat-shell{height:100%!important}.collaboration-grid .message-list{min-height:0}.collaboration-owner-summary{display:none}}
@media(max-width:600px){.auth-nav{display:grid;grid-template-columns:1fr}.profile-detail-value{display:block}.profile-detail-value strong{display:block;max-width:none;margin-top:4px;text-align:left}.profile-change-request>summary{width:100%}.profile-direct-actions{display:grid;grid-template-columns:1fr}.profile-direct-actions .btn,.profile-direct-actions form,.profile-direct-actions form button{width:100%}.patient-chat-page .msg{max-width:88%}.patient-chat-page .composer{padding-left:8px;padding-right:8px}.patient-chat-page .composer .icon-btn{width:40px;height:40px}.patient-chat-page .composer .send-btn{padding-left:14px;padding-right:14px}.chat-topbar-actions{margin-left:auto}}
/* NLH STAGE 3B USABILITY FIXES END */


/* NLH STAGE 3B DEPARTMENT ROUTING V16 START */
.patient-route-bar{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);background:#f8fbfa;color:#365c58}.patient-route-bar label{font-size:12px;font-weight:900;white-space:nowrap}.patient-route-bar select{min-width:0;height:36px;margin:0;padding:5px 34px 5px 10px;border:1px solid #b9d8d2;border-radius:10px;background:#fff;color:#0f4f49;font-weight:850}.patient-route-bar small{font-size:10px;color:#64748b}.msg-destination{color:#0f766e;font-weight:900}.composer-identity{flex:0 0 auto;min-height:28px;padding:6px 12px;border-top:1px solid var(--line);background:#eef8f6;color:#0f5f57;font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.patient-department-admin-list{display:grid;gap:7px;margin-bottom:12px}.patient-department-admin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fbfa}.patient-department-admin-row span{font-size:12px;font-weight:800}.patient-department-admin-row form,.patient-department-admin-row button{margin:0}
@media(max-width:600px){.patient-route-bar{grid-template-columns:auto minmax(0,1fr);padding:6px 8px}.patient-route-bar small{display:none}.patient-route-bar select{width:100%;font-size:12px}.composer-identity{padding-left:9px;padding-right:9px}}
/* NLH STAGE 3B DEPARTMENT ROUTING V16 END */

/* ==================================================
   NLH_RESPONSIVE_MOBILE_V18_1
   Consistent sizing across Android phones and PWAs.
   ================================================== */

html {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    font-size: 16px;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    main,
    .container,
    .page,
    .page-shell,
    .app-shell,
    .auth-shell,
    .chat-shell,
    .patient-chat-shell,
    .staff-chat-shell,
    .admin-chat-shell,
    .chat-layout,
    .chat-main,
    .chat-column,
    .conversation-column {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    button,
    .btn,
    .button,
    a.btn,
    a.button {
        min-height: 44px;
    }

    .composer,
    .chat-composer,
    .message-composer,
    .composer-row,
    .composer-main {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .composer input,
    .composer textarea,
    .chat-composer input,
    .chat-composer textarea,
    .message-composer input,
    .message-composer textarea {
        width: 100%;
        min-width: 0;
    }

    .message-bubble,
    .chat-bubble,
    .bubble,
    .message-card {
        max-width: 88%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {
    .message-bubble,
    .chat-bubble,
    .bubble,
    .message-card {
        max-width: 92%;
    }
}

@supports (height: 100dvh) {
    .patient-chat-shell,
    .staff-chat-shell,
    .admin-chat-shell,
    .chat-layout {
        min-height: 100dvh;
    }
}

/* ==================================================
   NLH_CHAT_ZOOM_PAN_V18_2
   Keep the normal chat layout locked to the phone width,
   while allowing browser pinch-zoom and panning after zoom.
   No height, fixed-composer, or horizontal-layout rules change.
   ================================================== */

body.chat-page,
body.chat-page .chat-shell,
body.chat-page .message-list {
    touch-action: pan-x pan-y pinch-zoom;
}

body.chat-page .message-list {
    overscroll-behavior-x: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ==================================================
   NLH_STRUCTURAL_CHAT_DOCK_V19
   Header stays in normal top layout. Sending-to and
   composer form one measured fixed dock. Short chats
   align near the bottom; long chats scroll normally.
   ================================================== */

:root {
    --patient-bottom-dock-height: 132px;
}

body.patient-chat-page .patient-topbar {
    position: sticky !important;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
    flex: 0 0 auto;
    z-index: 100;
}

body.patient-chat-page .chat-shell {
    padding-top: 0 !important;
    padding-bottom:
        calc(
            var(--patient-bottom-dock-height) +
            var(--patient-keyboard-offset)
        ) !important;
}

body.patient-chat-page .message-list::before {
    content: "";
    display: block;
    flex: 1 0 0;
    min-height: 0;
}

body.patient-chat-page .patient-bottom-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--patient-keyboard-offset);
    z-index: 80;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: #ffffff;
    box-shadow:
        0 -8px 28px rgba(15, 23, 42, 0.08);
    transition: bottom 120ms ease-out;
}

body.patient-chat-page
.patient-bottom-dock
.patient-route-bar {
    position: static !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
    box-shadow: none;
}

body.patient-chat-page
.patient-bottom-dock
.composer {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    min-height: var(--patient-composer-height);
    margin: 0 !important;
    flex: 0 0 auto;
}

body.patient-chat-page .message-list {
    scroll-padding-bottom: 16px;
}

/* ==================================================
   NLH_IN_FLOW_CHAT_DOCK_V21

   The bottom dock is now a normal flex child of chat-shell.
   Only message-list scrolls. Therefore the dock itself occupies
   real layout space and can never cover the final message.

   When Android does not resize 100dvh for the keyboard, the
   existing keyboard offset becomes bottom padding inside the
   fixed-height chat-shell, moving the in-flow dock above it.
   ================================================== */

body.patient-chat-page .chat-shell {
    padding-bottom:
        var(--patient-keyboard-offset) !important;
}

body.patient-chat-page .patient-bottom-dock {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;
    flex: 0 0 auto;
    transform: none !important;
}

body.patient-chat-page .message-list {
    flex: 1 1 auto;
    min-height: 0;
    scroll-padding-bottom: 16px;
}

/* ==================================================
   NLH_VISUAL_VIEWPORT_FRAME_V22

   HyperOS/Chrome can report a layout viewport taller than the
   portion actually visible above Android navigation controls.
   100dvh then places the in-flow composer below the visible edge.

   JavaScript supplies --patient-app-height from visualViewport.
   The whole patient chat is constrained to that exact height.
   Header and bottom dock remain non-scrolling flex children;
   only the message list scrolls.
   ================================================== */

:root {
    --patient-app-height: 100dvh;
}

html.patient-chat-root {
    width: 100%;
    height: var(--patient-app-height);
    min-height: var(--patient-app-height);
    max-height: var(--patient-app-height);
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.patient-chat-page {
    width: 100%;
    height: var(--patient-app-height) !important;
    min-height: var(--patient-app-height) !important;
    max-height: var(--patient-app-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.patient-chat-page .patient-topbar {
    flex: 0 0 auto;
}

body.patient-chat-page .chat-shell {
    flex: 1 1 0% !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.patient-chat-page .message-list {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
}

body.patient-chat-page .patient-bottom-dock {
    flex: 0 0 auto !important;
    min-height: 0;
}

/* ==================================================
   NLH_HEADER_REFRESH_AND_ZOOM_PAN_V23

   Normal scale:
   - retain the v22 fixed visible-screen frame
   - only the message list scrolls

   Pinch zoom:
   - temporarily release root/body overflow locks
   - allow horizontal and vertical visual-viewport panning

   Refresh:
   - a compact header button performs a full no-cache PHP reload
   ================================================== */

body.patient-chat-page .patient-heading {
    flex: 1 1 auto;
}

body.patient-chat-page .patient-refresh-button {
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3e3;
    border-radius: 13px;
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    touch-action: manipulation;
}

body.patient-chat-page .patient-refresh-button:hover,
body.patient-chat-page .patient-refresh-button:focus-visible {
    background: #0f766e;
    color: #ffffff;
}

body.patient-chat-page .patient-refresh-button:disabled {
    cursor: wait;
    opacity: 0.78;
}

body.patient-chat-page
.patient-refresh-button.is-refreshing span {
    animation: nlh-patient-refresh-spin 0.72s linear infinite;
}

@keyframes nlh-patient-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

html.patient-chat-root.patient-zoom-pan-enabled,
html.patient-chat-root.patient-zoom-pan-enabled
body.patient-chat-page {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
}

html.patient-chat-root.patient-zoom-pan-enabled
body.patient-chat-page .chat-shell,
html.patient-chat-root.patient-zoom-pan-enabled
body.patient-chat-page .message-list {
    touch-action: pan-x pan-y pinch-zoom !important;
    overscroll-behavior-x: auto !important;
}

@media (max-width: 600px) {
    body.patient-chat-page .patient-refresh-button {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 23px;
    }
}

/* ==================================================
   NLH_NOTIFICATION_HEALTH_MONITOR_V24
   Patient notification health and staff visibility.
   ================================================== */

body.patient-chat-page .notification-health-panel {
    flex: 0 0 auto;
    margin: 10px 12px 6px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

body.patient-chat-page .notification-health-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.patient-chat-page .notification-health-head p {
    margin: 4px 0 0;
    font-size: 0.9rem;
}

body.patient-chat-page .notification-health-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
}

body.patient-chat-page .notification-health-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

body.patient-chat-page .notification-health-details span {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 0.76rem;
}

body.patient-chat-page .notification-health-details b {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    overflow-wrap: anywhere;
}

body.patient-chat-page .notification-health-actions {
    margin-top: 10px;
}

body.patient-chat-page .notification-health-status {
    min-height: 0;
    margin-top: 7px;
}

body.patient-chat-page .notification-health-panel.ok-panel {
    border-color: #86efac;
    background: #f0fdf4;
}

body.patient-chat-page .notification-health-panel.ok-panel .notification-health-badge {
    background: #dcfce7;
    color: #166534;
}

body.patient-chat-page .notification-health-panel.notification-health-warning {
    border-color: #facc15;
    background: #fffbeb;
}

body.patient-chat-page .notification-health-panel.notification-health-warning .notification-health-badge {
    background: #fef3c7;
    color: #92400e;
}

body.patient-chat-page .notification-health-panel.notification-health-danger {
    border-color: #fca5a5;
    background: #fef2f2;
}

body.patient-chat-page .notification-health-panel.notification-health-danger .notification-health-badge {
    background: #fee2e2;
    color: #991b1b;
}

body.patient-chat-page .notification-health-panel.notification-health-checking {
    opacity: 0.82;
}

.staff-notification-health {
    padding: 11px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

.staff-notification-health.active {
    border-color: #86efac;
    background: #f0fdf4;
}

.staff-notification-health.warning {
    border-color: #facc15;
    background: #fffbeb;
}

.staff-notification-health.blocked {
    border-color: #fca5a5;
    background: #fef2f2;
}

.staff-notification-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.staff-notification-health-head span {
    font-size: 0.78rem;
    color: #475569;
}

.staff-notification-health dl {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

.staff-notification-health dl div {
    display: grid;
    grid-template-columns: minmax(115px, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
}

.staff-notification-health dt {
    color: #64748b;
    font-size: 0.78rem;
}

.staff-notification-health dd {
    margin: 0;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    body.patient-chat-page .notification-health-panel {
        margin: 7px 8px 4px;
        padding: 10px 11px;
        border-radius: 13px;
    }

    body.patient-chat-page .notification-health-details {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    body.patient-chat-page .notification-health-panel.ok-panel .notification-health-details {
        display: none;
    }

    body.patient-chat-page .notification-health-panel.ok-panel .notification-health-head p {
        display: none;
    }
}

/* ==================================================
   NLH_NOTIFICATION_HEADER_STATUS_V25

   Compact notification state in patient header:
   green check = active
   amber exclamation = action or repair needed
   red cross = blocked or unavailable

   The old full notification panel remains available to the
   notification client for its controls, but is visually replaced
   by this compact header indicator and one-line warning.
   ================================================== */

body.patient-chat-page .notification-health-panel {
    display: none !important;
}

body.patient-chat-page .notification-header-status {
    position: relative;
    width: 42px;
    height: 42px;
    margin-left: 8px;
    padding: 0;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3e3;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    touch-action: manipulation;
}

body.patient-chat-page .notification-header-bell {
    display: block;
    font-size: 23px;
    line-height: 1;
    transform: translateY(-1px);
}

body.patient-chat-page .notification-header-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #64748b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}

body.patient-chat-page
.notification-header-status[data-state="active"]
.notification-header-badge {
    background: #16a34a;
}

body.patient-chat-page
.notification-header-status[data-state="warning"]
.notification-header-badge {
    background: #f59e0b;
    color: #422006;
}

body.patient-chat-page
.notification-header-status[data-state="danger"]
.notification-header-badge {
    background: #dc2626;
}

body.patient-chat-page
.notification-header-status[data-state="checking"]
.notification-header-badge {
    background: #64748b;
}

body.patient-chat-page .notification-health-warning-line {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
    background: #fffbeb;
    color: #78350f;
    box-sizing: border-box;
    font-size: 0.82rem;
    font-weight: 700;
}

body.patient-chat-page
.notification-health-warning-line[hidden] {
    display: none !important;
}

body.patient-chat-page
.notification-health-warning-line.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

body.patient-chat-page .notification-warning-symbol {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #422006;
    font-size: 13px;
    font-weight: 900;
}

body.patient-chat-page
.notification-health-warning-line.is-danger
.notification-warning-symbol {
    background: #dc2626;
    color: #ffffff;
}

body.patient-chat-page .notification-warning-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.patient-chat-page .notification-warning-action {
    min-height: 28px;
    padding: 4px 10px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: #92400e;
    color: #ffffff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

body.patient-chat-page
.notification-health-warning-line.is-danger
.notification-warning-action {
    background: #991b1b;
}

@media (max-width: 600px) {
    body.patient-chat-page .notification-header-status {
        width: 40px;
        height: 40px;
        margin-left: 6px;
        border-radius: 12px;
    }

    body.patient-chat-page .notification-header-bell {
        font-size: 22px;
    }

    body.patient-chat-page .notification-health-warning-line {
        min-height: 36px;
        padding: 5px 8px;
        gap: 6px;
        font-size: 0.78rem;
    }

    body.patient-chat-page .notification-warning-action {
        padding-inline: 9px;
        font-size: 0.72rem;
    }
}

/* ==================================================
   NLH_FIRST_OPEN_NOTIFICATION_GATE_V28

   In the installed patient PWA, opening patient chat while
   notification health is not active shows one large action panel.
   It remains until permission and server subscription are healthy.
   The compact header bell continues to show ongoing status.
   ================================================== */

body.patient-chat-page .notification-launch-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
        rgba(6, 78, 70, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

body.patient-chat-page
.notification-launch-gate[hidden] {
    display: none !important;
}

body.patient-chat-page .notification-launch-card {
    width: min(100%, 520px);
    padding: 28px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    background: #ffffff;
    color: #102322;
    box-shadow:
        0 24px 70px rgba(2, 44, 39, 0.34);
    text-align: center;
    box-sizing: border-box;
}

body.patient-chat-page .notification-launch-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #ecfdf5;
    font-size: 50px;
    line-height: 1;
}

body.patient-chat-page .notification-launch-badge {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #115e59;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.patient-chat-page .notification-launch-card h2 {
    margin: 0 0 10px;
    color: #102322;
    font-size: clamp(1.45rem, 5vw, 2rem);
    line-height: 1.18;
}

body.patient-chat-page
.notification-launch-card > p {
    margin: 0 auto 18px;
    max-width: 420px;
    color: #4b6461;
    font-size: 0.98rem;
    line-height: 1.55;
}

body.patient-chat-page .notification-launch-settings {
    margin: 16px 0 18px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 15px;
    background: #fef2f2;
    color: #7f1d1d;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
}

body.patient-chat-page
.notification-launch-settings[hidden] {
    display: none !important;
}

body.patient-chat-page
.notification-launch-settings ol {
    margin: 8px 0 0;
    padding-left: 21px;
}

body.patient-chat-page .notification-launch-actions {
    display: grid;
    gap: 10px;
}

body.patient-chat-page
.notification-launch-actions button {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 15px;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    touch-action: manipulation;
}

body.patient-chat-page
.notification-launch-primary {
    border: 0;
    background: #0f766e;
    color: #ffffff;
    box-shadow:
        0 8px 20px rgba(15, 118, 110, 0.25);
}

body.patient-chat-page
.notification-launch-primary:disabled {
    cursor: wait;
    opacity: 0.7;
}

body.patient-chat-page
.notification-launch-secondary {
    border: 1px solid #99c9c4;
    background: #ffffff;
    color: #0f766e;
}

body.patient-chat-page
.notification-launch-status {
    min-height: 1.35em;
    margin: 12px 0 0 !important;
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 700;
}

body.patient-chat-page.notification-launch-gate-open {
    overflow: hidden !important;
}

@media (max-width: 600px) {
    body.patient-chat-page .notification-launch-gate {
        align-items: end;
        padding:
            14px
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    body.patient-chat-page .notification-launch-card {
        width: 100%;
        padding: 23px 18px 18px;
        border-radius: 23px;
    }

    body.patient-chat-page .notification-launch-icon {
        width: 72px;
        height: 72px;
        border-radius: 21px;
        font-size: 44px;
    }

    body.patient-chat-page
    .notification-launch-actions button {
        min-height: 50px;
    }
}