/*
 * nineanime-w2g.css — owned by the w2g area.
 * Scope: /watch2gether (lobby, my rooms), /watch2gether/create/{id}, rooms.
 *
 * 9anime (9animetv.to) never had Watch2gether, so nothing here could be
 * measured against it. Every page is composed from 9anime's own classes in
 * styles.css (vendored verbatim — never edit it): the card-grid block, the
 * dormant `.bah-sort` pills, `.flw-item`, ticks, the watch page's
 * `#watch-block` player frame, `.player-controls`, `.player-servers`,
 * `.block_area-detail`, `.episodes-ul`, `.ps__-list` chips, `.toggle-onoff`,
 * `.no-content-block`, `.loading`, and the light `.premodal` dialogs
 * (tmp/visual/GUIDE.md §1 tokens, §2 components, §4.3 W2G recipe).
 * Only what 9anime never drew gets a `na-w2g-*` rule below. Every selector is
 * scoped to a w2g root (`.na-w2g`, `.na-w2g-modal`, `.w2g-room-shell`) or a
 * w2g-only class, because all area stylesheets load on every page.
 * Colours: 9anime purple #5a2e98 and GUIDE §1 tokens only (no pink).
 */

/* ── Shared ────────────────────────────────────────────────────────────── */

@keyframes na-w2g-fade { from { opacity: 0; } to { opacity: 1; } }
.w2g-fade { animation: na-w2g-fade .2s linear; }
@keyframes na-w2g-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* 9anime's .loading dots, written without whitespace by the engine: put back
   the 4px gap a space draws between them in 9anime's markup. */
.na-w2g .loading > div + div,
.w2g-room-shell .loading > div + div { margin-left: 4px; }

/* Empty / error state: 9anime's dormant .no-content-block. */
.na-w2g-empty { color: #aaa; font-size: 14px; }
.na-w2g-empty > i { display: block; font-size: 40px; color: #666; margin-bottom: 15px; }
.na-w2g-empty .na-w2g-empty-title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.na-w2g-empty .btn-sm { font-size: 13px; }

/* ── Lobby (/watch2gether, /watch2gether/my-rooms) ─────────────────────── */

.na-w2g-lobby-head .na-w2g-create-slot .btn { font-size: 13px; line-height: 20px; margin: 3px 0; }
/* The dormant pills: GUIDE §2.2 (grey #4c4f57, radius 30, 12px) + the active
   pill in 9anime purple (GUIDE §4.3); links default to #525252 in 9anime. */
.block_area .block_area-header.na-w2g-lobby-head .bah-sort .bhs-item { margin-right: 6px; }
.block_area .block_area-header.na-w2g-lobby-head .bah-sort .bhs-item .bhsi-name { display: block; color: #ddd; white-space: nowrap; transition: background .15s ease-in-out, color .15s ease-in-out; }
.block_area .block_area-header.na-w2g-lobby-head .bah-sort .bhs-item .bhsi-name:hover { color: #fff; background: #5a5d66; }
.block_area .block_area-header.na-w2g-lobby-head .bah-sort .bhs-item.active .bhsi-name { background: #5a2e98; color: #fff; }
@media screen and (max-width: 768px) {
    /* Pills drop under the heading as one scrolling row (9anime moves its
       header tabs under the heading at this width too). */
    .block_area .block_area-header.na-w2g-lobby-head .bah-sort { float: none; clear: both; margin: 5px 0 0; height: auto; display: flex; overflow-x: auto; scrollbar-width: none; }
    .block_area .block_area-header.na-w2g-lobby-head .bah-sort::-webkit-scrollbar { display: none; }
    .block_area .block_area-header.na-w2g-lobby-head .bah-sort .bhs-item { float: none; flex: 0 0 auto; }
}

.na-w2g-loading { min-height: 240px; }

/* Landscape room cards in 9anime's grid (14px column gap, 20px row gap):
   4 across, 3 at ≤989, 2 at ≤639, 1 at ≤479. */
.film_list .na-w2g-grid .na-w2g-card { width: calc(25% - 14px); }
@media screen and (max-width: 989px) { .film_list .na-w2g-grid .na-w2g-card { width: calc(33.33% - 14px); } }
@media screen and (max-width: 639px) { .film_list .na-w2g-grid .na-w2g-card { width: calc(50% - 14px); } }
@media screen and (max-width: 479px) { .film_list .na-w2g-grid .na-w2g-card { width: calc(100% - 14px); } }

.film_list .film_list-wrap .na-w2g-card .film-poster { padding-bottom: 56.25%; background: #111; }
.na-w2g-card .na-w2g-thumb-cover { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-size: cover; background-position: center; filter: blur(15px); opacity: .45; }
.na-w2g-card .film-poster .na-w2g-thumb-img { left: 50%; width: auto; height: 100%; aspect-ratio: 2 / 3; transform: translateX(-50%); box-shadow: 0 0 20px rgba(0, 0, 0, .5); }

/* Status tick in 9anime's quality slot (top-left, radius 0 0 5px 0). */
.na-w2g-tick-status,
.na-w2g-tick-viewers { position: absolute; top: 0; z-index: 4; }
.na-w2g-tick-status { left: 0; border-radius: 0 0 5px 0; color: #fff; }
.na-w2g-tick-status.is-live { background: #5a2e98; }
.na-w2g-tick-status.is-wait { background: #c39d00; }
.na-w2g-tick-status.is-ended { background: #4a4b51; }
.na-w2g-live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #fff; vertical-align: middle; animation: na-w2g-pulse 1.4s ease-in-out infinite; }
.na-w2g-tick-viewers { right: 0; border-radius: 0 0 0 5px; font-weight: 700; }
.na-w2g-card .tick.ltr .fa-lock { font-size: .85em; }

/* Scheduled: the countdown over the art (the poster link stays on top). */
.na-w2g-thumb-countdown { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); color: #aaa; font-size: 12px; line-height: 1.3; }
.na-w2g-thumb-countdown .na-w2g-cd { font-size: 20px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* Card text: host avatar at left, room name, anime, host · age. */
.film_list .film_list-wrap .na-w2g-card .film-detail { position: relative; min-height: 50px; padding-left: 42px; text-align: left; }
.na-w2g-card .na-w2g-host-avatar { position: absolute; top: 2px; left: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #343434; }
.na-w2g-card .na-w2g-host-avatar img { width: 100%; height: 100%; object-fit: cover; }
.film_list .film_list-wrap .na-w2g-card .film-detail .film-name { height: auto; -webkit-line-clamp: 1; line-height: 1.4em; }
.na-w2g-card .na-w2g-anime { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film_list .film_list-wrap .na-w2g-card .film-detail .fd-infor { font-size: 12px; color: #666; }
.na-w2g-card .fd-infor .dot { margin: 3px 6px; vertical-align: middle; }

/* ── Light modals (9anime's .premodal: white card, purple title) ───────── */

.na-w2g-modal .modal-content .modal-header .modal-title { font-size: 22px; line-height: 1.2em; padding: 5px 20px 0; }
.na-w2g-modal .modal-content .modal-body { padding: 10px 20px 20px; }
.na-w2g-modal .modal-content .modal-body .description { color: #666; font-size: 13px; margin-bottom: 15px; }
.na-w2g-modal .loginform .form-group { margin-bottom: 15px; }

/* Create Room picker: mini .flw-item poster grid on white, 4 across. */
.na-w2g-pick-grid { position: relative; max-height: min(55vh, 520px); overflow-y: auto; overflow-x: hidden; margin: 0 -5px; padding: 3px 5px 0; scrollbar-width: thin; }
.na-w2g-pick-grid .film_list-wrap { margin: 0 -5px; }
.film_list.na-w2g-pick-grid .film_list-wrap .flw-item { width: calc(25% - 10px); margin: 0 5px 15px; }
.film_list.na-w2g-pick-grid .film_list-wrap .flw-item .film-poster { margin-bottom: 6px; }
.film_list.na-w2g-pick-grid .film_list-wrap .flw-item .film-detail .film-name { font-size: 12px; height: 31px; }
.film_list.na-w2g-pick-grid .film_list-wrap .flw-item .film-detail .film-name a { color: #111; }
.film_list.na-w2g-pick-grid .film_list-wrap .flw-item:hover .film-detail .film-name a { color: #5a2e98; }
.na-w2g-pick-grid .flw-item.active .film-poster { box-shadow: 0 0 0 3px #5a2e98; }
.na-w2g-pick-grid .na-w2g-pick-empty { padding: 30px 0; text-align: center; color: #666; font-size: 13px; }
.na-w2g-pick-grid .na-w2g-pick-loading { min-height: 60px; }
@media screen and (max-width: 575px) {
    .film_list.na-w2g-pick-grid .film_list-wrap .flw-item { width: calc(33.33% - 10px); }
}

/* ── Create a room (/watch2gether/create/{id}) ─────────────────────────── */

.na-w2g-create-page .na-w2g-alert-active { font-size: 13px; margin-bottom: 20px; }
.na-w2g-anime-block .anime-detail { margin-bottom: 0; }
.na-w2g-anime-block .anime-detail .film-name a { color: #fff; }
.na-w2g-anime-block .anime-detail .film-name a:hover { color: #a885da; }
.na-w2g-anime-block .film-description p { margin-bottom: 15px; }
/* Ticks inline (9anime's `.tick` wrapper is absolutely positioned). */
.na-w2g-ticks { margin-bottom: 15px; line-height: 24px; }
.na-w2g-ticks .tick-item { border-radius: 3px; margin-right: 3px; vertical-align: middle; }
.na-w2g-ticks .dot { vertical-align: middle; }
.na-w2g-ticks .na-w2g-meta { color: #ababab; vertical-align: middle; }
.na-w2g-anime-block .na-w2g-change { font-size: 13px; }

.na-w2g-settings .block_area-content { padding: 15px 15px 20px; }
.na-w2g-settings .form-dark label { color: #aaa; font-size: 13px; margin-bottom: 8px; }
.na-w2g-settings .form-dark .small { font-size: 12px; color: #666; margin-top: 6px; }
.na-w2g-settings .form-dark .form-control { border-radius: 4px; height: 40px; }
.na-w2g-settings .na-w2g-field { margin-bottom: 25px; }
/* Language / start chips: the servers bar's .ps__-list. */
.na-w2g-chips .item .btn { border-radius: 4px; }
.na-w2g-chips .item .btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: auto; }
/* Episode picker: the watch page's .episodes-ul grid in a scrolling box. */
.na-w2g-ep-head { margin-bottom: 4px; }
.na-w2g-ep-head label { float: left; line-height: 32px; }
.na-w2g-ep-head .na-w2g-ep-num { color: #fff; font-weight: 600; margin-left: 3px; }
.na-w2g-ep-search { float: right; position: relative; width: 160px; }
.na-w2g-ep-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #666; }
.na-w2g-settings .form-dark .na-w2g-ep-search .form-control { height: 32px; padding: 5px 10px 5px 30px; font-size: 13px; }
.na-w2g-settings .na-w2g-ep-title { margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-w2g-episodes .episodes-ul { position: relative; max-height: 210px; overflow-y: auto; padding-top: 2px; scrollbar-width: thin; scrollbar-color: #343434 transparent; }
.na-w2g-episodes .episodes-ul .item { color: #929292; font-size: 13px; }
.na-w2g-episodes .episodes-ul .item:hover { color: #fff; }
.na-w2g-episodes .episodes-ul .item.active { color: #fff; }
.na-w2g-episodes .episodes-ul .item.highlight:not(.active) { box-shadow: inset 0 0 0 1px #5a2e98; color: #fff; }
.na-w2g-settings .na-w2g-schedule { margin-top: 15px; }
.na-w2g-settings .na-w2g-schedule[hidden] { display: none; }
.na-w2g-settings .na-w2g-schedule input { color-scheme: dark; }
.na-w2g-public .toggle-onoff { vertical-align: middle; margin-right: 8px; }
.na-w2g-public > label { vertical-align: middle; color: #fff !important; }
.na-w2g-settings .na-w2g-alert:empty { display: none; }
.na-w2g-settings .na-w2g-alert .alert { font-size: 13px; margin-bottom: 15px; }
.na-w2g-actions { text-align: center; }
.na-w2g-actions .btn-lg { font-size: 18px; }
.na-w2g-actions .btn-sm { font-size: 13px; margin-top: 12px; padding: 6px 20px; }

/* Sidebar: "How it works". */
.na-w2g-steps li { position: relative; padding-left: 40px; margin-bottom: 18px; font-size: 13px; color: #666; line-height: 1.5; }
.na-w2g-steps li strong { display: block; color: #ddd; font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.na-w2g-step { position: absolute; left: 0; top: 0; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: #5a2e98; color: #fff; text-align: center; font-weight: 600; font-size: 13px; }
.na-w2g-howto .btn-sm { font-size: 13px; }
@media screen and (max-width: 479px) {
    .na-w2g-ep-search { width: 130px; }
}

/* ── Room (/watch2gether/{room}) — the watch page's frame ─────────────── */

/* Below the player: floats left beside the chat column like #main-content
   (styles.css: content calc(100% - 350px), sidebar 330px, stacked ≤1279). */
.w2g-room-shell .na-w2g-below { width: calc(100% - 350px); float: left; }
@media screen and (max-width: 1279px) { .w2g-room-shell .na-w2g-below { width: 100%; float: none; } }

/* Room name bar above the player. */
.na-w2g-room-head { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; gap: 6px 10px; }
.na-w2g-room-head .na-w2g-room-name { font-size: 20px; line-height: 32px; font-weight: 500; color: #fff; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.na-w2g-room-head .tick-item { border-radius: 3px; }
.na-w2g-room-head .na-w2g-room-ticks .tick-item { margin-right: 3px; }
.na-w2g-room-head .na-w2g-private { background: #343434; color: #ccc; }
.na-w2g-status-tick { background: #c39d00; color: #fff; }
.na-w2g-status-tick .na-w2g-live-dot { display: none; }
.w2g-room-shell[data-status="live"] .na-w2g-status-tick { background: #5a2e98; }
.w2g-room-shell[data-status="live"] .na-w2g-status-tick .na-w2g-live-dot { display: inline-block; }
.w2g-room-shell[data-status="ended"] .na-w2g-status-tick { background: #4a4b51; }
@media screen and (max-width: 480px) {
    .na-w2g-room-head .na-w2g-room-name { font-size: 18px; line-height: 26px; }
}

/* The stage: 9anime's .wb_-playerarea (16:9, #000, blurred poster). */
.na-w2g-stage .player-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(17, 17, 17, .45); }
.na-w2g-stage .na-w2g-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 520px; }
.na-w2g-screen-avatar { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; border: 2px solid #5a2e98; background: #343434; }
.na-w2g-screen-avatar img { width: 100%; height: 100%; object-fit: cover; }
.na-w2g-screen .na-w2g-screen-sub { font-size: 13px; color: #aaa; line-height: 1.4; }
.na-w2g-screen .title-page { font-weight: 500; margin: 2px 0 12px; }
.na-w2g-screen-share { display: flex; align-items: center; max-width: 440px; margin: 0 auto 15px; padding: 5px 5px 5px 12px; background: #262626; border-radius: 4px; }
.na-w2g-screen-share .na-w2g-screen-link { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; margin-right: 8px; }
.na-w2g-screen-share .btn { flex: 0 0 auto; font-size: 13px; }
.na-w2g-screen .na-w2g-screen-btn .btn { font-size: 14px; padding: .5rem 1.5rem; }
.na-w2g-screen .na-w2g-screen-btn .btn-sm { font-size: 13px; padding: 6px 16px; }
.na-w2g-screen .btn-wait:disabled { opacity: 1; cursor: default; }
.na-w2g-countdown .na-w2g-cd-digits { font-size: 30px; line-height: 1.3; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 1px; margin: 4px 0; }
.na-w2g-countdown .na-w2g-cd-when { margin-bottom: 12px; }
.na-w2g-stage .na-w2g-player { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; }
.na-w2g-stage .na-w2g-player .loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #000; }
.na-w2g-stage .na-w2g-player .loader.is-error .loader-message { color: #aaa; font-size: 13px; text-align: center; padding: 0 20px; }
/* .9, not lighter: the embedded player's own loading spinner sat visibly
   behind the "Join the watch party" text at .6. */
.na-w2g-stage .na-w2g-gate { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 12; background: rgba(0, 0, 0, .9); }
@media screen and (max-width: 639px) {
    /* A 16:9 phone stage is ~220px tall: the room bar under it carries the
       share link, so the screens keep only the essentials. */
    .na-w2g-screen-avatar, .na-w2g-stage .na-w2g-screen-share, .na-w2g-countdown .na-w2g-cd-when { display: none !important; }
    .na-w2g-screen .title-page { font-size: 16px; margin-bottom: 8px; }
    .na-w2g-countdown .na-w2g-cd-digits { font-size: 22px; margin-bottom: 8px; }
    .na-w2g-screen .na-w2g-screen-btn .btn { font-size: 13px; padding: 6px 14px; }
}

/* Floating reactions (JS adds .w2g-float nodes). */
.na-w2g-reactions { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 11; }
@keyframes na-w2g-float-up {
    0% { transform: translateY(0) scale(.8); opacity: 0; }
    12% { opacity: 1; transform: translateY(-20px) scale(1.05); }
    100% { transform: translateY(-260px) scale(1); opacity: 0; }
}
.na-w2g-reactions .w2g-float { position: absolute; bottom: 30px; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: na-w2g-float-up 3s ease-out forwards; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .8)); }
.na-w2g-reactions .w2g-float-emoji { font-size: 24px; line-height: 1; }
.na-w2g-reactions .w2g-float-name { margin-top: 4px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; background: rgba(0, 0, 0, .8); padding: 1px 6px; font-size: 10px; color: #fff; }

/* Controls bar: 9anime's .player-controls items. */
.na-w2g-controls .pc-item .btn { font-size: 12px; box-shadow: none !important; }
.na-w2g-controls .pc-item .btn:hover { color: #fff; }
.na-w2g-controls .na-w2g-pc { color: #aaa; }
.na-w2g-controls .na-w2g-pc.controls { cursor: pointer; }
.na-w2g-controls .na-w2g-clock { font-variant-numeric: tabular-nums; }
.na-w2g-controls .na-w2g-hud { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 3px; background: #343434; color: #ccc; font-weight: 500; vertical-align: middle; }
.na-w2g-controls .na-w2g-hud.is-on { background: #5a2e98; color: #fff; }
@media screen and (max-width: 479px) {
    .na-w2g-controls .tb-name { display: none; }
    .na-w2g-controls .pc-item { padding: 0 7px; }
}

/* Room bar: 9anime's .player-servers (grey status column + dashed rows). */
.na-w2g-roombar .na-w2g-roombar-rows { min-height: 80px; }
.na-w2g-roombar .ps_-block { min-height: 60px; }
.na-w2g-roombar .na-w2g-host,
.na-w2g-roombar .na-w2g-share { line-height: 36px; min-height: 36px; font-size: 13px; }
.na-w2g-roombar .na-w2g-host-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 6px; vertical-align: middle; background: #343434; }
.na-w2g-roombar .na-w2g-host-name { color: #fff; font-weight: 500; vertical-align: middle; }
.na-w2g-roombar .dot { vertical-align: middle; }
.na-w2g-roombar .na-w2g-host-age { color: #666; font-size: 12px; vertical-align: middle; }
.na-w2g-roombar .na-w2g-share { display: flex; align-items: center; }
.na-w2g-roombar .na-w2g-share-link { flex: 0 1 auto; min-width: 0; background: #343434; color: #ccc; line-height: 30px; padding: 0 10px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 7px; }
.na-w2g-roombar .na-w2g-share .btn { flex: 0 0 auto; font-size: 13px; line-height: 30px; padding: 0 10px; }
@media screen and (max-width: 479px) {
    .na-w2g-roombar .ps_-block { padding-left: 95px; }
    .na-w2g-roombar .na-w2g-host-age { display: none; }
}

/* Chat: a 9anime sidebar panel. */
.na-w2g-chatbox { display: flex; flex-direction: column; height: 420px; }
@media screen and (min-width: 1280px) {
    .na-w2g-chatbox { height: min(640px, calc((100vw - 380px) * .5625 + 85px)); }
}
.na-w2g-chatbox:has(#top_chat.chatbox-hide) { height: auto; }
.na-w2g-chatbox .block_area-header { flex: 0 0 auto; padding-bottom: 10px; border-bottom: 1px solid #262626; }
.na-w2g-chatbox .na-w2g-online { font-size: 12px; color: #666; line-height: 32px; }
.na-w2g-chatbox .na-w2g-online span { color: #ababab; }
.na-w2g-chatbox .na-w2g-online .na-w2g-live-dot { background: #5a2e98; margin-right: 6px; }
#top_chat.room-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#top_chat.room-chat.chatbox-hide { display: none; }
#top_chat .na-w2g-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 15px 4px; scrollbar-width: thin; scrollbar-color: #343434 transparent; }
#top_chat .na-w2g-chat-list::-webkit-scrollbar { width: 6px; }
#top_chat .na-w2g-chat-list::-webkit-scrollbar-thumb { background: #343434; border-radius: 3px; }
#top_chat .na-w2g-chat-empty { text-align: center; color: #666; font-size: 13px; padding: 40px 10px; }
#top_chat .na-w2g-chat-empty > i { display: block; font-size: 30px; margin-bottom: 10px; color: #343434; }
#top_chat #messages-list:not(:empty) + .na-w2g-chat-empty { display: none; }

/* Rows: the engine's `.message` tree. */
#top_chat .message { position: relative; padding-left: 46px; min-height: 36px; margin-bottom: 12px; }
#top_chat .message .avatar { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #343434; }
#top_chat .message .avatar img { width: 100%; height: 100%; object-fit: cover; }
#top_chat .message .user { line-height: 18px; margin-bottom: 1px; }
#top_chat .message .name { font-size: 13px; font-weight: 500; color: #ababab; }
#top_chat .message.staff .name { color: #c39d00; }
#top_chat .message.owner .name { color: #a885da; }
#top_chat .message.owner .name::after { content: "\f521"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; margin-left: 5px; }
#top_chat .message.self .name { color: #fff; }
#top_chat .message .rank-label { display: inline-block; font-size: 10px; line-height: 15px; padding: 0 4px; margin-left: 5px; border-radius: 3px; background: #343434; color: #ccc; font-weight: 500; vertical-align: 1px; }
#top_chat .message .msg-time { font-size: 11px; color: #666; margin-left: 6px; }
#top_chat .message .text { font-size: 13px; line-height: 1.45; color: #aaa; word-break: break-word; overflow-wrap: anywhere; }
#top_chat .message.self .text { color: #ddd; }
#top_chat .event.started { display: block; width: 100%; margin: 8px 0 12px; padding: 0; border: 0; background: none; color: #666; font-size: 12px; text-align: center; }
#top_chat .load-more-msg { padding: 6px; background: #262626; border-radius: 4px; color: #a885da; cursor: pointer; }
#top_chat .load-more-msg:hover { background: #2d2d2d; color: #fff; }
#top_chat .load-more-msg.is-loading { position: relative; min-height: 50px; color: transparent; cursor: wait; background: none; }
#top_chat .load-more-msg .loading { transform: scale(.7); }

#top_chat .na-w2g-chat-noti { position: relative; flex: 0 0 auto; }
#top_chat .na-w2g-newmsg { display: table; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 3px 12px; border-radius: 30px; background: #5a2e98; color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; }
#top_chat .na-w2g-offline { padding: 6px 15px; background: #921925; color: #fff; font-size: 12px; }

/* Composer: emoji button, the #sidebar-search-look input, purple Send. */
#top_chat .na-w2g-composer { flex: 0 0 auto; display: flex; align-items: center; padding: 10px 15px 15px; border-top: 1px solid #262626; }
#top_chat .na-w2g-emo { position: relative; flex: 0 0 auto; margin-right: 6px; }
#top_chat .na-w2g-emo-btn { padding: 0 4px; font-size: 18px; line-height: 32px; color: #525252; box-shadow: none !important; }
#top_chat .na-w2g-emo-btn:hover { color: #fff; }
#top_chat .na-w2g-emo-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
#top_chat .na-w2g-input { position: relative; flex: 1 1 auto; min-width: 0; }
#top_chat .na-w2g-input .form-control { height: 32px; padding: 0 50px 0 10px; font-size: 13px; color: #eee; background: transparent; border: 1px solid #363636; border-radius: 4px; box-shadow: none; }
#top_chat .na-w2g-input .form-control:focus { border-color: #404040; }
#top_chat .na-w2g-input .form-control:disabled { background: transparent; opacity: .55; }
#top_chat .na-w2g-count { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #666; pointer-events: none; }
#top_chat .na-w2g-send { flex: 0 0 auto; margin-left: 6px; width: 40px; height: 32px; padding: 0; font-size: 13px; }
#top_chat .na-w2g-send:disabled { opacity: .6; }
#top_chat .na-w2g-emo-pop { top: auto; bottom: calc(100% + 8px); left: 0; width: 310px; max-width: calc(100vw - 30px); padding: 0; margin: 0; background: #fff; color: #111; border: none; border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, .4); overflow: hidden; }
#top_chat .na-w2g-emo-pop emoji-picker { width: 100%; height: 300px; --border-size: 0; --background: #fff; }
.na-w2g-react-bar { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid #eee; overflow-x: auto; }
.na-w2g-react-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-right: 6px; }
.na-w2g-react-btn { flex: 0 0 auto; border: 0; background: transparent; font-size: 19px; line-height: 1; padding: 4px; border-radius: 4px; cursor: pointer; }
.na-w2g-react-btn:hover { background: #ebe3f6; }
.na-w2g-react-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Host settings / end dialogs (light .premodal). */
.na-w2g-host-modal .na-w2g-set-row { margin-bottom: 20px; }
.na-w2g-host-modal .na-w2g-switch { display: flex; align-items: center; cursor: pointer; }
.na-w2g-host-modal .na-w2g-switch .toggle-onoff { flex: 0 0 auto; margin-right: 12px; }
.na-w2g-host-modal .na-w2g-set-label { font-size: 14px; font-weight: 500; color: #111; line-height: 1.3; }
.na-w2g-host-modal .na-w2g-set-label small { display: block; font-size: 12px; color: #666; font-weight: 400; }
.na-w2g-host-modal .na-w2g-set-title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 8px; }
.na-w2g-lchips::after { content: ""; display: table; clear: both; }
.na-w2g-lchips .item { float: left; margin: 0 7px 7px 0; }
.na-w2g-lchips .item .btn { font-size: 13px; font-weight: 500; line-height: 30px; padding: 0 12px; border: none; border-radius: 4px; background: #ebe3f6; color: #5a2e98; box-shadow: none !important; }
.na-w2g-lchips .item .btn:hover { background: #e5dbf4; }
.na-w2g-lchips .item .btn.active { background: #5a2e98; color: #fff; }
.na-w2g-lchips .item .btn:disabled { opacity: .4; cursor: not-allowed; }
.na-w2g-host-modal .na-w2g-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.na-w2g-host-modal .na-w2g-ep-count { font-weight: 400; color: #666; margin-left: 4px; }
.na-w2g-host-modal .na-w2g-set-search { position: relative; width: 150px; }
.na-w2g-host-modal .na-w2g-set-search .form-control { height: 32px; padding: 0 28px 0 10px; }
.na-w2g-host-modal .na-w2g-ep-clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #7346b3; font-size: 12px; }
.na-w2g-host-modal .na-w2g-set-list { max-height: 220px; overflow-y: auto; margin: 0 -3px; scrollbar-width: thin; }
.na-w2g-host-modal .na-w2g-set-list::after { content: ""; display: table; clear: both; }
.na-w2g-host-modal .w2g-ep-item { float: left; width: calc(12.5% - 6px); margin: 0 3px 6px; line-height: 32px; font-size: 13px; text-align: center; border-radius: 3px; background: #f1ecf8; color: #5a2e98; }
.na-w2g-host-modal .w2g-ep-item:hover { background: #e5dbf4; color: #5a2e98; }
.na-w2g-host-modal .w2g-ep-item.active { background: #5a2e98; color: #fff; }
.na-w2g-host-modal .w2g-ep-item.highlight:not(.active) { box-shadow: inset 0 0 0 1px #5a2e98; }
.na-w2g-host-modal .w2g-ep-item.is-busy { opacity: .5; pointer-events: none; }
.na-w2g-host-modal .na-w2g-set-empty { clear: both; padding: 15px 0; text-align: center; color: #666; font-size: 13px; }
.na-w2g-host-modal .na-w2g-ep-busy { display: none; margin-top: 10px; }
.na-w2g-host-modal .na-w2g-host-panel:has(.w2g-ep-item.is-busy) .na-w2g-ep-busy { display: block; }
@media screen and (max-width: 575px) {
    .na-w2g-host-modal .w2g-ep-item { width: calc(16.66% - 6px); }
}
.na-w2g-modal .modal-content .modal-footer { padding: 0 20px 20px; }
.na-w2g-modal .na-w2g-btn-end { background: #bd362f; border-color: #bd362f; color: #fff; font-size: 14px; }
.na-w2g-modal .na-w2g-btn-end:hover { background: #a52f29; color: #fff; }