/* QDoctor unified notification centre: isolated qn-* namespace. */
.qn-bell{position:fixed;z-index:7600;top:calc(12px + env(safe-area-inset-top));right:14px;width:43px;height:43px;border:1px solid rgba(255,255,255,.82);border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.86);color:var(--navy);box-shadow:0 8px 25px rgba(15,42,67,.22),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);cursor:pointer;transition:transform .16s ease,background .16s ease}
.qn-bell.on{display:flex}
/* Something unseen turns the whole bell amber; nothing unseen leaves it white.
   The colour is the signal -- it reads at a glance, which a small badge does
   not. The glyph stays navy in both states: white-on-white would vanish, and
   navy holds its contrast on amber as well as on white. */
.qn-bell.unread{background:#f6a821;border-color:rgba(180,116,10,.55)}
.qn-bell:active{transform:scale(.94);background:rgba(15,181,166,.22)}
.qn-bell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qn-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 4px;border:2px solid #fff;border-radius:10px;display:none;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:9.5px;font-weight:900}.qn-badge.on{display:flex}
.qn-overlay{position:fixed;z-index:7700;inset:0;display:none;background:rgba(7,26,44,.38);padding:calc(62px + env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));align-items:flex-start;justify-content:flex-end}.qn-overlay.on{display:flex}
.qn-drawer{width:min(430px,100%);max-height:min(680px,calc(100dvh - 82px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.85);border-radius:22px;background:rgba(247,251,253,.94);box-shadow:0 24px 70px rgba(7,26,44,.3);backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25)}
.qn-head{display:flex;align-items:center;gap:8px;padding:14px 15px;border-bottom:1px solid var(--line)}.qn-title{flex:1;min-width:0}.qn-title b{display:block;color:var(--navy);font-size:20px}.qn-title small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.qn-head button,.qn-retry{border:0;background:none;color:var(--teal-d);font:800 12px inherit;cursor:pointer;padding:8px}.qn-close{font-size:21px!important;color:var(--navy)!important}
.qn-list{overflow:auto;overscroll-behavior:contain}.qn-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;display:flex;gap:11px;padding:13px 15px;text-align:left;cursor:pointer}.qn-row.unread{background:rgba(15,181,166,.065)}.qn-row:active{background:rgba(15,181,166,.12)}
.qn-icon{flex:0 0 39px;width:39px;height:39px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f8f5;font-size:18px}.qn-copy{flex:1;min-width:0}.qn-copy h4{margin:0;color:var(--navy);font-size:13.5px;line-height:1.25}.qn-copy p{margin:4px 0 0;color:var(--ink);font-size:12px;line-height:1.42}.qn-copy time{display:block;color:var(--muted);font-size:10.5px;margin-top:5px}
.qn-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}.qn-link{border:0;background:none;color:#0866ff;font:800 12px inherit;padding:0;cursor:pointer}.qn-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#0866ff;margin-top:6px}.qn-action{display:inline-block;color:#a76500;font-size:10px;font-weight:900;margin-top:7px}.qn-state{padding:34px 24px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}.qn-state b{display:block;color:var(--navy);font-size:15px;margin-bottom:4px}
@media (max-width:620px){.qn-bell{top:calc(8px + env(safe-area-inset-top));right:10px}.qn-overlay{padding-left:8px;padding-right:8px;justify-content:center}.qn-drawer{width:100%}}
@media (prefers-reduced-motion:reduce){.qn-bell{transition:none}}