/* NOXER V44 | precise reference chat layout, with independently controlled glass messages.
   Runs last, correcting the legacy V18/20/43 layout cascade; no server or database changes. */
:root{--nx44-violet:#7862d5;--nx44-sidebar:#131317;--nx44-floating:#17171c;--nx44-content:570px}
body.messenger-page{background:#09090c!important;color:#f2f2f5!important}
body.messenger-page #messengerShell{background:#09090d!important}
body.messenger-page #messengerShell>.app-rail{background:#09090d!important}
body.messenger-page #chatListPanel{background:#121216!important;border-color:#29282f!important;box-shadow:none!important}
body.messenger-page #chatListPanel .list-panel-header{height:49px!important;min-height:49px!important;padding:10px 13px 5px!important}
body.messenger-page #panelLabel{font-size:17px!important;line-height:22px!important;letter-spacing:-.035em!important;font-weight:820!important}
body.messenger-page #chatListPanel .search-field{height:33px!important;min-height:33px!important;margin:0 11px!important;border-radius:20px!important;padding:0 11px!important;background:#25252a!important;border:1px solid #303036!important}
body.messenger-page #chatListPanel .search-field input{font-size:12px!important}
body.messenger-page #chatListPanel .search-field kbd{display:none!important}
body.messenger-page #chatListPanel .nx43-stories{min-height:87px!important;padding:10px 12px 6px!important;margin:0!important;gap:10px!important;scrollbar-width:none}
body.messenger-page #chatListPanel .nx43-stories::-webkit-scrollbar{display:none}
body.messenger-page #chatListPanel .nx43-story-person{min-width:55px!important;max-width:55px!important}
body.messenger-page #chatListPanel .nx43-story-ring{width:51px!important;height:51px!important}
body.messenger-page #chatListPanel .nx43-story-caption{font-size:10px!important;color:#a3a2ad!important}
body.messenger-page #chatListPanel .list-tabs{margin:0!important;padding:7px 10px 9px!important;gap:4px!important;min-height:42px!important}
body.messenger-page #chatListPanel .list-tab{border-radius:20px!important;color:#9996a6!important;padding:7px 12px!important;font-size:11px!important;font-weight:650!important}
body.messenger-page #chatListPanel .list-tab.active{background:#382c58!important;color:#ddcfff!important;box-shadow:none!important}
body.messenger-page #chatListPanel .chat-list-scroll{padding:0 8px 62px!important}
body.messenger-page #chatListPanel .chat-row{min-height:58px!important;padding:6px 9px!important;margin:0!important;width:100%!important;border-radius:10px!important;border:1px solid transparent!important;box-shadow:none!important;gap:9px!important}
body.messenger-page #chatListPanel .chat-row.active{background:#725cc5!important;color:#fff!important;border-color:#dcd3ff!important;box-shadow:inset 0 0 0 1px #a69ae9!important}
body.messenger-page #chatListPanel .chat-row.active .chat-row-excerpt{color:#e8e2fa!important}
body.messenger-page #chatListPanel .chat-row-title{font-size:12px!important;letter-spacing:-.015em!important}
body.messenger-page #chatListPanel #createChat{position:absolute!important;right:15px!important;bottom:15px!important;width:42px!important;height:42px!important;background:#7862ce!important;border-radius:50%!important;box-shadow:none!important;z-index:10!important}
body.messenger-page #chatListPanel #createChat:hover{background:#8d73e7!important}
body.messenger-page #chatListPanel .nx17-tab-plus{color:#aaa7b7!important}
/* Chat wallpaper matches the reference's finely repeated dark doodle pattern. */
body.messenger-page #messengerShell>#conversationPanel{background-color:#121119!important;background-image:url('/static/nx17-wallpaper.webp?v=17.0.0')!important;background-repeat:repeat!important;background-size:914px 938px!important;background-position:center top!important;isolation:isolate}
body.messenger-page #conversationPanel #activeChat{min-width:0!important;max-width:100%!important}
/* The floating 560px header, instead of the previous full-width navigation slab. */
body.messenger-page #messengerShell #conversationPanel #activeChat>.conversation-header{
 width:min(var(--nx44-content),calc(100% - 26px))!important;
 max-width:var(--nx44-content)!important;
 min-height:45px!important;height:45px!important;flex:0 0 45px!important;
 margin:10px auto 0!important;padding:4px 9px!important;
 gap:9px!important;box-sizing:border-box!important;
 background:rgba(24,24,28,.88)!important;border:1px solid rgba(255,255,255,.055)!important;
 border-radius:15px!important;
 box-shadow:0 4px 14px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important;
 backdrop-filter:blur(19px) saturate(1.2)!important;-webkit-backdrop-filter:blur(19px) saturate(1.2)!important;
}
body.messenger-page #conversationPanel #activeChat .conversation-header #conversationAvatar{width:33px!important;height:33px!important;flex:0 0 33px!important;border-radius:50%!important;font-size:12px!important}
body.messenger-page #conversationPanel #activeChat .conversation-heading{gap:2px!important;min-width:0!important;flex:1!important;line-height:1.1}
body.messenger-page #conversationPanel #activeChat .conversation-heading b{font-size:12.5px!important;font-weight:780!important;line-height:16px!important}
body.messenger-page #conversationPanel #activeChat .conversation-heading small{font-size:9.5px!important;line-height:12px!important;color:#92929e!important;opacity:1!important}
body.messenger-page #conversationPanel #activeChat .conversation-actions{display:flex!important;align-items:center!important;gap:3px!important;margin-left:auto!important;flex-shrink:0!important}
body.messenger-page #conversationPanel #activeChat .conversation-actions button{width:33px!important;height:34px!important;border:0!important;background:none!important;color:#aaa9b5!important;border-radius:11px!important;box-shadow:none!important;display:grid!important;place-items:center!important}
body.messenger-page #conversationPanel #activeChat .conversation-actions button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
body.messenger-page #conversationPanel #activeChat .conversation-actions svg{width:18px!important;height:18px!important}
/* Centered reading column. nx20's forced 100% message list is overridden here. */
body.messenger-page #conversationPanel #messageScroller{flex:1 1 auto!important;min-width:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.13) transparent}
body.messenger-page #messengerShell #conversationPanel #messageList{
 width:min(var(--nx44-content),100%)!important;max-width:var(--nx44-content)!important;
 min-height:100%!important;box-sizing:border-box!important;margin:0 auto!important;
 padding:18px 5px 17px!important;gap:4px!important;align-items:stretch!important;
 display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
}
body.messenger-page #conversationPanel #messageList .message-date{
 align-self:center!important;margin:8px 0 12px!important;padding:5px 9px!important;
 background:rgba(18,18,23,.78)!important;border:0!important;color:#eeeef3!important;
 border-radius:999px!important;letter-spacing:0!important;font-size:10px!important;
 line-height:14px!important;font-weight:750!important;box-shadow:0 2px 8px #0004!important}
body.messenger-page #conversationPanel #messageList .message-item,
body.messenger-page #conversationPanel #messageList .message-item.own{max-width:min(84%,460px)!important;margin-bottom:2px!important;min-width:0!important;gap:4px!important}
body.messenger-page #conversationPanel #messageList .message-item:not(.own){align-self:flex-start!important;flex-direction:row!important}
body.messenger-page #conversationPanel #messageList .message-item.own{align-self:flex-end!important;flex-direction:row-reverse!important}
/* Inbound: charcoal glass. Outbound: lavender glass. Keep content legible. */
body.messenger-page #conversationPanel #messageList .message-item .message-bubble,
body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item .message-bubble,
body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item.own .message-bubble{
 padding:7px 10px 6px!important;min-width:0!important;max-width:100%!important;
 background:linear-gradient(155deg,rgba(46,45,55,.72),rgba(26,26,34,.77))!important;
 border:1px solid rgba(255,255,255,.075)!important;
 border-radius:11px 11px 11px 4px!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 2px 9px #0002!important;
 backdrop-filter:blur(18px) saturate(1.15)!important;-webkit-backdrop-filter:blur(18px) saturate(1.15)!important;color:#f4f4f7!important;
}
body.messenger-page #conversationPanel #messageList .message-item.own .message-bubble{
 background:linear-gradient(145deg,rgba(147,127,246,.83),rgba(103,82,204,.84))!important;
 border-color:rgba(220,206,255,.22)!important;border-radius:11px 11px 4px 11px!important;
 box-shadow:inset 0 1px rgba(255,255,255,.15),0 3px 11px #0003!important;color:#fff!important;
}
body.messenger-page #conversationPanel #messageList .message-bubble::before{opacity:.55!important}
body.messenger-page #conversationPanel #messageList .message-body{font:500 12.5px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;letter-spacing:-.009em!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
body.messenger-page #conversationPanel #messageList .message-time{font:500 9px/1.25 system-ui,sans-serif!important;opacity:.66!important;margin-top:3px!important;color:inherit!important;white-space:nowrap!important}
body.messenger-page #conversationPanel #messageList .message-author{font-size:10px!important;margin-bottom:4px!important}
body.messenger-page #conversationPanel.nx21-service-chat #messageList{justify-content:flex-start!important}
/* Native bottom composer. Both original submit and MediaRecorder buttons keep their event listeners. */
body.messenger-page #conversationPanel #activeChat #messageForm{
 display:flex!important;position:relative!important;align-items:flex-end!important;gap:8px!important;
 width:min(var(--nx44-content),calc(100% - 26px))!important;min-width:0!important;max-width:var(--nx44-content)!important;
 margin:0 auto 11px!important;padding:0!important;box-sizing:border-box!important;
 background:none!important;border:0!important;flex:0 0 auto!important;overflow:visible!important;
}
body.messenger-page #conversationPanel #activeChat #messageForm>.compose-inner{
 width:auto!important;min-width:0!important;flex:1 1 auto!important;
 min-height:43px!important;box-sizing:border-box!important;
 padding:4px 7px!important;display:flex!important;align-items:center!important;gap:5px!important;
 border-radius:24px!important;border:1px solid rgba(255,255,255,.09)!important;
 background:rgba(23,23,28,.9)!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
 backdrop-filter:blur(18px) saturate(1.1)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1)!important;
}
body.messenger-page #conversationPanel #messageText{
 flex:1 1 auto!important;display:block!important;width:100%!important;min-width:0!important;
 min-height:29px!important;max-height:150px!important;margin:0!important;padding:4px 2px 4px 3px!important;
 font:400 12.5px/21px -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;
 color:#e5e4ec!important;background:transparent!important;border:0!important;outline:0!important;resize:none!important;
}
body.messenger-page #conversationPanel #messageText::placeholder{color:#82818c!important;opacity:1!important}
body.messenger-page #conversationPanel #messageForm #nx42EmojiBtn,
body.messenger-page #conversationPanel #messageForm #nx43EmojiBtn{
 width:29px!important;min-width:29px!important;height:32px!important;min-height:32px!important;
 padding:0!important;font-size:21px!important;color:#a99cdd!important;background:none!important;border:0!important;
 border-radius:50%!important;flex-shrink:0!important;display:grid!important;place-items:center!important;order:-3!important;
}
body.messenger-page #conversationPanel #messageForm .v3-attach-photo{display:grid!important;place-items:center!important;width:30px!important;min-width:30px!important;height:32px!important;order:3!important;opacity:.75!important;color:#bdbbc7!important;font-size:20px!important;cursor:pointer!important;filter:grayscale(1)!important;flex-shrink:0!important}
body.messenger-page #conversationPanel #messageForm .v3-attach-photo:hover{opacity:1!important}
body.messenger-page #conversationPanel #activeChat #messageForm>#recordVoice,
body.messenger-page #conversationPanel #activeChat #messageForm>.send-button{
 flex:0 0 44px!important;width:44px!important;height:44px!important;
 border-radius:50%!important;background:#7862d2!important;border:0!important;
 box-shadow:0 4px 14px rgba(35,23,77,.26)!important;color:#fff!important;
 cursor:pointer!important;display:grid!important;place-items:center!important;margin:0!important;
 font-size:0!important;filter:none!important;line-height:1!important;
}
body.messenger-page #conversationPanel #messageForm>#recordVoice:hover,
body.messenger-page #conversationPanel #messageForm>.send-button:hover{background:#8c75ec!important;transform:none!important}
body.messenger-page #messageForm>#recordVoice svg,
body.messenger-page #messageForm>.send-button svg{width:21px!important;height:21px!important;stroke:currentColor!important}
body.messenger-page #conversationPanel #activeChat #messageForm>.send-button{display:none!important}
body.messenger-page #conversationPanel #activeChat #messageForm.nx44-has-text>#recordVoice{display:none!important}
body.messenger-page #conversationPanel #activeChat #messageForm.nx44-has-text>.send-button{display:grid!important}
body.messenger-page #messageForm>#recordVoice.recording{background:#dd445f!important;animation:noxer-ripple 1.1s ease-out infinite!important}
body.messenger-page #messageForm #recordHint{position:absolute!important;bottom:53px!important;right:0!important;background:#211922!important;border:1px solid #51313f!important;padding:7px 10px!important;border-radius:10px!important;color:#ff93a6!important;font-size:11px!important}
body.messenger-page #conversationPanel #activeChat #typingState{width:min(var(--nx44-content),calc(100% - 28px))!important;margin:0 auto!important;box-sizing:border-box!important;flex:0 0 20px!important;height:20px!important;padding:0 9px!important;font-size:10px!important}
body.messenger-page #messageForm .compose-footnote{display:none!important}
body.messenger-page #nx43EmojiPicker{left:0!important;right:auto!important;bottom:calc(100% + 10px)!important;width:min(308px,calc(100vw - 30px))!important;height:341px!important;background:#242428ed!important;border:1px solid #414148!important;border-radius:13px!important;box-shadow:0 12px 45px #000a!important}
body.messenger-page #nx43EmojiPicker .nx43-emoji-search input{background:#333337!important;border-color:#48474d!important;border-radius:9px!important;font-size:12px!important}
body.messenger-page #nx43EmojiPicker .nx43-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:2px!important}
body.messenger-page #nx43EmojiPicker .nx43-emoji-grid button{font-size:27px!important;border-radius:8px!important}
body.messenger-page #nx43EmojiPicker .nx43-emoji-tabs{height:40px!important;background:#1d1d21!important}
html[data-noxer-glass="off"] body.messenger-page #conversationPanel #messageList .message-bubble,
html[data-noxer-glass="off"] body.messenger-page #activeChat .conversation-header,
html[data-noxer-glass="off"] body.messenger-page #messageForm>.compose-inner{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Tablet and compact windows: fluid inner column, no clipped header. */
@media (min-width:761px) and (max-width:960px){
 body.messenger-page #messengerShell>#chatListPanel{flex:0 0 260px!important;width:260px!important;min-width:260px!important}
 body.messenger-page #messengerShell #conversationPanel #activeChat>.conversation-header{width:calc(100% - 20px)!important}
 body.messenger-page #messengerShell #conversationPanel #messageList{padding-left:10px!important;padding-right:10px!important}
 body.messenger-page #conversationPanel #activeChat #messageForm{width:calc(100% - 20px)!important}
}
/* A mobile conversation is a full-screen view with a compact header and composer.
   Keep the existing back gesture and chat-open toggle (no new navigation engine). */
@media(max-width:760px){
 body.messenger-page #messengerShell{height:100dvh!important;overflow:hidden!important}
 body.messenger-page #messengerShell>.app-rail{display:none!important}
 body.messenger-page #messengerShell>#chatListPanel{margin:0!important;padding:0!important;width:100%!important;flex-basis:100%!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 body.messenger-page #chatListPanel .list-panel-header{padding:17px 16px 9px!important;height:55px!important}
 body.messenger-page #chatListPanel .nx43-stories{min-height:92px!important}
 body.messenger-page #messengerShell>#conversationPanel{position:absolute!important;inset:0!important;width:100%!important;height:100dvh!important;z-index:9!important;transform:translateX(105%)!important;transition:transform .22s ease!important;pointer-events:none!important}
 body.messenger-page #messengerShell.chat-open>#conversationPanel{transform:translateX(0)!important;pointer-events:auto!important}
 body.messenger-page #messengerShell #conversationPanel #activeChat>.conversation-header{width:calc(100% - 16px)!important;height:49px!important;flex-basis:49px!important;margin:7px 8px 0!important;padding:4px 7px!important}
 body.messenger-page #conversationPanel #activeChat .conversation-header #mobileBack{display:grid!important;width:29px!important;height:33px!important;min-width:29px!important;margin:0!important}
 body.messenger-page #conversationPanel #activeChat .conversation-heading b{font-size:12px!important}
 body.messenger-page #messengerShell #conversationPanel #messageList{width:100%!important;padding:14px 10px 14px!important;gap:5px!important}
 body.messenger-page #conversationPanel #messageList .message-item,body.messenger-page #conversationPanel #messageList .message-item.own{max-width:86%!important}
 body.messenger-page #conversationPanel #activeChat #typingState{height:17px!important;flex-basis:17px!important}
 body.messenger-page #conversationPanel #activeChat #messageForm{width:calc(100% - 18px)!important;max-width:none!important;margin:0 9px calc(8px + env(safe-area-inset-bottom))!important;gap:7px!important}
 body.messenger-page #conversationPanel #activeChat #messageForm>.compose-inner{min-height:43px!important}
 body.messenger-page #conversationPanel #activeChat #messageForm>#recordVoice,
 body.messenger-page #conversationPanel #activeChat #messageForm>.send-button{width:42px!important;height:42px!important;flex-basis:42px!important}
 body.messenger-page #nx43EmojiPicker{max-height:min(340px,50dvh)!important;bottom:calc(100% + 8px)!important}
 body.messenger-page .mobile-bottom-nav{z-index:7!important}
}
@media(max-width:360px){
 body.messenger-page #chatListPanel .list-tabs{gap:2px!important}
 body.messenger-page #chatListPanel .list-tab{padding:6px 8px!important}
 body.messenger-page #conversationPanel #messageForm .v3-attach-photo{width:26px!important;min-width:26px!important}
 body.messenger-page #conversationPanel #messageForm #nx42EmojiBtn{width:25px!important;min-width:25px!important}
}
@media(prefers-reduced-motion:reduce){body.messenger-page #messengerShell .conversation-panel{transition:none!important}}