/* FEATURES: @ mention picker, room cards (side panel + lobby), refresh button, private list with previews, blurred image cover.
   Script: js/function_extras.js (cover, refresh button, current-room marker) and js/function_mention.js (@ picker). */
/* ---------- @ mention picker ---------- */
.nx-mn { position:fixed; z-index:1500; max-height:min(300px, 50vh); overflow-y:auto; border-radius:12px; background:rgba(23,26,33,.98); color:#e9edf5; border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 28px rgba(0,0,0,.4); padding:4px; opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.nx-mn.nx-on { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.nx-mn-item { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:14px; }
.nx-mn-item:hover, .nx-mn-item.nx-sel { background:rgba(127,127,127,.22); }
.nx-mn-av { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 28px; background:rgba(127,127,127,.25); }
.nx-mn-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.nx-mn-dot { width:8px; height:8px; border-radius:50%; background:rgba(127,127,127,.5); flex:0 0 8px; }
.nx-mn-dot.nx-mn-on { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.7); }
.nx-mn-panel { padding:0; display:flex; flex-direction:column; max-height:min(380px, 60vh); overflow:hidden; }
.nx-mn-head { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.nx-mn-head > i { opacity:.6; }
.nx-mn-search { flex:1; min-width:0; background:rgba(127,127,127,.18); border:0; border-radius:8px; padding:7px 10px; color:inherit; font:inherit; font-size:14px; outline:none; }
.nx-mn-x { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:rgba(233,237,245,.6); cursor:pointer; }
.nx-mn-x:hover { background:rgba(255,255,255,.1); color:#fff; }
.nx-mn-list { overflow-y:auto; padding:4px; }
.nx-mn-none { padding:16px; text-align:center; opacity:.6; font-size:13px; }
.nx-mn-btn-on { color:#2f7df6; }
@media (prefers-reduced-motion:reduce) { .nx-mn { transition:none !important; } }

/* ===== NX ROOM CARDS: the room list in the side panel as a grid of cards ===== */
#container_room { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; padding-top:12px; }
#container_room .room_celem { display:flex; flex-direction:column; padding:0; border-radius:14px; overflow:hidden; background:rgba(128,128,128,.10); border:1px solid rgba(128,128,128,.20); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
#container_room .room_celem:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.28); border-color:rgba(128,128,128,.45); }
#container_room .room_celem:active { transform:scale(.98); }
#container_room .room_cicon_wrap { display:block; width:100%; height:auto; position:relative; }
#container_room .room_cicon { width:100%; height:96px; border-radius:0; object-fit:cover; background:rgba(128,128,128,.18); }
#container_room .room_cicon_wrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events:none; }
#container_room .room_content { display:flex; flex-direction:column; flex:1 1 auto; padding:9px 11px 10px 11px; min-width:0; }
#container_room .room_cname { font-size:14px; }
#container_room .room_cdescription { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.35; min-height:2.7em; padding:3px 0 0 0; margin-bottom:7px; }
#container_room .room_content .btable { display:flex; align-items:center; gap:6px; margin-top:auto; width:100%; }
#container_room .room_content .btable > div { display:block; width:auto; padding:0; }
#container_room .room_ccount { margin-left:auto; font-size:13px; padding:0 !important; }
#container_room .room_ctag { margin:0; }
#container_room .room_celem.nx-here { border-color:#2f7df6; box-shadow:0 0 0 1px #2f7df6 inset; }
#container_room .room_celem.nx-here .room_cname::after { content:'  \2022  here'; font-size:11px; font-weight:normal; color:#2f7df6; }
#container_room .room_celem[style*="display: none"] { display:none !important; }
@media (prefers-reduced-motion:reduce) { #container_room .room_celem { transition:none; } #container_room .room_celem:hover { transform:none; } }

/* ===== NX ROOM CARDS (lobby page): the big room list as a grid of cards ===== */
#container_rooms { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; padding:6px 0; }
#container_rooms .room_elem { display:flex; flex-direction:column; padding:0; border-radius:16px; overflow:hidden; background:rgba(128,128,128,.10); border:1px solid rgba(128,128,128,.20); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
#container_rooms .room_elem:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.30); border-color:rgba(128,128,128,.45); }
#container_rooms .room_elem:active { transform:scale(.985); }
#container_rooms .room_icon_wrap { display:block; width:100%; height:auto; position:relative; }
#container_rooms .room_icon { width:100%; height:150px; border-radius:0; object-fit:cover; background:rgba(128,128,128,.18); }
#container_rooms .room_icon_wrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events:none; }
#container_rooms .room_content { display:flex; flex-direction:column; flex:1 1 auto; padding:12px 14px 13px 14px; min-width:0; }
#container_rooms .room_name { font-size:16px; }
#container_rooms .room_description { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.4; min-height:4.2em; padding:4px 0 0 0; margin-bottom:10px; }
#container_rooms .room_content .btable { display:flex; align-items:center; gap:7px; margin-top:auto; width:100%; }
#container_rooms .room_content .btable > div { display:block; width:auto; padding:0; }
#container_rooms .room_count { margin-left:auto; font-size:14px; padding:0 !important; }
#container_rooms .room_tag { margin:0; }
@media (prefers-reduced-motion:reduce) { #container_rooms .room_elem { transition:none; } #container_rooms .room_elem:hover { transform:none; } }
@media (max-width:560px) { #container_rooms { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } #container_rooms .room_icon { height:100px; } #container_rooms .room_content { padding:10px 11px 11px 11px; } #container_rooms .room_name { font-size:14px; } #container_rooms .room_description { -webkit-line-clamp:2; min-height:2.8em; font-size:11px; } }

/* ---------- refresh button (bottom bar) ---------- */
.nx-refresh { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nx-refresh i { display:inline-block; transition:transform .35s ease; }
.nx-refresh:hover i { transform:rotate(60deg); }
.nx-refresh:focus-visible { outline:2px solid currentColor; outline-offset:-3px; border-radius:8px; }
.nx-refresh.nx-spin i { animation:nxSpin .8s linear infinite; }
@keyframes nxSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .nx-refresh.nx-spin i { animation:none; opacity:.5; } .nx-refresh i { transition:none; } }

/* ---------- private list: avatar, name, last message and its time ---------- */
.priv_mess { padding:10px 12px; }
.priv_mess .fmenu_avatar { width:44px; height:40px; }
.priv_mess .fmenu_avatar img { width:40px; height:40px; }
.priv_mess .fmenu_name { padding:0 8px; }
.priv_mess .fmenu_name .username { font-size:15px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.priv_prev { display:flex; gap:5px; margin:2px 0 0 0; font-size:12px; line-height:1.3; opacity:.72; }
.priv_prev .priv_txt { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.priv_prev .priv_time { flex:0 0 auto; white-space:nowrap; opacity:.85; }
.priv_unread .priv_prev { opacity:1; font-weight:700; }
.priv_mess .ulist_notify { width:36px; }

/* ---------- image cover: a heavily blurred picture with a pill on top ---------- */
a.nx-blur { position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; max-width:100%; min-width:150px; min-height:100px; border-radius:12px; background:#202636; cursor:pointer; vertical-align:bottom; -webkit-tap-highlight-color:transparent; }
a.nx-blur > img { filter:blur(40px) saturate(1.15); transform:scale(1.4); pointer-events:none; display:block; }
.nx-blur-pill { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; background:rgba(16,22,36,.78); color:#fff; font-size:12px; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; pointer-events:none; box-shadow:0 2px 12px rgba(0,0,0,.35); transition:background .15s; }
.nx-blur-pill b { font-weight:700; }
a.nx-blur:hover .nx-blur-pill { background:rgba(16,22,36,.94); }
a.nx-blur:focus-visible { outline:2px solid #2f7df6; outline-offset:2px; }
a.nx-unblur > img { animation:nxUnblur .4s ease both; }
@keyframes nxUnblur { from { filter:blur(34px); transform:scale(1.3); } to { filter:none; transform:none; } }
.cqmess a.nx-blur, .pquote a.nx-blur { min-width:80px; min-height:54px; }
.cqmess .nx-blur-pill, .pquote .nx-blur-pill { padding:5px 9px; }
.cqmess .nx-blur-pill b, .pquote .nx-blur-pill b { display:none; }
@media (prefers-reduced-motion:reduce) { a.nx-unblur > img { animation:none; } }

@keyframes nxSpin { to { transform:rotate(360deg); } }

/* skeleton loading */
#inside_wrap_chat, #chat_right:not(.cright2) { position:relative; }
.nx-sk { position:absolute; left:0; right:0; z-index:2; pointer-events:none; overflow:hidden; }
#inside_wrap_chat > .nx-sk { top:0; bottom:0; padding:10px 0; }
#chat_right > .nx-sk { top:52px; bottom:0; padding:6px 0; background:inherit; }
.nx-sk-msg { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; }
.nx-sk-usr { display:flex; gap:10px; align-items:center; padding:5px 10px; }
.nx-sk-av, .nx-sk-l1, .nx-sk-l2 { display:block; background:rgba(127,127,127,.22); position:relative; overflow:hidden; }
.nx-sk-av { flex:0 0 44px; width:44px; height:44px; border-radius:50%; }
.nx-sk-tx { flex:1; min-width:0; }
.nx-sk-l1 { height:12px; border-radius:6px; margin:6px 0 9px; }
.nx-sk-l2 { height:11px; border-radius:6px; }
.nx-sk-usr .nx-sk-l2 { display:none; }
.nx-sk-usr .nx-sk-l1 { height:14px; margin:0; }
.nx-sk-av::after, .nx-sk-l1::after, .nx-sk-l2::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation:nxShimmer 1.3s infinite; }
@keyframes nxShimmer { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .nx-sk-av::after, .nx-sk-l1::after, .nx-sk-l2::after { animation:none; } }

/* chat requests + empty private chat */
#nx_dm_empty { position:absolute; left:0; right:0; top:0; bottom:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:14px; pointer-events:none; }
.nx-dm-card { pointer-events:auto; text-align:center; max-width:340px; }
.nx-dm-av { width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 10px; }
.nx-dm-t { font-size:17px; font-weight:700; margin-bottom:6px; }
.nx-dm-s { font-size:12px; opacity:.7; line-height:1.45; margin-bottom:14px; }
.nx-dm-q { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.nx-dm-chip { border:1px solid rgba(127,127,127,.4); background:rgba(127,127,127,.14); color:inherit; font:inherit; font-size:13px; padding:8px 14px; border-radius:18px; cursor:pointer; transition:background .15s, transform .12s; }
.nx-dm-chip:hover { background:rgba(127,127,127,.28); }
.nx-dm-chip:active { transform:scale(.95); }
#nx_dm_bar { position:absolute; left:0; right:0; top:0; z-index:4; display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:12px; background:rgba(20,20,22,.92); border-bottom:1px solid rgba(127,127,127,.3); }
.nx-dm-bt { flex:1; min-width:0; }
.nx-dm-ba { display:flex; gap:6px; flex:0 0 auto; }
#nx_dm_bar button { border:0; border-radius:14px; padding:6px 12px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; color:#fff; }
.nx-dm-yes { background:#22a55a; }
.nx-dm-no { background:rgba(127,127,127,.5); }
#nx_dm_note { padding:10px 14px; text-align:center; font-size:12px; opacity:.85; }
#priv_input.nx-dm-lock #private_input { display:none !important; }

/* the Emirates rank icon is a tall emblem, so it needs more room than the other rank icons to read well */
img[src$="emirates.svg"].chat_rank { height:20px; margin:-5px 4px -5px 0; vertical-align:middle; }
img[src$="emirates.svg"].list_rank { height:24px; margin:-5px 0; vertical-align:middle; }
img[src$="emirates.svg"].pro_ranking { height:24px; margin:-5px 0; vertical-align:middle; }
.ulist_rank img[src$="emirates.svg"], .sub_list_rank img[src$="emirates.svg"] { height:24px; margin:-5px auto; }
img[src$="emirates.svg"].menuranking { height:20px; vertical-align:middle; }