/* NOXER V22: enhanced liquid-glass bubbles, iOS-like actions, smooth info drawer. */
body.messenger-page #conversationTitle,
body.messenger-page #conversationAvatar{cursor:pointer!important}
body.messenger-page #conversationTitle:hover{color:#fff!important}
#nx22ChatActions[hidden],#nx22AutoBackdrop[hidden]{display:none!important}
#nx22ChatActions{
 position:fixed;z-index:8500;width:228px;padding:7px;
 background:rgba(22,23,32,.84);
 backdrop-filter:blur(36px) saturate(185%)!important;
 -webkit-backdrop-filter:blur(36px) saturate(185%)!important;
 border:1px solid rgba(255,255,255,.19);border-radius:19px;
 box-shadow:0 28px 85px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);
 animation:nx22-menu-in .21s cubic-bezier(.2,.8,.2,1) both;
}
#nx22ChatActions button{width:100%;height:42px;background:transparent;border:0;color:#f4f2ff;display:flex;align-items:center;gap:11px;padding:0 12px;text-align:left;font-size:13px;font-weight:600;border-radius:11px;cursor:pointer}
#nx22ChatActions button svg{width:19px;height:19px;flex:0 0 19px;color:#c8c7d3}
#nx22ChatActions button span{flex:1}
#nx22ChatActions button small{font-size:10px;color:#8c8b9e}
#nx22ChatActions button:hover:not(:disabled),#nx22ChatActions button:focus-visible{background:rgba(255,255,255,.105);outline:none}
#nx22ChatActions button.danger{color:#ff808b}
#nx22ChatActions button.danger svg{color:#ff808b}
#nx22ChatActions button:disabled{opacity:.40;cursor:not-allowed}
@keyframes nx22-menu-in{from{opacity:0;transform:translateY(-9px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* The info panel never changes chat width. Closing animates before hidden is applied. */
body.messenger-page #nx18Info:not(.nx18-hidden){display:flex!important;opacity:1}
body.messenger-page #nx18Info.nx22-enter{animation:nx22-info-enter .34s cubic-bezier(.18,.84,.28,1) both!important}
body.messenger-page #nx18Info.nx22-leaving{animation:nx22-info-exit .255s cubic-bezier(.5,0,.82,.2) both!important;pointer-events:none!important}
@keyframes nx22-info-enter{from{opacity:0;transform:translate3d(54px,0,0) scale(.978)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes nx22-info-exit{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(68px,0,0) scale(.978)}}

/* Strong liquid glass is limited to the actual surfaces. Do not blur message text. */
html[data-noxer-glass="on"] body.messenger-page #messageList .message-item .message-bubble,
html[data-noxer-glass="on"] body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item .message-bubble,
html[data-noxer-glass="on"] body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item.own .message-bubble{
 position:relative;
 isolation:isolate;
 background:rgba(40,43,57,.33)!important;
 backdrop-filter:blur(27px) saturate(215%) brightness(1.06)!important;
 -webkit-backdrop-filter:blur(27px) saturate(215%) brightness(1.06)!important;
 border:1px solid rgba(255,255,255,.25)!important;
 box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(255,255,255,.025)!important;
 border-radius:18px!important;
 transition:background .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
html[data-noxer-glass="on"] body.messenger-page #messageList .message-item.own .message-bubble{
 background:rgba(108,89,168,.38)!important;
 border-color:rgba(194,175,255,.3)!important;
}
html[data-noxer-glass="on"] body.messenger-page #messageList .message-bubble::before{
 content:"";position:absolute;inset:0 0 52% 0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));z-index:-1;
}
html[data-noxer-glass="on"] body.messenger-page #messageList .message-bubble .message-body,
html[data-noxer-glass="on"] body.messenger-page #messageList .message-bubble .message-time{position:relative;z-index:1}
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"] body.messenger-page #nx22ChatActions{
 backdrop-filter:blur(34px) saturate(190%)!important;
 -webkit-backdrop-filter:blur(34px) saturate(190%)!important;
 background:rgba(20,22,30,.67)!important;
 border:1px solid rgba(255,255,255,.16)!important;
 box-shadow:0 10px 45px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
html[data-noxer-glass="on"] body.messenger-page #nx18Info{background:rgba(17,19,28,.78)!important}
html[data-noxer-glass="on"] body.messenger-page #chatListPanel{background:rgba(19,20,27,.73)!important;backdrop-filter:blur(32px) saturate(180%)!important;-webkit-backdrop-filter:blur(32px) saturate(180%)!important}

/* Off means NO backdrop filter, no translucent chat bubbles, no glass shine. */
html[data-noxer-glass="off"] body.messenger-page #messageList .message-item .message-bubble,
html[data-noxer-glass="off"] body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item .message-bubble,
html[data-noxer-glass="off"] body.messenger-page #conversationPanel.nx21-service-chat #messageList .message-item.own .message-bubble{
 background:#20202a!important;
 border:1px solid #383844!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 border-radius:15px!important;
}
html[data-noxer-glass="off"] body.messenger-page #messageList .message-item.own .message-bubble{background:#3a3052!important}
html[data-noxer-glass="off"] body.messenger-page #messageList .message-bubble::before{display:none!important}
html[data-noxer-glass="off"] body.messenger-page #nx22ChatActions{
 background:#1c1c25!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 box-shadow:0 20px 45px rgba(0,0,0,.45)!important;
}

/* Type + record indicators: spring dots, gentle breathing ring. */
body.messenger-page #typingState.nx22-typing-active{
 display:flex!important;align-items:center;gap:7px!important;
 width:max-content;max-width:calc(100% - 35px);margin:0 0 6px 15px!important;
 padding:9px 14px;border:1px solid rgba(160,140,255,.25);border-radius:16px;
 background:rgba(32,27,49,.65);color:#d5c9ff;font-size:12px;
 animation:nx22-typing-enter .28s cubic-bezier(.2,.84,.3,1) both;
 box-shadow:0 6px 25px rgba(0,0,0,.13);
}
body.messenger-page #typingState.nx22-typing-active::before{
 content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#b8a5ff;
 box-shadow:0 0 0 4px rgba(166,143,255,.12);animation:nx22-breathe 1.2s ease-in-out infinite;
}
body.messenger-page #typingState .v3-typing-bubbles{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto!important}
body.messenger-page #typingState .v3-typing-bubbles i{
 width:5px!important;height:5px!important;opacity:1!important;background:#bfb0ff!important;
 border-radius:50%;animation:nx22-dots 1.15s ease-in-out infinite!important;
}
body.messenger-page #typingState .v3-typing-bubbles i:nth-child(2){animation-delay:.15s!important}
body.messenger-page #typingState .v3-typing-bubbles i:nth-child(3){animation-delay:.30s!important}
body.messenger-page #messageForm.nx22-writing .compose-inner{
 border-color:rgba(180,159,255,.4)!important;
 box-shadow:0 0 0 3px rgba(158,139,255,.08),0 10px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)!important;
 transition:box-shadow .28s ease,border-color .28s ease!important;
}
body.messenger-page #messageForm.nx22-writing .send-button{transform:scale(1.07);filter:drop-shadow(0 0 10px rgba(145,108,255,.3));transition:transform .24s ease!important}
@keyframes nx22-breathe{0%,100%{box-shadow:0 0 0 4px rgba(166,143,255,.09);transform:scale(.92)}50%{box-shadow:0 0 0 7px rgba(166,143,255,.22);transform:scale(1.15)}}
@keyframes nx22-dots{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes nx22-typing-enter{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

#nx22AutoBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;z-index:8600;padding:20px;animation:nx22-menu-in .18s ease both}
#nx22AutoBackdrop .nx22-auto-dialog{max-width:420px;width:100%;padding:20px;border-radius:24px;background:#1a1a23;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px #000a;color:#f5f5fb}
#nx22AutoBackdrop .nx22-auto-head{display:flex;align-items:center;gap:12px}
#nx22AutoBackdrop h2{font-size:19px;margin:0;font-weight:800}
#nx22AutoBackdrop .nx22-auto-head button{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#282833;border:0;color:white;cursor:pointer}
#nx22AutoBackdrop .nx22-auto-head svg{width:17px;height:17px}
#nx22AutoBackdrop p{color:#a9a7b6;font-size:13px;line-height:1.5;margin:16px 0}
#nx22AutoBackdrop .nx22-auto-options{display:grid;gap:8px}
#nx22AutoBackdrop .nx22-auto-options button{border:1px solid #363642;border-radius:12px;background:#242431;padding:13px;text-align:left;font-size:13px;color:#fff;cursor:pointer}
#nx22AutoBackdrop .nx22-auto-options button:hover{background:#303044}
@media(max-width:760px){
 #nx22ChatActions{bottom:12px!important;top:auto!important;left:12px!important;right:12px!important;width:auto!important;border-radius:22px}
 #nx22ChatActions button{height:47px}
 body.messenger-page #typingState.nx22-typing-active{margin-left:10px!important}
}
@media(prefers-reduced-motion:reduce){
 body.messenger-page #nx18Info.nx22-enter,body.messenger-page #nx18Info.nx22-leaving,#nx22ChatActions,#nx22AutoBackdrop,
 body.messenger-page #typingState.nx22-typing-active,body.messenger-page #typingState .v3-typing-bubbles i,body.messenger-page #typingState.nx22-typing-active::before{animation:none!important}
}
#nx22GiftBackdrop[hidden]{display:none!important}
#nx22GiftBackdrop{position:fixed;inset:0;background:#000b;z-index:8700;display:grid;place-items:center;padding:16px}
#nx22GiftBackdrop .nx22-gift-dialog{background:#191a22;border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 80px #000a;border-radius:22px;width:min(420px,100%);max-height:min(75dvh,600px);padding:18px;display:flex;flex-direction:column;gap:12px;color:#fff}
#nx22GiftBackdrop .nx22-gift-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
#nx22GiftBackdrop h2{font-size:18px;margin:0}
#nx22GiftBackdrop #nx22GiftClose{width:32px;height:32px;border-radius:50%;border:0;background:#30303b;color:#fff;font-size:20px;cursor:pointer}
#nx22GiftBackdrop p{color:#aaa9bb;font-size:12px;margin:0}
#nx22GiftBackdrop #nx22GiftList{display:grid;gap:8px;overflow-y:auto;min-height:80px}
#nx22GiftBackdrop .nx22-gift-option{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:13px;border:1px solid #33333e;background:#23232d;color:#fff;text-align:left;cursor:pointer}
#nx22GiftBackdrop .nx22-gift-option:hover{background:#2c2c39}
#nx22GiftBackdrop .nx22-gift-option img{width:52px;height:52px;object-fit:contain;border-radius:10px}