/* asia.com.ge — site chat (2026-10-11), drawn by js/nx-chat.js. Widget at the bottom right; the page /chat/. */ .nxc { --a1: #8B5CF6; --a2: #EC4899; --bg: #0E0B1C; --bg2: #151027; --bg3: #1C1636; --ink: #F3F0FF; --mute: #A49CC6; --line: rgba(255, 255, 255, .08); --mine1: #7C3AED; --mine2: #C026D3; --fs: 14px; font-family: inherit; color: var(--ink); } .nxc[data-accent="pink"] { --a1: #EC4899; --a2: #F97316; --mine1: #DB2777; --mine2: #F43F5E; } .nxc[data-accent="blue"] { --a1: #3B82F6; --a2: #22D3EE; --mine1: #2563EB; --mine2: #0891B2; } .nxc[data-accent="green"] { --a1: #10B981; --a2: #84CC16; --mine1: #059669; --mine2: #65A30D; } .nxc[data-font="s"] { --fs: 13px; } .nxc[data-font="l"] { --fs: 16px; } .nxc *, .nxc *::before, .nxc *::after { box-sizing: border-box; } .nxc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .nxc button { font: inherit; } .nxc [hidden] { display: none !important; } /* ================= launcher ================= */ .nxc-fab { position: fixed; z-index: 9990; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 60px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 20px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; cursor: pointer; box-shadow: 0 14px 34px rgba(139, 92, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, border-radius .25s, box-shadow .2s; } .nxc-fab svg { width: 28px; height: 28px; fill: rgba(255, 255, 255, .18); stroke-width: 1.9; } .nxc-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 40px rgba(236, 72, 153, .5); } .nxc-fab::after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; inset: -5px; border-radius: 24px; border: 2px solid rgba(236, 72, 153, .5); opacity: 0; animation: nxcRing 2.6s ease-out infinite; pointer-events: none; } .nxc.is-open .nxc-fab { border-radius: 50%; } .nxc.is-open .nxc-fab::after { display: none; } @keyframes nxcRing { 0% { opacity: .9; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } } .nxc-fab-n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #fff; color: #BE185D; font-style: normal; font-size: 11.5px; font-weight: 900; line-height: 22px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); } .nxc-fab-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); padding: 7px 12px; border-radius: 10px; background: #1C1636; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } .nxc-fab:hover .nxc-fab-tip { opacity: 1; transform: translate(0, -50%); } .nxc.is-open .nxc-fab-tip { display: none; } /* ================= panel ================= */ .nxc-panel { display: flex; flex-direction: column; min-height: 0; background: radial-gradient(500px 200px at 100% 0%, rgba(236, 72, 153, .12), transparent 70%), radial-gradient(500px 260px at 0% 0%, rgba(139, 92, 246, .18), transparent 70%), linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid rgba(255, 255, 255, .1); } .nxc.is-widget .nxc-panel { position: fixed; z-index: 9991; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 390px; height: min(620px, calc(100vh - 120px)); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(139, 92, 246, .15); opacity: 0; transform: translateY(16px) scale(.97); transform-origin: 100% 100%; pointer-events: none; visibility: hidden; transition: opacity .22s ease, transform .22s ease, width .25s ease, height .25s ease, visibility 0s .22s; overflow: hidden; } .nxc.is-widget.is-open .nxc-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s ease, transform .22s ease, width .25s ease, height .25s ease; } .nxc.is-widget.is-big .nxc-panel { width: min(860px, calc(100vw - 40px)); height: calc(100vh - 120px); } .nxc-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); } .nxc-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 8px 20px rgba(139, 92, 246, .35); } .nxc-logo svg { width: 22px; height: 22px; fill: rgba(255, 255, 255, .2); } .nxc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nxc-title b { font-size: 16.5px; font-weight: 900; letter-spacing: .01em; } .nxc-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); } .nxc-online i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); animation: nxcPulse 2s infinite; } @keyframes nxcPulse { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .05); } } .nxc-hbtns { display: flex; gap: 4px; } .nxc-ib { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .06); color: var(--ink) !important; cursor: pointer; text-decoration: none !important; transition: background .15s; } .nxc-ib:hover { background: rgba(255, 255, 255, .14); } .nxc-ib svg { width: 18px; height: 18px; } /* rooms */ .nxc-rooms { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .nxc-rooms::-webkit-scrollbar { display: none; } .nxc-room { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--mute); font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .nxc-room svg { width: 17px; height: 17px; } .nxc-room:hover { color: var(--ink); background: rgba(255, 255, 255, .07); } .nxc-room.is-on { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(139, 92, 246, .35); } .nxc-room-t { display: flex; flex-direction: column; text-align: left; line-height: 1.2; } .nxc-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #F43F5E; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; line-height: 20px; } .nxc-room.is-on .nxc-unread { display: none; } /* messages */ .nxc-main { position: relative; flex: 1; min-height: 0; display: flex; } .nxc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 6px 14px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; font-size: var(--fs); } .nxc-loading, .nxc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 180px; color: var(--mute); text-align: center; padding: 20px; } .nxc-loading i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--a1); border-right-color: var(--a2); animation: nxcSpin .8s linear infinite; } @keyframes nxcSpin { to { transform: rotate(360deg); } } .nxc-empty svg { width: 46px; height: 46px; color: var(--a1); opacity: .8; } .nxc-empty b { color: var(--ink); font-size: 16px; } .nxc-day { display: flex; align-items: center; gap: 10px; margin: 12px 8px 8px; color: var(--mute); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; } .nxc-day::before, .nxc-day::after { content: ""; flex: 1; height: 1px; background: var(--line); } .nxc-msg { position: relative; display: flex; gap: 10px; padding: 6px 8px; margin-top: 4px; border-radius: 14px; transition: background .15s; } .nxc-msg.is-cont { margin-top: 0; padding-top: 2px; } .nxc-msg:hover { background: rgba(255, 255, 255, .035); } .nxc-msg.is-mention { background: linear-gradient(90deg, rgba(236, 72, 153, .14), transparent); box-shadow: inset 3px 0 0 var(--a2); } .nxc-msg.is-flash { animation: nxcFlash 1.4s ease; } @keyframes nxcFlash { 0%, 40% { background: rgba(139, 92, 246, .3); } } .nxc-ava { flex: 0 0 34px; width: 34px; } .nxc-ava img, .nxc-ava span { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; object-fit: cover; color: #fff; font-weight: 900; font-size: 15px; } .nxc-body { flex: 1; min-width: 0; } .nxc-meta { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; } .nxc-meta b { font-size: .93em; font-weight: 800; cursor: pointer; } .nxc-meta b:hover { text-decoration: underline; } .nxc-meta time { font-size: 11px; color: var(--mute); } .nxc-badge { padding: 1px 7px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 800; background: rgba(139, 92, 246, .22); color: #DDD6FE; } .nxc-badge[data-g="1"], .nxc-badge[data-g="8"] { background: linear-gradient(135deg, #F59E0B, #EF4444); color: #fff; } .nxc-badge[data-g="2"] { background: rgba(34, 197, 94, .2); color: #86EFAC; } .nxc-badge[data-g="6"] { background: rgba(59, 130, 246, .22); color: #93C5FD; } .nxc-badge[data-g="7"] { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #1C1404; } .nxc-badge.is-guest { background: rgba(255, 255, 255, .08); color: var(--mute); } .nxc-text { line-height: 1.5; color: #E9E5FA; word-wrap: break-word; overflow-wrap: anywhere; } .nxc-text a { color: #C4B5FD; text-decoration: underline; } .nxc-at { color: #F9A8D4; font-weight: 700; } .nxc-at.is-me { background: rgba(236, 72, 153, .22); border-radius: 5px; padding: 0 3px; } .nxc-big-emo { font-size: 2em; line-height: 1.2; } .nxc-msg.is-mine .nxc-text { display: inline-block; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, var(--mine1), var(--mine2)); color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, .25); } .nxc-msg.is-mine .nxc-text a, .nxc-msg.is-mine .nxc-at { color: #fff; } .nxc-quote { display: flex; flex-direction: column; gap: 1px; max-width: 100%; margin: 2px 0 5px; padding: 5px 10px; border: 0; border-left: 3px solid var(--a1); border-radius: 0 9px 9px 0; background: rgba(255, 255, 255, .05); color: var(--mute); text-align: left; cursor: pointer; font-size: .86em; } .nxc-quote b { color: #DDD6FE; } .nxc-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-acts { position: absolute; top: -10px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #221B40; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .12s; } .nxc-msg:hover .nxc-acts, .nxc-msg:focus-within .nxc-acts { opacity: 1; pointer-events: auto; } .nxc-acts button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--mute); cursor: pointer; } .nxc-acts button:hover { background: rgba(255, 255, 255, .1); color: #fff; } .nxc-acts svg { width: 15px; height: 15px; } @media (hover: none) { .nxc-acts { opacity: .85; pointer-events: auto; position: static; margin-left: auto; align-self: flex-start; background: none; border: 0; box-shadow: none; } } .nxc-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); } .nxc-jump svg { width: 16px; height: 16px; } .nxc.is-compact .nxc-msg { padding: 3px 8px; margin-top: 1px; } .nxc.is-compact .nxc-ava, .nxc.is-compact .nxc-ava img, .nxc.is-compact .nxc-ava span { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; border-radius: 9px; } .nxc.no-avatars .nxc-ava { display: none; } /* guest prompt */ .nxc-guest { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(236, 72, 153, .16)); border: 1px solid rgba(236, 72, 153, .35); font-size: 12.5px; } .nxc-guest > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nxc-guest b { font-size: 13.5px; } .nxc-guest span { color: #DCD6F3; } .nxc-guest-i { font-size: 20px; } .nxc-guest .nxc-x { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .2); color: var(--mute); cursor: pointer; } .nxc-guest .nxc-x svg { width: 14px; height: 14px; } .nxc-guest.is-muted { background: rgba(244, 63, 94, .14); border-color: rgba(244, 63, 94, .4); color: #FDA4AF; justify-content: center; } .nxc-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--ink) !important; font-size: 12.5px; font-weight: 800; cursor: pointer; text-decoration: none !important; white-space: nowrap; } .nxc-btn.is-main { background: linear-gradient(135deg, var(--a1), var(--a2)); border-color: transparent; color: #fff !important; } /* composer */ .nxc-form { padding: 10px 12px 10px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .15); } .nxc-compose { display: flex; align-items: flex-end; gap: 8px; padding: 5px; border-radius: 16px; background: var(--bg3); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .15s, box-shadow .15s; } .nxc-compose:focus-within { border-color: var(--a1); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); } .nxc-in { flex: 1; min-width: 0; height: 38px; max-height: 140px; padding: 9px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.4; resize: none; outline: none; } .nxc-in::placeholder { color: #7D769E; } .nxc-in:disabled { opacity: .5; } .nxc-emo-b { background: none; color: var(--mute) !important; } .nxc-send { flex: 0 0 40px; width: 40px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(139, 92, 246, .4); transition: transform .12s; } .nxc-send:hover { transform: scale(1.05); } .nxc-send:disabled { opacity: .5; transform: none; } .nxc-send svg { width: 19px; height: 19px; } .nxc-emoji { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: 8px; padding: 8px; border-radius: 14px; background: var(--bg3); border: 1px solid rgba(255, 255, 255, .1); } .nxc-emoji button { height: 32px; border: 0; border-radius: 8px; background: none; font-size: 19px; cursor: pointer; } .nxc-emoji button:hover { background: rgba(255, 255, 255, .1); } .nxc-replybar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 8px 7px 12px; border-radius: 12px; background: rgba(139, 92, 246, .14); border-left: 3px solid var(--a1); font-size: 12.5px; color: #DCD6F3; } .nxc-replybar span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-replybar svg { width: 15px; height: 15px; } .nxc-replybar button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--mute); cursor: pointer; } .nxc-err { margin: 0 0 8px; padding: 7px 12px; border-radius: 10px; background: rgba(244, 63, 94, .14); color: #FDA4AF; font-size: 12.5px; font-weight: 700; } .nxc-nick { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 5px 5px 5px 12px; border-radius: 14px; background: var(--bg3); border: 1px solid rgba(236, 72, 153, .4); } .nxc-nick span { color: var(--a2); } .nxc-nick svg { width: 18px; height: 18px; } .nxc-nickin { flex: 1; min-width: 0; height: 34px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; outline: none; } .nxc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 4px; font-size: 11.5px; color: var(--mute); } .nxc-foot button { padding: 0; border: 0; background: none; color: #C4B5FD; cursor: pointer; text-decoration: underline; font-size: inherit; } /* ================= the page /chat/ ================= */ #nxChatPage { margin: 26px 0 40px; } .nxc.is-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; height: calc(100vh - 150px); min-height: 560px; } .nxc.is-page.is-set { grid-template-columns: 250px minmax(0, 1fr) 320px; } .nxc.is-page .nxc-panel { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } .nxc.is-page .nxc-panel > .nxc-rooms { display: none; } .nxc.is-page .nxc-list { padding: 14px 14px 18px 18px; } .nxc-side, .nxc-settings { min-height: 0; overflow-y: auto; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid rgba(255, 255, 255, .1); scrollbar-width: thin; } .nxc-side h3 { display: flex; align-items: center; gap: 8px; margin: 4px 4px 10px; color: var(--mute); font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .nxc-side h3 + * { margin-bottom: 18px; } .nxc-here-n { padding: 0 7px; border-radius: 99px; background: rgba(34, 197, 94, .18); color: #86EFAC; font-style: normal; letter-spacing: 0; } .nxc-rooms-side { flex-direction: column; padding: 0; border: 0; overflow: visible; } .nxc-rooms-side .nxc-room { flex: none; justify-content: flex-start; height: auto; padding: 11px 12px; gap: 11px; } .nxc-rooms-side .nxc-room-i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .06); } .nxc-rooms-side .nxc-room.is-on .nxc-room-i { background: rgba(255, 255, 255, .2); } .nxc-rooms-side .nxc-room-t { flex: 1; } .nxc-rooms-side .nxc-room-t small { font-size: 11px; font-weight: 600; opacity: .8; } .nxc-room-on { font-style: normal; font-size: 10.5px; opacity: .8; } .nxc-users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .nxc-users li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 10px; font-size: 13px; } .nxc-users li:hover { background: rgba(255, 255, 255, .05); } .nxc-users b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nxc-u-ava { position: relative; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-weight: 900; font-size: 13px; } .nxc-u-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .nxc-u-ava i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #22C55E; border: 2px solid var(--bg2); } .nxc-dim { color: var(--mute); } /* settings */ .nxc-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .nxc-set-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; } .nxc-settings h4 { margin: 18px 4px 8px; color: var(--mute); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .nxc-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px; border-radius: 12px; cursor: pointer; } .nxc-set-row:hover { background: rgba(255, 255, 255, .04); } .nxc-set-row.is-col { flex-direction: column; align-items: stretch; cursor: default; } .nxc-set-row span { display: flex; flex-direction: column; gap: 2px; } .nxc-set-row b { font-size: 13.5px; } .nxc-set-row small { font-size: 11.5px; color: var(--mute); } .nxc-set-row input[type="checkbox"] { display: none; } .nxc-tg { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .14); transition: background .2s; } .nxc-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } .nxc-set-row input:checked + .nxc-tg { background: linear-gradient(135deg, var(--a1), var(--a2)); } .nxc-set-row input:checked + .nxc-tg::after { transform: translateX(18px); } .nxc-set-row input[type="range"] { width: 100%; accent-color: var(--a1); margin-top: 8px; } .nxc-seg { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); } .nxc-seg button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--mute); font-size: 12.5px; font-weight: 800; cursor: pointer; } .nxc-seg button i { width: 12px; height: 12px; border-radius: 50%; } .nxc-seg button.is-on { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; } .nxc-blocked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .nxc-blocked button { padding: 4px 10px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--ink); font-size: 12px; cursor: pointer; } .nxc-reset { width: 100%; margin-top: 16px; height: 38px; } /* ================= phones ================= */ @media (max-width: 1100px) { .nxc.is-page.is-set { grid-template-columns: 220px minmax(0, 1fr); } .nxc.is-page.is-set .nxc-settings { position: fixed; z-index: 9995; right: 12px; top: 80px; bottom: 12px; width: min(340px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .nxc.is-page { grid-template-columns: 220px minmax(0, 1fr); } } @media (max-width: 760px) { .nxc.is-page, .nxc.is-page.is-set { grid-template-columns: 1fr; height: calc(100vh - 120px); } .nxc.is-page .nxc-side { display: none; } .nxc.is-page .nxc-panel > .nxc-rooms { display: flex; } } @media (max-width: 640px) { .nxc-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; border-radius: 18px; } .nxc.is-widget .nxc-panel, .nxc.is-widget.is-big .nxc-panel { right: 0; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; } .nxc.is-widget.is-open .nxc-fab { display: none; } .nxc.is-widget [data-act="big"] { display: none; } .nxc-room { flex: 1 0 auto; padding: 0 10px; font-size: 12.5px; } .nxc-in { font-size: 16px; } /* no zoom on iPhone */ .nxc-emoji { grid-template-columns: repeat(8, 1fr); } } body.nxc-on-page .nxc.is-widget { display: none; } @media (prefers-reduced-motion: reduce) { .nxc-fab::after, .nxc-online i { animation: none; } .nxc.is-widget .nxc-panel { transition: none; } } /* ---- 2026-10-11 fixes: three rooms fit the small panel; the account card stacks ---- */ .nxc.is-widget .nxc-rooms { overflow: visible; } .nxc.is-widget .nxc-room { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 6px; } .nxc.is-widget .nxc-room-t { min-width: 0; } .nxc.is-widget .nxc-room-t b { overflow: hidden; text-overflow: ellipsis; } .nxc.is-widget .nxc-room .nxc-unread { position: absolute; top: -7px; right: -5px; box-shadow: 0 0 0 2px var(--bg2); } .nxc-guest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 10px; } .nxc-guest > div { line-height: 1.4; } .nxc-guest-b { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .nxc-guest-b .nxc-btn { flex: 1 1 auto; justify-content: center; text-align: center; } .nxc-guest.is-muted { display: flex; } .nxc-guest { position: relative; padding-right: 40px; } .nxc-guest .nxc-x { position: absolute; top: 8px; right: 8px; } .nxc-guest-b { grid-column: 2; } .nxc-rooms-side .nxc-room { white-space: normal; text-align: left; } .nxc-rooms-side .nxc-room-t { min-width: 0; } .nxc-rooms-side .nxc-room-t small { line-height: 1.3; margin-top: 2px; } .nxc-rooms-side .nxc-room-on { flex: 0 0 auto; white-space: nowrap; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .22); } .nxc.is-page .nxc-settings { scrollbar-gutter: stable; } @media (hover: none) { .nxc-msg.is-cont .nxc-acts [data-act="block"] { display: none; } } .nxc.is-widget .nxc-room { flex: 1 1 auto; padding: 0 6px; } /* the /chat/ page: the room takes the width of the screen, not the article column */ body.nxc-on-page .center-1 { width: auto !important; max-width: 1640px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } body.nxc-on-page .center-1 > *, body.nxc-on-page #content, body.nxc-on-page .container-3 { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } .nxc.is-page { grid-template-columns: 280px minmax(0, 1fr); margin-top: 18px; height: calc(100vh - 130px); } .nxc.is-page.is-set { grid-template-columns: 280px minmax(0, 1fr) 330px; } @media (max-width: 1100px) { .nxc.is-page, .nxc.is-page.is-set { grid-template-columns: 230px minmax(0, 1fr); } } @media (max-width: 760px) { .nxc.is-page, .nxc.is-page.is-set { grid-template-columns: 1fr; margin-top: 10px; height: calc(100dvh - 110px); } body.nxc-on-page .center-1 { padding-left: 10px !important; padding-right: 10px !important; } } @media (max-width: 760px) { .nxc.is-page .nxc-panel > .nxc-rooms .nxc-room { flex: 1 1 auto; padding: 0 8px; } .nxc.is-page .nxc-panel > .nxc-rooms .nxc-room small, .nxc.is-page .nxc-panel > .nxc-rooms .nxc-room-on { display: none; } .nxc.is-page .nxc-panel > .nxc-rooms .nxc-room b { font-size: 12.5px; } } /* ===================================================================== v6 (2026-10-11): live room — backgrounds (.nxc[data-bg] .nxc-fx), animated emoji, songs (kartulebi.com), light motion. "ცოცხალი ეფექტები" off = .nxc.no-fx. ===================================================================== */ .nxc .nxc-fill { fill: currentColor; stroke: none; } .nxc.is-page .nxc-panel { position: relative; } .nxc-main { position: relative; isolation: isolate; } .nxc-list { position: relative; z-index: 1; } .nxc-jump { z-index: 4; } .nxc-fx, .nxc-pop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; pointer-events: none; } .nxc-fx { z-index: 0; background-size: cover; background-position: center; transition: background-color .4s; } .nxc-pop { z-index: 3; } .nxc-fx i { position: absolute; display: none; will-change: transform; } .nxc-fx::before, .nxc-fx::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; } /* --- aurora (default) --- */ .nxc[data-bg="aurora"] .nxc-fx { background: #0D0A1D; } .nxc[data-bg="aurora"] .nxc-fx i:nth-child(-n+3) { display: block; width: 70%; aspect-ratio: 1; border-radius: 50%; } .nxc[data-bg="aurora"] .nxc-fx i:nth-child(1) { left: -25%; top: -20%; background: radial-gradient(closest-side, rgba(139, 92, 246, .42), transparent); animation: nxcDriftA 16s ease-in-out infinite alternate; } .nxc[data-bg="aurora"] .nxc-fx i:nth-child(2) { right: -30%; top: 20%; background: radial-gradient(closest-side, rgba(236, 72, 153, .3), transparent); animation: nxcDriftB 20s ease-in-out infinite alternate; } .nxc[data-bg="aurora"] .nxc-fx i:nth-child(3) { left: 10%; bottom: -35%; background: radial-gradient(closest-side, rgba(56, 189, 248, .22), transparent); animation: nxcDriftA 24s ease-in-out infinite alternate-reverse; } @keyframes nxcDriftA { to { transform: translate(22%, 16%) scale(1.25); } } @keyframes nxcDriftB { to { transform: translate(-26%, -18%) scale(.85); } } /* --- stars --- */ .nxc[data-bg="stars"] .nxc-fx { background: radial-gradient(120% 80% at 50% 110%, #1B1444 0%, #070512 60%); } .nxc[data-bg="stars"] .nxc-fx::before, .nxc[data-bg="stars"] .nxc-fx::after { top: -40px; right: -40px; bottom: -40px; left: -40px; inset: -40px; background-image: radial-gradient(1.4px 1.4px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 80px, #C4B5FD, transparent), radial-gradient(1.6px 1.6px at 150px 20px, #fff, transparent), radial-gradient(1px 1px at 60px 140px, #F9A8D4, transparent), radial-gradient(1.2px 1.2px at 170px 150px, #fff, transparent); background-size: 200px 190px; animation: nxcTwinkle 3.6s ease-in-out infinite alternate; } .nxc[data-bg="stars"] .nxc-fx::after { background-size: 290px 260px; background-position: 70px 40px; opacity: .6; animation: nxcTwinkle 5s ease-in-out infinite alternate-reverse, nxcSky 90s linear infinite; } .nxc[data-bg="stars"] .nxc-fx i:nth-child(1) { display: block; left: 70%; top: 8%; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-28deg); opacity: 0; animation: nxcShoot 9s ease-in infinite; } @keyframes nxcTwinkle { from { opacity: .45; } to { opacity: 1; } } @keyframes nxcSky { to { transform: translate(-40px, 30px); } } @keyframes nxcShoot { 0%, 86% { opacity: 0; transform: translate(0, 0) rotate(-28deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-260px, 140px) rotate(-28deg); } } /* --- neon grid --- */ .nxc[data-bg="neon"] .nxc-fx { background: linear-gradient(180deg, #12062B 0%, #2A0B4A 48%, #0A0518 49%, #0A0518 100%); } .nxc[data-bg="neon"] .nxc-fx::before { top: 49%; left: -50%; right: -50%; bottom: -10%; background-image: linear-gradient(rgba(236, 72, 153, .55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(139, 92, 246, .55) 1.5px, transparent 1.5px); background-size: 44px 44px; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 0; animation: nxcGrid 2.4s linear infinite; -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); } .nxc[data-bg="neon"] .nxc-fx i:nth-child(1) { display: block; left: 50%; top: 49%; width: 190px; height: 190px; margin: -150px 0 0 -95px; border-radius: 50%; background: linear-gradient(180deg, #FBBF24, #EC4899 60%, transparent 61%); opacity: .55; animation: nxcSun 6s ease-in-out infinite alternate; } @keyframes nxcGrid { to { background-position: 0 44px, 0 0; } } @keyframes nxcSun { to { transform: translateY(-10px) scale(1.04); opacity: .7; } } /* --- sakura --- */ .nxc[data-bg="sakura"] .nxc-fx { background: linear-gradient(160deg, #2A1038 0%, #4A1942 55%, #1A0B26 100%); } .nxc[data-bg="sakura"] .nxc-fx i { display: block; top: -30px; width: 14px; height: 11px; border-radius: 80% 10% 80% 10%; background: linear-gradient(135deg, #FBCFE8, #F472B6); opacity: .85; animation: nxcPetal 11s linear infinite; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(1) { left: 6%; animation-duration: 12s; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(2) { left: 22%; animation-delay: -3s; width: 10px; height: 8px; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(3) { left: 38%; animation-delay: -6s; animation-duration: 14s; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(4) { left: 52%; animation-delay: -1.5s; width: 11px; height: 9px; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(5) { left: 66%; animation-delay: -8s; animation-duration: 10s; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(6) { left: 78%; animation-delay: -4.5s; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(7) { left: 88%; animation-delay: -9.5s; width: 9px; height: 7px; animation-duration: 13s; } .nxc[data-bg="sakura"] .nxc-fx i:nth-child(8) { left: 96%; animation-delay: -6.8s; } @keyframes nxcPetal { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-50px, 50vh) rotate(260deg); } 100% { transform: translate(-20px, 105vh) rotate(520deg); } } /* --- sunset --- */ .nxc[data-bg="sunset"] .nxc-fx { background: linear-gradient(180deg, #1C0B33 0%, #5B1A52 42%, #B93A4E 78%, #E8763A 100%); } .nxc[data-bg="sunset"] .nxc-fx::after { background: linear-gradient(180deg, rgba(10, 6, 20, .5), rgba(10, 6, 20, .25)); } .nxc[data-bg="sunset"] .nxc-fx i:nth-child(1) { display: block; left: 50%; bottom: -120px; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 224, 71, .75), rgba(251, 146, 60, .35) 55%, transparent); animation: nxcSun 8s ease-in-out infinite alternate; } /* --- ocean --- */ .nxc[data-bg="ocean"] .nxc-fx { background: linear-gradient(180deg, #06142E 0%, #0B3558 55%, #0E5A6B 100%); } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(-n+2) { display: block; left: -30%; width: 160%; height: 46%; border-radius: 45%; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(1) { bottom: -30%; background: rgba(56, 189, 248, .16); animation: nxcWave 12s ease-in-out infinite alternate; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(2) { bottom: -36%; background: rgba(45, 212, 191, .14); animation: nxcWave 9s ease-in-out infinite alternate-reverse; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(n+3):nth-child(-n+7) { display: block; bottom: -20px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(186, 230, 253, .6); animation: nxcBubble 9s ease-in infinite; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(3) { left: 12%; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(4) { left: 34%; animation-delay: -3s; width: 6px; height: 6px; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(5) { left: 58%; animation-delay: -6s; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(6) { left: 76%; animation-delay: -1.5s; width: 12px; height: 12px; } .nxc[data-bg="ocean"] .nxc-fx i:nth-child(7) { left: 90%; animation-delay: -4.5s; width: 6px; height: 6px; } @keyframes nxcWave { to { transform: translateX(12%) rotate(4deg); } } @keyframes nxcBubble { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(18px, -90vh); opacity: 0; } } /* --- forest (fireflies) --- */ .nxc[data-bg="forest"] .nxc-fx { background: radial-gradient(120% 90% at 50% 100%, #0F3B2E 0%, #071A17 60%, #050D0E 100%); } .nxc[data-bg="forest"] .nxc-fx i:nth-child(-n+7) { display: block; width: 6px; height: 6px; border-radius: 50%; background: #FDE68A; box-shadow: 0 0 12px 3px rgba(253, 230, 138, .65); animation: nxcFly 9s ease-in-out infinite alternate; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(1) { left: 12%; top: 70%; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(2) { left: 30%; top: 40%; animation-delay: -2s; animation-duration: 11s; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(3) { left: 55%; top: 62%; animation-delay: -5s; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(4) { left: 72%; top: 28%; animation-delay: -1s; animation-duration: 13s; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(5) { left: 86%; top: 76%; animation-delay: -7s; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(6) { left: 44%; top: 18%; animation-delay: -3.5s; animation-duration: 10s; } .nxc[data-bg="forest"] .nxc-fx i:nth-child(7) { left: 20%; top: 22%; animation-delay: -6s; } @keyframes nxcFly { 0% { transform: translate(0, 0); opacity: .15; } 35% { opacity: 1; } 70% { opacity: .3; } 100% { transform: translate(46px, -60px); opacity: .95; } } /* --- cinema (spotlights) --- */ .nxc[data-bg="cinema"] .nxc-fx { background: radial-gradient(90% 70% at 50% 0%, #3B0A14 0%, #14060B 55%, #07040A 100%); } .nxc[data-bg="cinema"] .nxc-fx i:nth-child(-n+2) { display: block; top: -10%; width: 60%; height: 130%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(254, 240, 138, .2), transparent 75%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); } .nxc[data-bg="cinema"] .nxc-fx i:nth-child(1) { left: -8%; animation: nxcBeam 9s ease-in-out infinite alternate; } .nxc[data-bg="cinema"] .nxc-fx i:nth-child(2) { right: -8%; animation: nxcBeam 11s ease-in-out infinite alternate-reverse; } @keyframes nxcBeam { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } } .nxc[data-bg="night"] .nxc-fx { background: #0A0813; } .nxc[data-bg="custom"] .nxc-fx { background-color: #0A0813; } .nxc.no-fx .nxc-fx i, .nxc.no-fx .nxc-fx::before, .nxc.no-fx .nxc-fx::after, .nxc.no-fx .nxc-head::after { animation: none !important; } /* background picker */ .nxc-bgs { position: absolute; z-index: 30; top: 68px; right: 10px; width: min(340px, calc(100% - 20px)); padding: 12px; border-radius: 20px; background: rgba(24, 18, 46, .97); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: nxcDrop .22s ease; } @keyframes nxcDrop { from { opacity: 0; transform: translateY(-8px) scale(.97); } } .nxc-bgs-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px 4px; } .nxc-bgs-h b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 900; } .nxc-bgs-h .nxc-ib { width: 30px; height: 30px; } .nxc-bgs-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .nxc-bgt { display: flex; flex-direction: column; gap: 5px; padding: 5px 5px 6px; border: 1.5px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .05); color: var(--mute); font-size: 11.5px; font-weight: 800; cursor: pointer; transition: transform .15s, border-color .15s, color .15s; } .nxc-bgt:hover { transform: translateY(-2px); color: #fff; } .nxc-bgt.is-on { border-color: var(--a2); color: #fff; box-shadow: 0 8px 20px rgba(236, 72, 153, .25); } .nxc-bgt em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-bgp { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background-size: cover; background-position: center; background-color: #0D0A1D; } .nxc-bgt.is-add .nxc-bgp { border: 1.5px dashed rgba(255, 255, 255, .25); background: none; } .nxc-bgp[data-bgp="aurora"] { background: radial-gradient(60% 80% at 20% 20%, rgba(139, 92, 246, .8), transparent), radial-gradient(60% 80% at 85% 60%, rgba(236, 72, 153, .6), transparent), #0D0A1D; } .nxc-bgp[data-bgp="stars"] { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 70%, #C4B5FD, transparent), radial-gradient(1.5px 1.5px at 85% 75%, #fff, transparent), radial-gradient(120% 80% at 50% 110%, #2A1F66, #070512 70%); } .nxc-bgp[data-bgp="neon"] { background: linear-gradient(180deg, #2A0B4A 50%, transparent 50%), repeating-linear-gradient(90deg, rgba(139, 92, 246, .8) 0 1.5px, transparent 1.5px 12px), repeating-linear-gradient(0deg, rgba(236, 72, 153, .8) 0 1.5px, transparent 1.5px 9px), #0A0518; } .nxc-bgp[data-bgp="sakura"] { background: radial-gradient(5px 4px at 25% 30%, #F9A8D4, transparent), radial-gradient(5px 4px at 70% 55%, #FBCFE8, transparent), radial-gradient(4px 3px at 45% 80%, #F472B6, transparent), linear-gradient(160deg, #2A1038, #6B2360); } .nxc-bgp[data-bgp="sunset"] { background: linear-gradient(180deg, #1C0B33, #5B1A52 45%, #B93A4E 78%, #E8763A); } .nxc-bgp[data-bgp="ocean"] { background: linear-gradient(180deg, #06142E, #0B3558 55%, #0E7A8B); } .nxc-bgp[data-bgp="forest"] { background: radial-gradient(3px 3px at 30% 40%, #FDE68A, transparent), radial-gradient(3px 3px at 72% 62%, #FDE68A, transparent), radial-gradient(120% 90% at 50% 100%, #14553F, #071A17 65%); } .nxc-bgp[data-bgp="cinema"] { background: linear-gradient(115deg, transparent 40%, rgba(254, 240, 138, .28) 50%, transparent 60%), radial-gradient(90% 70% at 50% 0%, #5B0F1F, #14060B 60%); } .nxc-bgp[data-bgp="night"] { background: #0A0813; border: 1px solid rgba(255, 255, 255, .1); } .nxc-bgs-fx { display: flex; align-items: center; gap: 10px; margin: 12px 4px 2px; font-size: 13px; font-weight: 700; cursor: pointer; } .nxc-bgs-fx input { position: absolute; opacity: 0; pointer-events: none; } .nxc-bgs-fx i { position: relative; flex: 0 0 40px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .14); transition: background .2s; } .nxc-bgs-fx i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; } .nxc-bgs-fx input:checked + i { background: linear-gradient(135deg, var(--a1), var(--a2)); } .nxc-bgs-fx input:checked + i::after { transform: translateX(18px); } .nxc-bgs-fx input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; } /* --- depth: launcher, header shine, bubbles, incoming messages --- */ .nxc-fab { transform-style: preserve-3d; } .nxc-fab:hover { transform: perspective(320px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px) scale(1.06); } .nxc-fab svg { transform: translateZ(16px); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); } .nxc.is-music .nxc-fab { animation: nxcBeat 1.1s ease-in-out infinite; } @keyframes nxcBeat { 50% { box-shadow: 0 14px 34px rgba(139, 92, 246, .45), 0 0 0 9px rgba(236, 72, 153, .14), inset 0 1px 0 rgba(255, 255, 255, .25); } } .nxc-head { position: relative; overflow: hidden; } .nxc-head::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent); transform: skewX(-18deg); animation: nxcShine 8s ease-in-out infinite; pointer-events: none; } @keyframes nxcShine { 0%, 70% { left: -40%; } 100% { left: 130%; } } .nxc-logo { animation: nxcBob 4.5s ease-in-out infinite; } @keyframes nxcBob { 50% { transform: translateY(-2px) rotate(-4deg); } } .nxc-msg:not(.is-mine) .nxc-text { display: inline-block; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: rgba(22, 17, 44, .78); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); } .nxc-msg.is-mine .nxc-text { box-shadow: 0 8px 20px rgba(124, 58, 237, .35), inset 0 1px 0 rgba(255, 255, 255, .28); } .nxc-msg .nxc-text { transition: transform .18s ease; } .nxc-msg:hover .nxc-text { transform: translateY(-1px); } .nxc-msg:hover { background: none; } .nxc-msg.is-emo .nxc-text, .nxc-msg.is-emo.is-mine .nxc-text { padding: 0; border: 0; background: none; box-shadow: none; } .nxc.is-compact .nxc-msg .nxc-text { padding: 5px 10px; } .nxc-msg.is-new { animation: nxcIn .46s cubic-bezier(.2, .9, .3, 1.25) both; transform-origin: 0 100%; } @keyframes nxcIn { from { opacity: 0; transform: perspective(600px) translateY(16px) rotateX(-22deg) scale(.94); } } .nxc-day span { padding: 3px 10px; border-radius: 99px; background: rgba(10, 8, 22, .6); } .nxc-empty { position: relative; z-index: 1; } /* --- animated emoji --- */ .nxc-e { display: inline-block; width: 1.55em; height: 1.55em; margin: 0 .04em; vertical-align: -.42em; object-fit: contain; } .nxc-big-emo { font-size: 1em; line-height: 1; display: inline-flex; gap: 4px; flex-wrap: wrap; } .nxc-big-emo .nxc-e { width: 76px; height: 76px; margin: 0; vertical-align: middle; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); transition: transform .25s cubic-bezier(.2, .9, .3, 1.6); } .nxc-big-emo .nxc-e:hover { transform: scale(1.18) rotate(-6deg); } .nxc.is-compact .nxc-big-emo .nxc-e { width: 52px; height: 52px; } .nxc-emoji { grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 196px; overflow-y: auto; scrollbar-width: thin; } .nxc-emoji button { height: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; transition: transform .16s cubic-bezier(.2, .9, .3, 1.6), background .15s; } .nxc-emoji button img { width: 32px; height: 32px; display: block; } .nxc-emoji button:hover { transform: translateY(-3px) scale(1.22); background: rgba(255, 255, 255, .08); } .nxc-pop i { position: absolute; bottom: -70px; width: 58px; height: 58px; opacity: 0; animation: nxcFloat 2.9s cubic-bezier(.2, .6, .3, 1) forwards; } .nxc-pop i img { width: 100%; height: 100%; margin: 0; } @keyframes nxcFloat { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), -540px) scale(var(--s, 1)) rotate(24deg); } } /* --- songs --- */ .nxc-i-pause { display: none; } [data-song].is-playing .nxc-i-play { display: none; } [data-song].is-playing .nxc-i-pause { display: block; } .nxc-song { position: relative; display: flex; align-items: center; gap: 12px; width: min(350px, 100%); padding: 10px 14px 10px 10px; border-radius: 20px; background: rgba(20, 15, 42, .86); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); overflow: hidden; transition: transform .2s ease, border-color .2s; } .nxc-song:hover { transform: translateY(-2px); border-color: rgba(236, 72, 153, .4); } .nxc-song.is-on { border-color: rgba(236, 72, 153, .55); } .nxc-sg-glow { position: absolute; top: -40%; right: -40%; bottom: -40%; left: -40%; inset: -40%; z-index: 0; background-size: cover; background-position: center; filter: blur(30px) saturate(1.5); opacity: .32; pointer-events: none; } .nxc-sg-cover { position: relative; z-index: 1; flex: 0 0 66px; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--a1), var(--a2)) center / cover; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); overflow: hidden; } .nxc-song.is-playing .nxc-sg-cover { animation: nxcPulseRing 1.6s ease-out infinite; } @keyframes nxcPulseRing { 0% { box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 0 rgba(236, 72, 153, .6); } 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 12px rgba(236, 72, 153, 0); } } .nxc-sg-note { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .8); } .nxc-sg-btn { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 18, .38); color: #fff; transition: background .15s; } .nxc-sg-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); } .nxc-sg-play:hover .nxc-sg-btn { background: rgba(8, 6, 18, .15); } .nxc-sg-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .nxc-sg-title { font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-sg-artist { font-size: 12px; color: #CFC8EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-sg-bar { position: relative; display: block; height: 5px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, .16); cursor: pointer; } .nxc-sg-bar::before { content: ""; position: absolute; top: -7px; right: 0; bottom: -7px; left: 0; inset: -7px 0; } .nxc-sg-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 10px rgba(236, 72, 153, .6); } .nxc-sg-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; } .nxc-sg-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0; transition: opacity .2s; } .nxc-sg-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--a2); } [data-song].is-playing .nxc-sg-eq { opacity: 1; } [data-song].is-playing .nxc-sg-eq i { animation: nxcEq .7s ease-in-out infinite alternate; } [data-song].is-playing .nxc-sg-eq i:nth-child(2) { animation-delay: -.25s; } [data-song].is-playing .nxc-sg-eq i:nth-child(3) { animation-delay: -.5s; } [data-song].is-playing .nxc-sg-eq i:nth-child(4) { animation-delay: -.1s; } @keyframes nxcEq { to { height: 12px; } } /* now playing — stays while you change rooms */ .nxc-now { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(139, 92, 246, .2), rgba(236, 72, 153, .1)); } .nxc-now-c { position: relative; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--a1), var(--a2)) center / cover; overflow: hidden; cursor: pointer; } .nxc-now-c .nxc-sg-btn svg { width: 17px; height: 17px; } .nxc-now-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .nxc-now-t b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-now-t small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-now .nxc-sg-cur { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; } .nxc-now-x { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--mute); cursor: pointer; } .nxc-now-x svg { width: 14px; height: 14px; } .nxc-now .nxc-sg-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; margin: 0; border-radius: 0; } /* music picker */ .nxc-mu-b svg { width: 19px; height: 19px; } .nxc-compose .nxc-emo-b:hover { color: #fff !important; background: rgba(255, 255, 255, .08); } .nxc-music { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 18px; background: var(--bg3); border: 1px solid rgba(255, 255, 255, .1); animation: nxcDrop .2s ease; } .nxc-mu-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--mute); } .nxc-mu-search svg { width: 16px; height: 16px; } .nxc-mu-q { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; outline: none; } .nxc-mu-q::placeholder { color: #7D769E; } .nxc-mu-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .nxc-mu-chips::-webkit-scrollbar { display: none; } .nxc-mu-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .04); color: var(--mute); font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; } .nxc-mu-chip.is-on { background: linear-gradient(135deg, var(--a1), var(--a2)); border-color: transparent; color: #fff; } .nxc-mu-ci { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12) center / cover; } .nxc-mu-ci svg { width: 14px; height: 14px; } .nxc-mu-list { display: flex; flex-direction: column; gap: 2px; min-height: 120px; max-height: 224px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; } .nxc.is-page .nxc-mu-list { max-height: 300px; } .nxc-mu-row { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 6px 9px; border-radius: 12px; transition: background .15s; } .nxc-mu-row:hover, .nxc-mu-row.is-on { background: rgba(255, 255, 255, .06); } .nxc-mu-cover { position: relative; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 11px; background: linear-gradient(135deg, #3B2A78, #7A2A6B) center / cover; overflow: hidden; cursor: pointer; } .nxc-mu-cover .nxc-sg-btn { opacity: 0; } .nxc-mu-row:hover .nxc-sg-btn, .nxc-mu-row.is-on .nxc-sg-btn { opacity: 1; } .nxc-mu-cover .nxc-sg-btn svg { width: 18px; height: 18px; } .nxc-mu-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .nxc-mu-meta b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-mu-meta small { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-mu-dur { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; } .nxc-mu-send { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; cursor: pointer; transition: transform .12s; } .nxc-mu-send:hover { transform: scale(1.08); } .nxc-mu-send svg { width: 16px; height: 16px; } .nxc-mu-row .nxc-sg-bar { position: absolute; left: 58px; right: 8px; bottom: 3px; height: 3px; margin: 0; opacity: 0; } .nxc-mu-row.is-on .nxc-sg-bar { opacity: 1; } .nxc-mu-empty { display: grid; place-items: center; min-height: 110px; padding: 16px; color: var(--mute); font-size: 13px; text-align: center; } .nxc-mu-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--a1); border-right-color: var(--a2); animation: nxcSpin .8s linear infinite; } .nxc-mu-src { align-self: flex-end; font-size: 11px; color: var(--mute) !important; text-decoration: none !important; } .nxc-mu-src:hover { color: #fff !important; } @media (max-width: 640px) { .nxc-mu-q { font-size: 16px; } .nxc-mu-list { max-height: 34vh; } .nxc-big-emo .nxc-e { width: 64px; height: 64px; } .nxc-bgs { top: 62px; } } @media (prefers-reduced-motion: reduce) { .nxc-fx i, .nxc-fx::before, .nxc-fx::after, .nxc-head::after, .nxc-logo, .nxc-msg.is-new, .nxc.is-music .nxc-fab, .nxc-song.is-playing .nxc-sg-cover { animation: none !important; } } /* v6 fixes */ .nxc .nxc-text img.nxc-e, .nxc .nxc-pop img.nxc-e { display: inline-block !important; max-width: none; border: 0; border-radius: 0; box-shadow: none; } .nxc-emoji { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .nxc.is-page .nxc-emoji { max-width: 560px; } .nxc.is-page .nxc-music { max-width: 620px; } .nxc-bgs-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nxc.has-pop .nxc-guest { display: none !important; } .nxc.is-widget .nxc-panel { overflow: hidden; } .nxc input.nxc-mu-q, .nxc input.nxc-mu-q:focus, .nxc input.nxc-nickin, .nxc input.nxc-nickin:focus { background: none !important; border: 0 !important; box-shadow: none !important; outline: none; color: var(--ink) !important; padding: 0 !important; margin: 0; width: auto; border-radius: 0; } .nxc-mu-search:focus-within { box-shadow: 0 0 0 2px rgba(139, 92, 246, .45); } @media (max-width: 640px) { .nxc-mu-list { max-height: 30vh; min-height: 90px; } .nxc-emoji { max-height: 30vh; } } @media (max-height: 760px) { .nxc.is-widget .nxc-mu-list { max-height: 170px; } } /* my messages on the right, everyone else's on the left */ .nxc-msg.is-mine { flex-direction: row-reverse; } .nxc-msg.is-mine .nxc-body { display: flex; flex-direction: column; align-items: flex-end; text-align: left; } .nxc-msg.is-mine .nxc-meta { flex-direction: row-reverse; } .nxc-msg.is-mine .nxc-text { border-radius: 14px 4px 14px 14px; max-width: 100%; } .nxc-msg.is-mine .nxc-acts { right: auto; left: 8px; } .nxc-msg.is-mine.is-new { transform-origin: 100% 100%; } .nxc-msg .nxc-body { max-width: calc(100% - 44px); } .nxc-msg.is-mine .nxc-quote { align-self: flex-end; } @media (hover: none) { .nxc-msg.is-mine .nxc-acts { margin-left: 0; margin-right: auto; } } /* my own background picture can be removed */ .nxc-bgt-w { position: relative; display: flex; min-width: 0; } .nxc-bgt-w .nxc-bgt { flex: 1; min-width: 0; } .nxc-bgdel { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 2px solid #18122E; border-radius: 50%; background: #F43F5E; color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); transition: transform .15s; } .nxc-bgdel:hover { transform: scale(1.12); } .nxc-bgdel svg { width: 13px; height: 13px; } /* ===================================================================== v9 skin (2026-10-11): the refined look. Readable text font, glass panel with a lit edge, round avatars with rings, shaped bubbles, reactions, film cards, typing, avatar stack. Everything above stays as the base; this block is the finish. ===================================================================== */ .nxc { --ft: "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --stroke: rgba(255, 255, 255, .1); --glass: rgba(255, 255, 255, .055); } .nxc[data-room="series"] { --r1: #EC4899; --r2: #F97316; } .nxc[data-room="movies"] { --r1: #38BDF8; --r2: #8B5CF6; } .nxc { --r1: var(--a1); --r2: var(--a2); } .nxc .nxc-text, .nxc .nxc-in, .nxc .nxc-meta, .nxc .nxc-quote, .nxc .nxc-replybar, .nxc .nxc-foot, .nxc .nxc-guest span, .nxc .nxc-err, .nxc .nxc-typing, .nxc .nxc-mu-meta, .nxc .nxc-mu-q, .nxc .nxc-sg-body, .nxc .nxc-now-t, .nxc .nxc-film-b, .nxc .nxc-set-row small, .nxc .nxc-room-t small, .nxc .nxc-users, .nxc .nxc-nickin, .nxc .nxc-online, .nxc .nxc-empty span, .nxc .nxc-rxc b { font-family: var(--ft); letter-spacing: 0; } /* ---------- panel: glass with a lit edge ---------- */ .nxc .nxc-panel, .nxc .nxc-side, .nxc .nxc-settings { border: 1px solid transparent; background: linear-gradient(180deg, #151029 0%, #0D0A1C 100%) padding-box, linear-gradient(150deg, rgba(196, 181, 253, .65) 0%, rgba(236, 72, 153, .35) 28%, rgba(255, 255, 255, .07) 55%, rgba(56, 189, 248, .3) 100%) border-box; } .nxc.is-widget .nxc-panel { border-radius: 28px; box-shadow: 0 40px 100px rgba(0, 0, 0, .65), 0 0 60px rgba(139, 92, 246, .18); } .nxc.is-page .nxc-panel, .nxc .nxc-side, .nxc .nxc-settings { border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 50px rgba(139, 92, 246, .1); } /* ---------- header ---------- */ .nxc .nxc-head { gap: 12px; padding: 14px 14px 13px 16px; border-bottom: 1px solid var(--stroke); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--r1) 26%, transparent), transparent 60%), radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--r2) 18%, transparent), transparent 60%), rgba(255, 255, 255, .02); } .nxc .nxc-logo { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, var(--r1), var(--r2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--r1) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -8px 14px rgba(0, 0, 0, .18); } .nxc .nxc-logo svg { width: 23px; height: 23px; fill: rgba(255, 255, 255, .22); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); } .nxc .nxc-logo::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #22C55E; border: 3px solid #130F26; } .nxc .nxc-title b { font-size: 16px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc .nxc-online { gap: 5px; font-size: 12px; color: #B5ADD6; white-space: nowrap; overflow: hidden; } .nxc .nxc-online > i { display: none; } .nxc .nxc-online > span { color: #86EFAC; font-weight: 700; } .nxc .nxc-rdesc { font-style: normal; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; } .nxc .nxc-rdesc:not(:empty)::before { content: "· "; } .nxc.is-widget .nxc-rdesc { display: none; } .nxc-stack { display: flex; align-items: center; padding-left: 8px; } .nxc-stack span { width: 28px; height: 28px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #17122C; overflow: hidden; color: #fff; font: 800 11.5px var(--ft); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .18s; } .nxc-stack span:hover { transform: translateY(-3px); z-index: 2; } .nxc-stack img { width: 100%; height: 100%; object-fit: cover; } .nxc-stack em { margin-left: 5px; font: 700 11px var(--ft); font-style: normal; color: #B5ADD6; } .nxc.is-widget:not(.is-big) .nxc-stack span:nth-child(n+3) { display: none; } .nxc .nxc-hbtns { gap: 5px; } .nxc .nxc-ib { width: 34px; height: 34px; border-radius: 12px; background: var(--glass); border: 1px solid rgba(255, 255, 255, .06); transition: background .15s, transform .15s, border-color .15s; } .nxc .nxc-ib:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); transform: translateY(-1px); } .nxc .nxc-ib svg { width: 17px; height: 17px; } /* ---------- rooms: a segmented track ---------- */ .nxc.is-widget .nxc-panel > .nxc-rooms, .nxc.is-page .nxc-panel > .nxc-rooms { margin: 10px 12px 2px; padding: 4px; gap: 4px; border: 1px solid var(--stroke); border-radius: 17px; background: rgba(0, 0, 0, .22); } .nxc .nxc-panel > .nxc-rooms .nxc-room { height: 36px; border: 0; border-radius: 13px; background: none; font-size: 12.5px; color: #A9A1CC; } .nxc .nxc-panel > .nxc-rooms .nxc-room:hover { background: rgba(255, 255, 255, .06); color: #fff; } .nxc .nxc-panel > .nxc-rooms .nxc-room.is-on { background: linear-gradient(135deg, var(--r1), var(--r2)); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--r1) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); } .nxc .nxc-now { margin: 8px 12px 0; padding: 7px 10px 9px; border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 22%, transparent), color-mix(in srgb, var(--a2) 12%, transparent)); } .nxc .nxc-now-c { border-radius: 50%; } .nxc .nxc-now.is-playing .nxc-now-c { box-shadow: 0 0 0 2px var(--a2); } /* ---------- list ---------- */ .nxc .nxc-main { margin-top: 8px; border-top: 1px solid var(--stroke); } .nxc .nxc-list { padding: 12px 10px 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .nxc.is-page .nxc-list { padding: 18px 22px 22px; } .nxc .nxc-day { margin: 14px 8px 10px; font-family: var(--ft); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .nxc .nxc-day::before, .nxc .nxc-day::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14)); } .nxc .nxc-day::after { background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .14)); } .nxc .nxc-day span { padding: 4px 12px; background: rgba(14, 11, 28, .7); border: 1px solid var(--stroke); backdrop-filter: blur(6px); } .nxc-newline { display: flex; align-items: center; gap: 10px; margin: 12px 8px 8px; } .nxc-newline::before, .nxc-newline::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--a2)); } .nxc-newline::after { background: linear-gradient(270deg, transparent, var(--a2)); } .nxc-newline span { padding: 3px 12px; border-radius: 99px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; font: 700 11px var(--ft); box-shadow: 0 6px 16px rgba(236, 72, 153, .35); } .nxc .nxc-empty { gap: 6px; } .nxc-empty-e { width: 96px; height: 96px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45)); } .nxc .nxc-empty b { font-size: 17px; font-weight: 800; } .nxc .nxc-empty span { font-size: 13.5px; } /* ---------- messages ---------- */ .nxc .nxc-msg { gap: 10px; padding: 3px 6px; margin-top: 12px; border-radius: 0; } .nxc .nxc-msg.is-cont { margin-top: 2px; padding-top: 0; } .nxc .nxc-msg.is-mention { background: none; box-shadow: none; } .nxc .nxc-msg.is-mention .nxc-text { box-shadow: 0 0 0 1.5px var(--a2), 0 8px 22px rgba(236, 72, 153, .3); } .nxc .nxc-ava { position: relative; flex: 0 0 38px; width: 38px; align-self: flex-start; } .nxc .nxc-ava img, .nxc .nxc-ava > span { width: 38px; height: 38px; border-radius: 50%; font-family: var(--ft); font-size: 15px; font-weight: 800; box-shadow: 0 0 0 2px #17122C, 0 0 0 3.5px rgba(255, 255, 255, .13), 0 6px 14px rgba(0, 0, 0, .35); } .nxc .nxc-msg.is-boss .nxc-ava img, .nxc .nxc-msg.is-boss .nxc-ava > span { box-shadow: 0 0 0 2px #17122C, 0 0 0 4px #F59E0B, 0 0 16px rgba(245, 158, 11, .55); } .nxc .nxc-msg.is-vip .nxc-ava img, .nxc .nxc-msg.is-vip .nxc-ava > span { box-shadow: 0 0 0 2px #17122C, 0 0 0 4px #A78BFA, 0 0 16px rgba(167, 139, 250, .5); } .nxc-crown { position: absolute; top: -11px; left: 50%; width: 18px; height: 18px; margin-left: -9px; color: #FBBF24; transform: rotate(-8deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); } .nxc-crown svg { width: 18px; height: 18px; } .nxc .nxc-body { max-width: min(calc(100% - 50px), 620px); } .nxc .nxc-meta { gap: 6px; margin: 0 2px 4px; align-items: center; } .nxc .nxc-meta b { font-size: 12.5px; font-weight: 700; } .nxc .nxc-meta time { font-size: 10.5px; color: #8F87B3; font-variant-numeric: tabular-nums; } .nxc .nxc-badge { padding: 1px 7px; border-radius: 99px; font-family: var(--ft); font-size: 10px; font-weight: 700; letter-spacing: .01em; } .nxc .nxc-badge.is-guest { background: rgba(255, 255, 255, .07); color: #9D95C0; } .nxc .nxc-text { font-size: var(--fs); line-height: 1.5; font-weight: 500; } .nxc .nxc-msg:not(.is-mine):not(.is-emo) .nxc-text { padding: 9px 14px; border-radius: 6px 20px 20px 20px; background: linear-gradient(180deg, rgba(46, 37, 88, .94), rgba(31, 25, 64, .94)); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 8px 20px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07); color: #EFEBFF; } .nxc .nxc-msg.is-cont:not(.is-mine):not(.is-emo) .nxc-text { border-radius: 20px; border-top-left-radius: 8px; } .nxc .nxc-msg.is-mine:not(.is-emo) .nxc-text { position: relative; padding: 9px 14px; border-radius: 20px 6px 20px 20px; background: linear-gradient(135deg, var(--mine1), var(--mine2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--mine1) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -10px 18px rgba(0, 0, 0, .12); overflow: hidden; } .nxc .nxc-msg.is-mine:not(.is-emo) .nxc-text::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent); pointer-events: none; } .nxc .nxc-msg.is-cont.is-mine:not(.is-emo) .nxc-text { border-radius: 20px; border-top-right-radius: 8px; } .nxc .nxc-text a { color: #C4B5FD; text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-all; } .nxc .nxc-quote { margin: 0 0 4px; padding: 6px 11px; border-left: 3px solid var(--a2); border-radius: 4px 12px 12px 4px; background: rgba(255, 255, 255, .06); font-size: 12px; max-width: 100%; } .nxc .nxc-acts { top: -14px; padding: 3px; gap: 1px; border-radius: 99px; background: rgba(30, 24, 60, .96); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); } .nxc .nxc-acts button { width: 28px; height: 28px; border-radius: 50%; transition: background .12s, color .12s, transform .12s; } .nxc .nxc-acts button:hover { transform: scale(1.12); } .nxc .nxc-acts [data-act="rx"] { color: #F9A8D4; } .nxc .nxc-acts [data-act="del"]:hover { color: #FB7185; } /* reactions */ .nxc-rx { display: flex; flex-wrap: wrap; gap: 5px; } .nxc-rx:not(:empty) { margin-top: 5px; } .nxc-msg.is-mine .nxc-rx { justify-content: flex-end; } .nxc-rxc { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 5px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 99px; background: rgba(28, 22, 58, .9); color: #D9D2F5; cursor: pointer; transition: transform .14s, border-color .14s, background .14s; } .nxc-rxc img.nxc-e { width: 18px; height: 18px; margin: 0; vertical-align: 0; } .nxc-rxc b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .nxc-rxc:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); } .nxc-rxc.is-mine { border-color: var(--a2); background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 32%, #1C163A), color-mix(in srgb, var(--a2) 26%, #1C163A)); color: #fff; } .nxc-rxc.is-pop { animation: nxcPopIn .4s cubic-bezier(.2, .9, .3, 1.7); } @keyframes nxcPopIn { 0% { transform: scale(.5); } 60% { transform: scale(1.22); } } .nxc-rxbar { position: absolute; z-index: 6; top: -50px; right: 6px; display: flex; gap: 2px; padding: 5px 7px; border-radius: 99px; background: rgba(30, 24, 60, .97); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 24px rgba(236, 72, 153, .2); animation: nxcDrop .18s ease; } .nxc-msg.is-mine .nxc-rxbar { right: auto; left: 6px; } .nxc-rxbar button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .16s cubic-bezier(.2, .9, .3, 1.7); animation: nxcPopIn .35s cubic-bezier(.2, .9, .3, 1.5) both; } .nxc-rxbar button:nth-child(2) { animation-delay: .03s; } .nxc-rxbar button:nth-child(3) { animation-delay: .06s; } .nxc-rxbar button:nth-child(4) { animation-delay: .09s; } .nxc-rxbar button:nth-child(5) { animation-delay: .12s; } .nxc-rxbar button:nth-child(6) { animation-delay: .15s; } .nxc-rxbar img.nxc-e { width: 28px; height: 28px; margin: 0; } .nxc-rxbar button:hover { transform: translateY(-6px) scale(1.35); } .nxc .nxc-list .nxc-msg:first-of-type .nxc-rxbar, .nxc .nxc-day + .nxc-msg .nxc-rxbar { top: auto; bottom: -46px; } /* film card */ .nxc-film { display: flex; gap: 12px; width: min(330px, 100%); margin-top: 6px; padding: 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(135deg, rgba(40, 32, 80, .95), rgba(22, 17, 46, .95)); color: #fff !important; text-decoration: none !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .38); transition: transform .2s, border-color .2s, box-shadow .2s; } .nxc-film:hover { transform: translateY(-3px); border-color: var(--a2); box-shadow: 0 18px 36px rgba(0, 0, 0, .45), 0 0 26px rgba(236, 72, 153, .22); } .nxc-film-p { flex: 0 0 70px; width: 70px; aspect-ratio: 2 / 3; border-radius: 12px; background: linear-gradient(135deg, #3B2A78, #7A2A6B) center / cover; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); } .nxc-film-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px 4px 2px 0; } .nxc-film-b em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #F9A8D4; } .nxc-film-b b { font-size: 14.5px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nxc-film-b small { font-size: 12px; color: #B5ADD6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-film-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-top: auto; padding: 0 12px 0 9px; border-radius: 99px; background: linear-gradient(135deg, var(--a1), var(--a2)); font-size: 12px; font-weight: 700; box-shadow: 0 6px 14px rgba(139, 92, 246, .4); } .nxc-film-go svg { width: 13px; height: 13px; } /* typing + jump */ .nxc-typing { position: absolute; z-index: 4; left: 14px; bottom: 10px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); height: 30px; padding: 0 13px 0 10px; border-radius: 99px; background: rgba(30, 24, 60, .94); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; color: #CFC8EA; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); animation: nxcDrop .2s ease; white-space: nowrap; overflow: hidden; } .nxc-typing b { color: #fff; font-weight: 700; } .nxc-dots { display: inline-flex; gap: 3px; } .nxc-dots i { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); animation: nxcDot 1s ease-in-out infinite; } .nxc-dots i:nth-child(2) { animation-delay: .15s; } .nxc-dots i:nth-child(3) { animation-delay: .3s; } @keyframes nxcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } .nxc .nxc-jump { left: auto; right: 14px; bottom: 12px; transform: none; height: 36px; padding: 0 12px 0 14px; font-family: var(--ft); font-weight: 700; box-shadow: 0 10px 24px rgba(139, 92, 246, .5); } /* ---------- composer ---------- */ .nxc .nxc-form { padding: 10px 12px 9px; border-top: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .18)); } .nxc .nxc-compose { align-items: center; gap: 4px; padding: 5px 5px 5px 7px; border-radius: 22px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } .nxc .nxc-compose:focus-within { border-color: transparent; background: linear-gradient(#1A1436, #1A1436) padding-box, linear-gradient(135deg, var(--a1), var(--a2)) border-box; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 18%, transparent), 0 10px 26px rgba(0, 0, 0, .3); } .nxc .nxc-compose .nxc-emo-b { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: #A9A1CC !important; } .nxc .nxc-in { padding: 9px 6px; font-size: 14.5px; font-weight: 500; } .nxc .nxc-send { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--a1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), box-shadow .18s; } .nxc .nxc-send:hover { transform: scale(1.08) rotate(-10deg); } .nxc .nxc-send:active { transform: scale(.92); } .nxc .nxc-send svg { width: 18px; height: 18px; margin: 1px 1px 0 0; } .nxc .nxc-foot { margin-top: 7px; padding: 0 8px; font-size: 11px; color: #8F87B3; } .nxc .nxc-foot b { color: #D9D2F5; font-weight: 700; } .nxc .nxc-replybar { border-radius: 14px; border-left: 3px solid var(--a2); background: rgba(255, 255, 255, .06); } .nxc .nxc-nick { padding: 5px 5px 5px 14px; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(#1A1436, #1A1436) padding-box, linear-gradient(135deg, var(--a1), var(--a2)) border-box; } .nxc .nxc-btn { height: 34px; padding: 0 14px; border-radius: 99px; font-family: var(--ft); font-weight: 700; transition: transform .15s, box-shadow .15s; } .nxc .nxc-btn:hover { transform: translateY(-1px); } .nxc .nxc-btn.is-main { box-shadow: 0 8px 18px color-mix(in srgb, var(--a1) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); } .nxc .nxc-guest { margin: 0 12px 10px; padding: 12px 40px 12px 12px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(135deg, #261A4D, #2B1640) padding-box, linear-gradient(135deg, rgba(196, 181, 253, .6), rgba(236, 72, 153, .5)) border-box; } .nxc .nxc-guest b { font-size: 13.5px; font-weight: 800; } .nxc .nxc-emoji, .nxc .nxc-music { border-radius: 20px; background: rgba(20, 16, 42, .96); border: 1px solid rgba(255, 255, 255, .11); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); } /* ---------- launcher: an orb with a turning halo ---------- */ .nxc .nxc-fab { width: 62px; height: 62px; border-radius: 22px; background: linear-gradient(135deg, #8B5CF6, #EC4899); box-shadow: 0 16px 36px rgba(139, 92, 246, .5), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -10px 16px rgba(0, 0, 0, .2); } .nxc .nxc-fab::before { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; inset: -4px; z-index: -1; border-radius: 26px; background: conic-gradient(from 0deg, #8B5CF6, #EC4899, #38BDF8, #8B5CF6); filter: blur(9px); opacity: .75; animation: nxcSpin 5s linear infinite; } .nxc .nxc-fab-n { top: -7px; right: -7px; min-width: 24px; height: 24px; line-height: 24px; background: #F43F5E; color: #fff; border: 2px solid #0E0B1C; font-family: var(--ft); animation: nxcPopIn .4s cubic-bezier(.2, .9, .3, 1.7); } /* ---------- the page: side panels ---------- */ .nxc .nxc-side { padding: 18px 14px; } .nxc .nxc-side h3 { margin: 4px 6px 12px; font-family: var(--ft); font-size: 11px; color: #8F87B3; } .nxc .nxc-rooms-side { gap: 8px; } .nxc .nxc-rooms-side .nxc-room { padding: 12px; gap: 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .035); transition: transform .18s, background .18s, border-color .18s; } .nxc .nxc-rooms-side .nxc-room:hover { transform: translateX(3px); background: rgba(255, 255, 255, .07); } .nxc .nxc-rooms-side .nxc-room-i { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px rgba(0, 0, 0, .3); } .nxc .nxc-rooms-side .nxc-room[data-room="general"] .nxc-room-i { background: linear-gradient(135deg, #8B5CF6, #EC4899); } .nxc .nxc-rooms-side .nxc-room[data-room="series"] .nxc-room-i { background: linear-gradient(135deg, #EC4899, #F97316); } .nxc .nxc-rooms-side .nxc-room[data-room="movies"] .nxc-room-i { background: linear-gradient(135deg, #38BDF8, #8B5CF6); } .nxc .nxc-rooms-side .nxc-room.is-on { border-color: transparent; background: linear-gradient(135deg, #241A4A, #2A1740) padding-box, linear-gradient(135deg, var(--r1), var(--r2)) border-box; box-shadow: 0 14px 30px color-mix(in srgb, var(--r1) 25%, transparent); color: #fff; } .nxc .nxc-rooms-side .nxc-room-t b { font-size: 14px; } .nxc .nxc-rooms-side .nxc-room-t small { color: #A9A1CC; font-size: 11.5px; font-weight: 500; } .nxc .nxc-rooms-side .nxc-room-on { background: rgba(34, 197, 94, .15); color: #86EFAC; font-family: var(--ft); font-weight: 700; opacity: 1; } .nxc .nxc-users li { padding: 7px 8px; border-radius: 14px; font-weight: 600; } .nxc .nxc-u-ava { width: 32px; height: 32px; flex-basis: 32px; border-radius: 50%; font-family: var(--ft); box-shadow: 0 0 0 2px #17122C, 0 0 0 3px rgba(255, 255, 255, .12); } .nxc .nxc-u-ava img { border-radius: 50%; } .nxc .nxc-u-ava i { right: -1px; bottom: -1px; border-color: #17122C; } .nxc .nxc-settings h4 { font-family: var(--ft); } .nxc .nxc-set-row b { font-family: var(--ft); font-weight: 700; } @media (max-width: 640px) { .nxc.is-widget .nxc-panel { border-radius: 0; border: 0; } .nxc .nxc-body { max-width: calc(100% - 48px); } .nxc-rxbar { top: -48px; } } @media (hover: none) { .nxc .nxc-acts { background: none; border: 0; box-shadow: none; backdrop-filter: none; } .nxc .nxc-acts [data-act="block"] { display: none; } } @media (prefers-reduced-motion: reduce) { .nxc .nxc-fab::before, .nxc-dots i, .nxc-rxbar button, .nxc-rxc.is-pop { animation: none !important; } } /* v9 fixes */ @media (min-width: 641px) { .nxc.is-widget:not(.is-big) .nxc-stack { display: none; } } .nxc.is-widget .nxc-guest > div span { display: none; } .nxc.is-widget .nxc-guest { row-gap: 8px; padding-top: 10px; padding-bottom: 10px; } .nxc.is-widget .nxc-guest .nxc-btn { height: 30px; } .nxc .nxc-in, .nxc .nxc-in:focus { outline: none !important; box-shadow: none !important; border: 0 !important; background: none !important; border-radius: 0; } .nxc .nxc-msg:not(.is-mine) .nxc-acts { left: 56px; right: auto; } .nxc .nxc-msg.is-mine .nxc-acts { right: 56px; left: auto; } .nxc .nxc-msg:not(.is-mine) .nxc-rxbar { left: 50px; right: auto; } .nxc .nxc-msg.is-mine .nxc-rxbar { right: 50px; left: auto; } .nxc .nxc-acts { top: -18px; } .nxc .nxc-msg.is-cont .nxc-acts { top: -22px; } @media (hover: none) { .nxc .nxc-msg .nxc-acts { left: auto; right: auto; top: auto; } } /* the action pill sits at the far end of the bubble's column, clear of the name */ @media (hover: hover) { .nxc .nxc-msg:not(.is-mine) .nxc-acts { left: auto; right: max(8px, calc(100% - 700px)); top: -8px; } .nxc .nxc-msg.is-mine .nxc-acts { right: auto; left: max(8px, calc(100% - 700px)); top: -8px; } .nxc .nxc-msg.is-cont .nxc-acts { top: -16px; } } /* ===== v12 (2026-10-11): arrivals, typing bubble, pinned message, @ suggestions, confetti ===== */ .nxc-joins { position: absolute; z-index: 5; top: 10px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .nxc-join { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); height: 34px; padding: 0 12px 0 4px; border-radius: 99px; border: 1px solid transparent; background: linear-gradient(#1D1740, #1D1740) padding-box, linear-gradient(135deg, var(--a1), var(--a2)) border-box; color: #D9D2F5; font: 500 12.5px var(--ft); box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 22px color-mix(in srgb, var(--a1) 30%, transparent); animation: nxcJoin .55s cubic-bezier(.2, .9, .3, 1.35) both; transition: opacity .4s, transform .4s; } .nxc-join.is-out { opacity: 0; transform: translateY(-12px) scale(.94); } .nxc-join.is-boss { background: linear-gradient(#2A1F12, #2A1F12) padding-box, linear-gradient(135deg, #FBBF24, #EF4444) border-box; } .nxc-join-a { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; font-size: 11.5px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); animation: nxcRingOut 1.2s ease-out 2; } .nxc-join-a img { width: 100%; height: 100%; object-fit: cover; } .nxc-join-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-join-t b { color: #fff; font-weight: 700; } .nxc-join img.nxc-e { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; } @keyframes nxcJoin { from { opacity: 0; transform: translateY(-26px) scale(.8); } } @keyframes nxcRingOut { 0% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 0 0 rgba(34, 197, 94, .7); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 0 10px rgba(34, 197, 94, 0); } } .nxc-stack span { animation: nxcPopIn .4s cubic-bezier(.2, .9, .3, 1.6); } /* typing: a small bubble with the writer's avatar, like a message on its way */ .nxc .nxc-typing { left: 12px; bottom: 8px; height: auto; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; animation: nxcIn .35s cubic-bezier(.2, .9, .3, 1.25) both; } .nxc-ty-a { display: inline-flex; } .nxc-ty-a i { width: 26px; height: 26px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #17122C; color: #fff; font: 800 11px var(--ft); font-style: normal; } .nxc-ty-a i:first-child { margin-left: 0; } .nxc-ty-b { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 6px 16px 16px 16px; background: linear-gradient(180deg, rgba(46, 37, 88, .96), rgba(31, 25, 64, .96)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } .nxc-ty-t { padding: 3px 10px; border-radius: 99px; background: rgba(14, 11, 28, .72); font-size: 11.5px; color: #B5ADD6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-ty-t b { color: #fff; } .nxc .nxc-typing .nxc-dots i { width: 7px; height: 7px; } /* pinned */ .nxc-pin { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; padding: 5px 6px 5px 5px; border-radius: 16px; border: 1px solid rgba(251, 191, 36, .32); background: linear-gradient(90deg, rgba(251, 191, 36, .14), rgba(236, 72, 153, .08)); } .nxc-pin-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; } .nxc-pin-i { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #FBBF24, #F97316); color: #2A1503; box-shadow: 0 6px 14px rgba(251, 191, 36, .3); } .nxc-pin-i svg { width: 16px; height: 16px; transform: rotate(35deg); } .nxc-pin-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-family: var(--ft); } .nxc-pin-t em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #FCD34D; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-pin-t b { font-size: 12.5px; font-weight: 600; color: #F3F0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc-pin-x { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: rgba(0, 0, 0, .2); color: var(--mute); cursor: pointer; } .nxc-pin-x svg { width: 13px; height: 13px; } .nxc .nxc-acts [data-act="pin"] { color: #FCD34D; } /* @ suggestions */ .nxc-atl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 8px; border-radius: 16px; background: rgba(20, 16, 42, .97); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 -10px 26px rgba(0, 0, 0, .3); animation: nxcDrop .16s ease; } .nxc-atl button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 99px; background: rgba(255, 255, 255, .05); color: #E9E5FA; font: 600 12.5px var(--ft); cursor: pointer; } .nxc-atl button i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 800 11px var(--ft); font-style: normal; } .nxc-atl button.is-on, .nxc-atl button:hover { border-color: transparent; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; } /* confetti */ .nxc-conf { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: nxcConf 2.8s cubic-bezier(.2, .5, .4, 1) forwards; } .nxc-conf:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; } .nxc-conf:nth-child(4n) { width: 6px; height: 16px; } @keyframes nxcConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 0), 620px) rotate(var(--r, 360deg)); } } @media (prefers-reduced-motion: reduce) { .nxc-join, .nxc-join-a, .nxc-stack span, .nxc .nxc-typing { animation: none !important; } } /* ===== v13 (2026-10-11): the action pill and the reaction bar belong to their own bubble ===== Both live inside .nxc-body: beside the bubble on the same line; .is-tight (no room beside, set by fit() in nx-chat.js) puts them on the bubble's top corner; .is-top = first row of the list. */ .nxc .nxc-msg .nxc-body { position: relative; flex: 0 1 auto; } .nxc .nxc-msg .nxc-body > .nxc-acts, .nxc .nxc-msg .nxc-body > .nxc-rxbar { position: absolute; top: 50%; bottom: auto; left: 100%; right: auto; margin: 0 0 0 8px; transform: translateY(-50%); white-space: nowrap; } .nxc .nxc-msg.is-mine .nxc-body > .nxc-acts, .nxc .nxc-msg.is-mine .nxc-body > .nxc-rxbar { left: auto; right: 100%; margin: 0 8px 0 0; } /* a bridge, so the pointer can cross from the bubble to the pill without losing it */ .nxc .nxc-msg .nxc-body > .nxc-acts::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: -12px; right: -8px; z-index: -1; } .nxc .nxc-msg.is-tight .nxc-body > .nxc-acts { top: -15px; left: auto; right: 4px; margin: 0; transform: none; } .nxc .nxc-msg.is-tight.is-mine .nxc-body > .nxc-acts { right: auto; left: 4px; } .nxc .nxc-msg.is-tight .nxc-body > .nxc-rxbar { top: -24px; left: 0; right: auto; margin: 0; transform: none; } .nxc .nxc-msg.is-tight.is-mine .nxc-body > .nxc-rxbar { left: auto; right: 0; } .nxc .nxc-msg.is-tight.is-top .nxc-body > .nxc-acts { top: auto; bottom: -15px; } .nxc .nxc-msg.is-tight.is-top .nxc-body > .nxc-rxbar { top: auto; bottom: -24px; } .nxc .nxc-body > .nxc-rxbar { z-index: 8; } .nxc .nxc-body:has(> .nxc-rxbar) > .nxc-acts { opacity: 0 !important; pointer-events: none !important; } .nxc .nxc-msg .nxc-body > .nxc-acts { z-index: 7; background: rgba(30, 24, 60, .97); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; } .nxc .nxc-msg:hover .nxc-body > .nxc-acts, .nxc .nxc-msg:focus-within .nxc-body > .nxc-acts { opacity: 1; pointer-events: auto; } .nxc .nxc-list .nxc-msg:first-of-type .nxc-rxbar, .nxc .nxc-day + .nxc-msg .nxc-rxbar { bottom: auto; } .nxc .nxc-msg.is-tight.is-top .nxc-body > .nxc-rxbar { bottom: -24px; } /* tight: the pill stands just above its bubble; the reactions open under it, in the flow, covering nothing */ .nxc .nxc-msg.is-tight .nxc-body > .nxc-acts, .nxc .nxc-msg.is-tight.is-mine .nxc-body > .nxc-acts { top: auto; bottom: calc(100% - 7px); } .nxc .nxc-msg.is-tight.is-top .nxc-body > .nxc-acts { bottom: auto; top: calc(100% - 7px); } .nxc .nxc-msg.is-tight .nxc-body > .nxc-rxbar, .nxc .nxc-msg.is-tight.is-mine .nxc-body > .nxc-rxbar, .nxc .nxc-msg.is-tight.is-top .nxc-body > .nxc-rxbar { position: relative; top: auto; bottom: auto; left: auto; right: auto; align-self: flex-start; display: inline-flex; margin: 6px 0 2px; transform: none; } .nxc .nxc-msg.is-tight.is-mine .nxc-body > .nxc-rxbar { align-self: flex-end; } .nxc .nxc-msg.is-tight:not(.is-mine) .nxc-body > .nxc-rxbar { display: flex; width: max-content; } .nxc .nxc-msg:not(.is-tight) .nxc-body > .nxc-acts, .nxc .nxc-msg:not(.is-tight) .nxc-body > .nxc-rxbar { top: var(--by, 50%); } .nxc-rxbar { scroll-margin: 14px; } /* ===== v17 (2026-10-11): pickers float above the composer; no sideways scroll in the list ===== */ .nxc .nxc-list { overflow-x: hidden; } .nxc .nxc-form { position: relative; } .nxc .nxc-emoji, .nxc .nxc-music { position: absolute; z-index: 25; left: 12px; right: 12px; bottom: calc(100% + 8px); margin: 0; max-width: none; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(180deg, #1B1538, #130F28) padding-box, linear-gradient(140deg, rgba(196, 181, 253, .55), rgba(236, 72, 153, .35) 45%, rgba(255, 255, 255, .08)) border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(139, 92, 246, .16); animation: nxcRise .22s cubic-bezier(.2, .9, .3, 1.2); } @keyframes nxcRise { from { opacity: 0; transform: translateY(10px) scale(.97); } } .nxc.is-page .nxc-emoji { right: auto; width: 404px; max-width: calc(100% - 24px); } .nxc.is-page .nxc-music { right: auto; width: 460px; max-width: calc(100% - 24px); } .nxc.is-widget.is-big .nxc-emoji { right: auto; width: 404px; } .nxc.is-widget.is-big .nxc-music { right: auto; width: 460px; } .nxc .nxc-emoji { grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px; max-height: min(346px, 52vh); overflow-y: auto; scrollbar-width: none; } .nxc .nxc-emoji::-webkit-scrollbar { display: none; } .nxc .nxc-emoji button { height: 44px; border-radius: 14px; } .nxc .nxc-emoji button img { width: 34px; height: 34px; } .nxc .nxc-music { max-height: min(430px, 62vh); } .nxc .nxc-mu-list, .nxc.is-page .nxc-mu-list { max-height: none; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, .5) transparent; } .nxc .nxc-mu-list::-webkit-scrollbar, .nxc .nxc-list::-webkit-scrollbar, .nxc .nxc-side::-webkit-scrollbar, .nxc .nxc-settings::-webkit-scrollbar { width: 6px; height: 0; } .nxc .nxc-mu-list::-webkit-scrollbar-thumb, .nxc .nxc-list::-webkit-scrollbar-thumb, .nxc .nxc-side::-webkit-scrollbar-thumb, .nxc .nxc-settings::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient(180deg, rgba(167, 139, 250, .65), rgba(236, 72, 153, .5)); } .nxc .nxc-mu-list::-webkit-scrollbar-track, .nxc .nxc-list::-webkit-scrollbar-track { background: transparent; } .nxc.has-pop .nxc-guest { display: grid !important; } .nxc.is-widget.has-pop .nxc-guest { display: none !important; } .nxc .nxc-atl { position: absolute; z-index: 24; left: 12px; right: 12px; bottom: calc(100% + 8px); margin: 0; } @media (max-width: 640px) { .nxc .nxc-emoji { max-height: 46vh; } .nxc .nxc-music { max-height: 58vh; } } .nxc .nxc-mu-search, .nxc .nxc-mu-chips, .nxc .nxc-mu-src { flex: 0 0 auto; } .nxc .nxc-mu-chips { min-height: 36px; align-items: center; } .nxc .nxc-music { padding: 12px; gap: 10px; } .nxc.is-widget:not(.is-big) .nxc-music { max-height: min(372px, 56vh); } .nxc .nxc-mu-search:focus-within { box-shadow: 0 0 0 1.5px var(--a1); } /* ===================================================================== v19 frame (2026-10-11) — .nxc.s19: the messenger layout. Flat navy surfaces, thin borders, one text font, rooms as a list with the last message, outlined bubbles with the time under them, a boxed composer with a tool row and a "გაგზავნა" button. No glows, no gradients on surfaces; the accent colour (--a1) is used for the active row, own bubbles and the button. ===================================================================== */ .nxc.s19 { --b0: #090B15; --b1: #0C0F1C; --b2: #111528; --b3: #171C34; --bd: rgba(150, 165, 255, .13); --bd2: rgba(150, 165, 255, .22); --tx: #E7E9F6; --mu: #8E94B4; --a1: #6D7CFF; --a2: #A56BFF; --mine1: #6D7CFF; --mine2: #6D7CFF; } .nxc.s19[data-accent="pink"] { --a1: #F0599B; --a2: #F58A5B; --mine1: #F0599B; } .nxc.s19[data-accent="blue"] { --a1: #3B8BFF; --a2: #38C6F4; --mine1: #3B8BFF; } .nxc.s19[data-accent="green"] { --a1: #19B98A; --a2: #7CCB3A; --mine1: #19B98A; } .nxc.s19, .nxc.s19 button, .nxc.s19 input, .nxc.s19 textarea, .nxc.s19 b, .nxc.s19 h3, .nxc.s19 h4, .nxc.s19 em, .nxc.s19 small, .nxc.s19 span, .nxc.s19 a, .nxc.s19 time { font-family: var(--ft); letter-spacing: 0; } .nxc.s19 { color: var(--tx); } /* ---- surfaces ---- */ .nxc.s19 .nxc-panel, .nxc.s19 .nxc-side, .nxc.s19 .nxc-settings { background: var(--b1); border: 1px solid var(--bd); box-shadow: none; } .nxc.s19.is-widget .nxc-panel { border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); } .nxc.s19.is-page { gap: 0; margin-top: 18px; border: 1px solid var(--bd); border-radius: 16px; overflow: hidden; background: var(--b1); grid-template-columns: 320px minmax(0, 1fr); } .nxc.s19.is-page.is-set { grid-template-columns: 320px minmax(0, 1fr) 330px; } .nxc.s19.is-page .nxc-panel, .nxc.s19.is-page .nxc-side, .nxc.s19.is-page .nxc-settings { border: 0; border-radius: 0; } .nxc.s19.is-page .nxc-side { border-right: 1px solid var(--bd); padding: 0 0 12px; } .nxc.s19.is-page .nxc-settings { border-left: 1px solid var(--bd); } /* ---- header ---- */ .nxc.s19 .nxc-head { gap: 12px; min-height: 62px; padding: 11px 14px 11px 18px; background: var(--b1); border-bottom: 1px solid var(--bd); } .nxc.s19 .nxc-head::after, .nxc.s19 .nxc-logo::after { display: none; } .nxc.s19 .nxc-logo { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--r1) 20%, var(--b2)); color: var(--r1); box-shadow: none; animation: none; } .nxc.s19 .nxc-logo svg { width: 19px; height: 19px; fill: none; filter: none; } .nxc.s19 .nxc-title b { font-size: 15px; font-weight: 600; color: #fff; } .nxc.s19 .nxc-online { font-size: 12px; color: var(--mu); } .nxc.s19 .nxc-online > span { color: #4ADE80; font-weight: 600; } .nxc.s19 .nxc-ib { width: 34px; height: 34px; border-radius: 8px; background: none; border: 1px solid transparent; color: var(--mu) !important; transform: none; } .nxc.s19 .nxc-ib:hover { background: var(--b3); border-color: var(--bd); color: #fff !important; transform: none; } .nxc.s19 .nxc-stack span { width: 28px; height: 28px; border: 2px solid var(--b1); box-shadow: none; } /* ---- room tabs (small panel, phone) ---- */ .nxc.s19 .nxc-panel > .nxc-rooms { margin: 0; padding: 0 10px; gap: 2px; border: 0; border-bottom: 1px solid var(--bd); border-radius: 0; background: var(--b1); } .nxc.s19 .nxc-panel > .nxc-rooms .nxc-room { height: 42px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--mu); font-size: 13px; font-weight: 600; box-shadow: none; } .nxc.s19 .nxc-panel > .nxc-rooms .nxc-room:hover { background: none; color: #fff; } .nxc.s19 .nxc-panel > .nxc-rooms .nxc-room.is-on { background: none; color: #fff; border-bottom-color: var(--a1); box-shadow: none; } .nxc.s19 .nxc-panel > .nxc-rooms .nxc-room.is-on svg { color: var(--a1); } .nxc.s19 .nxc-unread { background: #F0466B; font-weight: 700; } /* ---- the list on the left (page) ---- */ .nxc.s19 .nxc-side h3 { margin: 0; padding: 18px 20px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .nxc.s19 .nxc-side h3:first-child { padding-top: 22px; } .nxc.s19 .nxc-side h3:first-child::before { content: "შეტყობინებები"; display: block; margin-bottom: 16px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; } .nxc.s19 .nxc-here-n { background: none; color: #4ADE80; padding: 0; } .nxc.s19 .nxc-rooms-side { gap: 0; margin: 0 0 6px; } .nxc.s19 .nxc-rooms-side .nxc-room { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 11px 18px 11px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; text-align: left; } .nxc.s19 .nxc-rooms-side .nxc-room:hover { background: rgba(150, 165, 255, .05); transform: none; } .nxc.s19 .nxc-rooms-side .nxc-room.is-on { background: color-mix(in srgb, var(--a1) 9%, transparent); border: 0; box-shadow: none; } .nxc.s19 .nxc-rooms-side .nxc-room.is-on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a1); } .nxc.s19 .nxc-rooms-side .nxc-room-i { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 50%; box-shadow: none; } .nxc.s19 .nxc-rooms-side .nxc-room[data-room="general"] .nxc-room-i { background: rgba(139, 92, 246, .18); color: #A78BFA; } .nxc.s19 .nxc-rooms-side .nxc-room[data-room="series"] .nxc-room-i { background: rgba(236, 72, 153, .16); color: #F472B6; } .nxc.s19 .nxc-rooms-side .nxc-room[data-room="movies"] .nxc-room-i { background: rgba(56, 189, 248, .16); color: #38BDF8; } .nxc.s19 .nxc-rooms-side .nxc-room-i svg { width: 19px; height: 19px; } .nxc.s19 .nxc-rooms-side .nxc-room-t { grid-column: 2; grid-row: 1 / 3; min-width: 0; gap: 3px; } .nxc.s19 .nxc-rooms-side .nxc-room-t b { font-size: 14.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc.s19 .nxc-rooms-side .nxc-room.is-on .nxc-room-t b { color: var(--a1); } .nxc.s19 .nxc-rooms-side .nxc-room-t small { display: block; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--mu); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; } .nxc.s19 .nxc-room-at { grid-column: 3; grid-row: 1; justify-self: end; font-size: 11px; color: var(--mu); white-space: nowrap; } .nxc.s19 .nxc-rooms-side .nxc-room-on { grid-column: 3; grid-row: 2; justify-self: end; padding: 0; background: none; color: #4ADE80; font-size: 11px; font-weight: 600; } .nxc.s19 .nxc-rooms-side .nxc-unread { grid-column: 3; grid-row: 2; justify-self: end; position: static; } .nxc.s19 .nxc-rooms-side .nxc-unread:not([hidden]) + .nxc-room-on { display: none; } .nxc.s19 .nxc-users { gap: 0; } .nxc.s19 .nxc-users li { gap: 12px; padding: 8px 18px 8px 20px; border-radius: 0; font-size: 14px; font-weight: 500; } .nxc.s19 .nxc-u-ava { width: 38px; height: 38px; flex-basis: 38px; box-shadow: none; background: var(--b3) !important; } .nxc.s19 .nxc-u-ava i { border-color: var(--b1); } /* ---- messages ---- */ .nxc.s19 .nxc-main { margin: 0; border: 0; } .nxc.s19 .nxc-list { padding: 16px 14px; } .nxc.s19.is-page .nxc-list { padding: 22px 26px; } .nxc.s19[data-bg="flat"] .nxc-fx { background: var(--b0); } .nxc.s19 .nxc-msg { gap: 10px; margin-top: 16px; padding: 0 2px; } .nxc.s19 .nxc-msg.is-cont { margin-top: 6px; } .nxc.s19 .nxc-ava { flex: 0 0 32px; width: 32px; } .nxc.s19 .nxc-ava img, .nxc.s19 .nxc-ava > span { width: 32px; height: 32px; border-radius: 50%; box-shadow: none; background: var(--b3); font-size: 13px; } .nxc.s19 .nxc-msg.is-boss .nxc-ava img, .nxc.s19 .nxc-msg.is-boss .nxc-ava > span { box-shadow: 0 0 0 2px var(--b0), 0 0 0 3.5px #F5B041; } .nxc.s19 .nxc-msg.is-vip .nxc-ava img, .nxc.s19 .nxc-msg.is-vip .nxc-ava > span { box-shadow: 0 0 0 2px var(--b0), 0 0 0 3.5px var(--a2); } .nxc.s19 .nxc-crown { top: -10px; width: 15px; height: 15px; margin-left: -7.5px; } .nxc.s19 .nxc-crown svg { width: 15px; height: 15px; } .nxc.s19 .nxc-body { max-width: min(calc(100% - 44px), 640px); } .nxc.s19 .nxc-meta { margin: 0 0 5px; gap: 7px; } .nxc.s19 .nxc-meta b { font-size: 12.5px; font-weight: 600; } .nxc.s19 .nxc-meta time { display: none; } .nxc.s19 .nxc-badge { padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; background: rgba(150, 165, 255, .12); color: #B9C0E6; } .nxc.s19 .nxc-badge[data-g="1"], .nxc.s19 .nxc-badge[data-g="8"] { background: rgba(245, 176, 65, .16); color: #F5B041; } .nxc.s19 .nxc-badge.is-guest { background: rgba(150, 165, 255, .08); color: var(--mu); } .nxc.s19 .nxc-msg:not(.is-emo) .nxc-text, .nxc.s19 .nxc-msg.is-cont:not(.is-emo) .nxc-text, .nxc.s19 .nxc-msg.is-mine:not(.is-emo) .nxc-text, .nxc.s19 .nxc-msg.is-cont.is-mine:not(.is-emo) .nxc-text { padding: 9px 13px; border-radius: 8px; background: var(--b2); border: 1px solid var(--bd); box-shadow: none; color: var(--tx); font-size: var(--fs); font-weight: 400; line-height: 1.5; transform: none; } .nxc.s19 .nxc-msg.is-mine:not(.is-emo) .nxc-text { background: color-mix(in srgb, var(--a1) 13%, var(--b2)); border-color: color-mix(in srgb, var(--a1) 42%, transparent); } .nxc.s19 .nxc-msg.is-mine:not(.is-emo) .nxc-text::after { display: none; } .nxc.s19 .nxc-msg.is-mention .nxc-text { box-shadow: none; border-color: #F0466B; } .nxc.s19 .nxc-text a { color: #7FA6FF; } .nxc.s19 .nxc-when { margin-top: 5px; font-size: 10.5px; color: var(--mu); font-variant-numeric: tabular-nums; } .nxc.s19 .nxc-msg.is-mine .nxc-when { text-align: right; align-self: flex-end; } .nxc.s19 .nxc-msg:has(+ .nxc-msg.is-cont) .nxc-when { display: none; } .nxc.s19 .nxc-quote { border-left: 2px solid var(--a1); border-radius: 0 6px 6px 0; background: rgba(150, 165, 255, .07); } .nxc.s19 .nxc-day { margin: 16px 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--mu); } .nxc.s19 .nxc-day::before, .nxc.s19 .nxc-day::after { background: var(--bd); } .nxc.s19 .nxc-day span { padding: 0 4px; background: none; border: 0; backdrop-filter: none; } .nxc.s19 .nxc-newline::before, .nxc.s19 .nxc-newline::after { background: color-mix(in srgb, var(--a1) 55%, transparent); } .nxc.s19 .nxc-newline span { padding: 2px 10px; border-radius: 6px; background: color-mix(in srgb, var(--a1) 18%, var(--b2)); color: #fff; box-shadow: none; font-weight: 500; } .nxc.s19 .nxc-msg.is-new { animation: nxcIn19 .28s ease both; } @keyframes nxcIn19 { from { opacity: 0; transform: translateY(8px); } } /* reactions, pill */ .nxc.s19 .nxc-rxc { height: 25px; border-radius: 7px; background: var(--b2); border: 1px solid var(--bd); } .nxc.s19 .nxc-rxc.is-mine { background: color-mix(in srgb, var(--a1) 16%, var(--b2)); border-color: color-mix(in srgb, var(--a1) 55%, transparent); } .nxc.s19 .nxc-msg .nxc-body > .nxc-acts, .nxc.s19 .nxc-rxbar { border-radius: 9px; background: var(--b3); border: 1px solid var(--bd2); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); backdrop-filter: none; } .nxc.s19 .nxc-acts button { border-radius: 6px; } .nxc.s19 .nxc-acts button:hover { transform: none; background: rgba(150, 165, 255, .14); } /* cards inside messages */ .nxc.s19 .nxc-film { width: min(372px, 100%); gap: 0; padding: 0; border-radius: 9px; overflow: hidden; background: var(--b2); border: 1px solid var(--bd); box-shadow: none; } .nxc.s19 .nxc-film:hover { transform: none; border-color: var(--a1); box-shadow: none; } .nxc.s19 .nxc-film-p { flex: 0 0 92px; width: 92px; aspect-ratio: auto; min-height: 126px; border-radius: 0; box-shadow: none; } .nxc.s19 .nxc-film-b { padding: 12px 14px; gap: 4px; } .nxc.s19 .nxc-film-b em { color: var(--a1); font-weight: 600; letter-spacing: .03em; } .nxc.s19 .nxc-film-b b { font-size: 14px; font-weight: 600; } .nxc.s19 .nxc-film-go { height: auto; padding: 0; background: none; box-shadow: none; color: var(--a2); font-size: 12.5px; font-weight: 600; } .nxc.s19 .nxc-song { border-radius: 10px; background: var(--b2); border: 1px solid var(--bd); box-shadow: none; } .nxc.s19 .nxc-song:hover { transform: none; } .nxc.s19 .nxc-sg-glow { opacity: .16; } .nxc.s19 .nxc-sg-cover { border-radius: 8px; box-shadow: none; } .nxc.s19 .nxc-sg-bar i { background: var(--a1); box-shadow: none; } /* bars over / under the list */ .nxc.s19 .nxc-now, .nxc.s19 .nxc-pin { margin: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--bd); border-radius: 0; background: var(--b2); } .nxc.s19 .nxc-pin-i { border-radius: 8px; background: rgba(245, 176, 65, .16); color: #F5B041; box-shadow: none; } .nxc.s19 .nxc-pin-t em { color: #F5B041; } .nxc.s19 .nxc-join { height: 32px; border-radius: 8px; background: var(--b3); border: 1px solid var(--bd2); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); font-size: 12.5px; } .nxc.s19 .nxc-join.is-boss { background: var(--b3); border-color: rgba(245, 176, 65, .5); } .nxc.s19 .nxc-join-a { box-shadow: none; } .nxc.s19 .nxc-ty-b { height: 30px; border-radius: 8px; background: var(--b2); border: 1px solid var(--bd); box-shadow: none; } .nxc.s19 .nxc-ty-a i { overflow: hidden; border-color: var(--b0); } .nxc.s19 .nxc-ty-a img { width: 100%; height: 100%; object-fit: cover; } .nxc.s19 .nxc-ty-t { background: none; padding: 0; } .nxc.s19 .nxc-dots i { background: var(--a1); } .nxc.s19 .nxc-jump { height: 34px; border-radius: 8px; background: var(--a1); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); font-weight: 600; } /* ---- composer: a boxed editor ---- */ .nxc.s19 .nxc-form { padding: 0 14px 14px; border-top: 0; background: var(--b0); } .nxc.s19.is-page .nxc-form { padding: 0 26px 22px; } .nxc.s19:not([data-bg="flat"]) .nxc-form { background: var(--b1); padding-top: 12px; border-top: 1px solid var(--bd); } .nxc.s19 .nxc-compose { display: block; padding: 0; gap: 0; border-radius: 10px; background: var(--b1); border: 1px solid var(--bd2); box-shadow: none; overflow: hidden; } .nxc.s19 .nxc-compose[hidden] { display: none !important; } .nxc.s19 .nxc-compose:focus-within { background: var(--b1); border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 16%, transparent); } .nxc-tools { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--bd); } .nxc.s19 .nxc-tools .nxc-emo-b { width: 32px; height: 32px; border-radius: 7px; color: var(--mu) !important; } .nxc.s19 .nxc-tools .nxc-emo-b:hover { background: var(--b3); color: #fff !important; } .nxc-tsep { width: 1px; height: 20px; margin: 0 6px; background: var(--bd2); } .nxc-avb { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--b3); cursor: pointer; box-shadow: 0 0 0 1.5px var(--bd2); transition: box-shadow .15s; } .nxc-avb:hover { box-shadow: 0 0 0 2px var(--a1); } .nxc-avb img { width: 100%; height: 100%; object-fit: cover; display: block; } .nxc.s19 .nxc-who { margin-left: 8px; min-width: 0; font-size: 12px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc.s19 .nxc-who b { color: var(--tx); font-weight: 600; } .nxc.s19 .nxc-who button { padding: 0; border: 0; background: none; color: var(--a1); font-size: inherit; cursor: pointer; text-decoration: none; } .nxc.s19 .nxc-in { display: block; width: 100%; height: 52px; min-height: 52px; padding: 12px 14px 6px !important; font-size: 14px; font-weight: 400; color: var(--tx); } .nxc.s19 .nxc-in::placeholder { color: #6E7598; } .nxc-cbar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px 14px; } .nxc-hint { flex: 1; min-width: 0; font-size: 11px; color: #6E7598; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nxc.s19 .nxc-count { font-size: 11px; color: var(--mu); } .nxc.s19 .nxc-send { flex: 0 0 auto; width: auto; height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 7px; background: var(--a1); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: none; transition: filter .15s; } .nxc.s19 .nxc-send:hover { transform: none; filter: brightness(1.12); } .nxc.s19 .nxc-send svg { width: 14px; height: 14px; margin: 0; } .nxc.s19 .nxc-nick { gap: 10px; padding: 6px 6px 6px 8px; border-radius: 10px; background: var(--b1); border: 1px solid var(--a1); } .nxc.s19 .nxc-btn { height: 32px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--bd2); background: var(--b3); font-weight: 600; box-shadow: none; } .nxc.s19 .nxc-btn:hover { transform: none; } .nxc.s19 .nxc-btn.is-main { background: var(--a1); border-color: transparent; box-shadow: none; } .nxc.s19 .nxc-guest { margin: 0 14px 10px; padding: 10px 40px 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--a1) 9%, var(--b1)); border: 1px solid color-mix(in srgb, var(--a1) 32%, transparent); } .nxc.s19.is-page .nxc-guest { margin: 0 26px 12px; } .nxc.s19 .nxc-guest b { font-weight: 600; } .nxc.s19 .nxc-replybar { border-radius: 8px; background: var(--b2); border-left: 2px solid var(--a1); } .nxc.s19 .nxc-err { border-radius: 8px; } /* ---- pop-ups ---- */ .nxc.s19 .nxc-emoji, .nxc.s19 .nxc-music, .nxc.s19 .nxc-bgs, .nxc.s19 .nxc-atl, .nxc.s19 .nxc-avs { border-radius: 12px; background: var(--b2); border: 1px solid var(--bd2); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } .nxc.s19 .nxc-emoji, .nxc.s19 .nxc-music, .nxc.s19 .nxc-atl, .nxc.s19 .nxc-avs { left: 14px; right: 14px; } .nxc.s19.is-page .nxc-emoji, .nxc.s19.is-page .nxc-music, .nxc.s19.is-page .nxc-avs, .nxc.s19.is-page .nxc-atl { left: 26px; } .nxc.s19 .nxc-emoji button { border-radius: 8px; } .nxc.s19 .nxc-emoji button:hover { transform: scale(1.15); } .nxc.s19 .nxc-mu-chip { border-radius: 8px; } .nxc.s19 .nxc-mu-chip.is-on { background: var(--a1); } .nxc.s19 .nxc-mu-send { border-radius: 7px; background: var(--a1); } .nxc.s19 .nxc-mu-search { border-radius: 8px; background: var(--b1); border: 1px solid var(--bd); } .nxc.s19 .nxc-atl button { border-radius: 8px; } .nxc.s19 .nxc-atl button.is-on, .nxc.s19 .nxc-atl button:hover { background: var(--a1); } .nxc.s19 .nxc-bgt { border-radius: 9px; } .nxc.s19 .nxc-bgt.is-on { border-color: var(--a1); box-shadow: none; } .nxc.s19 .nxc-bgp { border-radius: 6px; } .nxc-bgp[data-bgp="flat"] { background: #090B15; border: 1px solid rgba(150, 165, 255, .2); } .nxc-avs { position: absolute; z-index: 26; bottom: calc(100% + 8px); padding: 12px; animation: nxcRise .2s ease; } .nxc.s19.is-page .nxc-avs, .nxc.s19.is-widget.is-big .nxc-avs { right: auto; width: 420px; max-width: calc(100% - 28px); } .nxc-avs-g { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: min(300px, 44vh); overflow-y: auto; padding: 3px; scrollbar-width: none; } .nxc-avs-g::-webkit-scrollbar { display: none; } .nxc-avt { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--b3); cursor: pointer; box-shadow: 0 0 0 2px transparent; transition: transform .15s, box-shadow .15s; } .nxc-avt img { width: 100%; height: 100%; object-fit: cover; display: block; } .nxc-avt:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--bd2); } .nxc-avt.is-on { box-shadow: 0 0 0 2px var(--b2), 0 0 0 4px var(--a1); } .nxc-avs-n { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--mu); } .nxc.s19 .nxc-settings { padding: 18px 16px; } .nxc.s19 .nxc-seg { border-radius: 8px; } .nxc.s19 .nxc-seg button { border-radius: 6px; } .nxc.s19 .nxc-seg button.is-on { background: var(--a1); } /* ---- launcher ---- */ .nxc.s19 .nxc-fab { width: 56px; height: 56px; border-radius: 50%; background: var(--a1); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset; animation: none; } .nxc.s19 .nxc-fab::before, .nxc.s19 .nxc-fab::after { display: none; } .nxc.s19 .nxc-fab svg { width: 24px; height: 24px; fill: none; } .nxc.s19 .nxc-fab-n { background: #F0466B; border-color: var(--b0); } .nxc.s19 .nxc-mu-list::-webkit-scrollbar-thumb, .nxc.s19 .nxc-list::-webkit-scrollbar-thumb, .nxc.s19 .nxc-side::-webkit-scrollbar-thumb, .nxc.s19 .nxc-settings::-webkit-scrollbar-thumb { background: rgba(150, 165, 255, .28); } @media (max-width: 1100px) { .nxc.s19.is-page, .nxc.s19.is-page.is-set { grid-template-columns: 270px minmax(0, 1fr); } } @media (max-width: 760px) { .nxc.s19.is-page, .nxc.s19.is-page.is-set { grid-template-columns: 1fr; } .nxc.s19.is-page .nxc-form { padding: 0 12px 12px; } .nxc.s19.is-page .nxc-list { padding: 14px 12px; } .nxc.s19.is-page .nxc-guest { margin: 0 12px 10px; } .nxc.s19.is-page .nxc-emoji, .nxc.s19.is-page .nxc-music, .nxc.s19.is-page .nxc-avs, .nxc.s19.is-page .nxc-atl { left: 12px; right: 12px; width: auto; } } @media (max-width: 640px) { .nxc.s19.is-widget .nxc-panel { border-radius: 0; } .nxc-hint { display: none; } .nxc-cbar { justify-content: flex-end; } .nxc.s19 .nxc-in { font-size: 16px; } .nxc-avs-g { grid-template-columns: repeat(5, 1fr); } } .nxc.s19 .nxc-side h3:first-child { display: block; } .nxc.s19.is-widget:not(.is-big) .nxc-in { height: 42px; min-height: 42px; padding-top: 10px !important; } .nxc.s19.is-widget:not(.is-big) .nxc-hint { visibility: hidden; } .nxc.s19.is-widget .nxc-guest { margin-bottom: 8px; } /* ===== v21 (2026-10-12): avatar picker with tabs, upload and delete ===== */ .nxc.s19 .nxc-avs { padding: 14px; } .nxc.s19.is-page .nxc-avs, .nxc.s19.is-widget.is-big .nxc-avs { width: 470px; } .nxc-avs-me { display: flex; align-items: center; gap: 14px; margin: 2px 2px 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 14%, var(--b1)), color-mix(in srgb, var(--a2) 10%, var(--b1))); border: 1px solid var(--bd); } .nxc-avs-cur { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--a1), var(--a2), #38C6F4, var(--a1)); animation: nxcSpin 6s linear infinite; } .nxc-avs-cur img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--b3); border: 3px solid var(--b2); animation: nxcSpinBack 6s linear infinite; } @keyframes nxcSpinBack { to { transform: rotate(-360deg); } } .nxc.is-avbusy .nxc-avs-cur img { opacity: .4; } .nxc-avs-acts { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nxc-avs-acts .nxc-btn { gap: 7px; } .nxc-avs-acts .nxc-btn svg { width: 15px; height: 15px; } .nxc.s19 .nxc-btn.is-del { color: #FF8FA6 !important; border-color: rgba(240, 70, 107, .4); background: rgba(240, 70, 107, .1); } .nxc.s19 .nxc-btn.is-del:hover { background: rgba(240, 70, 107, .2); } .nxc-avs-acts small { flex: 1 0 100%; font-size: 11.5px; color: var(--mu); } .nxc-avs-tabs { display: flex; gap: 4px; margin: 0 2px 10px; overflow-x: auto; scrollbar-width: none; } .nxc-avs-tabs::-webkit-scrollbar { display: none; } .nxc-avs-tabs button { flex: 0 0 auto; height: 30px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; background: none; color: var(--mu); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; } .nxc-avs-tabs button:hover { color: #fff; } .nxc-avs-tabs button.is-on { background: linear-gradient(135deg, var(--a1), var(--a2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--a1) 40%, transparent); } .nxc.s19 .nxc-avs-g { max-height: min(250px, 34vh); } .nxc-avt { animation: nxcPopIn .3s cubic-bezier(.2, .9, .3, 1.4) both; } .nxc-avlink { margin-left: auto; padding: 0 4px; border: 0; background: none; color: var(--a1); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .nxc-avlink:hover { text-decoration: underline; } .nxc.s19.is-widget:not(.is-big) .nxc-who { max-width: 150px; } /* ===== v21: a little shine and life on the flat frame ===== */ /* a lit hairline on top of the frame and a faint glow of the accent around it */ .nxc.s19.is-page, .nxc.s19.is-widget .nxc-panel { position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 70px color-mix(in srgb, var(--a1) 9%, transparent); } .nxc.s19.is-widget .nxc-panel { position: fixed; } .nxc.s19.is-page::before, .nxc.s19.is-widget .nxc-panel::before { content: ""; position: absolute; z-index: 40; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--a1) 20%, var(--a2) 50%, #38C6F4 80%, transparent); background-size: 200% 100%; animation: nxcFlow 7s linear infinite; pointer-events: none; } @keyframes nxcFlow { to { background-position: -200% 0; } } /* header: the room's colour washes in from the left; the room icon breathes */ .nxc.s19 .nxc-head { background: linear-gradient(90deg, color-mix(in srgb, var(--r1) 13%, var(--b1)), var(--b1) 55%); } .nxc.s19 .nxc-logo { background: linear-gradient(135deg, color-mix(in srgb, var(--r1) 34%, var(--b2)), color-mix(in srgb, var(--r2) 22%, var(--b2))); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--r1) 40%, transparent), 0 0 18px color-mix(in srgb, var(--r1) 30%, transparent); animation: nxcBreath 3.6s ease-in-out infinite; } @keyframes nxcBreath { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--r1) 55%, transparent), 0 0 26px color-mix(in srgb, var(--r1) 50%, transparent); } } .nxc.s19 .nxc-online > span { text-shadow: 0 0 10px rgba(74, 222, 128, .6); } /* the list on the left */ .nxc.s19 .nxc-side h3:first-child::before { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--a1) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nxc.s19 .nxc-rooms-side .nxc-room { transition: background .2s, padding-left .2s; } .nxc.s19 .nxc-rooms-side .nxc-room:hover { padding-left: 24px; } .nxc.s19 .nxc-rooms-side .nxc-room.is-on { background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 17%, transparent), transparent 85%); } .nxc.s19 .nxc-rooms-side .nxc-room.is-on::before { background: linear-gradient(180deg, var(--a1), var(--a2)); box-shadow: 0 0 12px var(--a1); } .nxc.s19 .nxc-rooms-side .nxc-room.is-on .nxc-room-i { box-shadow: 0 0 0 1px color-mix(in srgb, var(--a1) 50%, transparent), 0 0 16px color-mix(in srgb, var(--a1) 35%, transparent); } .nxc.s19 .nxc-rooms-side .nxc-room-i { transition: transform .2s; } .nxc.s19 .nxc-rooms-side .nxc-room:hover .nxc-room-i { transform: scale(1.08) rotate(-4deg); } .nxc.s19 .nxc-unread { animation: nxcBadge 1.8s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(240, 70, 107, .6); } @keyframes nxcBadge { 70% { box-shadow: 0 0 0 7px rgba(240, 70, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 70, 107, 0); } } .nxc.s19 .nxc-users li { transition: background .15s, padding-left .2s; } .nxc.s19 .nxc-users li:hover { padding-left: 24px; } .nxc.s19 .nxc-u-ava i { animation: nxcLive 2.2s ease-out infinite; } @keyframes nxcLive { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } } .nxc.s19 .nxc-u-ava img, .nxc.s19 .nxc-ava img { transition: transform .2s; } .nxc.s19 .nxc-users li:hover .nxc-u-ava img, .nxc.s19 .nxc-msg:hover .nxc-ava img { transform: scale(1.1); } /* the plain background gets two very faint moving lights */ .nxc.s19[data-bg="flat"] .nxc-fx i:nth-child(-n+2) { display: block; width: 60%; aspect-ratio: 1; border-radius: 50%; } .nxc.s19[data-bg="flat"] .nxc-fx i:nth-child(1) { left: -20%; top: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 13%, transparent), transparent); animation: nxcDriftA 22s ease-in-out infinite alternate; } .nxc.s19[data-bg="flat"] .nxc-fx i:nth-child(2) { right: -25%; bottom: -35%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a2) 11%, transparent), transparent); animation: nxcDriftB 26s ease-in-out infinite alternate; } /* bubbles: a soft light on your own, a small lift under the pointer */ .nxc.s19 .nxc-msg:not(.is-emo) .nxc-text { transition: transform .18s, border-color .18s, box-shadow .18s; } .nxc.s19 .nxc-msg:hover:not(.is-emo) .nxc-text { transform: translateY(-1px); border-color: var(--bd2); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); } .nxc.s19 .nxc-msg.is-mine:not(.is-emo) .nxc-text { background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 22%, var(--b2)), color-mix(in srgb, var(--a2) 14%, var(--b2))); border-color: color-mix(in srgb, var(--a1) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 18px color-mix(in srgb, var(--a1) 14%, transparent); } .nxc.s19 .nxc-msg.is-mine:hover:not(.is-emo) .nxc-text { border-color: color-mix(in srgb, var(--a1) 75%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 24px color-mix(in srgb, var(--a1) 24%, transparent); } .nxc.s19 .nxc-msg.is-new { animation: nxcIn21 .42s cubic-bezier(.2, .9, .3, 1.3) both; } @keyframes nxcIn21 { from { opacity: 0; transform: translateY(14px) scale(.96); } } .nxc.s19 .nxc-msg.is-new .nxc-ava img { animation: nxcPopIn .5s cubic-bezier(.2, .9, .3, 1.6); } .nxc.s19 .nxc-film, .nxc.s19 .nxc-song { transition: transform .2s, border-color .2s, box-shadow .2s; } .nxc.s19 .nxc-film:hover, .nxc.s19 .nxc-song:hover { transform: translateY(-2px); border-color: var(--a1); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--a1) 18%, transparent); } .nxc.s19 .nxc-film-p { transition: transform .4s; } .nxc.s19 .nxc-film:hover .nxc-film-p { transform: scale(1.05); } .nxc.s19 .nxc-rxc { transition: transform .15s, border-color .15s; } .nxc.s19 .nxc-rxc:hover { transform: translateY(-2px) scale(1.05); border-color: var(--a1); } .nxc.s19 .nxc-newline span { background: linear-gradient(90deg, var(--a1), var(--a2), var(--a1)); background-size: 200% 100%; animation: nxcFlow 4s linear infinite; } /* composer */ .nxc.s19 .nxc-compose { transition: border-color .2s, box-shadow .2s; } .nxc.s19 .nxc-compose:focus-within { border-color: transparent; background: linear-gradient(var(--b1), var(--b1)) padding-box, linear-gradient(120deg, var(--a1), var(--a2), #38C6F4) border-box; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 13%, transparent), 0 14px 34px rgba(0, 0, 0, .35); } .nxc.s19 .nxc-tools .nxc-emo-b { transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), background .15s, color .15s; } .nxc.s19 .nxc-tools .nxc-emo-b:hover { transform: translateY(-2px) scale(1.1); color: var(--a1) !important; } .nxc.s19 .nxc-avb { box-shadow: 0 0 0 1.5px var(--bd2), 0 0 0 0 color-mix(in srgb, var(--a1) 50%, transparent); transition: box-shadow .2s, transform .2s; } .nxc.s19 .nxc-avb:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--a1), 0 0 16px color-mix(in srgb, var(--a1) 55%, transparent); } .nxc.s19 .nxc-send { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--a1) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .2s, filter .15s; } .nxc.s19 .nxc-send::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: nxcGlint 4.5s ease-in-out infinite; } @keyframes nxcGlint { 0%, 65% { left: -60%; } 100% { left: 140%; } } .nxc.s19 .nxc-send:hover { transform: translateY(-1px); filter: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--a1) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); } .nxc.s19 .nxc-send:active { transform: scale(.96); } .nxc.s19 .nxc-send svg { transition: transform .25s cubic-bezier(.2, .9, .3, 1.6); } .nxc.s19 .nxc-send:hover svg { transform: translate(3px, -3px) rotate(8deg); } .nxc.s19 .nxc-btn.is-main { background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--a1) 30%, transparent); } .nxc.s19 .nxc-btn { transition: transform .15s, box-shadow .2s, background .15s; } .nxc.s19 .nxc-btn:hover { transform: translateY(-1px); } .nxc.s19 .nxc-panel > .nxc-rooms .nxc-room.is-on { border-image: linear-gradient(90deg, var(--a1), var(--a2)) 1; text-shadow: 0 0 14px color-mix(in srgb, var(--a1) 60%, transparent); } .nxc.s19 .nxc-jump { background: linear-gradient(135deg, var(--a1), var(--a2)); animation: nxcBob 2s ease-in-out infinite; } .nxc.s19 .nxc-join { animation: nxcJoin .55s cubic-bezier(.2, .9, .3, 1.35) both; border-color: color-mix(in srgb, var(--a1) 45%, transparent); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 20px color-mix(in srgb, var(--a1) 22%, transparent); } /* launcher: gradient, a breathing ring */ .nxc.s19 .nxc-fab { background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 14px 34px color-mix(in srgb, var(--a1) 45%, rgba(0, 0, 0, .5)), inset 0 1px 0 rgba(255, 255, 255, .3); } .nxc.s19 .nxc-fab::after { display: block; content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; inset: -5px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--a2) 70%, transparent); opacity: 0; animation: nxcRing 2.8s ease-out infinite; pointer-events: none; } .nxc.s19.is-open .nxc-fab::after { display: none; } .nxc.s19.no-fx .nxc-send::before, .nxc.s19.no-fx.is-page::before, .nxc.s19.no-fx .nxc-panel::before, .nxc.s19.no-fx .nxc-logo, .nxc.s19.no-fx .nxc-fab::after, .nxc.s19.no-fx .nxc-u-ava i, .nxc.s19.no-fx .nxc-unread, .nxc.s19.no-fx .nxc-avs-cur, .nxc.s19.no-fx .nxc-avs-cur img { animation: none !important; } @media (prefers-reduced-motion: reduce) { .nxc.s19 .nxc-send::before, .nxc.s19.is-page::before, .nxc.s19 .nxc-panel::before, .nxc.s19 .nxc-logo, .nxc.s19 .nxc-fab::after, .nxc.s19 .nxc-u-ava i, .nxc.s19 .nxc-unread, .nxc-avs-cur, .nxc-avs-cur img, .nxc-avt, .nxc.s19 .nxc-jump { animation: none !important; } } /* ===== v22 (2026-10-12): pop-ups always fit inside the chat, whatever its height ===== --ph is the height of the panel; a pop-up over the composer may take what is left above it. The avatar window is a column: its head and tabs stay, only the grid scrolls (with a visible bar). */ .nxc.s19.is-widget { --ph: min(620px, calc(100vh - 120px)); } .nxc.s19.is-widget.is-big { --ph: calc(100vh - 120px); } .nxc.s19.is-page { --ph: max(560px, calc(100vh - 130px)); } @media (max-width: 640px) { .nxc.s19.is-widget, .nxc.s19.is-widget.is-big { --ph: 100dvh; } } @media (max-width: 760px) { .nxc.s19.is-page { --ph: calc(100dvh - 110px); } } .nxc.s19 .nxc-emoji, .nxc.s19 .nxc-music, .nxc.s19 .nxc-avs { max-height: max(200px, calc(var(--ph) - 176px)); } .nxc.s19 .nxc-bgs { max-height: calc(var(--ph) - 84px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(150, 165, 255, .4) transparent; overscroll-behavior: contain; } .nxc.s19 .nxc-emoji { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(150, 165, 255, .4) transparent; } .nxc.s19 .nxc-emoji::-webkit-scrollbar { display: block; width: 6px; } .nxc.s19 .nxc-emoji::-webkit-scrollbar-thumb, .nxc.s19 .nxc-avs-g::-webkit-scrollbar-thumb, .nxc.s19 .nxc-bgs::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(150, 165, 255, .4); } .nxc.s19 .nxc-avs:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; } .nxc.s19 .nxc-avs > * { flex: 0 0 auto; } .nxc.s19 .nxc-avs .nxc-avs-g { flex: 1 1 auto; min-height: 96px; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 4px 4px; scrollbar-width: thin; scrollbar-color: rgba(150, 165, 255, .45) transparent; } .nxc.s19 .nxc-avs-g::-webkit-scrollbar { display: block; width: 6px; } .nxc.s19 .nxc-avs-tabs { flex-wrap: wrap; overflow: visible; gap: 5px; } .nxc.s19 .nxc-avs-tabs button { height: 28px; padding: 0 10px; font-size: 12px; } .nxc.s19 .nxc-avs .nxc-bgs-h { margin: 0 2px 10px; } .nxc.s19 .nxc-avs-n { margin-top: 8px; } /* the small panel: everything in the avatar window a size down */ .nxc.s19.is-widget:not(.is-big) .nxc-avs { padding: 12px; } .nxc.s19.is-widget:not(.is-big) .nxc-avs-me { gap: 12px; margin-bottom: 10px; padding: 10px; } .nxc.s19.is-widget:not(.is-big) .nxc-avs-cur { flex-basis: 50px; width: 50px; height: 50px; } .nxc.s19.is-widget:not(.is-big) .nxc-avs-acts .nxc-btn { height: 30px; padding: 0 10px; font-size: 12px; } .nxc.s19.is-widget:not(.is-big) .nxc-avs-n { display: none; } .nxc.s19.is-widget:not(.is-big) .nxc-avs-g { grid-template-columns: repeat(6, 1fr); gap: 7px; } @media (max-height: 760px) { .nxc.s19 .nxc-avs-n { display: none; } .nxc.s19 .nxc-avs-me { padding: 9px; margin-bottom: 9px; } } /* the tool row keeps its pieces in line */ .nxc.s19 .nxc-tools { flex-wrap: nowrap; } .nxc.s19 .nxc-tools > * { flex: 0 0 auto; } .nxc.s19 .nxc-tools .nxc-who { flex: 1 1 auto; min-width: 0; max-width: none; } .nxc.s19.is-widget:not(.is-big) .nxc-who { max-width: none; } .nxc.s19 .nxc-bgs { max-height: max(200px, calc(var(--ph) - 240px)); } /* avatar tiles keep their square whatever the height of the window */ .nxc.s19 .nxc-avs .nxc-avs-g { align-content: start; grid-auto-rows: max-content; } .nxc.s19 .nxc-avt { position: relative; display: block; width: 100%; height: 0; padding: 0 0 100%; aspect-ratio: auto; } .nxc.s19 .nxc-avt img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; } /* ---------- v25: message menu (.nxc-mm) — fixed box in : reactions row + actions ---------- */ .nxc-mm { position: fixed; z-index: 2147483000; min-width: 232px; padding: 6px; border-radius: 14px; background: #171C34; border: 1px solid rgba(150, 165, 255, .22); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); color: #E7E9F6; font-family: inherit; animation: nxcMm .14s ease; transform-origin: 50% 100%; } .nxc-mm.is-below { transform-origin: 50% 0; } .nxc-mm.is-rx { min-width: 0; border-radius: 99px; padding: 4px 6px; } @keyframes nxcMm { from { opacity: 0; transform: scale(.94); } } .nxc-mm-rx { display: flex; justify-content: space-between; gap: 2px; } .nxc-mm-rx button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .15s cubic-bezier(.2, .9, .3, 1.6), background .12s; } .nxc-mm-rx button img { width: 26px; height: 26px; margin: 0; display: block; } .nxc-mm-rx button:hover, .nxc-mm-rx button:focus-visible { transform: scale(1.28); outline: 0; } .nxc-mm-rx button.is-on { background: rgba(109, 124, 255, .28); } .nxc-mm-acts { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(150, 165, 255, .14); display: grid; } .nxc-mm-acts button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .nxc-mm-acts button:hover, .nxc-mm-acts button:focus-visible { background: rgba(150, 165, 255, .14); outline: 0; } .nxc-mm-acts svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #8E94B4; } .nxc-mm-acts button.is-danger, .nxc-mm-acts button.is-danger svg { color: #FB7185; } /* narrow chat and touch: no hover pill, the bubble itself is the button */ .nxc.is-narrow .nxc-msg .nxc-body > .nxc-acts { display: none !important; } .nxc.is-narrow .nxc-text, .nxc.is-narrow .nxc-song, .nxc.is-narrow .nxc-film { cursor: pointer; } @media (hover: none) { .nxc .nxc-msg .nxc-body > .nxc-acts { display: none !important; } } .nxc .nxc-msg.is-menu .nxc-text, .nxc .nxc-msg.is-menu .nxc-song { box-shadow: 0 0 0 2px rgba(109, 124, 255, .65); } .nxc .nxc-msg.is-menu .nxc-body > .nxc-acts { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .nxc-mm { animation: none; } .nxc-mm-rx button { transition: none; } } /* v26: song card — arrow in the top right corner opens the track on kartulebi.com */ .nxc .nxc-song .nxc-sg-go { position: absolute; z-index: 3; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(150, 165, 255, .14); border: 1px solid rgba(150, 165, 255, .22); color: #C9CFFF; transition: background .15s, color .15s, transform .15s; } .nxc .nxc-song .nxc-sg-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .nxc .nxc-song .nxc-sg-go:hover, .nxc .nxc-song .nxc-sg-go:focus-visible { background: #6D7CFF; color: #fff; transform: translate(1px, -1px); outline: 0; } .nxc .nxc-song .nxc-sg-title { padding-right: 30px; } /* ---------- who reacted (v28): the people button after the reaction chips and its list in the floating menu ---------- */ .nxc-rxw { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%; background: rgba(28, 22, 58, .6); color: #A9A4C8; cursor: pointer; transition: color .14s, border-color .14s, transform .14s; } .nxc-rxw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .nxc-rxw:hover, .nxc-rxw:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .35); transform: translateY(-2px); outline: 0; } .nxc.s19 .nxc-rxw { height: 25px; width: 25px; border-radius: 7px; background: var(--b2); border-color: var(--bd); } .nxc-mm.is-who { width: 268px; max-width: calc(100vw - 12px); padding: 8px; } .nxc-mm-wh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 2px 4px 8px; border-bottom: 1px solid rgba(150, 165, 255, .14); font-size: 13px; } .nxc-mm-wh > b { margin-right: auto; font-weight: 700; } .nxc-mm-wh span { display: flex; flex-wrap: wrap; gap: 4px; } .nxc-mm-wh em { font-style: normal; color: #8E94B4; font-variant-numeric: tabular-nums; } .nxc-mm-wh button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid rgba(150, 165, 255, .18); border-radius: 99px; background: none; color: #B9BEDA; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; } .nxc-mm-wh button img { width: 15px; height: 15px; margin: 0; } .nxc-mm-wh button.is-on { background: rgba(109, 124, 255, .28); border-color: transparent; color: #fff; } .nxc-mm-wl { max-height: 252px; margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .nxc-mm-wl p { margin: 0; padding: 12px 6px; color: #8E94B4; font-size: 13px; text-align: center; } .nxc-mm-wp { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 9px; } .nxc-mm-wp:hover { background: rgba(150, 165, 255, .09); } .nxc-mm-wa { flex: none; width: 30px; height: 30px; margin: 0; border-radius: 50%; object-fit: cover; background: #232A4A; } .nxc-mm-wp span { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; } .nxc-mm-wp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } .nxc-mm-wp b i { font-style: normal; font-weight: 500; color: #8E94B4; } .nxc-mm-wp small { color: #8E94B4; font-size: 11.5px; } .nxc-mm-wp > img.nxc-e { flex: none; width: 20px; height: 20px; margin: 0; } /* ---------- photos (v29): in a message, waiting in the composer, and the viewer ---------- */ .nxc .nxc-pic { position: relative; max-width: 100%; margin-top: 2px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); } .nxc .nxc-pic-b { position: relative; display: block; width: 100%; height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .nxc .nxc-pic-b img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; display: block; transition: transform .25s, filter .2s; } .nxc .nxc-pic-b:hover img { transform: scale(1.03); filter: brightness(1.08); } .nxc .nxc-pic-b:focus-visible { outline: 2px solid #8B9BFF; outline-offset: -2px; } .nxc .nxc-msg.is-pic .nxc-pic + .nxc-text { margin-top: 5px; } .nxc .nxc-pic-more { position: absolute; top: 6px; right: 6px; display: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(8, 10, 22, .68); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .nxc.is-narrow .nxc-pic-more { display: block; } @media (hover: none) { .nxc .nxc-pic-more { display: block; } } .nxc .nxc-msg.is-menu .nxc-pic { box-shadow: 0 0 0 2px rgba(109, 124, 255, .65); } .nxc .nxc-picbar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px; border: 1px solid rgba(150, 165, 255, .28); border-radius: 12px; background: rgba(109, 124, 255, .1); } .nxc .nxc-picbar[hidden] { display: none; } .nxc .nxc-picbar > img { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 9px; object-fit: cover; } .nxc .nxc-picbar > span { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.35; } .nxc .nxc-picbar b { font-size: 13px; } .nxc .nxc-picbar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; opacity: .7; } .nxc .nxc-picbar > button { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: inherit; cursor: pointer; } .nxc .nxc-picbar > button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nxc .nxc-picbar-w { display: none; font-style: normal; font-size: 12px; font-weight: 700; color: #A9B4FF; } .nxc.is-picbusy .nxc-picbar-w { display: block; } .nxc.is-picbusy .nxc-picbar > button { display: none; } .nxc.is-picbusy .nxc-picbar > img { opacity: .55; } .nxc-lb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483600; background: rgba(4, 5, 12, .93); font-family: "NxSite", "Noto Sans Georgian", system-ui, sans-serif; animation: nxcLb .16s ease; touch-action: none; } @keyframes nxcLb { from { opacity: 0; } } .nxc-lb-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-out; } .nxc-lb-stage img { max-width: 94vw; max-height: 82vh; margin: 0; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); cursor: zoom-in; user-select: none; -webkit-user-drag: none; will-change: transform; transition: transform .12s ease-out; } .nxc-lb.is-zoomed .nxc-lb-stage img { cursor: grab; transition: none; } .nxc-lb-bar { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: rgba(22, 26, 48, .92); color: #fff; } .nxc-lb-bar button, .nxc-lb-bar a { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 0; border-radius: 99px; background: none; color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none !important; cursor: pointer; white-space: nowrap; } .nxc-lb-bar button[data-z="in"], .nxc-lb-bar button[data-z="out"] { padding: 0; font-size: 24px; line-height: 1; background: rgba(255, 255, 255, .1); } .nxc-lb-bar button:hover, .nxc-lb-bar a:hover, .nxc-lb-bar button:focus-visible, .nxc-lb-bar a:focus-visible { background: rgba(255, 255, 255, .2); outline: 0; } .nxc-lb-bar output { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .nxc-lb-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 26, 48, .92); color: #fff; cursor: pointer; } .nxc-lb-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .nxc-lb-x:hover { background: rgba(255, 255, 255, .22); } @media (prefers-reduced-motion: reduce) { .nxc-lb, .nxc-lb-stage img, .nxc .nxc-pic-b img { animation: none; transition: none; } } /* ---------- v30: nothing touches its neighbour ---------- */ /* "… წერს": room of its own under the last message, and clear of the composer */ .nxc.is-typing .nxc-list { padding-bottom: 54px !important; } .nxc .nxc-typing { bottom: 12px; } .nxc.s19 .nxc-typing { bottom: 14px; } /* toolbar buttons grow in place: lifting them pushed them into the composer's top edge */ .nxc.s19 .nxc-tools { padding-top: 5px; padding-bottom: 5px; } .nxc.s19 .nxc-tools .nxc-emo-b:hover { transform: scale(1.06); } .nxc .nxc-compose .nxc-ib:hover { transform: none; } /* ---------- the apps notice: once in 24 hours when the chat is busy, written like a message from "სიახლე" (js/nx-chat.js promoHtml) ---------- */ .nxc .nxc-msg.nxc-news { position: relative; } .nxc .nxc-msg.nxc-news.is-in { animation: nxcNewsIn .5s cubic-bezier(.2, .9, .3, 1.2) both; } @keyframes nxcNewsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .nxc-news-ava { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899) !important; box-shadow: 0 0 0 0 rgba(236, 72, 153, .55); animation: nxcNewsPulse 1.8s ease-out infinite; } .nxc-news-ava svg { width: 58%; height: 58%; } @keyframes nxcNewsPulse { 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, .55); } 100% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); } } .nxc .nxc-meta b.nxc-news-n { cursor: default; text-decoration: none; font-weight: 900; letter-spacing: .03em; color: #FFD23F; text-shadow: 0 0 6px rgba(255, 200, 60, .55); } .nxc .nxc-news .nxc-text.nxc-news-t { position: relative; display: inline-block; max-width: 100%; padding: 10px 14px; overflow: hidden; border: 1px solid rgba(183, 140, 255, .5); border-radius: 14px; font-size: 1.04em; font-weight: 800; line-height: 1.45; background: linear-gradient(120deg, #1B1140, #2A1257 50%, #3A0F4E); box-shadow: 0 6px 20px rgba(10, 4, 30, .4); } /* a band of light that keeps crossing the text */ .nxc-news-t::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .17), transparent); transform: skewX(-18deg); animation: nxcNewsSweep 3.2s ease-in-out infinite; pointer-events: none; } @keyframes nxcNewsSweep { 0%, 35% { left: -45%; } 100% { left: 125%; } } .nxc-news-w { display: inline-block; color: #FFE9A8; animation: nxcNewsShine 2.6s linear infinite; } .nxc-news.is-in .nxc-news-w { opacity: 0; animation: nxcNewsWord .5s cubic-bezier(.2, .9, .3, 1.3) forwards, nxcNewsShine 2.6s linear .9s infinite; } @keyframes nxcNewsWord { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .nxc-news-w { background-image: linear-gradient(100deg, #FFFFFF 0%, #FFE9A8 25%, #FFFFFF 50%, #FF9BE0 75%, #FFFFFF 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .nxc-news-w.is-brand { background-image: linear-gradient(100deg, #FFD23F 0%, #FFF4C2 30%, #FF8A3D 55%, #FFD23F 80%, #FFF4C2 100%); } } .nxc-news-w.is-brand { font-weight: 900; letter-spacing: .02em; filter: drop-shadow(0 0 5px rgba(255, 190, 60, .6)); } @keyframes nxcNewsShine { 0% { background-position: 0 0; } 100% { background-position: -300% 0; } } .nxc-news-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .nxc-news-l a { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; color: #EDE4FF; background: rgba(139, 92, 246, .28); transition: background .15s, transform .15s; } .nxc-news-l a:hover { background: rgba(139, 92, 246, .45); transform: translateY(-1px); } .nxc-news-l a.nxc-news-go { padding: 6px 15px; color: #1B1140; background: linear-gradient(135deg, #FFD23F, #FF9BE0); box-shadow: 0 4px 14px rgba(255, 170, 80, .35); } .nxc-news-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 6px 0 0; padding: 0; border: 0; border-radius: 50%; color: inherit; opacity: .55; background: rgba(127, 127, 127, .18); cursor: pointer; } .nxc-news-x:hover { opacity: 1; } .nxc-news-x svg { width: 12px; height: 12px; } .nxc-news-l + .nxc-news-x { position: absolute; top: 0; right: 0; margin: 0; } @media (prefers-reduced-motion: reduce) { .nxc-news, .nxc-news-ava, .nxc-news-t::after, .nxc-news-w { animation: none !important; } .nxc-news-w { opacity: 1 !important; } } /* the notice is set in BPG ExtraSquare Mtavruli (a free font of BPG-InfoTech, taken from mol.ge) */ @font-face { font-family: "BPG ExtraSquare Mtavruli"; src: url("../fonts/bpg-extrasquare/BPG-ExtraSquare-Mtavruli.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } .nxc .nxc-news .nxc-text.nxc-news-t, .nxc .nxc-news .nxc-text.nxc-news-t .nxc-news-w, .nxc .nxc-news .nxc-meta b.nxc-news-n, .nxc .nxc-news .nxc-news-l a { font-family: "BPG ExtraSquare Mtavruli", "Noto Sans Georgian", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } .nxc .nxc-news .nxc-text.nxc-news-t { padding: 14px 16px 16px; font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: .02em; } .nxc .nxc-news .nxc-news-w { position: relative; z-index: 1; } .nxc .nxc-news .nxc-meta b.nxc-news-n { font-size: 14px; font-weight: 400; } .nxc .nxc-news .nxc-news-l a { font-size: 13px; font-weight: 400; } /* sparks that rise from the bottom of the text block (the s are put in by promoHtml, each with its own place, size and pace) */ .nxc-news-sp { position: absolute; z-index: 0; bottom: -6px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 6px 1px rgba(255, 190, 70, .9), 0 0 12px 3px rgba(255, 110, 40, .45); opacity: 0; pointer-events: none; animation: nxcNewsSpark 2.6s linear infinite; will-change: transform, opacity; } .nxc-news-sp:nth-child(3n) { background: #FFB347; } .nxc-news-sp:nth-child(4n) { background: #FF9BE0; box-shadow: 0 0 6px 1px rgba(255, 120, 220, .9), 0 0 12px 3px rgba(183, 140, 255, .45); } @keyframes nxcNewsSpark { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 10% { opacity: 1; } 45% { transform: translate3d(var(--dx, 6px), -46px, 0) scale(.9); opacity: .95; } 80% { transform: translate3d(calc(var(--dx, 6px) * -1), -88px, 0) scale(.55); opacity: .55; } 100% { transform: translate3d(var(--dx, 6px), -120px, 0) scale(.2); opacity: 0; } } /* a warm glow along the bottom edge, where the sparks come from */ .nxc .nxc-news .nxc-text.nxc-news-t::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(0deg, rgba(255, 140, 50, .28), transparent); pointer-events: none; animation: nxcNewsEmber 1.7s ease-in-out infinite alternate; } @keyframes nxcNewsEmber { from { opacity: .45; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nxc-news-sp { display: none; } .nxc .nxc-news .nxc-text.nxc-news-t::before { animation: none; } } /* the countdown that stands where the × will be */ .nxc-news-cd { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; color: #FFE9A8; background: rgba(127, 127, 127, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .55); } /* a closed chat window draws nothing: its drifting lights and spinners rest until it is opened (2026-10-13, phone memory) */ .nxc.is-widget:not(.is-open) .nxc-panel, .nxc.is-widget:not(.is-open) .nxc-panel *, .nxc.is-widget:not(.is-open) .nxc-panel::before, .nxc.is-widget:not(.is-open) .nxc-panel *::before, .nxc.is-widget:not(.is-open) .nxc-panel *::after { animation: none !important; } /* the launcher under the mouse (2026-10-13): it used to lift 2px and tilt far enough for its own edge to slip from under the pointer — hover on, hover off, many times a second. Now it only grows and tilts half as far, so the edge never moves inwards. */ .nxc-fab:hover { transform: perspective(320px) rotateX(calc(var(--rx, 0deg) * .5)) rotateY(calc(var(--ry, 0deg) * .5)) scale(1.1); }