/* NOXER V20 — fullscreen chat, on-demand details, native-looking iOS toggles, global glass preference */
:root { --nx20-switch-on:#34c759; --nx20-switch-off:#45464d; }
body.messenger-page #messengerShell{height:100dvh!important;min-height:0!important;margin:0!important;width:100%!important;border:0!important;border-radius:0!important;position:relative!important;overflow:hidden!important;display:flex!important;align-items:stretch!important;}
@media(min-width:761px){
 body.messenger-page #messengerShell>.conversation-panel{height:100dvh!important;min-height:0!important;min-width:0!important;flex:1 1 auto!important;position:relative!important;width:auto!important;margin:0!important;padding:0!important;overflow:hidden!important;}
 body.messenger-page #messengerShell #activeChat:not(.hidden){display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-height:0!important;}
 body.messenger-page #messageScroller{flex:1 1 auto!important;min-height:0!important;width:100%!important;overflow-y:auto!important;}
 body.messenger-page #messageList{min-height:100%!important;width:100%!important;}
 body.messenger-page #conversationPanel .message-compose{flex:0 0 auto!important;}
 /* A real overlay: the chat keeps its width even while details are visible. */
 body.messenger-page #nx18Info:not(.nx18-hidden){position:absolute!important;top:9px!important;bottom:9px!important;right:10px!important;z-index:55!important;height:auto!important;max-height:none!important;margin:0!important;width:min(330px,calc(100vw - 360px))!important;min-width:258px!important;box-shadow:-16px 0 55px rgba(0,0,0,.54)!important;}
}
body.messenger-page #nx18Info.nx18-hidden{display:none!important}
body.messenger-page #conversationInfo{cursor:pointer!important}
/* Settings: language and Liquid Glass share one compact group. */
#nx12 .nx20-preferences{display:block!important;padding:0!important;overflow:visible!important;}
#nx12 .nx20-preferences .nx12-language-row{margin:0!important;display:flex!important;min-height:64px!important;padding:12px 16px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;}
#nx12 .nx20-glass-row{margin:0!important;padding:13px 16px!important;display:flex!important;align-items:center!important;gap:13px!important;min-height:70px;cursor:pointer;}
#nx12 .nx20-glass-symbol{flex:0 0 24px;font-size:22px;color:#c9d2ff;line-height:1;}
#nx12 .nx20-glass-label{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
#nx12 .nx20-glass-label b{font-weight:720;font-size:14px;color:#f3f3f6;}
#nx12 .nx20-glass-label small{font-size:11px;color:#9698a5;line-height:1.3;}
/* All actual checkboxes in settings are accessible iOS-style toggles. */
#nx12 input[type="checkbox"],#nx12 .nx20-ios-switch{
 -webkit-appearance:none!important;appearance:none!important;
 width:51px!important;height:31px!important;flex:0 0 51px!important;
 border:0!important;border-radius:999px!important;margin:0!important;padding:0!important;
 background:var(--nx20-switch-off)!important;position:relative!important;
 cursor:pointer!important;outline-offset:3px!important;transition:background-color .22s ease!important;
 box-shadow:inset 0 1px 3px rgba(0,0,0,.25)!important;
}
#nx12 input[type="checkbox"]::after{
 content:""!important;display:block!important;position:absolute!important;left:2px!important;top:2px!important;
 width:27px!important;height:27px!important;border-radius:50%!important;background:#fff!important;
 box-shadow:0 1px 3px #0005!important;transform:translateX(0)!important;transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
#nx12 input[type="checkbox"]:checked{background:var(--nx20-switch-on)!important;}
#nx12 input[type="checkbox"]:checked::after{transform:translateX(20px)!important;}
#nx12 input[type="checkbox"]:focus-visible{outline:2px solid #7caaff!important;}
#nx12 .nx12-switchrow{align-items:center!important;cursor:pointer;}
#nx18Info .nx18-switch{
 width:51px!important;height:31px!important;border-radius:999px!important;
 background:#45464d!important;transition:background-color .22s ease!important;
}
#nx18Info .nx18-switch::after{width:27px!important;height:27px!important;left:2px!important;top:2px!important;transform:translateX(0)!important;box-shadow:0 1px 3px #0005!important;transition:transform .22s ease!important;}
#nx18Info .nx18-switch[aria-checked="true"]{background:var(--nx20-switch-on)!important;}
#nx18Info .nx18-switch[aria-checked="true"]::after{transform:translateX(20px)!important;}
/* Visual mode applies only to glass surfaces. It never blurs the actual text or entire dialog. */
html[data-noxer-glass="on"] body.messenger-page #chatListPanel,
html[data-noxer-glass="on"] body.messenger-page #nx18Info,
html[data-noxer-glass="on"] body.messenger-page #activeChat .conversation-header,
html[data-noxer-glass="on"] body.messenger-page .compose-inner,
html[data-noxer-glass="on"] #nx12 .nx12-user-row,
html[data-noxer-glass="on"] #nx12 .nx12-setting-list,
html[data-noxer-glass="on"] #nx12 .nx12-settings-card,
html[data-noxer-glass="on"] #nx12 .nx12-qr,
html[data-noxer-glass="on"] #nx12 .nx12-editor{
 backdrop-filter:blur(17px) saturate(150%)!important;-webkit-backdrop-filter:blur(17px) saturate(150%)!important;
}
html[data-noxer-glass="on"] body.messenger-page #chatListPanel{background:rgba(19,19,24,.85)!important;}
html[data-noxer-glass="on"] body.messenger-page #nx18Info{background:rgba(18,18,23,.91)!important;}
html[data-noxer-glass="on"] #nx12 .nx12-user-row,
html[data-noxer-glass="on"] #nx12 .nx12-setting-list,
html[data-noxer-glass="on"] #nx12 .nx12-settings-card{background:rgba(28,28,33,.88)!important;}
html[data-noxer-glass="off"] body *:not(canvas),
html[data-noxer-glass="off"] body *::before,
html[data-noxer-glass="off"] body *::after{
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-noxer-glass="off"] body.messenger-page #chatListPanel{background:#121216!important;}
html[data-noxer-glass="off"] body.messenger-page #nx18Info{background:#121216!important;}
html[data-noxer-glass="off"] body.messenger-page #activeChat .conversation-header{background:#17171c!important;}
html[data-noxer-glass="off"] body.messenger-page .compose-inner{background:#141418!important;}
html[data-noxer-glass="off"] #nx12 .nx12-user-row,
html[data-noxer-glass="off"] #nx12 .nx12-setting-list,
html[data-noxer-glass="off"] #nx12 .nx12-settings-card{background:#18181a!important;}
html[data-noxer-glass="off"] #nx12 .nx12-qr,
html[data-noxer-glass="off"] #nx12 .nx12-editor{background:#0c0c0e!important;}
@media(max-width:760px){
 body.messenger-page #nx18Info:not(.nx18-hidden){position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100dvh!important;min-width:0!important;margin:0!important;z-index:125!important;}
 #nx12 .nx20-glass-row{padding:12px 13px!important;}
 #nx12 .nx20-preferences .nx12-language-row{padding:12px 13px!important;}
 #nx12 .nx20-glass-label small{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){#nx12 input[type="checkbox"],#nx12 input[type="checkbox"]::after,#nx18Info .nx18-switch,#nx18Info .nx18-switch::after{transition:none!important;}}

/* Legacy drawer gets the same switch, also useful when a local HTML build is used. */
#settingsDrawer .nx20-legacy-glass-row{display:flex;align-items:center;gap:12px;margin:12px 0 18px;padding:14px 12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:#1a1b20;cursor:pointer;}
#settingsDrawer .nx20-legacy-glass-row .nx20-glass-symbol{font-size:22px;color:#c9d2ff;}
#settingsDrawer .nx20-legacy-glass-row .nx20-glass-label{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
#settingsDrawer .nx20-legacy-glass-row b{font-size:13px;}
#settingsDrawer .nx20-legacy-glass-row small{font-size:10px;color:#aaaab2;}
#settingsDrawer input#nx20GlassLegacy{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 51px;width:51px;height:31px;border:0;border-radius:99px;background:#45464d;cursor:pointer;transition:background-color .22s ease;}
#settingsDrawer input#nx20GlassLegacy:checked{background:#34c759;}
#settingsDrawer input#nx20GlassLegacy::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0005;transition:transform .22s ease;}
#settingsDrawer input#nx20GlassLegacy:checked::after{transform:translateX(20px);}