/* ==========================================================================
   Whitoo — Chat room shell 2026 (reference look)
   Loaded LAST in chat_room.html. Visual layer only: no markup / JS changes.

   Existing shell (verified live, widths at 964px viewport):
     .room-bar          72px   icon rail
     #sidebar-wrapper  240px   server card + channels + user bar
     .main-container          chat
     .right-panel      250px   profile card + tournament/event cards + members

   Inside the left panel:  .woo-room-hero-card > .woo-room-hero-cover / -body
                           .channel-list > .mb-1 > .channel-cat + .btn-toggle-nav
                           .channel-list-bottom (user bar)
   Inside the right panel: .woo-right-profile-card, .woo-right-tournament-card,
                           .room-users > .lt-role-user-section >
                             .lt-role-user-heading + .lt-role-user-items

   Specificity note: the older sheets style these with body.incallx-prefixed
   rules and !important, so every override here uses the same prefix.
   ========================================================================== */

/* Palette taken from the reference: neutral near-black with a warm (crimson)
   cast — not the blue-grey the old sheets used. */
body.incallx {
    --wr-bg: #0f0e13;        /* chat column (darkest)      */
    --wr-panel: #16151b;     /* left + right panels        */
    --wr-panel-2: #1d1b23;   /* cards inside the panels    */
    --wr-rail: #0a090d;      /* far-left icon rail         */
    --wr-line: rgba(255, 255, 255, .06);
    --wr-text: #e8e6ee;
    --wr-muted: #8a8593;
    --wr-red: #e0212e;
    --wr-red-2: #ff3d5e;
}

/* page + app shell background */
body.incallx,
body.incallx #wrapper,
body.incallx .wrapper {
    background: var(--wr-bg) !important;
    background-image: none !important;
}

/* ============================ LEFT PANEL ============================ */

body.incallx #sidebar-wrapper,
body.incallx .channel-bar {
    background: var(--wr-panel) !important;
    border-right: 1px solid var(--wr-line) !important;
}

/* --- server hero card --- */
body.incallx .woo-room-hero-card {
    overflow: hidden;
    margin: 0 0 12px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 14px !important;
    background: var(--wr-panel-2) !important;
}

body.incallx .woo-room-hero-cover {
    height: 92px !important;
    border-radius: 0 !important;
}

body.incallx .woo-room-hero-body {
    padding: 12px 13px 13px !important;
}

body.incallx .woo-room-hero-title span {
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
}

/* the three presence chips -> compact stat rows like the reference */
body.incallx .woo-room-hero-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

body.incallx .woo-room-hero-meta > span {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    padding: 7px 10px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: var(--wr-text) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

body.incallx .woo-room-hero-meta > span i {
    font-size: 14px !important;
}

body.incallx .woo-room-presence-active i { color: #34d399 !important; }
body.incallx .woo-room-presence-offline i { color: var(--wr-muted) !important; }
body.incallx .woo-room-presence-voice i { color: #60a5fa !important; }

/* --- channel categories --- */
body.incallx .channel-list .channel-cat {
    margin: 14px 0 6px !important;
    padding: 0 4px !important;
    color: var(--wr-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

body.incallx .channel-list .cat-name {
    color: var(--wr-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

body.incallx .channel-list .channel-cat > i {
    font-size: 12px !important;
    opacity: .55;
}

/* --- channel rows ---
   Channels are DIVs (.channel-main > .channel-item), not <a>. Verified live. */
body.incallx .channel-list .channel-item,
body.incallx .btn-toggle-nav .channel-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 1px 0 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--wr-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background .14s ease, color .14s ease;
}

body.incallx .channel-list .channel-item:hover,
body.incallx .btn-toggle-nav .channel-main:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: var(--wr-text) !important;
}

/* active channel — solid red like the reference */
body.incallx .channel-list .channel-item.active,
body.incallx .channel-list .channel-item.selected,
body.incallx .btn-toggle-nav .channel-main.active,
body.incallx .btn-toggle-nav .channel-main.selected-channel,
body.incallx .channel-list .active > .channel-item {
    background: linear-gradient(135deg, rgba(224, 33, 46, .92), rgba(190, 18, 60, .88)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(224, 33, 46, .3);
}

body.incallx .channel-list .channel-item.active i,
body.incallx .btn-toggle-nav .channel-main.active i {
    color: #fff !important;
}

/* --- bottom user bar --- */
body.incallx .channel-list-bottom {
    padding: 8px 10px !important;
    border-top: 1px solid var(--wr-line) !important;
    background: rgba(0, 0, 0, .25) !important;
}

body.incallx .user-bottom-trigger {
    gap: 9px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
}

body.incallx .user-bottom-trigger:hover {
    background: rgba(255, 255, 255, .05) !important;
}

/* ============================ ICON RAIL ============================ */

body.incallx .room-bar {
    background: var(--wr-rail) !important;
    background-image: none !important;
    border-right: 1px solid var(--wr-line) !important;
}

/* ============================ RIGHT PANEL ============================ */

/* The right column is #rightbar-wrapper (= .right-panel = .rightbar-wrapper).
   whitoo-refresh.css paints it with `body.incallx #rightbar-wrapper { radial-gradient }`
   — an ID selector, which outranks a class rule, so the ID must be used here too. */
body.incallx #rightbar-wrapper,
body.incallx .right-panel,
body.incallx .rightbar-wrapper {
    background: var(--wr-panel) !important;
    background-image: none !important;
    border-left: 1px solid var(--wr-line) !important;
}

/* profile card on top */
body.incallx .woo-right-profile-card {
    margin: 10px !important;
    padding: 12px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 13px !important;
    background: var(--wr-panel-2) !important;
}

body.incallx .woo-right-profile-top img {
    width: 39px !important;
    height: 39px !important;
    border-radius: 50% !important;
}

body.incallx .woo-right-crown {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: linear-gradient(150deg, #ffd75e, #f59e0b) !important;
    color: #7a4a00 !important;
}

/* tournament / event / giveaway cards */
body.incallx .woo-right-tournament-card {
    margin: 0 10px 8px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 12px !important;
    background: var(--wr-panel-2) !important;
    overflow: hidden;
}

body.incallx .woo-right-tournament-head {
    padding: 11px 12px !important;
    color: var(--wr-text) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

body.incallx .woo-right-tournament-head small {
    display: grid !important;
    place-items: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: var(--wr-red) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

/* --- member list: role groups --- */
body.incallx .room-user-search {
    height: 38px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--wr-text) !important;
    font-size: 12.5px !important;
}

/* Role group heading — markup is <span><i/>Name</span><b>count</b>.
   The reference shows "YÖNETİCİ — 2"; render it as a spaced row. */
body.incallx .lt-role-user-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 14px 4px 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--wr-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

body.incallx .lt-role-user-heading > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.incallx .lt-role-user-heading > span i {
    font-size: 12px !important;
    opacity: .7;
}

body.incallx .lt-role-user-heading > b {
    color: var(--wr-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

/* role-tinted names (applied when the room defines roles) */
body.incallx .lt-role-user-section[data-role*="admin" i] .channel-user-name,
body.incallx .lt-role-user-section[data-role*="yonet" i] .channel-user-name,
body.incallx .lt-role-user-section[data-role*="owner" i] .channel-user-name {
    color: #f87171 !important;
}

body.incallx .lt-role-user-section[data-role*="mod" i] .channel-user-name {
    color: #60a5fa !important;
}

body.incallx .lt-role-user-section[data-role*="bot" i] .channel-user-name {
    color: #a5b4fc !important;
}

body.incallx .lt-role-user-items .user-row {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 1px 0 !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    background: transparent !important;
    transition: background .14s ease;
}

body.incallx .lt-role-user-items .user-row:hover {
    background: rgba(255, 255, 255, .05) !important;
}

body.incallx .lt-role-user-items .channel-user-image img,
body.incallx .lt-role-user-items .img-profile {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover;
    content-visibility: visible;
}

body.incallx .lt-role-user-items .channel-user-name {
    color: var(--wr-text) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

body.incallx .lt-role-user-items .user-status {
    color: var(--wr-muted) !important;
    font-size: 10.5px !important;
}

/* online dot */
body.incallx .lt-role-user-items .online-status i {
    font-size: 9px !important;
}

body.incallx .lt-role-user-items .online-status.online i,
body.incallx .lt-role-user-items .online-status.Online i {
    color: #34d399 !important;
}

/* ============================ CHAT COLUMN ============================ */

body.incallx .main-container,
body.incallx .page-content-wrapper {
    background: var(--wr-bg) !important;
}

/* message composer */
body.incallx .chat-input-row,
body.incallx .message-form,
body.incallx .chat-footer {
    border-top: 1px solid var(--wr-line) !important;
    background: var(--wr-panel) !important;
}

body.incallx .chat-input-row .form-control,
body.incallx .message-form .form-control {
    border: 1px solid var(--wr-line) !important;
    border-radius: 12px !important;
    background: var(--wr-panel-2) !important;
    color: var(--wr-text) !important;
    font-size: 13px !important;
}

/* ---- right panel cards: match the reference's list-card look ---- */
body.incallx .woo-right-tournament-head span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--wr-text) !important;
}

body.incallx .woo-right-tournament-head span i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(224, 33, 46, .16);
    color: #ff8a95 !important;
    font-size: 14px;
}

body.incallx .woo-right-event-card .woo-right-tournament-head span i {
    background: rgba(59, 130, 246, .16);
    color: #60a5fa !important;
}

body.incallx .woo-right-tournament-body {
    padding: 0 12px 12px !important;
    border-top: 1px solid var(--wr-line);
}

body.incallx .woo-right-tournament-item {
    display: block !important;
    margin-top: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: var(--wr-text) !important;
}

body.incallx .woo-right-tournament-empty {
    padding: 10px 0 !important;
    color: var(--wr-muted) !important;
    font-size: 11.5px !important;
}

body.incallx .woo-right-see-all {
    color: #ff8a95 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* right panel section header (Community / Members and media) */
body.incallx .woo-rpanel-head {
    margin: 12px 10px 8px !important;
    color: var(--wr-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* member/media tab pills */
body.incallx .right-panel .nav-pills {
    gap: 5px !important;
    padding: 0 10px !important;
}

body.incallx .right-panel .nav-pills .nav-link {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 34px !important;
    border: 1px solid var(--wr-line) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: var(--wr-muted) !important;
}

body.incallx .right-panel .nav-pills .nav-link.active {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--wr-red), #be123c) !important;
    color: #fff !important;
}

/* "Load more" button */
body.incallx .more-actions .btn {
    border: 1px solid var(--wr-line) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--wr-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ============================ BACKGROUNDS (step 1) ============================
   The old sheets paint the chat column with gradients + a grid texture. The
   reference is a flat near-black, so those are cleared here. */

body.incallx .main-container,
body.incallx .page-content-wrapper,
body.incallx .tab-content,
body.incallx .main-tab-content,
body.incallx .main-tab-pane,
body.incallx .group-chat,
body.incallx .private-chat,
body.incallx .chat-scroll,
body.incallx .messages.chats {
    background: var(--wr-bg) !important;
    background-image: none !important;
}

/* kill decorative grid/pattern overlays behind the messages */
body.incallx .chat-scroll::before,
body.incallx .chat-scroll::after,
body.incallx .messages.chats::before,
body.incallx .messages.chats::after,
body.incallx .group-chat::before,
body.incallx .group-chat::after {
    content: none !important;
    background: none !important;
}

/* left panel column + its inner containers */
body.incallx #sidebar-wrapper,
body.incallx .sidebar-wrapper,
body.incallx .channel-bar,
body.incallx .channel-container,
body.incallx .channel-list {
    background: var(--wr-panel) !important;
    background-image: none !important;
}

/* right panel inner containers */
body.incallx .right-panel .tab-content,
body.incallx .right-panel .tab-pane,
body.incallx .room-users-row,
body.incallx .room-users {
    background: transparent !important;
    background-image: none !important;
}

/* top bar above the chat */
body.incallx .topbar,
body.incallx .chat-header,
body.incallx .room-topbar {
    background: var(--wr-panel) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--wr-line) !important;
}

/* whitoo-refresh.css paints the scroll area via an ID-scoped selector
   (`body.incallx #main-room .group-chat .chat-scroll`), which outranks a plain
   class rule — so match that specificity to clear it. */
body.incallx #main-room .group-chat .chat-scroll,
body.incallx #main-room .private-chat .chat-scroll,
body.incallx #main-private .group-chat .chat-scroll,
body.incallx #main-private .private-chat .chat-scroll,
body.incallx #main-room .chat-scroll,
body.incallx #main-private .chat-scroll {
    background: transparent !important;
    background-image: none !important;
}

/* and the decorative radial behind the whole group-chat container */
body.incallx .container-fluid.group-chat,
body.incallx .group-chat .page-content-wrapper,
html.dark body.incallx .container-fluid.group-chat,
html.dark body.incallx .group-chat .page-content-wrapper {
    background: var(--wr-bg) !important;
    background-image: none !important;
}

/* Final clear for the chat scroll area. The competing rule in whitoo-refresh.css
   is ID/deeply scoped, so this uses the full ancestor chain seen live
   (.page-content-wrapper > .container-fluid > .wrapper > .main-panel > .chat-scroll)
   plus html+body elements to outrank it. */
html body.incallx .page-content-wrapper .wrapper .main-panel .chat-scroll,
html body.incallx .wrapper .main-panel .chat-scroll,
html body.incallx .main-panel .chat-scroll,
html.dark body.incallx .main-panel .chat-scroll {
    background: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   ROOT CAUSE FIX (measured live):
   1) the gradient behind the chat is painted on .main-panel (the parent of
      .chat-scroll), not on .chat-scroll itself;
   2) the old sheets colour everything through shared CSS variables
      (--woo-panel etc.), so redefining those flips every legacy rule at once.
   ========================================================================== */

html.dark, html, :root, body.incallx {
    --woo-panel: #16151b !important;
    --woo-panel-2: #1d1b23 !important;
    --woo-bg: #0f0e13 !important;
    --dark-bg: #0f0e13 !important;
    --woo-line: rgba(255, 255, 255, .06) !important;
}

html body.incallx .main-panel,
html body.incallx .wrapper .main-panel,
html.dark body.incallx .main-panel {
    background: var(--wr-bg) !important;
    background-image: none !important;
}

html body.incallx .main-panel::before,
html body.incallx .main-panel::after {
    content: none !important;
    background: none !important;
}

/* ==========================================================================
   STEP 2 — SERVER RAIL (far-left icon strip)
   Markup (verified live):
     .room-bar
       .cn-tab.mini-brand            > a > img      (Woo logo, top)
       .cn-tab.private-messages                      (DMs)
       .room-list-item.cn-tab[data-room-id]          (servers, one .active)
       .cn-tab.action-item ...                       (manage / explore / etc.)
   Reference: 44px rounded-square tiles, dark chips, the active server in red
   with a white pill indicator on the left edge, settings pinned to the bottom.
   ========================================================================== */

html body.incallx .room-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 72px !important;
    padding: 12px 0 !important;
    background: var(--wr-rail) !important;
    background-image: none !important;
    border-right: 1px solid var(--wr-line) !important;
    overflow-y: auto;
    scrollbar-width: none;
}

html body.incallx .room-bar::-webkit-scrollbar { display: none; }

/* every tile */
html body.incallx .room-bar .cn-tab,
html body.incallx .room-bar .room-list-item {
    position: relative;
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #1b1a21 !important;
    background-image: none !important;
    color: #9b96a6 !important;
    font-size: 19px !important;
    cursor: pointer;
    overflow: hidden;
    transition: background .16s ease, border-radius .16s ease, color .16s ease;
}

html body.incallx .room-bar .cn-tab:hover,
html body.incallx .room-bar .room-list-item:hover {
    background: #24222c !important;
    border-radius: 13px !important;
    color: #fff !important;
}

/* avatars / logos inside a tile fill it */
html body.incallx .room-bar .cn-tab img,
html body.incallx .room-bar .room-list-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    content-visibility: visible;
}

html body.incallx .room-bar .cn-tab a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

/* brand logo on top, slightly separated */
html body.incallx .room-bar .mini-brand {
    background: #1b1a21 !important;
    margin-bottom: 4px !important;
}

/* ACTIVE server: red tile + white pill on the left edge */
html body.incallx .room-bar .cn-tab.active,
html body.incallx .room-bar .room-list-item.active {
    background: linear-gradient(150deg, #e0212e, #a1121d) !important;
    color: #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 18px rgba(224, 33, 46, .38);
}

html body.incallx .room-bar .cn-tab.active::before,
html body.incallx .room-bar .room-list-item.active::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    border-radius: 0 4px 4px 0;
    background: #fff;
}

/* unread dot indicator */
html body.incallx .room-bar .cn-tab .pill,
html body.incallx .room-bar .room-list-item .pill {
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    border-radius: 0 4px 4px 0;
    background: #fff;
}

/* settings / bottom items pinned to the end */
html body.incallx .room-bar .room-bar-bottom,
html body.incallx .room-bar .cn-tab:last-child {
    margin-top: auto !important;
}

/* ---- rail order fix ----
   Rail items in DOM order: private-messages, server list, manage-room, radio,
   explore-room, join-link-shortcut, looai-room.
   The legacy sheets push the action items to the bottom with margin-top:auto,
   which left a big gap under the servers. Everything now flows from the top so
   "manage rooms" sits directly beneath the server list, however many there are. */
html body.incallx .room-bar .cn-tab,
html body.incallx .room-bar .room-list-item,
html body.incallx .room-bar .action-item,
html body.incallx .room-bar .cn-tab:last-child,
html body.incallx .room-bar > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* remove the invite-link shortcut from the rail (requested) */
html body.incallx .room-bar .join-link-shortcut,
html body.incallx .room-bar #main-join-link-shortcut {
    display: none !important;
}

/* subtle divider between the server list and the action tiles */
html body.incallx .room-bar .manage-room {
    margin-top: 6px !important;
    position: relative;
}

html body.incallx .room-bar .manage-room::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
}

/* Pin the last three utility tiles (radio, explore, Whitoo AI) to the bottom of
   the rail. margin-top:auto on the first of them pushes that whole trailing
   group down, while the server list + "manage rooms" stay at the top. */
html body.incallx .room-bar .radio-container {
    margin-top: auto !important;
}

/* fallback: if the radio tile is hidden, the explore tile becomes the anchor */
html body.incallx .room-bar .radio-container[style*="display: none"] ~ .explore-room,
html body.incallx .room-bar .radio-container[style*="display:none"] ~ .explore-room {
    margin-top: auto !important;
}

/* keep a little breathing room above the pinned group */
html body.incallx .room-bar .radio-container {
    position: relative;
}

html body.incallx .room-bar .radio-container::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
}

/* margin-top:auto only pushes a flex item down if the column actually has spare
   height. The rail was sized to its content, so the pinned group stayed at the
   top. Give it the full viewport height so the bottom group really sits at the
   bottom: servers + "manage rooms" on top, radio / explore / Whitoo AI pinned. */
html body.incallx .room-bar {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    flex: 0 0 72px !important;
}

html body.incallx .room-bar .radio-container,
html body.incallx .room-bar .explore-room,
html body.incallx .room-bar .looai-room {
    flex: 0 0 auto !important;
}

/* the trailing group starts at the radio tile */
html body.incallx .room-bar .radio-container {
    margin-top: auto !important;
    margin-bottom: 8px !important;
}

html body.incallx .room-bar .explore-room,
html body.incallx .room-bar .looai-room {
    margin-bottom: 8px !important;
}

html body.incallx .room-bar .looai-room {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   RAIL PINNING — real structure (from the template):
     .room-bar
       .cn-tab.mini-brand
       .cn-tab.private-messages
       .mini-brand-seperator
       .room-list      <- servers live in HERE
       .action-list    <- manage-room, radio, explore, join-link, looai live HERE
   Earlier attempts put margin-top:auto on .radio-container, but that element is
   a child of .action-list (not of .room-bar), and .action-list was only as tall
   as its content — so there was no free space to push into. Fix: let
   .action-list grow to fill the rail, then push from the radio tile inside it.
   ========================================================================== */

html body.incallx .room-bar .room-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.incallx .room-bar .action-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;      /* fill the remaining rail height */
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* manage/create stays right under the servers */
html body.incallx .room-bar .action-list .manage-room {
    margin-top: 0 !important;
}

/* radio + explore + Whitoo AI pinned to the bottom */
html body.incallx .room-bar .action-list.has-radio .radio-container,
html body.incallx .room-bar .action-list:not(.has-radio) .explore-room {
    margin-top: auto !important;
}

/* when the radio tile exists it is the anchor; explore/looai follow it */
html body.incallx .room-bar .action-list .radio-container ~ .explore-room,
html body.incallx .room-bar .action-list .radio-container ~ .looai-room {
    margin-top: 0 !important;
}

html body.incallx .room-bar .mini-brand-seperator {
    width: 26px !important;
    height: 2px !important;
    margin: 4px 0 !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, .1) !important;
    flex: 0 0 auto !important;
}

/* ========================================================================== 
   JOIN BY LINK — centered native dialog
   ========================================================================== */
body.wjoin-modal-locked { overflow: hidden !important; }

.wjoin-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.wjoin-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.wjoin-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 32% 12%, rgba(230, 18, 43, .18), transparent 32%),
        rgba(3, 5, 10, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.wjoin-modal-dialog {
    position: relative;
    width: min(560px, 100%);
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(230, 18, 43, .15), transparent 34%),
        linear-gradient(145deg, #15151c, #0c0d12 72%);
    box-shadow: 0 34px 100px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .055);
    transform: translateY(18px) scale(.975);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
}

.wjoin-modal.is-open .wjoin-modal-dialog { transform: translateY(0) scale(1); }

.wjoin-modal-dialog::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -110px;
    top: -130px;
    border-radius: 50%;
    background: rgba(230, 18, 43, .12);
    filter: blur(2px);
    pointer-events: none;
}

.wjoin-modal-close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.68);
    font-size: 19px;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.wjoin-modal-close:hover {
    color: #fff;
    border-color: rgba(230,18,43,.48);
    background: rgba(230,18,43,.12);
}

.wjoin-modal-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border: 1px solid rgba(230,18,43,.34);
    border-radius: 17px;
    background: rgba(230,18,43,.13);
    color: #ff4358;
    font-size: 25px;
    box-shadow: 0 14px 32px rgba(230,18,43,.12);
}

.wjoin-modal-copy { position: relative; padding-right: 34px; }
.wjoin-modal-copy > span {
    display: block;
    margin-bottom: 7px;
    color: #ff4358;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.1px;
}
.wjoin-modal-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 950;
    letter-spacing: -.7px;
    line-height: 1.08;
}
.wjoin-modal-copy p {
    margin: 10px 0 22px;
    color: rgba(221,225,235,.58);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.5;
}

.wjoin-modal-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 10px;
}

.wjoin-modal-input {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    margin: 0;
    padding: 7px 14px 7px 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;
    background: rgba(4,6,11,.62);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.wjoin-modal-input:focus-within {
    border-color: rgba(230,18,43,.62);
    box-shadow: 0 0 0 4px rgba(230,18,43,.09);
}
.wjoin-modal-input > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.62);
    font-size: 19px;
}
.wjoin-modal-input > span { min-width: 0; }
.wjoin-modal-input small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255,255,255,.33);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .75px;
}
.wjoin-modal-input input {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
}
.wjoin-modal-input input::placeholder { color: rgba(255,255,255,.26); }

.wjoin-modal-form > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    padding: 0 18px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, #f21b38, #be1028);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(230,18,43,.22);
    transition: transform .16s ease, filter .16s ease;
}
.wjoin-modal-form > button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.wjoin-modal-form > button:disabled { opacity: .58; cursor: wait; transform: none; }

.wjoin-modal-error {
    display: none;
    margin-top: 11px;
    padding: 11px 13px;
    border: 1px solid rgba(230,18,43,.30);
    border-radius: 13px;
    background: rgba(230,18,43,.10);
    color: #ffb7c0;
    font-size: 11.5px;
    font-weight: 750;
}
.wjoin-modal-error.is-visible { display: block; }

.wjoin-modal-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: rgba(255,255,255,.34);
    font-size: 10.5px;
    font-weight: 650;
}
.wjoin-modal-foot i { color: #2ed573; font-size: 15px; }

html.light .wjoin-modal-dialog {
    border-color: rgba(15,23,42,.10);
    background: linear-gradient(145deg, #fff, #f7f8fb 72%);
}
html.light .wjoin-modal-copy h2,
html.light .wjoin-modal-input input { color: #111827; }
html.light .wjoin-modal-copy p { color: rgba(30,41,59,.62); }
html.light .wjoin-modal-input { border-color: rgba(15,23,42,.12); background: rgba(241,245,249,.86); }

@media (max-width: 640px) {
    .wjoin-modal { padding: 14px; }
    .wjoin-modal-dialog { padding: 22px; border-radius: 23px; }
    .wjoin-modal-form { grid-template-columns: 1fr; }
    .wjoin-modal-form > button { min-height: 54px; }
}