:root {
    --whitoo-red: #d71935;
    --whitoo-red-2: #ef3b4f;
    --whitoo-red-soft: #fff1f3;
    --whitoo-white: #ffffff;
    --whitoo-cream: #fff8f9;
    --whitoo-ink: #120b10;
    --whitoo-night: #0c0d14;
    --whitoo-panel: rgba(18, 16, 23, .84);
    --whitoo-panel-soft: rgba(255, 255, 255, .075);
    --whitoo-border: rgba(255, 255, 255, .13);
    --whitoo-red-border: rgba(215, 25, 53, .24);
    --lt-cyan: var(--whitoo-red);
    --lt-blue: var(--whitoo-red-2);
    --lt-rose: #ff7b8a;
    --lt-gold: var(--whitoo-white);
    --ltx-cyan: var(--whitoo-red);
    --ltx-teal: var(--whitoo-red-2);
    --ltx-blue: var(--whitoo-white);
    --la-cyan: var(--whitoo-red);
    --la-blue: var(--whitoo-white);
}

html.dark,
body,
body.incallx {
    background:
        radial-gradient(820px 420px at 8% -8%, rgba(215, 25, 53, .13), transparent 60%),
        radial-gradient(700px 420px at 102% 4%, rgba(255, 255, 255, .08), transparent 58%),
        linear-gradient(180deg, #101019 0%, #0b0c13 54%, #080910 100%) !important;
    color: #f8f4f5;
}

html.light body,
html.light body.incallx {
    background:
        radial-gradient(760px 400px at 8% -8%, rgba(215, 25, 53, .09), transparent 62%),
        radial-gradient(620px 360px at 100% 0%, rgba(255, 241, 243, .90), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #fff9fa 46%, #ffffff 100%) !important;
    color: var(--whitoo-ink);
}

a,
.nav-link:hover,
.dropdown-item:hover,
.ltplus-eyebrow,
.looai-kicker,
.lt-game-kicker,
.woobot-eyebrow,
.message-user-name,
.user-name {
    color: var(--whitoo-red-2) !important;
}

.navbar.navbar-scroll,
header .navbar,
.topbar,
.room-bar,
.channel-bar,
.sidebar-room,
.sidebar-private,
.rightbar-wrapper,
.page-wrapper,
.navbar-vertical,
.card,
.modal-content,
.dropdown-menu,
.chatroom-item,
.room-list-item,
.ltplus-checkout-card,
.ltplus-benefit-panel,
.looai-panel,
.lt-game-shell,
.join-room-by-link-card,
.lt-dm-tools,
.lt-sidebar-shortcuts {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .045)),
        var(--whitoo-panel) !important;
    border-color: var(--whitoo-border) !important;
    /* Blur removed for smoother chat performance. */
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

html.light .navbar.navbar-scroll,
html.light header .navbar,
html.light .topbar,
html.light .room-bar,
html.light .channel-bar,
html.light .sidebar-room,
html.light .sidebar-private,
html.light .rightbar-wrapper,
html.light .page-wrapper,
html.light .navbar-vertical,
html.light .card,
html.light .modal-content,
html.light .dropdown-menu,
html.light .chatroom-item,
html.light .room-list-item,
html.light .ltplus-checkout-card,
html.light .ltplus-benefit-panel,
html.light .looai-panel,
html.light .lt-game-shell,
html.light .join-room-by-link-card,
html.light .lt-dm-tools,
html.light .lt-sidebar-shortcuts {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(215, 25, 53, .12) !important;
    box-shadow: 0 8px 22px rgba(60, 17, 26, .06);
}

.btn-primary,
.btn-success,
.lt-send-message,
.send-message,
.whitoo-download-btn-primary,
.lt-game-action,
.join-room-by-link-btn,
.ltplus-main-button,
.looai-send,
.chatroom-item.active,
.room-list .room-list-item.active,
.form-selectgroup-input:checked + .form-selectgroup-label {
    background: linear-gradient(135deg, var(--whitoo-red), var(--whitoo-red-2)) !important;
    border-color: rgba(255, 255, 255, .32) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(215, 25, 53, .18) !important;
}

.btn-outline-primary,
.btn-outline-danger,
.lt-sidebar-shortcut,
.lt-dm-filters button,
.ltplus-payment-methods label,
.ltplus-duration-card,
.room-access button,
.cn-tab .private-item,
.cn-tab .action-item {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #f8f4f5 !important;
}

html.light .btn-outline-primary,
html.light .btn-outline-danger,
html.light .lt-sidebar-shortcut,
html.light .lt-dm-filters button,
html.light .ltplus-payment-methods label,
html.light .ltplus-duration-card,
html.light .room-access button,
html.light .cn-tab .private-item,
html.light .cn-tab .action-item {
    background: #ffffff !important;
    border-color: rgba(215, 25, 53, .14) !important;
    color: #221116 !important;
}

.lt-dm-filters button.active,
.ltplus-payment-methods input:checked + span,
.ltplus-duration-card:has(input:checked),
.lt-sidebar-shortcut:hover,
.cn-tab:hover .private-item,
.cn-tab:hover .action-item {
    background: rgba(215, 25, 53, .11) !important;
    border-color: rgba(215, 25, 53, .32) !important;
    color: #ffffff !important;
}

html.light .lt-dm-filters button.active,
html.light .ltplus-payment-methods input:checked + span,
html.light .ltplus-duration-card:has(input:checked),
html.light .lt-sidebar-shortcut:hover,
html.light .cn-tab:hover .private-item,
html.light .cn-tab:hover .action-item {
    background: var(--whitoo-red-soft) !important;
    color: #b9152d !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"] {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
}

html.light .form-control,
html.light .form-select,
html.light textarea,
html.light input[type="text"],
html.light input[type="search"],
html.light input[type="password"],
html.light input[type="email"] {
    background: #ffffff !important;
    border-color: rgba(215, 25, 53, .14) !important;
    color: #1d0d12 !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--whitoo-red-2) !important;
    box-shadow: 0 0 0 .16rem rgba(215, 25, 53, .16) !important;
}

.message-bubble,
.message-content,
.chat-message .message,
.looai-bubble,
.lt-game-card,
.ltplus-bank-box,
.notification-dropdown,
.profile-menu,
.user-popover {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html.light .message-bubble,
html.light .message-content,
html.light .chat-message .message,
html.light .looai-bubble,
html.light .lt-game-card,
html.light .ltplus-bank-box,
html.light .notification-dropdown,
html.light .profile-menu,
html.light .user-popover {
    background: #ffffff !important;
    border-color: rgba(215, 25, 53, .10) !important;
}

.own-message .message-content,
.message.self .message-content,
.looai-bubble-user {
    background: linear-gradient(135deg, #d71935, #f05263) !important;
    color: #ffffff !important;
}

.badge,
.unread-indicator.active,
.pill.active,
.online-dot,
.status-online {
    background: linear-gradient(135deg, var(--whitoo-red), var(--whitoo-red-2)) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .34) !important;
}

.lt-room-verified,
.verified-room-badge,
.lt-room-verified-header {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    background: #ffffff !important;
    color: var(--whitoo-red) !important;
    border: 1px solid rgba(215, 25, 53, .28) !important;
    box-shadow: 0 4px 10px rgba(215, 25, 53, .12) !important;
}

.lt-room-verified i,
.verified-room-badge i,
.lt-room-verified-header i {
    font-size: 10px !important;
    color: var(--whitoo-red) !important;
    stroke: var(--whitoo-red) !important;
    stroke-width: 2.1 !important;
}

.lt-room-verified-header {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
}

.lt-room-verified-header i {
    font-size: 9px !important;
}

.room-bar .cn-tab,
.room-bar .cn-tab.active,
.room-bar .cn-tab:hover {
    background: transparent !important;
    box-shadow: none !important;
}

.room-bar .cn-tab.active::before,
.room-bar .cn-tab:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--whitoo-red), var(--whitoo-red-2));
    box-shadow: 0 0 14px rgba(215, 25, 53, .32);
}

.room-bar .cn-tab.active img,
.room-bar .cn-tab:hover img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .78), 0 0 0 5px rgba(215, 25, 53, .18) !important;
}

.carousel,
.carousel-item,
.homepage-hero,
.whitoo-download-panel,
.ltplus-premium-hero,
.looai-header,
.ltplus-referral-hero {
    background:
        radial-gradient(620px 320px at 14% 0%, rgba(255, 255, 255, .34), transparent 58%),
        radial-gradient(420px 280px at 92% 12%, rgba(215, 25, 53, .16), transparent 60%),
        linear-gradient(135deg, #fefefe 0%, #fff1f3 42%, #d71935 150%) !important;
    border-color: rgba(215, 25, 53, .16) !important;
    box-shadow: 0 10px 30px rgba(60, 17, 26, .10), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

html.dark .carousel,
html.dark .carousel-item,
html.dark .homepage-hero,
html.dark .whitoo-download-panel,
html.dark .ltplus-premium-hero,
html.dark .looai-header,
html.dark .ltplus-referral-hero {
    background:
        radial-gradient(620px 320px at 14% 0%, rgba(255, 255, 255, .14), transparent 58%),
        radial-gradient(420px 280px at 92% 12%, rgba(215, 25, 53, .18), transparent 60%),
        linear-gradient(135deg, #22151b 0%, #3a111b 46%, #f7eef0 155%) !important;
}

.ltplus-referral-hero *,
.ltplus-premium-hero *,
.whitoo-download-panel *,
.looai-header * {
    color: #241015 !important;
}

html.dark .ltplus-referral-hero *,
html.dark .ltplus-premium-hero *,
html.dark .whitoo-download-panel *,
html.dark .looai-header * {
    color: #ffffff !important;
}

.ltplus-referral-score,
.referral-summary,
.referral-stat,
.lt-referral-stat {
    background: rgba(255, 255, 255, .54) !important;
    border: 1px solid rgba(215, 25, 53, .12) !important;
    color: #241015 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

html.dark .ltplus-referral-score,
html.dark .referral-summary,
html.dark .referral-stat,
html.dark .lt-referral-stat {
    background: rgba(255, 255, 255, .10) !important;
    color: #ffffff !important;
}

.whitoo-download-panel,
.ltplus-premium-page,
.looai-panel {
    border-radius: 18px !important;
    overflow: hidden;
}

.ad-space {
    border: 1px solid rgba(215, 25, 53, .14) !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #b9152d !important;
}

.dropdown-menu,
.profile-menu,
.user-menu,
.status-menu,
.account-menu,
.cn-dropdown,
.dropdown-menu.show {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        rgba(25, 23, 31, .96) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    padding: 8px !important;
}

.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu .dropdown-item,
.profile-menu a,
.profile-menu button,
.user-menu a,
.user-menu button,
.status-menu a,
.status-menu button,
.account-menu a,
.account-menu button {
    color: #f7f2f3 !important;
    border-radius: 10px !important;
    text-shadow: none !important;
}

.dropdown-menu i,
.profile-menu i,
.user-menu i,
.status-menu i,
.account-menu i {
    color: #f05263 !important;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover,
.dropdown-menu .dropdown-item:hover,
.profile-menu a:hover,
.profile-menu button:hover,
.user-menu a:hover,
.user-menu button:hover,
.status-menu a:hover,
.status-menu button:hover,
.account-menu a:hover,
.account-menu button:hover {
    background: rgba(215, 25, 53, .12) !important;
    color: #ffffff !important;
}

.dropdown-divider,
.profile-menu hr,
.user-menu hr,
.status-menu hr,
.account-menu hr {
    border-color: rgba(255, 255, 255, .10) !important;
}

.profile-menu .btn,
.user-menu .btn,
.account-menu .btn,
.dropdown-menu .btn {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(215, 25, 53, .16) !important;
    color: #f7f2f3 !important;
}

html.light .dropdown-menu,
html.light .profile-menu,
html.light .user-menu,
html.light .status-menu,
html.light .account-menu,
html.light .cn-dropdown,
html.light .dropdown-menu.show {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(215, 25, 53, .12) !important;
    box-shadow: 0 8px 22px rgba(60, 17, 26, .08) !important;
}

html.light .dropdown-menu a,
html.light .dropdown-menu button,
html.light .dropdown-menu .dropdown-item,
html.light .profile-menu a,
html.light .profile-menu button,
html.light .user-menu a,
html.light .user-menu button,
html.light .status-menu a,
html.light .status-menu button,
html.light .account-menu a,
html.light .account-menu button {
    color: #241015 !important;
}

html.light .dropdown-menu a:hover,
html.light .dropdown-menu button:hover,
html.light .dropdown-menu .dropdown-item:hover,
html.light .profile-menu a:hover,
html.light .profile-menu button:hover,
html.light .user-menu a:hover,
html.light .user-menu button:hover,
html.light .status-menu a:hover,
html.light .status-menu button:hover,
html.light .account-menu a:hover,
html.light .account-menu button:hover {
    background: var(--whitoo-red-soft) !important;
    color: #b9152d !important;
}

.profile-menu [class*="about"],
.profile-menu [class*="privacy"],
.profile-menu [class*="terms"],
.user-menu [class*="about"],
.user-menu [class*="privacy"],
.user-menu [class*="terms"],
.dropdown-menu [class*="about"],
.dropdown-menu [class*="privacy"],
.dropdown-menu [class*="terms"] {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(215, 25, 53, .15) !important;
    color: #f7f2f3 !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #bfc2ca, var(--whitoo-red-2)) !important;
    border-radius: 999px;
}

::selection {
    background: rgba(215, 25, 53, .22);
    color: #ffffff;
}

@media (max-width: 768px) {
    .looai-panel,
    .ltplus-checkout-card,
    .ltplus-benefit-panel,
    .whitoo-download-panel {
        border-radius: 14px !important;
    }

    .navbar.navbar-scroll,
    .topbar {
        background: rgba(16, 16, 25, .92) !important;
    }
}

/* Whitoo balanced chat surface polish */
html.dark .sidebar-wrapper,
html.dark .channel-bar,
html.dark .sidebar-room,
html.dark .sidebar-private,
html.dark .rightbar-wrapper {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        linear-gradient(145deg, #111722 0%, #15131c 52%, #181014 100%) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 12px 0 34px rgba(0,0,0,.18);
}

html.dark .channel-container,
html.dark .channel-list,
html.dark .sidebar-height-fix,
html.dark .sidebar-height-fix-mt48 {
    background:
        radial-gradient(320px 260px at 12% 0%, rgba(239,59,79,.075), transparent 64%),
        linear-gradient(180deg, rgba(10,16,27,.72), rgba(18,17,24,.86)) !important;
}

html.dark .container-fluid.group-chat,
html.dark .group-chat .page-content-wrapper,
html.dark .group-chat .main-panel,
html.dark .group-chat .chat-scroll,
html.dark .group-chat .chats {
    background:
        radial-gradient(760px 360px at 50% 8%, rgba(239,59,79,.07), transparent 62%),
        radial-gradient(520px 320px at 98% 22%, rgba(255,255,255,.04), transparent 60%),
        linear-gradient(180deg, #090f1b 0%, #0a0e18 55%, #080b14 100%) !important;
}

html.dark .channel-item {
    min-height: 34px;
    margin: 3px 8px !important;
    padding: 7px 9px !important;
    border: 1px solid transparent;
    border-radius: 11px !important;
    color: rgba(248,244,245,.84) !important;
    background: transparent !important;
}

html.dark .channel-item:hover {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

html.dark .channel-item.active {
    background:
        linear-gradient(135deg, rgba(239,59,79,.20), rgba(255,255,255,.075)) !important;
    border-color: rgba(239,59,79,.28) !important;
    box-shadow: inset 3px 0 0 rgba(239,59,79,.86), 0 10px 20px rgba(0,0,0,.16) !important;
    color: #ffffff !important;
}

html.dark .channel-cat,
html.dark .disc-cat-name,
html.dark .channel-name,
html.dark .top-channel-name,
html.dark .username-bottom {
    color: rgba(255,255,255,.90) !important;
}

html.dark .channel-list-bottom {
    min-height: 48px;
    padding: 6px 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        #15131a !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 -14px 30px rgba(0,0,0,.22);
}

html.dark .channel-list-bottom .dropdown-toggle {
    width: calc(100% - 42px);
    min-height: 38px;
    border-radius: 12px;
    color: #ffffff !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.08);
}

html.dark .channel-list-bottom .dropdown-toggle:hover {
    background: rgba(239,59,79,.11) !important;
    border-color: rgba(239,59,79,.22) !important;
}

html.dark .channel-list-bottom img.rounded-circle {
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 0 0 3px rgba(239,59,79,.10);
}

html.dark .topbar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        #0f1420 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

html.dark .lt-game-shell {
    background:
        radial-gradient(680px 420px at 50% 6%, rgba(239,59,79,.14), transparent 62%),
        radial-gradient(520px 380px at 78% 35%, rgba(255,255,255,.055), transparent 60%),
        linear-gradient(145deg, #090f1e 0%, #111729 48%, #0b111d 100%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.24) !important;
}

html.dark .lt-game-card {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.11) !important;
}

html.dark .editor-container {
    background: rgba(9,14,24,.92) !important;
    border-color: rgba(239,59,79,.20) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html.light .sidebar-wrapper,
html.light .channel-bar,
html.light .sidebar-room,
html.light .sidebar-private,
html.light .rightbar-wrapper,
html.light .group-chat .main-panel,
html.light .group-chat .chat-scroll,
html.light .group-chat .chats {
    background:
        radial-gradient(520px 280px at 10% 0%, rgba(215,25,53,.055), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #fff7f8 100%) !important;
}

html.light .channel-item {
    border: 1px solid transparent;
    color: #28151a !important;
    background: transparent !important;
}

html.light .channel-item:hover,
html.light .channel-item.active {
    background: #fff0f2 !important;
    border-color: rgba(215,25,53,.16) !important;
    box-shadow: inset 3px 0 0 rgba(215,25,53,.72), 0 8px 20px rgba(60,17,26,.06) !important;
}

html.light .channel-list-bottom {
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid rgba(215,25,53,.12) !important;
    box-shadow: 0 -12px 28px rgba(60,17,26,.06);
}

/* Bottom account bar spacing fix */
.channel-list-bottom > .dropup {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 72px);
}

.channel-list-bottom > .ms-auto {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: 6px !important;
}

.channel-list-bottom #dropdownUserbtm.dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    gap: 6px;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.channel-list-bottom #dropdownUserbtm .position-relative {
    flex: 0 0 auto;
}

.channel-list-bottom .username-bottom {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-list-bottom .dropup.me-2,
.channel-list-bottom .me-2.d-flex.align-items-center {
    margin-right: 4px !important;
}

.channel-list-bottom .ms-auto a,
.channel-list-bottom .ms-auto .dropdown-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.09);
}

html.light .channel-list-bottom .ms-auto a,
html.light .channel-list-bottom .ms-auto .dropdown-toggle {
    background: #ffffff !important;
    border-color: rgba(215,25,53,.13);
}

/* Modern compact category filters */
.whitoo-category-filter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)), rgba(10,14,25,.74) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
}

.whitoo-category-filter-head {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    color: #f8fafc !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, rgba(239,68,68,.24), rgba(255,255,255,.07)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
}

.whitoo-category-filter-scroll {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 3px 2px !important;
    scrollbar-width: thin;
}

.whitoo-category-filter-scroll::-webkit-scrollbar {
    height: 5px;
}

.whitoo-category-filter-scroll::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(239,68,68,.38);
}

.whitoo-category-filter .form-selectgroup-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.whitoo-category-filter .form-selectgroup-label,
.whitoo-category-filter .room-cat-select-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 11px !important;
    color: rgba(248,250,252,.88) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}

.whitoo-category-filter .form-selectgroup-label:hover,
.whitoo-category-filter .room-cat-select-label:hover {
    transform: translateY(-1px);
    color: #fff !important;
    border-color: rgba(239,68,68,.30) !important;
    background: rgba(239,68,68,.14) !important;
}

.whitoo-category-filter .form-selectgroup-input:checked + .form-selectgroup-label,
.whitoo-category-filter .form-selectgroup-input:checked + .room-cat-select-label {
    color: #fff !important;
    background: linear-gradient(135deg, #ef4444, #fb7185) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 22px rgba(239,68,68,.20) !important;
}

.whitoo-category-filter .disc-cat-icon,
.whitoo-category-filter .disc-cat-name {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.whitoo-category-filter .icon,
.whitoo-category-filter .ti {
    margin-right: 0 !important;
    font-size: 1rem !important;
}

.whitoo-category-filter-sidebar {
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 8px !important;
    overflow: hidden !important;
    gap: 8px !important;
}

.whitoo-category-filter-sidebar .whitoo-category-filter-head {
    width: 100% !important;
}

.whitoo-category-filter-sidebar .whitoo-category-filter-scroll {
    display: none !important;
}

.whitoo-sidebar-filter-select-wrap {
    position: relative;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 24px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 8px;
    border-radius: 13px;
    color: rgba(255,255,255,.90);
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.whitoo-sidebar-filter-select-wrap > .ti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #ff6b7f;
    background: rgba(239,68,68,.12);
}

.whitoo-sidebar-filter-select-wrap .ti-chevron-down {
    color: rgba(255,255,255,.64);
    background: transparent;
}

.whitoo-sidebar-category-select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 4px;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.2;
    background: transparent;
    border: 0;
    outline: 0;
    appearance: none;
    cursor: pointer;
}

.whitoo-sidebar-category-select option {
    color: #111827;
    background: #ffffff;
}

.whitoo-category-filter-sidebar .form-selectgroup-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.whitoo-category-filter-sidebar .form-selectgroup-label,
.whitoo-category-filter-sidebar .room-cat-select-label {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.whitoo-category-filter-sidebar .disc-cat-name,
.whitoo-category-filter-sidebar .form-selectgroup-label {
    min-width: 0 !important;
}

.whitoo-category-filter-sidebar .disc-cat-name,
.whitoo-category-filter-sidebar .room-cat-select-label,
.whitoo-category-filter-sidebar .form-selectgroup-label {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.whitoo-category-filter-sidebar .disc-cat-name {
    display: block !important;
    overflow: hidden !important;
}

html.light .whitoo-category-filter {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,245,246,.88)), #fff !important;
    border-color: rgba(215,25,53,.12) !important;
    box-shadow: 0 14px 30px rgba(60,17,26,.07) !important;
}

html.light .whitoo-category-filter-head {
    color: #7f1d1d !important;
    background: linear-gradient(135deg, rgba(239,68,68,.11), rgba(255,255,255,.9)) !important;
    border-color: rgba(215,25,53,.14) !important;
}

html.light .whitoo-category-filter .form-selectgroup-label,
html.light .whitoo-category-filter .room-cat-select-label {
    color: #4b2530 !important;
    background: #fff !important;
    border-color: rgba(215,25,53,.12) !important;
}

html.light .whitoo-category-filter .form-selectgroup-input:checked + .form-selectgroup-label,
html.light .whitoo-category-filter .form-selectgroup-input:checked + .room-cat-select-label {
    color: #fff !important;
    background: linear-gradient(135deg, #ef4444, #fb7185) !important;
}

html.light .whitoo-sidebar-filter-select-wrap {
    color: #3f1720;
    background: linear-gradient(135deg, #ffffff, #fff5f6);
    border-color: rgba(215,25,53,.14);
    box-shadow: 0 12px 22px rgba(60,17,26,.06);
}

html.light .whitoo-sidebar-category-select {
    color: #3f1720;
}

html.light .whitoo-sidebar-filter-select-wrap .ti-chevron-down {
    color: rgba(63,23,32,.55);
}

.whitoo-room-menu {
    min-width: 286px;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(239,68,68,.18), transparent 34%),
        linear-gradient(145deg, rgba(20,23,34,.98), rgba(36,28,34,.96)) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.36) !important;
}

.whitoo-room-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 4px;
    border-radius: 12px;
    color: rgba(255,255,255,.88) !important;
    font-weight: 750;
    background: transparent !important;
}

.whitoo-room-menu .dropdown-item:hover,
.whitoo-room-menu .dropdown-item:focus {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(255,255,255,.06)) !important;
}

.whitoo-room-menu .dropdown-item .ti {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fb7185;
}

.whitoo-room-invite-panel {
    padding: 0;
}

.whitoo-room-invite-modal .modal-dialog {
    max-width: 560px;
}

.whitoo-room-invite-modal .modal-content {
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(35,35,40,.98), rgba(28,25,31,.98));
    box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

.whitoo-room-invite-modal .modal-header {
    min-height: 72px;
    padding: 18px 24px;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.025);
}

.whitoo-room-invite-modal .modal-body {
    padding: 24px;
}

.whitoo-room-invite-modal .btn-close {
    opacity: .8;
}

.whitoo-invite-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #fb7185;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.whitoo-invite-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.whitoo-invite-head > .ti {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #fb7185);
    box-shadow: 0 12px 24px rgba(239,68,68,.20);
}

.whitoo-invite-head strong,
.whitoo-invite-head small {
    display: block;
}

.whitoo-invite-head strong {
    color: #fff;
    font-size: .92rem;
}

.whitoo-invite-head small,
.whitoo-invite-title,
.whitoo-invite-person small,
.whitoo-invite-stat small {
    color: rgba(255,255,255,.60);
}

.whitoo-invite-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
}

.whitoo-invite-copy-row input {
    min-width: 0;
    height: 38px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,.20);
}

.whitoo-copy-room-invite {
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #fb7185);
}

.whitoo-invite-section {
    margin-top: 12px;
}

.whitoo-invite-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: .76rem;
    font-weight: 850;
}

.whitoo-invite-person,
.whitoo-invite-stat {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border-radius: 11px;
    background: rgba(255,255,255,.055);
}

.whitoo-invite-person + .whitoo-invite-person,
.whitoo-invite-stat + .whitoo-invite-stat {
    margin-top: 6px;
}

.whitoo-invite-person span,
.whitoo-invite-stat strong {
    color: #fff;
    font-weight: 800;
}

.whitoo-invite-stat {
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
}

.whitoo-invite-stat small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitoo-invite-stat b {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(239,68,68,.22);
}

.whitoo-invite-empty,
.whitoo-room-invite-loading {
    padding: 10px;
    border-radius: 12px;
    color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.055);
    font-size: .8rem;
}

html.light .whitoo-room-menu {
    border-color: rgba(215,25,53,.14) !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(239,68,68,.12), transparent 34%),
        linear-gradient(145deg, #ffffff, #fff5f6) !important;
    box-shadow: 0 24px 50px rgba(60,17,26,.12) !important;
}

html.light .whitoo-room-menu .dropdown-item {
    color: #3f1720 !important;
}

html.light .whitoo-room-menu .dropdown-item:hover,
html.light .whitoo-room-menu .dropdown-item:focus {
    color: #7f1d1d !important;
    background: linear-gradient(135deg, rgba(239,68,68,.10), #fff) !important;
}

html.light .whitoo-room-invite-panel {
    background: transparent;
}

html.light .whitoo-room-invite-modal .modal-content {
    color: #3f1720;
    border-color: rgba(215,25,53,.14);
    background: linear-gradient(145deg, #ffffff, #fff6f7);
    box-shadow: 0 28px 70px rgba(60,17,26,.16);
}

html.light .whitoo-room-invite-modal .modal-header {
    border-color: rgba(215,25,53,.12);
    background: rgba(255,255,255,.70);
}

/* Voice message volume control */
.chat-audio {
    width: min(292px, calc(100vw - 96px)) !important;
    max-width: 100% !important;
}

.chat-audio .green-audio-player {
    width: 100% !important;
    min-width: 252px;
    height: 38px;
    padding: 0 9px;
    gap: 8px;
    border-radius: 9px;
}

.chat-audio .green-audio-player .volume {
    display: flex !important;
    align-items: center;
    margin-left: 6px;
}

.chat-audio .green-audio-player .volume .volume__button {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.chat-audio .green-audio-player .volume .volume__button svg,
.chat-audio .green-audio-player .volume .volume__button img {
    width: 13px;
}

.chat-audio .green-audio-player .volume .volume__controls {
    width: 86px;
    height: 28px;
    left: auto;
    right: -6px;
    bottom: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(14,18,27,.96);
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
}

.chat-audio .green-audio-player .volume .volume__controls.hidden {
    display: none !important;
}

.chat-audio .green-audio-player .volume .volume__controls.top,
.chat-audio .green-audio-player .volume .volume__controls.middle,
.chat-audio .green-audio-player .volume .volume__controls.bottom {
    left: auto;
    right: -6px;
    bottom: 32px;
}

.chat-audio .green-audio-player .volume .volume__controls .volume__slider {
    width: 58px;
    height: 6px;
    margin: 0;
    border-radius: 999px;
}

.chat-audio .green-audio-player .volume .volume__controls .volume__slider .volume__progress {
    width: 100%;
    height: 6px !important;
    border-radius: 999px;
}

.chat-audio .green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {
    left: auto;
    right: -5px;
    top: -5px;
}

.chat-audio .green-audio-player .controls {
    min-width: 0;
    flex: 1 1 auto;
}

.chat-audio .green-audio-player .controls .controls__slider {
    min-width: 72px;
}

@media (max-width: 520px) {
    .chat-audio {
        width: min(270px, calc(100vw - 84px)) !important;
    }

    .chat-audio .green-audio-player {
        min-width: 232px;
    }
}

html.light .whitoo-invite-head strong,
html.light .whitoo-invite-person span,
html.light .whitoo-invite-stat strong {
    color: #3f1720;
}

html.light .whitoo-invite-head small,
html.light .whitoo-invite-title,
html.light .whitoo-invite-person small,
html.light .whitoo-invite-stat small,
html.light .whitoo-invite-empty,
html.light .whitoo-room-invite-loading {
    color: rgba(63,23,32,.60);
}

html.light .whitoo-invite-copy-row input,
html.light .whitoo-invite-person,
html.light .whitoo-invite-stat,
html.light .whitoo-invite-empty,
html.light .whitoo-room-invite-loading {
    color: #3f1720;
    background: #fff;
    border-color: rgba(215,25,53,.10);
}

.whitoo-sidebar-create-hub {
    margin: 10px 8px 0;
    display: grid;
    gap: 10px;
}

.whitoo-create-tile {
    width: 100%;
    min-height: 76px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 12px;
    color: rgba(255,255,255,.92);
    text-align: left;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.whitoo-create-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(255,255,255,.055));
}

.whitoo-create-tile strong,
.whitoo-create-tile small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitoo-create-tile strong {
    font-size: .88rem;
    font-weight: 800;
}

.whitoo-create-tile small {
    margin-top: 2px;
    color: rgba(255,255,255,.62);
    font-size: .72rem;
}

.whitoo-create-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #fb7185);
    box-shadow: 0 12px 22px rgba(239,68,68,.25);
}

.whitoo-create-icon-ai {
    background: linear-gradient(135deg, #fb7185, #22d3ee);
}

.whitoo-ai-room-modal .modal-content {
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(239,68,68,.22), transparent 34%),
        radial-gradient(circle at 100% 20%, rgba(34,211,238,.16), transparent 30%),
        linear-gradient(145deg, #0b1020, #1b0d14 62%, #090b12);
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
}

.whitoo-ai-room-modal .modal-header,
.whitoo-ai-room-modal .modal-footer {
    border-color: rgba(255,255,255,.10);
}

.whitoo-ai-room-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fb7185;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.whitoo-ai-room-form .form-control {
    color: #fff;
    background: rgba(7,12,24,.74);
    border-color: rgba(255,255,255,.12);
    border-radius: 14px;
}

.whitoo-ai-room-form .form-control:focus {
    border-color: rgba(251,113,133,.65);
    box-shadow: 0 0 0 .22rem rgba(239,68,68,.12);
}

.whitoo-ai-room-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.whitoo-ai-room-preview {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,.055);
}

.whitoo-ai-room-summary {
    margin-bottom: 10px;
    color: rgba(255,255,255,.92);
}

.whitoo-ai-room-preview-list {
    display: grid;
    gap: 8px;
}

.whitoo-ai-room-preview-item {
    display: grid;
    gap: 3px;
    border-radius: 12px;
    padding: 9px 10px;
    background: rgba(8,12,24,.55);
}

.whitoo-ai-room-preview-item span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
}

.whitoo-ai-room-preview-item small {
    color: rgba(255,255,255,.62);
}

.whitoo-ai-room-role-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.whitoo-ai-room-role-row span {
    border: 1px solid color-mix(in srgb, var(--role-color) 50%, transparent);
    border-radius: 999px;
    padding: 5px 9px;
    color: #fff;
    background: color-mix(in srgb, var(--role-color) 22%, transparent);
    font-size: .76rem;
    font-weight: 800;
}

html.light .whitoo-create-tile {
    color: #3f1720;
    background: linear-gradient(135deg, #fff, #fff5f6);
    border-color: rgba(215,25,53,.13);
    box-shadow: 0 16px 28px rgba(60,17,26,.08);
}

html.light .whitoo-create-tile:hover {
    background: linear-gradient(135deg, #fff, rgba(255,228,230,.95));
    border-color: rgba(215,25,53,.20);
}

html.light .whitoo-create-tile small {
    color: rgba(63,23,32,.58);
}

@media (max-width: 767px) {
    .whitoo-ai-room-grid {
        grid-template-columns: 1fr;
    }

    .whitoo-create-tile {
        min-height: 68px;
    }
}

@media (max-width: 767px) {
    .whitoo-category-filter {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px !important;
        border-radius: 14px !important;
    }

    .whitoo-category-filter-head {
        width: 100% !important;
    }

    .whitoo-category-filter .form-selectgroup-label,
    .whitoo-category-filter .room-cat-select-label {
        min-height: 32px !important;
        padding: 7px 10px !important;
        font-size: .78rem !important;
    }
}

html.dark select,
html.dark .form-select,
html.dark select option,
html.dark .form-select option,
body:not(.light) select,
body:not(.light) .form-select,
body:not(.light) select option,
body:not(.light) .form-select option {
    color: #f8fafc !important;
    background-color: #211f27 !important;
}

html.dark select option:checked,
html.dark .form-select option:checked,
body:not(.light) select option:checked,
body:not(.light) .form-select option:checked {
    color: #ffffff !important;
    background: linear-gradient(135deg, #e11d48, #fb7185) !important;
    background-color: #e11d48 !important;
}

html.dark select option:hover,
html.dark .form-select option:hover,
body:not(.light) select option:hover,
body:not(.light) .form-select option:hover {
    color: #ffffff !important;
    background-color: #3a202a !important;
}

html.dark .dropdown-menu,
body:not(.light) .dropdown-menu,
html.dark .select2-dropdown,
body:not(.light) .select2-dropdown,
html.dark .ts-dropdown,
body:not(.light) .ts-dropdown {
    color: #f8fafc !important;
    background: rgba(31, 29, 37, .98) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important;
}

html.dark .dropdown-item,
body:not(.light) .dropdown-item,
html.dark .select2-results__option,
body:not(.light) .select2-results__option,
html.dark .ts-dropdown .option,
body:not(.light) .ts-dropdown .option {
    color: #f8fafc !important;
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus,
html.dark .dropdown-item.active,
html.dark .dropdown-item:active,
body:not(.light) .dropdown-item:hover,
body:not(.light) .dropdown-item:focus,
body:not(.light) .dropdown-item.active,
body:not(.light) .dropdown-item:active,
html.dark .select2-results__option--highlighted,
body:not(.light) .select2-results__option--highlighted,
html.dark .ts-dropdown .active,
body:not(.light) .ts-dropdown .active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(225, 29, 72, .95), rgba(251, 113, 133, .88)) !important;
}