/* ===== whitoo-ai.css ===== */
.looai-room {
    background: linear-gradient(145deg, #111827, #0f766e);
    color: #ffffff;
}

.looai-main {
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
    overflow-y: auto;
}

#main-looai .page-content-wrapper {
    height: calc((var(--vh, 1vh) * 100));
}

#main-looai .looai-main {
    display: flex;
    min-height: 0;
    height: 100%;
    padding: 24px;
    overflow: hidden;
}

#main-looai .looai-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    margin: 0;
}

.looai-panel {
    width: min(920px, calc(100% - 32px));
    margin: 32px auto;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.92);
    color: #e5eef8;
    box-shadow: 0 22px 80px rgba(2, 6, 23, 0.34);
    overflow: hidden;
}

.looai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(59, 130, 246, 0.08));
}

.looai-kicker {
    display: block;
    margin-bottom: 6px;
    color: #5eead4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.looai-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
}

.looai-header p {
    margin: 8px 0 0;
    color: #b6c5d8;
    font-size: 14px;
}

.looai-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    background: #14b8a6;
    color: #06221f;
    font-size: 28px;
}

.looai-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    max-height: 52vh;
    padding: 24px;
    overflow-y: auto;
}

#main-looai .looai-thread {
    min-height: 0;
    max-height: none;
}

.Whitoo AI-bubble {
    max-width: 82%;
    padding: 12px 14px;
    border-radius: 16px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.Whitoo AI-bubble-ai {
    align-self: flex-start;
    background: rgba(30, 41, 59, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

.Whitoo AI-bubble-user {
    align-self: flex-end;
    background: #0f766e;
    color: #ffffff;
}

.looai-form {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 10px;
    padding: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.32);
}

.looai-form textarea {
    min-height: 54px;
    max-height: 140px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 14px 15px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    outline: none;
}

.looai-form textarea:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

.looai-send {
    display: grid;
    place-items: center;
    width: 48px;
    height: 54px;
    border: 0;
    border-radius: 14px;
    background: #14b8a6;
    color: #06221f;
    font-size: 22px;
    cursor: pointer;
}

.looai-send:disabled {
    cursor: wait;
    opacity: 0.7;
}

.looai-login-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 24px 24px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(250, 204, 21, 0.12);
    color: #fde68a;
}

.Whitoo AI-home-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px auto 22px;
    padding: 12px 14px;
    max-width: 720px;
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
}

.Whitoo AI-home-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #0f766e;
    color: #ffffff;
    font-size: 22px;
}

.Whitoo AI-home-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.Whitoo AI-home-copy strong {
    color: inherit;
    font-size: 15px;
}

.Whitoo AI-home-copy span {
    color: #64748b;
    font-size: 13px;
}

.Whitoo AI-home-link {
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 10px;
    background: #14b8a6;
    color: #06221f;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.Whitoo AI-home-link:hover {
    color: #06221f;
    filter: brightness(1.04);
}

html.dark .Whitoo AI-home-shortcut {
    background: rgba(15, 23, 42, 0.48);
}

html.dark .Whitoo AI-home-copy span {
    color: #9fb0c6;
}

@media (max-width: 640px) {
    #main-looai.active.show {
        display: block;
    }

    #main-looai .page-content-wrapper {
        height: calc((var(--vh, 1vh) * 100));
    }

    #main-looai .looai-main {
        display: flex;
        min-height: 0;
        height: 100%;
        padding: 8px;
        overflow: hidden;
    }

    .looai-panel {
        width: calc(100% - 18px);
        margin: 12px auto;
        border-radius: 14px;
    }

    #main-looai .looai-panel {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 14px;
    }

    .looai-header {
        padding: 20px;
    }

    .looai-header h2 {
        font-size: 24px;
    }

    .looai-thread {
        min-height: 0;
        max-height: none;
        padding: 16px;
    }

    .looai-form {
        grid-template-columns: 1fr 48px;
        padding: 12px;
    }

    .looai-form textarea {
        min-height: 52px;
        max-height: 96px;
    }

    .Whitoo AI-bubble {
        max-width: 94%;
    }

    .Whitoo AI-home-shortcut {
        align-items: flex-start;
        margin-left: 0;
        margin-right: 0;
    }
}

.ltplus-page {
    margin: 28px 0;
}

.ltplus-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #111827, #0f766e);
    color: #ffffff;
}

.ltplus-hero span {
    color: #5eead4;
    font-weight: 700;
}

.ltplus-hero h1 {
    margin: 6px 0;
    font-size: 40px;
}

.ltplus-hero p {
    max-width: 680px;
    margin: 0;
    color: #d7f7f1;
}

.ltplus-status {
    min-width: 180px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
}

.ltplus-status strong,
.ltplus-status small {
    display: block;
}

.ltplus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.ltplus-card,
.ltplus-form-card {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
}

.ltplus-checkout {
    border: 1px solid rgba(20, 184, 166, 0.28);
}

.ltplus-duration-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.ltplus-duration-card {
    position: relative;
    display: block;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.04);
}

.ltplus-duration-card input {
    position: absolute;
    opacity: 0;
}

.ltplus-duration-card:has(input:checked) {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

.ltplus-duration-card strong,
.ltplus-duration-card span {
    display: block;
}

.ltplus-duration-card span {
    margin-top: 8px;
    color: #0f766e;
    font-size: 20px;
    font-weight: 800;
}

.ltplus-payment-methods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ltplus-payment-methods label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    cursor: pointer;
}

.ltplus-payment-methods label:has(input:checked) {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.12);
}

.ltplus-bank-box {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px dashed rgba(20, 184, 166, 0.5);
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.08);
}

.ltplus-bank-box span {
    word-break: break-word;
}

.ltplus-card i {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: 28px;
    color: #0f766e;
}

.ltplus-card strong,
.ltplus-card span {
    display: block;
}

.ltplus-card span {
    margin-top: 6px;
    color: #64748b;
}

html.dark .ltplus-card,
html.dark .ltplus-form-card {
    background: rgba(15, 23, 42, 0.5);
}

html.dark .ltplus-card span {
    color: #a8b5c7;
}

@media (max-width: 768px) {
    .ltplus-hero {
        display: block;
        padding: 22px;
    }

    .ltplus-status {
        margin-top: 16px;
    }

    .ltplus-grid {
        grid-template-columns: 1fr;
    }

    .ltplus-duration-options,
    .ltplus-payment-methods {
        grid-template-columns: 1fr;
    }
}

.ltplus-premium-page,
.ltplus-referral-page {
    width: min(1180px, calc(100% - 28px));
    margin: 34px auto;
    color: #e8eef8;
}

.ltplus-premium-hero,
.ltplus-referral-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: stretch;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 24px;
    background:
        linear-gradient(120deg, rgba(13, 148, 136, 0.84), rgba(30, 41, 59, 0.96) 48%, rgba(88, 28, 135, 0.86)),
        #111827;
    box-shadow: 0 28px 90px rgba(2, 6, 23, 0.34);
}

.ltplus-premium-hero:before,
.ltplus-referral-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 70%);
    transform: translateX(-120%);
    animation: ltplus-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ltplus-sheen {
    0%, 42% { transform: translateX(-120%); }
    72%, 100% { transform: translateX(120%); }
}

.ltplus-hero-copy,
.ltplus-referral-hero > div {
    position: relative;
    z-index: 1;
}

.ltplus-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: #5eead4;
    font-size: 12px;
    font-weight: 800;
}

.ltplus-premium-hero h1,
.ltplus-referral-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 0;
}

.ltplus-premium-hero p,
.ltplus-referral-hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(236, 253, 245, 0.9);
    font-size: 16px;
    line-height: 1.7;
}

.ltplus-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.ltplus-feature-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.24);
    color: #ffffff;
    font-weight: 700;
}

.ltplus-live-card,
.ltplus-referral-score {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 170px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    background: rgba(2, 6, 23, 0.34);
    backdrop-filter: blur(12px);
}

.ltplus-live-card strong,
.ltplus-referral-score strong {
    color: #ffffff;
    font-size: 42px;
    line-height: 1;
}

.ltplus-live-card span,
.ltplus-live-card small,
.ltplus-referral-score small,
.ltplus-referral-score span {
    color: #cbd5e1;
}

.ltplus-checkout-shell,
.ltplus-referral-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.ltplus-benefit-panel,
.ltplus-checkout-card,
.ltplus-referral-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.98));
    box-shadow: 0 20px 70px rgba(2, 6, 23, 0.22);
}

.ltplus-benefit-panel,
.ltplus-referral-card {
    padding: 24px;
}

.ltplus-checkout-card {
    padding: 24px;
}

.ltplus-benefit-panel h2,
.ltplus-checkout-card h2,
.ltplus-referral-card h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 0;
}

.ltplus-benefit-list {
    display: grid;
    gap: 12px;
}

.ltplus-benefit-list div {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.76);
    color: #dbeafe;
}

.ltplus-benefit-list i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #14b8a6;
    color: #042f2e;
    font-size: 21px;
}

.ltplus-form-head span,
.ltplus-payment-title {
    color: #5eead4;
    font-size: 12px;
    font-weight: 800;
}

.ltplus-duration-options,
.ltplus-payment-methods {
    margin-top: 12px;
}

.ltplus-duration-card {
    min-height: 122px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.92));
    color: #e5eef8;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ltplus-duration-card:hover,
.ltplus-payment-methods label:hover {
    transform: translateY(-2px);
}

.ltplus-duration-card b,
.ltplus-duration-card strong,
.ltplus-duration-card small {
    display: block;
}

.ltplus-duration-card strong {
    margin-top: 10px;
    color: #5eead4;
    font-size: 24px;
}

.ltplus-duration-card small {
    color: #94a3b8;
}

.ltplus-payment-methods label {
    min-height: 58px;
    background: rgba(30, 41, 59, 0.72);
    color: #e5eef8;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ltplus-payment-methods input {
    accent-color: #14b8a6;
}

.ltplus-payment-methods span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.ltplus-bank-area {
    margin-top: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
}

.ltplus-bank-area .form-label {
    color: #e2e8f0;
}

.ltplus-bank-area .form-control,
.ltplus-referral-copy input {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(2, 6, 23, 0.44);
    color: #ffffff;
}

.ltplus-main-button,
.ltplus-referral-copy button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #14b8a6, #3b82f6);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 38px rgba(20, 184, 166, 0.2);
}

.ltplus-referral-copy {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 10px;
}

.ltplus-referral-copy input {
    min-height: 52px;
    padding: 0 14px;
    border-radius: 14px;
}

.ltplus-referral-code {
    margin-top: 12px;
    color: #cbd5e1;
}

.ltplus-progress-track {
    height: 12px;
    margin: 18px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.ltplus-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #f59e0b);
}

.ltplus-referral-list {
    display: grid;
    gap: 10px;
}

.ltplus-referral-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.72);
}

.ltplus-referral-list span {
    color: #ffffff;
    font-weight: 800;
}

.ltplus-referral-list small,
.ltplus-referral-card small,
.ltplus-referral-card p {
    color: #94a3b8;
}

@media (max-width: 900px) {
    .ltplus-premium-hero,
    .ltplus-referral-hero,
    .ltplus-checkout-shell,
    .ltplus-referral-grid {
        grid-template-columns: 1fr;
    }

    .ltplus-premium-hero h1,
    .ltplus-referral-hero h1 {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .ltplus-premium-page,
    .ltplus-referral-page {
        width: calc(100% - 16px);
        margin: 12px auto;
    }

    .ltplus-premium-hero,
    .ltplus-referral-hero,
    .ltplus-benefit-panel,
    .ltplus-checkout-card,
    .ltplus-referral-card {
        padding: 18px;
        border-radius: 18px;
    }

    .ltplus-referral-copy {
        grid-template-columns: 1fr;
    }
}

/* Whitoo AI message polish: remove error-strip look */
.looai-thread {
    padding: 22px !important;
    gap: 14px !important;
    background:
        radial-gradient(520px 260px at 84% 0%, rgba(255,255,255,.045), transparent 62%),
        linear-gradient(180deg, rgba(7,11,22,.42), rgba(7,11,22,.18));
}

.looai-bubble {
    display: inline-block !important;
    width: fit-content;
    max-width: min(78%, 760px) !important;
    padding: 12px 15px !important;
    border-radius: 18px !important;
    line-height: 1.55 !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.16) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.075) !important;
    color: #f8fafc !important;
}

.looai-bubble-ai {
    align-self: flex-start !important;
    border-bottom-left-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
    border-color: rgba(255,255,255,.12) !important;
}

.looai-bubble-user {
    align-self: flex-end !important;
    border-bottom-right-radius: 8px !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #ffe9ed 100%) !important;
    color: #2a1218 !important;
    border-color: rgba(215,25,53,.22) !important;
    box-shadow: 0 14px 28px rgba(215,25,53,.13) !important;
}

html.light .looai-thread {
    background:
        radial-gradient(520px 260px at 84% 0%, rgba(215,25,53,.055), transparent 62%),
        linear-gradient(180deg, #fffafa, #ffffff);
}

html.light .looai-bubble-ai {
    background: #ffffff !important;
    color: #241015 !important;
    border-color: rgba(15,23,42,.10) !important;
}

html.light .looai-bubble-user {
    background: linear-gradient(135deg, #d71935, #ef3b4f) !important;
    color: #ffffff !important;
    border-color: rgba(215,25,53,.22) !important;
}

@media (max-width: 640px) {
    .looai-bubble {
        max-width: 92% !important;
    }
}

/* Home Whitoo AI shortcut */
.looai-home-shortcut {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: min(760px, 100%);
    margin: 20px auto 24px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    text-decoration: none !important;
    background:
        radial-gradient(360px 180px at 90% 0%, rgba(239,59,79,.14), transparent 64%),
        linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: 0 18px 42px rgba(0,0,0,.16);
    color: #ffffff !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.looai-home-shortcut:hover {
    transform: translateY(-1px);
    border-color: rgba(239,59,79,.34);
    box-shadow: 0 22px 48px rgba(215,25,53,.12), 0 18px 42px rgba(0,0,0,.18);
    color: #ffffff !important;
}

.looai-home-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #ffe8ec);
    color: #d71935;
    box-shadow: 0 12px 24px rgba(215,25,53,.16);
}

.looai-home-icon i {
    font-size: 23px;
}

.looai-home-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.looai-home-copy strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.looai-home-copy span {
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 600;
}

.looai-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, #d71935, #ef3b4f);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(215,25,53,.18);
}

html.light .looai-home-shortcut {
    background: linear-gradient(135deg, #ffffff, #fff3f5);
    border-color: rgba(215,25,53,.14);
    color: #241015 !important;
    box-shadow: 0 18px 42px rgba(60,17,26,.08);
}

html.light .looai-home-shortcut:hover {
    color: #241015 !important;
}

html.light .looai-home-copy strong {
    color: #241015;
}

html.light .looai-home-copy span {
    color: #6b4a51;
}

@media (max-width: 640px) {
    .looai-home-shortcut {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 13px;
        margin: 16px auto 20px;
    }

    .looai-home-link {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Whitoo AI modern panel refresh 20260613 */
#main-looai .looai-main {
    background:
        radial-gradient(800px 380px at 8% 0%, rgba(244, 63, 94, .16), transparent 56%),
        radial-gradient(760px 420px at 92% 12%, rgba(32, 224, 196, .13), transparent 58%),
        linear-gradient(180deg, #070b15, #0a0f1d 48%, #070b15);
}

#main-looai .looai-panel {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(12, 18, 32, .92), rgba(7, 11, 22, .98)),
        radial-gradient(circle at 18% 0%, rgba(244, 63, 94, .18), transparent 36%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .4);
}

#main-looai .looai-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 74%);
    pointer-events: none;
}

#main-looai .looai-header {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    align-items: center;
    gap: 22px;
    min-height: 190px;
    padding: 30px;
    border-bottom: 1px solid rgba(32, 224, 196, .16);
    background:
        radial-gradient(500px 240px at 86% 16%, rgba(32, 224, 196, .18), transparent 66%),
        radial-gradient(560px 260px at 18% 10%, rgba(244, 63, 94, .20), transparent 62%),
        linear-gradient(135deg, rgba(19, 27, 46, .94), rgba(10, 15, 28, .96));
}

#main-looai .looai-header::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: rgba(32, 224, 196, .10);
    filter: blur(4px);
}

#main-looai .looai-hero-copy,
#main-looai .looai-status-card {
    position: relative;
    z-index: 1;
}

#main-looai .looai-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-bottom: 12px;
    padding: 8px 11px;
    border: 1px solid rgba(32, 224, 196, .2);
    border-radius: 999px;
    background: rgba(32, 224, 196, .08);
    color: #8ffcf1;
    font-size: 12px;
    font-weight: 900;
}

#main-looai .looai-header h2 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.02;
    font-weight: 950;
}

#main-looai .looai-header p {
    max-width: 640px;
    margin: 12px 0 0;
    color: rgba(226, 232, 240, .84);
    font-size: 15px;
    line-height: 1.6;
}

#main-looai .looai-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

#main-looai .looai-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(248, 250, 252, .9);
    font-size: 12px;
    font-weight: 800;
}

#main-looai .looai-status-card {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background: rgba(3, 7, 18, .38);
    backdrop-filter: blur(12px);
}

#main-looai .looai-mark {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, #20e0c4, #5b7cfa 58%, #ff3347);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(32, 224, 196, .16);
}

#main-looai .looai-status-card strong {
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
}

#main-looai .looai-status-card small {
    color: rgba(226, 232, 240, .72);
    line-height: 1.45;
}

#main-looai .looai-thread {
    position: relative;
    padding: 22px 26px !important;
    background:
        radial-gradient(520px 280px at 86% 8%, rgba(32, 224, 196, .07), transparent 68%),
        linear-gradient(180deg, rgba(7,11,22,.34), rgba(7,11,22,.08));
}

#main-looai .looai-empty-state {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: min(560px, 100%);
    margin-bottom: 4px;
    padding: 14px;
    border: 1px solid rgba(32, 224, 196, .12);
    border-radius: 18px;
    background: rgba(15, 23, 42, .44);
}

#main-looai .looai-empty-state span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(32, 224, 196, .12);
    color: #8ffcf1;
    font-size: 24px;
}

#main-looai .looai-empty-state strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
}

#main-looai .looai-empty-state p {
    margin: 3px 0 0;
    color: rgba(203, 213, 225, .72);
    font-size: 12px;
}

#main-looai .looai-bubble {
    border-radius: 18px !important;
    backdrop-filter: blur(10px);
}

#main-looai .looai-form {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(32, 224, 196, .15);
    background: rgba(3, 7, 18, .62);
}

#main-looai .looai-suggestions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#main-looai .looai-suggestions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 999px;
    background: rgba(32, 224, 196, .07);
    color: #ccfbf1;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

#main-looai .looai-suggestions button:hover {
    transform: translateY(-1px);
    border-color: rgba(32, 224, 196, .34);
    background: rgba(32, 224, 196, .12);
}

#main-looai .looai-form textarea {
    min-height: 58px;
    border-color: rgba(148, 163, 184, .18);
    border-radius: 18px;
    background: rgba(10, 16, 30, .88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#main-looai .looai-send {
    width: 54px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #20e0c4, #ff3347);
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(255, 51, 71, .18);
}

@media (max-width: 900px) {
    #main-looai .looai-header {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 24px;
    }

    #main-looai .looai-status-card {
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;
        min-height: auto;
    }

    #main-looai .looai-status-card small {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    #main-looai .looai-panel {
        border-radius: 16px;
    }

    #main-looai .looai-header {
        padding: 18px;
    }

    #main-looai .looai-header h2 {
        font-size: 28px;
    }

    #main-looai .looai-thread {
        padding: 14px !important;
    }

    #main-looai .looai-empty-state {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 12px;
    }

    #main-looai .looai-empty-state span {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    #main-looai .looai-form {
        grid-template-columns: minmax(0, 1fr) 50px;
        padding: 10px;
    }

    #main-looai .looai-suggestions {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    #main-looai .looai-suggestions button {
        white-space: nowrap;
    }

    #main-looai .looai-send {
        width: 50px;
    }
}

/* Whitoo AI mobile layout fix 20260613 */
@media (max-width: 767.98px) {
    #main-looai,
    #main-looai.active.show {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #main-looai .page-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: calc((var(--vh, 1vh) * 100)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #main-looai .topbar {
        flex: 0 0 auto !important;
    }

    #main-looai .looai-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 6px !important;
        overflow: hidden !important;
    }

    #main-looai .looai-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    #main-looai .looai-header {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        min-height: 0 !important;
        padding: 12px !important;
    }

    #main-looai .looai-kicker {
        margin-bottom: 7px !important;
        padding: 6px 9px !important;
        font-size: 10px !important;
    }

    #main-looai .looai-header h2 {
        max-width: 100% !important;
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    #main-looai .looai-header p {
        margin-top: 7px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    #main-looai .looai-hero-chips {
        gap: 6px !important;
        margin-top: 10px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px !important;
        scrollbar-width: none;
    }

    #main-looai .looai-hero-chips::-webkit-scrollbar,
    #main-looai .looai-suggestions::-webkit-scrollbar {
        display: none;
    }

    #main-looai .looai-hero-chips span {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
    }

    #main-looai .looai-status-card {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    #main-looai .looai-mark {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        font-size: 20px !important;
    }

    #main-looai .looai-status-card strong {
        align-self: end !important;
        font-size: 13px !important;
    }

    #main-looai .looai-status-card small {
        grid-column: 2 !important;
        align-self: start !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    #main-looai .looai-thread {
        flex: 1 1 auto !important;
        min-height: 190px !important;
        max-height: none !important;
        padding: 12px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

    #main-looai .looai-empty-state {
        display: none !important;
    }

    #main-looai .looai-bubble {
        max-width: 94% !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    #main-looai .looai-form {
        flex: 0 0 auto !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 8px !important;
        padding: 8px !important;
        background: rgba(3, 7, 18, .86) !important;
    }

    #main-looai .looai-suggestions {
        grid-column: 1 / -1 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 1px !important;
    }

    #main-looai .looai-suggestions button {
        flex: 0 0 auto !important;
        min-height: 30px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    #main-looai .looai-form textarea {
        min-height: 48px !important;
        max-height: 82px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
        resize: none !important;
    }

    #main-looai .looai-send {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }
}

/* ===== whitoo-modern.css ===== */
:root {
    --lt-ink: #0b1020;
    --lt-panel: rgba(17, 24, 39, 0.86);
    --lt-line: rgba(148, 163, 184, 0.18);
    --lt-text: #e8eef8;
    --lt-muted: #9fb0c6;
    --lt-cyan: #18c7b8;
    --lt-blue: #3478f6;
    --lt-gold: #f3b33d;
    --lt-rose: #f45d82;
    --lt-radius: 16px;
    --lt-shadow: 0 22px 70px rgba(2, 6, 23, 0.34);
}

/* Woo Events center and homepage preview */
.woo-events-page {
    max-width: 1230px;
    padding-top: 102px;
    padding-bottom: 42px;
    color: #eef2ff;
}

.woo-events-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 38px;
    border: 1px solid #242c3f;
    border-radius: 20px;
    background: radial-gradient(circle at 88% 30%, rgba(25, 199, 205, .14), transparent 31%), linear-gradient(112deg, rgba(45, 19, 30, .72), #101724 52%, #101c26);
}

.woo-events-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #ff4764;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.woo-events-hero h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: 0;
}

.woo-events-hero p {
    max-width: 650px;
    margin: 0;
    color: #9ea8ba;
    font-size: 14px;
    line-height: 1.65;
}

.woo-events-stats {
    display: flex;
    gap: 12px;
    align-self: center;
}

.woo-events-stats div {
    display: grid;
    justify-items: center;
    min-width: 100px;
    padding: 19px 16px;
    border: 1px solid #273247;
    border-radius: 14px;
    background: rgba(13, 19, 31, .75);
}

.woo-events-stats strong {
    color: #fff;
    font-size: 27px;
}

.woo-events-stats span {
    color: #8e9aac;
    font-size: 12px;
}

.woo-events-create {
    margin: 18px 0 26px;
    border: 1px solid #232d41;
    border-radius: 16px;
    overflow: hidden;
    background: #0f1624;
}

.woo-events-create summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.woo-events-create summary i:last-child {
    margin-left: auto;
}

.woo-events-create[open] summary i:last-child {
    transform: rotate(180deg);
}

.woo-events-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 22px 22px;
}

.woo-events-form label {
    display: grid;
    gap: 6px;
    color: #94a1b5;
    font-size: 12px;
    font-weight: 600;
}

.woo-events-form label.wide {
    grid-column: span 2;
}

.woo-events-form .form-control,
.woo-events-form .form-select {
    height: 44px;
    border: 1px solid #263248;
    border-radius: 11px;
    background: #080e19;
    color: #f5f7fb;
    font-size: 13px;
}

.woo-events-form textarea.form-control {
    height: auto;
    resize: vertical;
}

.woo-events-form button {
    align-self: end;
    height: 46px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg, #e52b4d, #ff5474);
    color: #fff;
    font-weight: 600;
}

.woo-events-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 16px;
}

.woo-events-section-head h2 {
    margin: 0;
    color: #f6f8fc;
    font-size: 23px;
}

.woo-events-section-head span {
    color: #8792a6;
    font-size: 13px;
}

.woo-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.woo-event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 264px;
    padding: 18px;
    border: 1px solid #232d3f;
    border-radius: 16px;
    background: #0e1522;
}

.woo-event-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #19bdc4;
}

.woo-event-card.type-game::before {
    background: #395ef8;
}

.woo-event-card.type-tournament::before {
    background: #ffbe38;
}

.woo-event-card.type-cinema::before {
    background: #ef3454;
}

.woo-event-card-top,
.woo-event-meta,
.woo-event-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.woo-event-card-top {
    justify-content: space-between;
    margin-bottom: 17px;
}

.woo-event-type {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 9px;
    border-radius: 9px;
    color: #d9e2f3;
    background: #161f31;
    font-size: 12px;
}

.woo-event-card time {
    color: #1dd4cf;
    font-size: 12px;
    font-weight: 600;
}

.woo-event-card h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.woo-event-card p {
    flex: 1;
    margin: 0 0 14px;
    color: #929db1;
    font-size: 13px;
    line-height: 1.55;
}

.woo-event-meta {
    flex-wrap: wrap;
    margin-bottom: 16px;
    color: #a9b4c7;
    font-size: 11px;
}

.woo-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.woo-event-actions form {
    margin: 0;
}

.woo-event-actions button,
.woo-event-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 37px;
    padding: 0 13px;
    border: 1px solid #283449;
    border-radius: 10px;
    background: #151d2c;
    color: #d8deea;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.woo-event-actions .primary {
    border-color: #ee3656;
    background: #e83052;
    color: #fff;
}

.woo-event-actions .reminder.active {
    border-color: rgba(19, 196, 193, .36);
    color: #16c9c6;
}

.woo-event-actions .open {
    margin-left: auto;
    padding: 0 11px;
}

.woo-event-manage {
    margin-top: 14px;
    border-top: 1px solid #212a3a;
    padding-top: 12px;
}

.woo-event-manage summary {
    color: #8795a9;
    font-size: 12px;
    cursor: pointer;
}

.woo-event-manage form {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.woo-event-manage input,
.woo-event-manage textarea {
    width: 100%;
    border: 1px solid #263248;
    border-radius: 8px;
    padding: 8px;
    background: #080d17;
    color: #fff;
    font-size: 12px;
}

.woo-event-manage button {
    border: 0;
    border-radius: 8px;
    padding: 8px;
    background: #172436;
    color: #cfd7e6;
}

.woo-event-danger {
    display: flex;
    gap: 7px;
}

.woo-event-danger form {
    flex: 1;
}

.woo-event-danger button {
    width: 100%;
    color: #ff627c;
}

.woo-events-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    border: 1px dashed #273348;
    border-radius: 16px;
    color: #8491a7;
}

.woo-events-empty i {
    font-size: 35px;
}

.woo-events-empty strong {
    color: #eef2fa;
}

.whitoo-home-events {
    margin-bottom: 15px;
    border: 1px solid #242c3d;
    border-radius: 15px;
    padding: 14px;
    background: #101522;
}

.whitoo-home-events-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    color: #eef2fb;
    font-size: 13px;
    font-weight: 600;
}

.whitoo-home-events-head a {
    color: #fd4965;
    text-decoration: none;
    font-size: 12px;
}

.whitoo-home-events-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.whitoo-home-event {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px;
    border: 1px solid #212b3d;
    border-radius: 11px;
    color: #edf1fa;
    text-decoration: none;
}

.whitoo-home-event > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(20, 196, 199, .16);
    color: #15c8c4;
}

.whitoo-home-event span {
    display: grid;
    min-width: 0;
}

.whitoo-home-event strong,
.whitoo-home-event small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitoo-home-event small {
    color: #8f9bb0;
    font-size: 11px;
}

@media (max-width: 920px) {
    .woo-events-page {
        padding-top: 84px;
    }
    .woo-events-hero,
    .woo-events-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .woo-events-form,
    .woo-events-grid,
    .whitoo-home-events-row {
        grid-template-columns: 1fr;
    }
    .woo-events-form label.wide {
        grid-column: auto;
    }
}

/* Standalone Woo Match Game Room */
.woo-standalone-game {
    max-width: 1260px;
    min-height: calc(100vh - 70px);
    padding-top: 104px;
    padding-bottom: 32px;
    color: #edf3fc;
}

.woo-standalone-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    border: 1px solid #233147;
    border-radius: 21px;
    background:
        radial-gradient(circle at 58% 55%, rgba(99, 48, 206, .26), transparent 30%),
        radial-gradient(circle at 94% 20%, rgba(17, 197, 205, .2), transparent 28%),
        linear-gradient(112deg, #090e1b, #11182d);
}

.woo-standalone-head span {
    color: #fc3656;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.woo-standalone-head h1 {
    margin: 10px 0 8px;
    color: #fff;
    font-size: 32px;
    letter-spacing: 0;
}

.woo-standalone-head p {
    max-width: 640px;
    margin: 0;
    color: #97a4b8;
    font-size: 14px;
    line-height: 1.55;
}

.woo-standalone-meta {
    display: flex;
    align-items: start;
    gap: 9px;
}

.woo-standalone-meta b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #28374d;
    border-radius: 21px;
    background: rgba(9, 15, 29, .74);
    color: #dbe5f4;
    font-size: 13px;
}

.woo-standalone-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 322px;
    gap: 16px;
    margin-top: 16px;
}

.woo-standalone-lobby,
.woo-standalone-chat {
    border: 1px solid #202d43;
    border-radius: 20px;
    background: #0b1120;
}

.woo-standalone-lobby {
    padding: 24px;
}

.woo-standalone-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(116px, 1fr));
    gap: 12px;
}

.woo-standalone-player {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 9px;
    min-height: 190px;
    padding: 15px 9px;
    border: 1px dashed #28364d;
    border-radius: 16px;
    background: #0c1425;
}

.woo-standalone-player.is-filled {
    border-style: solid;
    border-color: rgba(64, 76, 151, .52);
    background: radial-gradient(circle at 50% 20%, rgba(111, 44, 234, .2), transparent 46%), #0e1629;
}

.woo-standalone-player .avatar,
.woo-standalone-player .empty {
    display: grid;
    place-items: center;
    width: 61px;
    height: 61px;
    border-radius: 50%;
    font-size: 28px;
}

.woo-standalone-player .avatar {
    border: 2px solid #9945ff;
    background: linear-gradient(130deg, #7b23ed, #df17ff);
    color: #fff;
    box-shadow: 0 0 28px rgba(137, 57, 255, .34);
}

.woo-standalone-player .empty {
    border-radius: 16px;
    background: #16243b;
    color: #7696b9;
}

.woo-standalone-player strong {
    max-width: 100%;
    overflow: hidden;
    color: #f5f8fc;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-standalone-player em {
    border-radius: 15px;
    padding: 4px 10px;
    color: #7d91ab;
    background: #111d30;
    font-size: 11px;
    font-style: normal;
}

.woo-standalone-player em.ready {
    color: #18cda9;
    background: rgba(16, 188, 151, .12);
}

.woo-standalone-player small {
    color: #8393ac;
    font-size: 11px;
    text-transform: capitalize;
}

.woo-standalone-controls {
    display: grid;
    justify-items: center;
    gap: 13px;
    margin-top: 23px;
    padding-top: 22px;
    border-top: 1px solid #172239;
}

.woo-lobby-notice {
    margin: 18px auto 0;
    max-width: 520px;
    border: 1px solid rgba(19, 197, 191, .35);
    border-radius: 11px;
    padding: 11px 14px;
    background: rgba(19, 197, 191, .1);
    color: #20d1cd;
    font-size: 13px;
    text-align: center;
}

.woo-lobby-notice.danger {
    border-color: rgba(244, 57, 87, .36);
    background: rgba(244, 57, 87, .1);
    color: #fd6680;
}

.woo-lobby-config,
.woo-lobby-invite {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
}

.woo-lobby-config label {
    display: grid;
    gap: 6px;
    color: #8b9bb2;
    font-size: 11px;
    font-weight: 600;
}

.woo-lobby-config select,
.woo-lobby-invite input {
    height: 42px;
    border: 1px solid #29364d;
    border-radius: 11px;
    background: #090f1e;
    color: #edf2fb;
    padding: 0 12px;
    font-size: 13px;
}

.woo-lobby-config button,
.woo-lobby-invite button,
.woo-lobby-join,
.woo-lobby-leave {
    height: 42px;
    border: 1px solid #28354b;
    border-radius: 11px;
    padding: 0 17px;
    background: #111b2d;
    color: #dce5f4;
    font-size: 13px;
    font-weight: 600;
}

.woo-lobby-config button.ready,
.woo-lobby-join {
    border-color: transparent;
    background: linear-gradient(110deg, #18bc95, #14c6ca);
    color: #04151c;
}

.woo-lobby-invite button {
    border-color: rgba(21, 202, 201, .36);
    color: #18caca;
}

.woo-lobby-leave {
    border-color: rgba(246, 48, 83, .34);
    color: #fc5470;
}

.woo-lobby-exit {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.woo-lobby-close {
    border-color: rgba(246, 48, 83, .42) !important;
    background: #e93454 !important;
    color: #fff !important;
}

.woo-lobby-ended {
    padding: 17px;
    border-radius: 13px;
    color: #f36a81;
    background: rgba(242, 47, 80, .1);
}

.woo-standalone-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 470px;
}

.woo-standalone-chat header {
    display: grid;
    gap: 4px;
    padding: 17px 16px;
    border-bottom: 1px solid #1d283b;
}

.woo-standalone-chat header strong {
    color: #f5f8fd;
    font-size: 14px;
}

.woo-standalone-chat header span {
    color: #7f8da3;
    font-size: 11px;
}

.woo-standalone-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 15px;
}

.woo-standalone-messages div {
    padding: 10px 11px;
    border-radius: 11px;
    background: #10192a;
}

.woo-standalone-messages strong {
    display: block;
    margin-bottom: 4px;
    color: #23cac8;
    font-size: 11px;
}

.woo-standalone-messages p {
    margin: 0;
    color: #d9e2f0;
    font-size: 13px;
}

.woo-standalone-chat form {
    display: flex;
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #1d283b;
}

.woo-standalone-chat form input {
    flex: 1;
    height: 42px;
    border: 1px solid #243147;
    border-radius: 12px;
    background: #080e1a;
    color: #fff;
    padding: 0 12px;
}

.woo-standalone-chat form button {
    width: 43px;
    border: 0;
    border-radius: 12px;
    background: #ef3152;
    color: #fff;
}

@media (max-width: 980px) {
    .woo-standalone-game {
        padding-top: 85px;
    }
    .woo-standalone-head,
    .woo-standalone-meta {
        flex-direction: column;
    }
    .woo-standalone-layout {
        grid-template-columns: 1fr;
    }
    .woo-standalone-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .woo-standalone-head,
    .woo-standalone-lobby {
        padding: 17px;
    }
    .woo-lobby-config,
    .woo-lobby-invite {
        width: 100%;
        flex-wrap: wrap;
    }
    .woo-lobby-config label {
        flex: 1;
    }
    .woo-lobby-config select,
    .woo-lobby-invite input {
        width: 100%;
    }
    .woo-lobby-invite input {
        flex: 1;
    }
}

/* Public Cinema inside the in-app workspace: keep video and chat in separate lanes. */
@media (max-width: 1280px) {
    .woo-cinema-page .woo-cinema-public-shell {
        padding: 16px;
        border-radius: 20px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tabs {
        gap: 9px;
        margin: 0 0 14px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tab {
        position: relative;
        min-height: 66px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        padding: 10px 58px 10px 13px;
        border-radius: 14px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tab strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tab span {
        display: block;
        width: 100%;
        color: rgba(203, 213, 225, .74);
        font-size: 12px;
        font-weight: 600;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tab .woo-cinema-live,
    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-tab .woo-cinema-off {
        position: absolute;
        top: 50%;
        right: 10px;
        margin: 0;
        transform: translateY(-50%);
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-stage {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border-radius: 18px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-player {
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 8.7;
        border-radius: 14px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-panel,
    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-panel.is-open {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        width: 100%;
        min-height: 230px;
        max-height: 310px;
        margin: 0;
        border-radius: 14px;
        box-shadow: none;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-head {
        padding: 11px 13px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-head div {
        display: grid;
        min-width: 0;
        gap: 2px;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-head strong,
    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-head small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-spoiler-note {
        margin: 10px 12px;
        padding: 9px 11px;
        font-size: 12px;
        line-height: 1.45;
    }
}

@media (max-width: 760px) {
    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-player {
        aspect-ratio: auto;
    }

    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-panel,
    .woo-cinema-page .woo-cinema-public-shell .woo-cinema-chat-panel.is-open {
        min-height: 210px;
        max-height: 290px;
    }
}

html,
body {
    letter-spacing: 0;
}

body {
    background:
        radial-gradient(900px 420px at 18% 0%, rgba(24, 199, 184, 0.16), transparent 62%),
        radial-gradient(760px 420px at 92% 8%, rgba(244, 93, 130, 0.13), transparent 58%),
        linear-gradient(180deg, #0b1020 0%, #111827 48%, #0d1324 100%);
    color: var(--lt-text);
}

a {
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.navbar.navbar-scroll,
header .navbar {
    min-height: 62px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 24, 0.78) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 38px rgba(2, 6, 23, 0.18);
}

.navbar-brand .logo {
    max-height: 34px;
}

.navbar .nav-link {
    border-radius: 999px;
    color: rgba(232, 238, 248, 0.82) !important;
    font-weight: 700;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    background: rgba(24, 199, 184, 0.12);
    color: #ffffff !important;
}

main > .container,
.container {
    max-width: 1180px;
}

.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 24, 0.54);
    color: var(--lt-muted);
}

.footer a {
    color: #8be7dd;
}

.btn,
button,
.form-control,
.form-select,
.card,
.modal-content,
.dropdown-menu,
.alert {
    border-radius: var(--lt-radius);
}

.btn-primary,
.btn-dark,
.btn-user,
.ltplus-main-button,
.Whitoo AI-send,
.Whitoo AI-home-link {
    border: 0 !important;
    background: linear-gradient(135deg, var(--lt-cyan), var(--lt-blue)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(24, 199, 184, 0.22);
}

.btn-primary:hover,
.btn-dark:hover,
.btn-user:hover,
.ltplus-main-button:hover,
.Whitoo AI-home-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.btn-outline-primary,
.btn-outline-light {
    border-color: rgba(24, 199, 184, 0.34) !important;
    color: #a7fff3 !important;
}

.btn-outline-primary:hover,
.btn-outline-light:hover {
    background: rgba(24, 199, 184, 0.14) !important;
}

.card,
.ltplus-checkout-card,
.ltplus-benefit-panel,
.ltplus-referral-card,
.Whitoo AI-panel {
    border: 1px solid var(--lt-line) !important;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.88), rgba(10, 15, 30, 0.96)) !important;
    color: var(--lt-text);
    box-shadow: var(--lt-shadow);
}

.card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.02);
}

.card-title,
.card h1,
.card h2,
.card h3,
h1,
h2,
h3 {
    letter-spacing: 0;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background-color: rgba(2, 6, 23, 0.42) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(24, 199, 184, 0.78) !important;
    box-shadow: 0 0 0 3px rgba(24, 199, 184, 0.16) !important;
}

::placeholder {
    color: rgba(203, 213, 225, 0.58) !important;
}

.show-banner .slider,
.slider {
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.room-loop,
.room-item,
.chat-room-card,
.room-card {
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.76) !important;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.22);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.room-loop:hover,
.room-item:hover,
.chat-room-card:hover,
.room-card:hover {
    transform: translateY(-3px);
    border-color: rgba(24, 199, 184, 0.36) !important;
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.32);
}

.lt-room-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lt-room-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-room-verified {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 58%, #1d4ed8 100%);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, .12), 0 6px 14px rgba(37, 99, 235, .24);
}

.lt-room-verified i {
    font-size: 10px;
    stroke-width: 2.2;
}

.lt-room-owner-plus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(37, 99, 235, .16);
    border: 1px solid rgba(56, 189, 248, .22);
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

.lt-room-owner-plus i {
    color: #38bdf8;
}

.lt-active-room-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 168px;
}

.lt-active-room-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-room-verified-header {
    width: 14px;
    height: 14px;
    min-width: 14px;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, .12), 0 5px 12px rgba(37, 99, 235, .24);
}

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

.lt-room-is-verified .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lt-room-is-verified .dropdown-toggle .lt-active-room-title {
    max-width: 188px;
}

.lt-plus-locked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #bfdbfe;
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(20, 184, 166, .10));
    border: 1px solid rgba(56, 189, 248, .18);
    font-size: 13px;
    font-weight: 700;
}

.lt-plus-locked-row i {
    color: #38bdf8;
    font-size: 18px;
}

html.light .lt-plus-locked-row {
    color: #1e3a8a;
    background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(20, 184, 166, .08));
    border-color: rgba(37, 99, 235, .16);
}

.lt-join-link-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(235px, .78fr) minmax(320px, 1.35fr);
    align-items: center;
    gap: 20px;
    margin: 14px 0 20px;
    padding: 16px;
    border-radius: 16px;
    color: #e5f0ff;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(11, 18, 32, .96)),
        #0b1020;
    border: 1px solid rgba(71, 85, 105, .34);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.lt-join-link-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18px 18px, rgba(34, 211, 238, .18), transparent 22%),
        linear-gradient(90deg, rgba(20, 184, 166, .10), transparent 30%);
    opacity: .88;
}

.lt-join-link-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #22d3ee, #14b8a6);
    box-shadow: 0 0 18px rgba(34, 211, 238, .36);
}

.lt-join-link-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
}

.lt-join-link-copy span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 0;
    border-radius: 0;
    color: #67e8f9;
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.lt-join-link-copy strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.12;
    font-weight: 900;
}

.lt-join-link-copy small {
    color: #98a6ba;
    font-weight: 600;
}

.lt-join-link-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.lt-join-link-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 13px;
    background: rgba(9, 13, 26, .72);
    border: 1px solid rgba(148, 163, 184, .18);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lt-join-link-input i {
    color: #38bdf8;
    font-size: 19px;
}

.lt-join-link-input:focus-within {
    background: rgba(9, 13, 26, .88);
    border-color: rgba(34, 211, 238, .58);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);
}

.lt-join-link-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #ffffff;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
}

.lt-join-link-input input::placeholder {
    color: rgba(203, 213, 225, .50) !important;
}

.lt-join-link-form button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lt-join-link-form button:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.06);
    box-shadow: 0 18px 34px rgba(6, 182, 212, .24);
}

.lt-join-link-error {
    grid-column: 2;
    min-height: 18px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 800;
}

.lt-join-link-error.is-visible {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #fecdd3;
    background: rgba(127, 29, 29, .34);
    border: 1px solid rgba(248, 113, 113, .34);
    box-shadow: 0 12px 28px rgba(127, 29, 29, .18);
}

.lt-join-link-form button:disabled {
    cursor: wait;
    opacity: .78;
    transform: none;
}

.lt-join-link-form button.is-loading span::after {
    content: "...";
}

.join-link-shortcut {
    display: none !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(225, 29, 72, .22)) !important;
    border: 1px solid rgba(34, 211, 238, .26);
}

.join-link-shortcut i {
    color: #67e8f9 !important;
}

.join-link-shortcut:hover,
.join-link-shortcut:focus {
    border-color: rgba(34, 211, 238, .58);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);
}

@media (max-width: 991.98px) {
    html.whitoo-android-app .join-link-shortcut {
        display: flex !important;
    }
}

html.light .lt-join-link-card {
    color: #0f172a;
    background:
        radial-gradient(circle at 18px 18px, rgba(14, 165, 233, .10), transparent 22%),
        linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .96));
    border-color: rgba(15, 23, 42, .10);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

html.light .lt-join-link-copy strong {
    color: #0f172a;
}

html.light .lt-join-link-copy small {
    color: #64748b;
}

html.light .lt-join-link-copy span {
    color: #0369a1;
    background: transparent;
    border-color: transparent;
}

html.light .lt-join-link-input {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .12);
}

html.light .lt-join-link-input input {
    color: #0f172a;
}

html.light .lt-join-link-input input::placeholder {
    color: rgba(100, 116, 139, .66) !important;
}

@media (max-width: 768px) {
    .lt-join-link-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    .lt-join-link-form {
        grid-template-columns: 1fr;
    }

    .lt-join-link-error {
        grid-column: 1;
    }
}

.lt-join-link-card {
    grid-template-columns: minmax(360px, .95fr) minmax(440px, 1.35fr);
    gap: 28px;
    min-height: 146px;
    padding: 28px 30px 26px 36px;
    border-radius: 24px;
    color: #fff7f7;
    background:
        radial-gradient(circle at 68% 6%, rgba(255, 151, 122, .30), transparent 20%),
        radial-gradient(circle at 83% 52%, rgba(244, 63, 94, .26), transparent 28%),
        linear-gradient(100deg, rgba(10, 12, 24, .98), rgba(19, 17, 28, .96) 45%, rgba(20, 22, 32, .93));
    border: 1px solid rgba(248, 113, 113, .56);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 0 34px rgba(248, 113, 113, .16);
}

.lt-join-link-card::before {
    background:
        linear-gradient(90deg, rgba(244, 63, 94, .13), transparent 26%),
        radial-gradient(circle at 76% 46%, rgba(255, 255, 255, .18), transparent 8%),
        radial-gradient(circle at 90% 7%, rgba(255, 202, 178, .20), transparent 13%);
    opacity: .95;
}

.lt-join-link-card::after {
    left: auto;
    top: auto;
    right: 18px;
    bottom: 14px;
    width: 32px;
    height: 32px;
    background:
        linear-gradient(45deg, transparent 41%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, .72) 58%, transparent 59%),
        linear-gradient(-45deg, transparent 41%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, .72) 58%, transparent 59%);
    opacity: .78;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, .35));
}

.lt-join-link-copy {
    gap: 8px;
}

.lt-join-link-copy span {
    color: #ff7b84;
    font-size: 13px;
}

.lt-join-link-copy strong {
    font-size: 32px;
    line-height: 1.04;
    text-shadow: 0 2px 18px rgba(255, 255, 255, .10);
}

.lt-join-link-copy small {
    color: rgba(255, 231, 231, .72);
    font-size: 16px;
}

.lt-join-link-form {
    gap: 14px;
}

.lt-join-link-input {
    gap: 14px;
    min-height: 66px;
    padding: 0 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 232, 232, .18), rgba(73, 33, 43, .50)), rgba(37, 22, 32, .76);
    border: 1px solid rgba(255, 207, 207, .40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -10px 28px rgba(0, 0, 0, .20), 0 16px 38px rgba(0, 0, 0, .22);
}

.lt-join-link-input i {
    color: rgba(255, 244, 244, .92);
    font-size: 30px;
}

.lt-join-link-input:focus-within {
    border-color: rgba(255, 160, 160, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 4px rgba(244, 63, 94, .12), 0 20px 48px rgba(244, 63, 94, .18);
}

.lt-join-link-input input {
    font-size: 19px;
}

.lt-join-link-input input::placeholder {
    color: rgba(255, 232, 232, .66) !important;
}

.lt-join-link-form button {
    min-height: 66px;
    border-radius: 999px;
    padding: 0 34px;
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 52%, #ffc3a3 100%);
    border: 1px solid rgba(255, 210, 190, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 -10px 22px rgba(122, 20, 43, .24), 0 0 0 4px rgba(244, 63, 94, .12), 0 18px 42px rgba(244, 63, 94, .34);
    font-size: 18px;
}

.lt-join-link-form button i {
    display: none;
}

.lt-join-link-form button:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 0 0 5px rgba(244, 63, 94, .14), 0 22px 52px rgba(244, 63, 94, .42);
}

html.light .lt-join-link-card {
    background:
        radial-gradient(circle at 78% 12%, rgba(244, 63, 94, .18), transparent 20%),
        linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(255, 241, 242, .96));
    border-color: rgba(225, 29, 72, .24);
}

html.light .lt-join-link-copy span {
    color: #be123c;
}

html.light .lt-join-link-input {
    background: rgba(255, 255, 255, .80);
    border-color: rgba(225, 29, 72, .22);
}

@media (max-width: 768px) {
    .lt-join-link-card {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: 0;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .lt-join-link-copy strong {
        font-size: 27px;
    }

    .lt-join-link-copy small {
        font-size: 14px;
    }

    .lt-join-link-input,
    .lt-join-link-form button {
        min-height: 58px;
    }
}

.ltplus-premium-page,
.ltplus-referral-page {
    width: min(1180px, calc(100% - 28px));
    margin: 34px auto;
    color: var(--lt-text);
}

.ltplus-page-message {
    display: grid;
    gap: 10px;
}

.ltplus-page-message:empty {
    display: none;
}

.ltplus-checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr) minmax(280px, .8fr);
    gap: 16px;
    align-items: start;
}

.whitoo-room-search {
    width: 100%;
    min-height: 46px;
    overflow: visible;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028)), rgba(10, 14, 25, .76) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
}

.whitoo-room-search .input-icon-addon {
    width: 42px;
    color: rgba(248, 250, 252, .62);
}

.whitoo-room-search .search_chatroom {
    min-height: 44px;
    border: 0 !important;
    color: #fff !important;
    background: transparent !important;
    font-weight: 700;
}

.whitoo-room-search .search_chatroom::placeholder {
    color: rgba(226, 232, 240, .56) !important;
}

.whitoo-room-search-actions {
    gap: 6px;
    padding: 0 8px 0 4px !important;
    border: 0 !important;
    background: transparent !important;
}

.whitoo-room-search-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 11px;
    color: rgba(248, 250, 252, .78) !important;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.whitoo-room-search-action:hover,
.whitoo-room-search-action.show {
    transform: translateY(-1px);
    color: #fff !important;
    border-color: rgba(239,68,68,.28);
    background: rgba(239,68,68,.16);
}

.whitoo-room-search .dropdown-menu {
    margin-top: 8px !important;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(15, 18, 32, .96);
    box-shadow: 0 18px 44px rgba(0,0,0,.30);
}

.whitoo-room-search .dropdown-menu,
.whitoo-room-search .dropdown-menu label,
.whitoo-room-search .room-sort-select {
    color: #f8fafc;
}

.whitoo-room-search .room-sort-select {
    min-width: 180px;
    border: 0;
    background: rgba(255,255,255,.06);
}

.whitoo-home-search-hero {
    display: grid;
    grid-template-columns: minmax(240px, .58fr) minmax(320px, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0 0 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(248, 113, 113, .18);
    background: radial-gradient(circle at 8% 10%, rgba(244, 63, 94, .18), transparent 24%), linear-gradient(135deg, rgba(17, 24, 39, .84), rgba(9, 13, 26, .90));
    box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
}

.whitoo-room-list-search {
    margin: 18px 0 16px;
}

.whitoo-explore-search-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 14px 0 16px !important;
    padding: 14px !important;
    border-radius: 16px !important;
}

.whitoo-explore-search-hero .whitoo-home-search-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.whitoo-explore-search-hero .whitoo-home-search-copy span {
    font-size: .76rem;
}

.whitoo-explore-search-hero .whitoo-home-search-copy strong {
    font-size: 1.15rem;
}

.whitoo-explore-search-hero .whitoo-room-search {
    width: 100%;
    min-height: 44px;
}

.whitoo-explore-search-hero .whitoo-room-search .search_chatroom {
    min-height: 42px;
}

.whitoo-explore-search-hero .whitoo-room-search-action {
    width: 31px;
    height: 31px;
}

.whitoo-home-search-copy {
    display: grid;
    gap: 5px;
    color: #fff;
}

.whitoo-home-search-copy span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fb7185;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.whitoo-home-search-copy strong {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
    font-weight: 900;
}

.whitoo-home-search-hero .whitoo-room-search {
    min-height: 54px;
    border-color: rgba(255, 255, 255, .14) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.18) !important;
}

.whitoo-home-search-hero .whitoo-room-search .search_chatroom {
    min-height: 52px;
    font-size: .98rem;
}

.whitoo-home-search-hero .whitoo-room-search-action {
    background: rgba(244, 63, 94, .14);
    border-color: rgba(248, 113, 113, .20);
}

html.light .whitoo-room-search {
    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-room-search .search_chatroom {
    color: #24111a !important;
}

html.light .whitoo-room-search .search_chatroom::placeholder {
    color: rgba(75, 37, 48, .54) !important;
}

html.light .whitoo-room-search .input-icon-addon {
    color: rgba(75, 37, 48, .55);
}

html.light .whitoo-room-search-action {
    color: #7f1d1d !important;
    background: rgba(239,68,68,.08);
    border-color: rgba(215,25,53,.12);
}

html.light .whitoo-home-search-hero {
    border-color: rgba(225, 29, 72, .16);
    background: radial-gradient(circle at 8% 10%, rgba(244, 63, 94, .12), transparent 24%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,242,.92));
    box-shadow: 0 16px 34px rgba(60,17,26,.08);
}

html.light .whitoo-home-search-copy {
    color: #24111a;
}

html.light .whitoo-home-search-copy span {
    color: #be123c;
}

html.light .whitoo-home-search-hero .whitoo-room-search {
    background: #fff !important;
    border-color: rgba(225, 29, 72, .14) !important;
}

@media (max-width: 767px) {
    .whitoo-home-search-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }
}

.ltplus-premium-hero,
.ltplus-referral-hero,
.Whitoo AI-header {
    overflow: hidden;
    border: 1px solid rgba(24, 199, 184, 0.22) !important;
    background:
        linear-gradient(120deg, rgba(17, 24, 39, 0.92), rgba(20, 184, 166, 0.42), rgba(48, 70, 166, 0.54), rgba(244, 93, 130, 0.32)),
        #111827 !important;
    box-shadow: var(--lt-shadow);
}

.ltplus-premium-hero h1,
.ltplus-referral-hero h1 {
    color: #ffffff;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 900;
}

.ltplus-feature-row span,
.ltplus-live-card,
.ltplus-referral-score {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(2, 6, 23, 0.34) !important;
    backdrop-filter: blur(14px);
}

.ltplus-duration-card,
.ltplus-payment-methods label,
.ltplus-bank-area,
.ltplus-bank-box {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--lt-text);
}

.ltplus-duration-card:has(input:checked),
.ltplus-payment-methods label:has(input:checked) {
    border-color: rgba(24, 199, 184, 0.78) !important;
    box-shadow: 0 0 0 3px rgba(24, 199, 184, 0.16) !important;
}

.ltplus-duration-card strong {
    color: #6ff7e8;
}

.woo-gift-center {
    display: grid;
    gap: 16px;
    margin: 18px 0 26px;
}

.woo-gift-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 16px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(24, 199, 184, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 0%, rgba(244,63,94,.16), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(24,199,184,.18), transparent 34%),
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(7,17,30,.98));
}

.woo-gift-head span,
.woo-gift-card-head span,
.woo-gift-history header span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6ff7e8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.woo-gift-head h2 {
    margin: 8px 0 6px;
    color: #fff;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
}

.woo-gift-head p {
    margin: 0;
    max-width: 720px;
    color: #b8c7dc;
    line-height: 1.55;
}

.woo-gift-head aside {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(2,6,23,.34);
}

.woo-gift-head aside small,
.woo-gift-note,
.woo-gift-row small,
.woo-gift-row span {
    color: #9fb0c8;
}

.woo-gift-head aside strong {
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

.woo-gift-head aside b {
    color: #6ff7e8;
    font-size: 12px;
}

.woo-gift-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 16px;
}

.woo-gift-card,
.woo-gift-history {
    padding: 18px;
    border: 1px solid var(--lt-line) !important;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(10,15,30,.96)) !important;
}

.woo-gift-card-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.woo-gift-card-head > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: rgba(24,199,184,.13);
    color: #6ff7e8;
    font-size: 24px;
}

.woo-gift-card h3,
.woo-gift-history h3 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 22px;
}

.woo-gift-card label {
    display: block;
    margin: 12px 0 7px;
    color: #dbeafe;
    font-weight: 800;
}

.woo-gift-card label small {
    color: #6ff7e8;
}

.woo-gift-card input[type="text"],
.woo-gift-card textarea {
    width: 100%;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 14px;
    background: rgba(15,23,42,.72);
    color: #fff;
    outline: 0;
    padding: 12px 14px;
}

.woo-gift-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.woo-gift-days label {
    margin: 0;
}

.woo-gift-days input {
    display: none;
}

.woo-gift-days span {
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 13px;
    background: rgba(15,23,42,.72);
    color: #dbeafe;
    cursor: pointer;
}

.woo-gift-days input:checked + span {
    border-color: rgba(24,199,184,.78);
    background: rgba(24,199,184,.14);
    color: #6ff7e8;
    box-shadow: 0 0 0 3px rgba(24,199,184,.12);
}

.woo-gift-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #18c7b8, #f43f5e);
    color: #fff;
    font-weight: 900;
}

.woo-gift-card button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.woo-gift-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

.woo-gift-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.woo-gift-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(180px, .85fr) 110px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 16px;
    background: rgba(15,23,42,.62);
}

.woo-gift-row b {
    display: block;
    color: #fff;
    font-size: 15px;
}

.woo-gift-row small,
.woo-gift-row span {
    display: block;
    font-size: 12px;
}

.woo-gift-row-actions {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.woo-gift-row strong {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(24,199,184,.12);
    color: #6ff7e8;
    font-size: 12px;
}

.woo-gift-row.is-redeemed strong {
    background: rgba(244,63,94,.12);
    color: #fecdd3;
}

.woo-gift-row.is-pending strong {
    background: rgba(251,191,36,.13);
    color: #fbbf24;
}

.woo-gift-row-actions button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 11px;
    background: rgba(15,23,42,.72);
    color: #6ff7e8;
}

.woo-gift-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 28px 14px;
    border: 1px dashed rgba(148,163,184,.22);
    border-radius: 18px;
    color: #9fb0c8;
    text-align: center;
}

.woo-gift-empty i {
    color: #6ff7e8;
    font-size: 30px;
}

.woo-gift-empty strong {
    color: #fff;
}

.ltplus-payment-status-card {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(24, 199, 184, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 0%, rgba(24, 199, 184, .18), transparent 30%),
        linear-gradient(180deg, rgba(17, 24, 39, .9), rgba(8, 13, 26, .96));
    padding: 18px;
    box-shadow: 0 18px 44px rgba(0,0,0,.24);
}

.ltplus-payment-status-list {
    display: grid;
    gap: 10px;
}

.ltplus-payment-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    background: rgba(15, 23, 42, .72);
    padding: 12px;
}

.ltplus-payment-status b,
.ltplus-payment-empty strong {
    color: #fff;
}

.ltplus-payment-status span,
.ltplus-payment-status small,
.ltplus-payment-empty span {
    display: block;
    color: #9fb0c8;
    font-size: 12px;
}

.ltplus-payment-status strong {
    border-radius: 999px;
    background: rgba(24, 199, 184, .12);
    color: #6ff7e8;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.ltplus-payment-status.is-approved strong {
    background: rgba(34, 197, 94, .14);
    color: #86efac;
}

.ltplus-payment-status.is-rejected strong {
    background: rgba(244, 63, 94, .14);
    color: #fb7185;
}

.ltplus-payment-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    border: 1px dashed rgba(148, 163, 184, .22);
    border-radius: 18px;
    padding: 26px 14px;
    text-align: center;
}

.ltplus-payment-empty i {
    color: #6ff7e8;
    font-size: 28px;
}

.woo-panel-page {
    width: min(1180px, calc(100% - 28px));
    margin: 28px auto 38px;
    color: var(--lt-text);
}

.woo-panel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 14px;
    border: 1px solid rgba(24, 199, 184, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(244, 63, 94, .18), transparent 32%),
        radial-gradient(circle at 92% 20%, rgba(24, 199, 184, .16), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(7, 17, 30, .98));
    padding: 22px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .26);
}

.woo-panel-kicker,
.woo-form-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6ff7e8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.woo-panel-hero h1 {
    margin: 8px 0 4px;
    color: #fff;
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 950;
}

.woo-panel-hero p {
    margin: 0;
    max-width: 620px;
    color: #b8c7dc;
    font-size: 16px;
}

.woo-panel-status,
.woo-mini-card {
    display: grid;
    align-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(2, 6, 23, .36);
    padding: 16px;
}

.woo-panel-status small,
.woo-mini-card span,
.woo-mini-card small,
.woo-help-text,
.woo-feed-item span,
.woo-empty-state span {
    color: #9fb0c8;
}

.woo-panel-status strong,
.woo-mini-card strong {
    color: #fff;
    font-size: 32px;
    line-height: 1;
}

.woo-panel-status span {
    color: #6ff7e8;
    font-size: 12px;
    font-weight: 800;
}

.woo-panel-message {
    margin-bottom: 14px;
}

.woo-panel-message:empty {
    display: none;
}

.woo-panel-message .alert {
    margin: 0;
    border: 1px solid rgba(24,199,184,.24) !important;
    border-radius: 16px !important;
    background: rgba(15,23,42,.92) !important;
    color: #dbeafe !important;
    padding: 13px 46px 13px 16px;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.woo-panel-message .btn-close {
    filter: invert(1);
    opacity: .75;
}

.woo-panel-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.woo-panel-side,
.woo-panel-feed {
    display: grid;
    gap: 14px;
}

.woo-feature-list,
.woo-action-card,
.woo-panel-feed section {
    border: 1px solid var(--lt-line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 24, 39, .9), rgba(10, 15, 30, .96));
    box-shadow: 0 18px 44px rgba(0,0,0,.2);
}

.woo-feature-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.woo-feature-list div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    align-items: center;
    border-radius: 13px;
    background: rgba(24, 199, 184, .08);
    padding: 10px;
    color: #dbeafe;
    font-weight: 800;
}

.woo-feature-list i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(24, 199, 184, .14);
    color: #6ff7e8;
}

.woo-action-card {
    padding: 16px;
}

.woo-action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(2, 6, 23, .34);
    padding: 6px;
}

.woo-action-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #9fb0c8;
    font-weight: 900;
}

.woo-action-tabs button.is-active {
    border-color: rgba(24, 199, 184, .38);
    background: linear-gradient(135deg, rgba(24,199,184,.22), rgba(244,63,94,.16));
    color: #fff;
}

.woo-panel-form {
    display: none;
    gap: 14px;
}

.woo-panel-form.is-active {
    display: grid;
}

.woo-form-head h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 28px;
    font-weight: 950;
}

.woo-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.woo-plan-grid input,
.woo-payment-methods input {
    display: none;
}

.woo-plan-grid span,
.woo-payment-methods span {
    display: grid;
    gap: 3px;
    min-height: 86px;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 15px;
    background: rgba(15,23,42,.72);
    color: #dbeafe;
    padding: 12px;
    cursor: pointer;
}

.woo-plan-grid b,
.woo-feed-item b {
    color: #fff;
}

.woo-plan-grid strong {
    color: #6ff7e8;
    font-size: 18px;
}

.woo-plan-grid small {
    color: #9fb0c8;
}

.woo-plan-grid input:checked + span,
.woo-payment-methods input:checked + span {
    border-color: rgba(24,199,184,.78);
    background: rgba(24,199,184,.13);
    box-shadow: 0 0 0 3px rgba(24,199,184,.12);
}

.woo-payment-block {
    display: grid;
    gap: 10px;
}

.woo-payment-block h3,
.woo-panel-feed h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
}

.woo-payment-methods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.woo-payment-methods span {
    place-items: center;
    min-height: 54px;
    text-align: center;
    font-weight: 900;
}

.woo-bank-area {
    display: grid;
    gap: 10px;
    border: 1px dashed rgba(148,163,184,.22);
    border-radius: 16px;
    background: rgba(2,6,23,.24);
    padding: 12px;
}

.woo-bank-box {
    display: grid;
    gap: 4px;
    border-radius: 13px;
    background: rgba(24,199,184,.09);
    padding: 11px;
    color: #b8c7dc;
}

.woo-bank-box b {
    color: #fff;
}

.woo-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.woo-panel-form input[type="text"],
.woo-panel-form input[type="file"] {
    width: 100%;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 14px;
    background: rgba(15,23,42,.72);
    color: #fff;
    outline: 0;
    padding: 12px 14px;
}

.woo-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #18c7b8, #f43f5e);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(244, 63, 94, .18);
}

.woo-redeem-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 10px;
}

.woo-panel-feed section {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.woo-feed-list {
    display: grid;
    gap: 9px;
}

.woo-feed-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 14px;
    background: rgba(15,23,42,.66);
    padding: 11px;
}

.woo-feed-item span {
    display: block;
    font-size: 12px;
}

.woo-feed-item em {
    display: block;
    margin-top: 5px;
    border-left: 2px solid rgba(24,199,184,.5);
    color: #dbeafe;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    padding-left: 8px;
}

.woo-feed-item strong,
.woo-feed-item button {
    border: 0;
    border-radius: 999px;
    background: rgba(24,199,184,.12);
    color: #6ff7e8;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
}

.woo-feed-item.is-rejected strong,
.woo-feed-item.is-redeemed strong {
    background: rgba(244,63,94,.13);
    color: #fb7185;
}

.woo-feed-item.is-pending strong {
    background: rgba(251,191,36,.13);
    color: #fbbf24;
}

.woo-empty-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    border: 1px dashed rgba(148,163,184,.22);
    border-radius: 16px;
    padding: 24px 12px;
    text-align: center;
}

.woo-empty-state i {
    color: #6ff7e8;
    font-size: 26px;
}

.ltplus-referral-copy {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 10px;
}

.ltplus-referral-copy button {
    margin-top: 0;
}

.ltplus-progress-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.ltplus-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lt-cyan), var(--lt-gold), var(--lt-rose));
}

.left-sidebar,
.sidebar,
.channels-sidebar,
.private-sidebar,
.right-sidebar,
.chat-info-panel,
.chat-list-panel {
    border-color: rgba(148, 163, 184, 0.14) !important;
    background: rgba(9, 14, 27, 0.88) !important;
    backdrop-filter: blur(14px);
}

.topbar,
.topbar-channels,
.topbar-private,
.chat-header,
.message-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: rgba(15, 23, 42, 0.76) !important;
    backdrop-filter: blur(14px);
}

.message-box,
.chat-form,
.chat-input,
.message-editor,
.editor-footer,
.bottom-message-form {
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: rgba(9, 14, 27, 0.9) !important;
}

.chat-box,
.message-list,
.chat-history,
.chat-content {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.3), rgba(2, 6, 23, 0.26)),
        transparent !important;
}

.chat-bubble,
.message-bubble,
.chat-message,
.message-content {
    border-radius: 18px !important;
}

.sent .message-content,
.message.sent,
.chat-bubble.sent,
.mine .message-content {
    background: linear-gradient(135deg, var(--lt-blue), var(--lt-cyan)) !important;
    color: #ffffff !important;
}

.received .message-content,
.message.received,
.chat-bubble.received {
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(30, 41, 59, 0.86) !important;
    color: var(--lt-text) !important;
}

.disc-header,
.section-title {
    color: #ffffff;
    font-weight: 900;
}

.disc-cat-list a,
.channel-container a,
.user-list a,
.dropdown-item {
    border-radius: 12px;
}

.disc-cat-list a:hover,
.channel-container a:hover,
.user-list a:hover,
.dropdown-item:hover {
    background: rgba(24, 199, 184, 0.12) !important;
}

.modal-content,
.dropdown-menu {
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.98) !important;
    color: var(--lt-text);
    box-shadow: var(--lt-shadow);
}

.table {
    color: var(--lt-text);
}

.table thead th {
    color: #b6c7dd;
}

.table td,
.table th {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

.container-tight {
    max-width: 470px;
}

.container-tight .card,
.container-tight form,
.auth-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
}

.bg-cover {
    position: relative;
}

.bg-cover:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(24, 199, 184, 0.22), rgba(244, 93, 130, 0.18));
}

@media (max-width: 900px) {
    .ltplus-referral-copy {
        grid-template-columns: 1fr;
    }

    .woo-gift-head,
    .woo-gift-grid,
    .woo-gift-row,
    .ltplus-checkout-shell,
    .ltplus-payment-status {
        grid-template-columns: 1fr;
    }

    .woo-gift-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woo-gift-row-actions {
        justify-content: flex-start;
    }

    .navbar .nav-link {
        border-radius: 12px;
    }
}

@media (max-width: 640px) {
    .ltplus-premium-page,
    .ltplus-referral-page,
    .woo-panel-page {
        width: calc(100% - 16px);
        margin: 12px auto;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 42px;
    }
}

@media (max-width: 1080px) {
    .woo-panel-grid {
        grid-template-columns: 1fr;
    }

    .woo-panel-side {
        grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .woo-panel-hero,
    .woo-panel-side,
    .woo-plan-grid,
    .woo-payment-methods,
    .woo-inline-fields,
    .woo-redeem-box {
        grid-template-columns: 1fr;
    }

    .woo-action-tabs {
        grid-template-columns: 1fr;
    }

    .woo-panel-hero {
        padding: 16px;
    }
}

.lt-roles-panel {
    display: grid;
    gap: 18px;
}

.lt-roles-hero,
.lt-role-builder,
.lt-role-list-item,
.lt-empty-roles {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.72));
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.28);
}

.lt-roles-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    overflow: hidden;
}

.lt-roles-hero h2 {
    margin: 4px 0;
    font-size: 26px;
}

.lt-roles-hero p,
.lt-empty-roles span,
.lt-role-list-item span,
.lt-permission-card small {
    color: rgba(226, 232, 240, 0.72);
}

.lt-roles-kicker {
    color: #22d3ee;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.lt-roles-badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    color: white;
    background: linear-gradient(135deg, #22c55e, #06b6d4, #6366f1);
    font-size: 30px;
}

.lt-role-builder {
    padding: 18px;
}

.lt-permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.lt-permission-card {
    display: flex;
    gap: 10px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.62);
    cursor: pointer;
}

.lt-permission-card input {
    margin-top: 4px;
}

.lt-permission-card strong,
.lt-permission-card small {
    display: block;
}

.lt-role-list {
    display: grid;
    gap: 10px;
}

.lt-role-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-left: 4px solid var(--role-color);
}

.lt-role-list-item strong {
    color: var(--role-color);
}

.lt-empty-roles {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 140px;
    padding: 20px;
    text-align: center;
}

.lt-empty-roles i {
    font-size: 34px;
    color: #22d3ee;
}

.lt-member-action-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lt-role-pill-row,
.lt-role-remove-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.lt-role-pill,
.lt-role-remove {
    border: 1px solid color-mix(in srgb, var(--role-color) 70%, transparent);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--role-color);
    background: color-mix(in srgb, var(--role-color) 14%, transparent);
    font-size: 12px;
    font-weight: 800;
}

.lt-role-remove {
    cursor: pointer;
}

.lt-role-assign {
    display: inline-grid;
    grid-template-columns: minmax(130px, 1fr) 40px;
    gap: 6px;
    align-items: center;
    min-width: 190px;
}

.lt-user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.lt-user-role-badge {
    display: inline-flex;
    align-items: center;
    max-width: 120px;
    border: 1px solid color-mix(in srgb, var(--role-color, #22c55e) 70%, transparent);
    border-radius: 999px;
    padding: 3px 7px;
    overflow: hidden;
    color: var(--role-color, #22c55e);
    background: color-mix(in srgb, var(--role-color, #22c55e) 14%, transparent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-profile-role-box {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.42);
}

.lt-profile-role-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #22d3ee;
    font-size: 12px;
    font-weight: 900;
}

[data-bs-theme="light"] .lt-roles-hero,
[data-bs-theme="light"] .lt-role-builder,
[data-bs-theme="light"] .lt-role-list-item,
[data-bs-theme="light"] .lt-empty-roles,
body.light .lt-roles-hero,
body.light .lt-role-builder,
body.light .lt-role-list-item,
body.light .lt-empty-roles {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.88));
    color: #0f172a;
}

[data-bs-theme="light"] .lt-roles-hero p,
[data-bs-theme="light"] .lt-empty-roles span,
[data-bs-theme="light"] .lt-role-list-item span,
[data-bs-theme="light"] .lt-permission-card small,
body.light .lt-roles-hero p,
body.light .lt-empty-roles span,
body.light .lt-role-list-item span,
body.light .lt-permission-card small {
    color: #64748b;
}

[data-bs-theme="light"] .lt-permission-card,
body.light .lt-permission-card {
    background: rgba(248, 250, 252, 0.9);
}

[data-bs-theme="light"] .lt-profile-role-box,
body.light .lt-profile-role-box {
    background: rgba(248, 250, 252, 0.92);
}

@media (max-width: 640px) {
    .lt-roles-hero {
        align-items: flex-start;
        padding: 18px;
    }

    .lt-roles-badge {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .lt-role-assign {
        width: 100%;
    }
}

.cht.sent .message-data:before,
.cht.replies .message-data:after,
.sent .message-data:before,
.replies .message-data:after,
.sent .chat-txt:before,
.replies .chat-txt:after {
    display: none !important;
    content: none !important;
}

.cht .message-data {
    background: transparent !important;
    box-shadow: none !important;
}

.cht .chat-txt {
    border-radius: 14px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.cht.sent .chat-txt {
    background: linear-gradient(135deg, #2563eb, #14b8a6) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18);
}

.cht.replies .chat-txt {
    background: rgba(15, 23, 42, 0.88) !important;
    color: #e5edf7 !important;
}

[data-bs-theme="light"] .cht.replies .chat-txt,
body.light .cht.replies .chat-txt {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12);
}

.lt-room-action {
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 11px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.16);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.lt-room-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.lt-room-action-danger {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.lt-room-action-warning {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    color: #172033;
}

.lt-room-action-info {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
}

.lt-room-action-ban {
    background: rgba(127, 29, 29, 0.14);
    border-color: #ef4444;
    color: #ff6b6b;
    box-shadow: none;
}

[data-bs-theme="light"] .lt-room-action-ban,
body.light .lt-room-action-ban {
    background: rgba(254, 226, 226, 0.85);
    color: #b91c1c;
}

.lt-message-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.2);
}

.lt-message-menu-btn i {
    margin: 0 !important;
    color: inherit !important;
    font-size: 18px !important;
}

.chat-actions {
    opacity: 1 !important;
    gap: 7px;
}

.chat-actions .dropdown-menu {
    min-width: 180px;
    padding: 8px;
    border-radius: 14px !important;
}

.chat-actions .dropdown-item {
    border-radius: 10px;
    padding: 9px 10px;
    font-weight: 800;
}

.lt-edited-label {
    display: inline-flex;
    align-items: center;
    color: rgba(148, 163, 184, 0.9);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.message-meta {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-height: 14px;
}

.cht.sent .message-meta {
    right: 42px !important;
    bottom: -17px !important;
}

.cht.replies .message-meta {
    left: 42px !important;
    bottom: -17px !important;
}

.message-time {
    color: rgba(148, 163, 184, 0.95) !important;
    font-size: 11px !important;
    font-weight: 700;
}

.message-status .ti {
    color: rgba(148, 163, 184, 0.95);
    font-size: 14px !important;
}

.cht .chat-txt {
    min-width: 44px;
    text-align: left;
}

.cht.lt-swipe-reply .message-data {
    transform: translateX(16px);
    transition: transform 0.22s ease;
}

[data-bs-theme="light"] .lt-message-menu-btn,
body.light .lt-message-menu-btn {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}

.lt-info-tabs {
    padding: 8px 10px;
}

.lt-info-tabs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 900;
}

.lt-info-tabs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.lt-info-tabs-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 7px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.62);
    color: #e5edf7;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.lt-info-tabs-grid a:hover {
    border-color: rgba(56, 189, 248, 0.45);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(20, 184, 166, 0.28));
    color: #ffffff;
}

.lt-contact-fixed {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

[data-bs-theme="light"] .lt-info-tabs-title,
body.light .lt-info-tabs-title {
    color: #64748b;
}

[data-bs-theme="light"] .lt-info-tabs-grid a,
body.light .lt-info-tabs-grid a {
    border-color: rgba(15, 23, 42, 0.1);
    background: #f8fafc;
    color: #0f172a;
}

.voice-only-chat-state {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #cbd5e1;
    text-align: center;
    padding: 24px;
}

.voice-only-chat-state i {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(37, 99, 235, 0.26));
    color: #67e8f9;
    font-size: 28px;
}

.voice-only-chat-state strong {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 900;
}

.voice-only-chat-state span {
    max-width: 430px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

[data-bs-theme="light"] .voice-only-chat-state,
body.light .voice-only-chat-state {
    color: #334155;
}

[data-bs-theme="light"] .voice-only-chat-state strong,
body.light .voice-only-chat-state strong {
    color: #0f172a;
}

.group-chat .wrapper,
.group-chat .main-panel {
    min-height: 0;
}

.container-fluid.group-chat {
    flex: 1 1 auto;
    min-height: 0;
    height: calc((var(--vh, 1vh) * 100) - 50px);
    overflow: hidden;
}

.container-fluid.private-chat {
    flex: 1 1 auto;
    min-height: 0;
    height: calc((var(--vh, 1vh) * 100) - 50px);
    overflow: hidden;
}

.container-fluid.group-chat > .wrapper {
    height: 100%;
    width: 100%;
}

.container-fluid.private-chat > .wrapper {
    height: 100%;
    width: 100%;
}

.group-chat .main-panel {
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
}

.private-chat .main-panel {
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
}

.group-chat .chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.private-chat .chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.group-chat .room-editor {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.private-chat .private-editor {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.group-chat .editor-container {
    flex-shrink: 0;
}

.private-chat .editor-container {
    flex-shrink: 0;
}

.room-editor .editor-container.editor-controller,
.private-editor .editor-container.editor-controller {
    align-items: center !important;
    gap: 8px;
    min-height: 52px !important;
    max-height: 78px;
    padding: 7px 10px !important;
    margin: 10px 14px 12px !important;
    overflow: visible;
}

.room-editor .attachment-col,
.room-editor .emoji-col,
.room-editor .send-col,
.private-editor .attachment-col,
.private-editor .emoji-col,
.private-editor .send-col {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
}

.room-editor .editor-col,
.private-editor .editor-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.room-editor .note-editor.note-frame,
.private-editor .note-editor.note-frame {
    width: 100% !important;
    min-height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.room-editor .note-editor.note-frame .note-editing-area,
.room-editor .note-editor.note-frame .note-editable,
.private-editor .note-editor.note-frame .note-editing-area,
.private-editor .note-editor.note-frame .note-editable {
    min-height: 28px !important;
}

.room-editor .note-editor.note-frame .note-editable,
.private-editor .note-editor.note-frame .note-editable {
    max-height: 58px !important;
    height: auto !important;
    padding: 5px 8px !important;
    overflow-y: auto !important;
    line-height: 1.45 !important;
}

.room-editor .note-editor.note-frame .note-placeholder,
.private-editor .note-editor.note-frame .note-placeholder {
    padding: 5px 8px !important;
}

.room-editor .editor-icon,
.private-editor .editor-icon {
    width: 22px;
    height: 22px;
    margin-left: 6px !important;
}

.room-editor .lt-send-message,
.private-editor .lt-send-message {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
}

.room-editor .editor-container.editor-controller[style*="display: block"],
.room-editor .editor-container.editor-controller[style*="display:block"],
.private-editor .editor-container.editor-controller[style*="display: block"],
.private-editor .editor-container.editor-controller[style*="display:block"] {
    display: flex !important;
    align-items: center !important;
}

.room-editor .editor-container.editor-controller,
.private-editor .editor-container.editor-controller {
    width: auto !important;
}

body.voice-active .group-chat .chat-scroll {
    min-height: 0;
}

body.lt-game-active .room-editor,
body.lt-game-active .editor-container,
body.lt-game-active .editor-controller,
body.lt-game-active .reply-msg-row,
body.lt-game-active .attachments-container,
body.lt-game-active .gse-container {
    display: none !important;
}

body.lt-game-active .group-chat .main-panel,
body.lt-game-active .group-chat .chat-scroll {
    min-height: 0;
    overflow: hidden;
}

body.lt-game-active .chats {
    min-height: 100%;
}

#sidebar-wrapper {
    position: relative;
    overflow: hidden;
    padding-bottom: 56px;
    /* Tam viewport yuksekligi -> alttaki dock + ses bari (position:absolute
       bottom:0/64px) her zoom/ekranda SABIT viewport altinda kalir, tasmaz. */
    height: calc(var(--vh, 1vh) * 100);
    max-height: calc(var(--vh, 1vh) * 100);
}

#voice-channel-container.voice-channel-container {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
    z-index: 20;
    border-radius: 16px;
}

.voice-member {
    gap: 7px;
}

.voice-member-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-volume-dropdown {
    flex: 0 0 auto;
    margin-left: auto;
}

.voice-volume-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 54, 95, 0.34);
    border-radius: 10px;
    color: #ff365f;
    background: rgba(255, 54, 95, 0.1);
    box-shadow: 0 8px 18px rgba(255, 54, 95, 0.13);
}

.voice-volume-toggle:hover,
.voice-volume-toggle:focus {
    color: #fff;
    background: linear-gradient(135deg, #ff365f, #ff6b7f);
}

.voice-volume-menu {
    min-width: 190px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(24, 24, 31, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.voice-volume-menu-title,
.voice-volume-mute,
.voice-member .voice-volume-control,
.lt-game-player .voice-volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.voice-volume-menu-title {
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.voice-volume-mute {
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.voice-member .voice-volume-control,
.lt-game-player .voice-volume-control {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.voice-volume-control i {
    color: #ff365f;
    font-size: 14px;
}

.voice-volume-slider {
    width: 100%;
    height: 4px;
    accent-color: #ff365f;
    cursor: pointer;
}

.voice-volume-value {
    min-width: 34px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.voice-volume-control.is-muted {
    opacity: 0.65;
}

.lt-game-player .voice-volume-control {
    justify-content: center;
}

.lt-game-player .voice-volume-dropdown {
    margin: 7px auto 0;
}

html.light .voice-member .voice-volume-control,
html.light .lt-game-player .voice-volume-control,
html.light .voice-volume-menu {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.78);
}

html.light .voice-volume-menu-title,
html.light .voice-volume-mute,
html.light .voice-volume-value {
    color: #334155;
}

html.light .voice-volume-mute {
    background: rgba(241, 245, 249, 0.9);
}

#sidebar-wrapper .channel-list-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 100%;
    background: rgba(15, 23, 42, 0.96);
    border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
}

/* Sol-alt bosluk kapat: oda kanal listesi dock'a kadar DOLSUN (gap yok).
   Ses paneli/dock konumu DEGISMEZ (orijinal aralik korunur). */
#sidebar-wrapper .sidebar-room {
    display: flex;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0;
}
#sidebar-wrapper .sidebar-room .channel-container.sidebar-height-fix {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 10px !important;
}
/* Sesli bagliyken icerik, alttaki yuzen ses bari + dock'un ustunde kalsin. */
body.voice-active #sidebar-wrapper .sidebar-room .channel-container.sidebar-height-fix {
    padding-bottom: 132px !important;
}

body.incall {
    --woo-call-panel-height: clamp(340px, 44vh, 500px);
}

body.incall .video-call-container {
    position: fixed;
    top: 78px;
    right: 24px;
    left: auto;
    width: min(920px, calc(100vw - 330px));
    height: min(520px, calc(100dvh - 112px));
    min-height: 340px;
    z-index: 6200;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at 16% 12%, rgba(244, 63, 94, 0.18), transparent 32%),
        radial-gradient(circle at 84% 22%, rgba(20, 184, 166, 0.13), transparent 28%),
        linear-gradient(135deg, #07101d 0%, #111827 46%, #0b1020 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 30px 90px rgba(0, 0, 0, 0.46);
    cursor: grab;
    backdrop-filter: blur(18px);
    resize: both;
}

body.incall .video-call-container.is-dragging-call {
    cursor: grabbing;
    user-select: none;
}

body.incall .video-call-container::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(2, 6, 23, 0.2));
    pointer-events: none;
}

body.incall .video-call-container::after {
    content: attr(data-call-drag-label);
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 7;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.72);
    background: rgba(2, 6, 23, 0.48);
    font-size: 11px;
    font-weight: 900;
    pointer-events: none;
}

body.incall #media-div {
    width: 100%;
    margin: 0 auto;
    padding: 22px 230px 86px 22px;
    align-items: stretch;
}

body.incall .video-call-container.is-audio-only {
    width: auto !important;
    height: auto !important;
    min-height: 0;
    padding: 10px;
    border-radius: 20px;
    resize: none;
}

body.incall .video-call-container.is-audio-only::before,
body.incall .video-call-container.is-audio-only::after,
body.incall .video-call-container.is-audio-only #media-div,
body.incall .video-call-container.is-audio-only .call-msg {
    display: none;
}

body.incall .video-call-container.is-audio-only .call-controllers {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    padding: 8px;
    border-radius: 18px;
}

body.incall .remote-video {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: #020617;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

body.incall .remote-video:empty::before {
    content: "Waiting for video";
    color: rgba(226, 232, 240, 0.62);
    font-weight: 900;
}

body.incall .agora-player,
body.incall #media-div video,
body.incall #media-div canvas,
body.incall #media-div iframe {
    border-radius: inherit;
}

body.incall .local-video {
    top: 24px;
    right: 24px;
    bottom: auto;
    width: clamp(180px, 14vw, 240px);
    height: clamp(128px, 10.5vw, 168px);
    z-index: 8;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: #000;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42);
}

body.incall .local-video::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

body.incall .video-caller-name {
    top: 10px;
    left: 10px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(2, 6, 23, 0.68);
    color: #e5e7eb;
    backdrop-filter: blur(10px);
    font-weight: 900;
}

body.incall .call-msg {
    top: 50px;
    left: 30px;
    z-index: 9;
    max-width: min(520px, calc(100% - 320px));
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 6, 23, 0.54);
    backdrop-filter: blur(12px);
    font-weight: 900;
}

body.incall .call-controllers {
    bottom: 22px;
    z-index: 10;
    gap: 10px;
    padding: 10px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(2, 6, 23, 0.68);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
}

body.incall .call-controll {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

body.incall .call-controll:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
}

body.incall .call-controll.hangup,
body.incall .call-toggle-cam.btn-danger,
body.incall .call-toggle-mic.btn-danger {
    background: linear-gradient(135deg, #ef4444, #be123c);
}

body.incall .call-toggle-screen {
    background: linear-gradient(135deg, #2563eb, #14b8a6);
}

body.incall .call-toggle-fc {
    background: linear-gradient(135deg, #64748b, #334155);
}

body.incall .call-size-preset {
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 950;
    font-size: 12px;
}

body.incall .call-size-preset[data-call-size="small"] {
    border-radius: 14px 0 0 14px;
}

body.incall .call-size-preset[data-call-size="full"] {
    border-radius: 0 14px 14px 0;
}

body.incall .call-controll.is-pending {
    opacity: 0.55;
    pointer-events: none;
}

body.incall .video-call-container.has-screen-share::after,
body.incall .video-call-container.has-screen-share .call-msg,
body.incall .video-call-container.has-screen-share #media-div {
    display: none !important;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel {
    position: absolute;
    inset: 16px 16px 86px 16px;
    width: auto !important;
    height: auto !important;
    left: 16px !important;
    top: 16px !important;
    right: 16px !important;
    bottom: 86px !important;
    z-index: 12;
    pointer-events: auto;
    resize: none;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-size-preset,
body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-stage-minimize,
body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-stage-close {
    display: none;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-head {
    cursor: default;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel:not(.has-multiple-screens) .screen-rail {
    display: none;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-main,
body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-tile,
body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-main .screen-tile {
    min-height: 0;
    height: 100%;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-tile video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-quality-toggle {
    display: inline-flex !important;
}

body.incall .main-panel,
body.incall .height-scroll-rpanel {
    height: calc((var(--vh, 1vh) * 100) - 48px) !important;
}

body.incall .page-content-wrapper {
    height: calc((var(--vh, 1vh) * 100)) !important;
}

@media (max-width: 991px) {
    body.incall {
        --woo-call-panel-height: clamp(330px, 48vh, 480px);
    }

    body.incall .video-call-container {
        top: 74px;
        left: 10px;
        right: 10px;
        width: auto;
        height: min(440px, calc(100dvh - 96px));
        min-height: 320px;
    }

    body.incall #media-div {
        padding: 18px 18px 88px;
    }

    body.incall .local-video {
        width: 132px;
        height: 96px;
        top: 18px;
        right: 18px;
    }

    body.incall .call-msg {
        left: 22px;
        max-width: calc(100% - 180px);
    }
}

@media (max-width: 767px) {
    body.incall .video-call-container.has-screen-share {
        top: max(8px, env(safe-area-inset-top));
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: auto !important;
        height: auto !important;
        min-height: 0;
        border-radius: 18px;
        resize: none;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel {
        inset: 8px 8px 78px 8px;
        left: 8px !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 78px !important;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-card {
        border-radius: 16px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-head {
        min-height: 54px;
        padding: 9px 10px;
        gap: 8px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-kicker,
    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-subtitle {
        display: none;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-title {
        font-size: 14px;
        white-space: nowrap;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-quality-toggle {
        min-width: 74px;
        height: 34px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 12px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .whitoo-screen-share-body {
        padding: 8px;
        gap: 8px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel.has-multiple-screens .whitoo-screen-share-body {
        grid-template-rows: minmax(0, 1fr) 76px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-rail {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 2px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-rail .screen-tile {
        flex: 0 0 118px;
        min-height: 68px;
        border-radius: 10px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-label {
        left: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        padding: 6px 9px;
        font-size: 12px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-local-preview {
        padding: 14px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-local-preview-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 23px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-local-preview strong {
        font-size: 15px;
    }

    body.incall .video-call-container .whitoo-screen-share-stage.is-in-call-panel .screen-local-preview span {
        font-size: 11px;
    }

    body.incall .video-call-container.has-screen-share .call-controllers {
        left: 50%;
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        max-width: calc(100% - 24px);
        padding: 8px;
        gap: 7px;
        border-radius: 18px;
        transform: translateX(-50%);
        overflow-x: auto;
    }

body.incall .video-call-container.has-screen-share .call-controll {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }
}

.call-alert,
.group-call-alert {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: min(390px, calc(100vw - 28px));
    min-height: 104px;
    display: none;
    align-items: center;
    gap: 14px;
    padding: 14px;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 14% 20%, rgba(255, 43, 82, 0.32), transparent 36%),
        radial-gradient(circle at 92% 18%, rgba(34, 199, 216, 0.22), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(111, 19, 45, 0.88));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    z-index: 12000 !important;
}

.call-alert::before,
.group-call-alert::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 42%);
}

.call-alert[style*="display: block"],
.group-call-alert[style*="display: block"],
.call-alert[style*="display:block"],
.group-call-alert[style*="display:block"] {
    display: flex !important;
}

.call-alert .animbox,
.group-call-alert .animbox {
    position: relative;
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    display: grid;
    place-items: center;
}

.call-alert .phone,
.group-call-alert .phone {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    background: linear-gradient(135deg, #ff2b52, #1da7ff);
    box-shadow: 0 18px 46px rgba(255, 43, 82, 0.32);
    animation: whitooCallPulse 1.2s ease-in-out infinite alternate;
}

.call-alert .call-anim,
.group-call-alert .call-anim {
    position: absolute;
    inset: 4px;
    width: auto;
    height: auto;
    border-radius: 26px;
    background: rgba(255, 43, 82, 0.26);
    animation: whitooCallRing 1.8s ease-out infinite;
}

.call-alert .circle2,
.group-call-alert .circle2 {
    animation-delay: 0.55s;
}

.call-alert .call-avatar img,
.group-call-alert .call-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    object-fit: cover;
}

.call-alert .call-actions,
.group-call-alert .call-actions {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    line-height: 1.2;
}

.call-alert .caller-name,
.group-call-alert .caller-name {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 800;
}

.call-alert .caller-name-text,
.group-call-alert .caller-name-text {
    display: block;
    max-width: 100%;
    margin-bottom: 2px;
    overflow: hidden;
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-alert .call-controlls,
.group-call-alert .call-controlls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.call-alert .call-controll,
.group-call-alert .call-controll {
    min-width: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    font-weight: 900;
    box-shadow: none;
}

.call-alert .call-controll.answer,
.group-call-alert .call-controll.answer,
.call-alert .call-controll.btn-success,
.group-call-alert .call-controll.btn-success {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.call-alert .call-controll.hangup,
.group-call-alert .call-controll.hangup,
.call-alert .call-controll.btn-danger,
.group-call-alert .call-controll.btn-danger {
    background: linear-gradient(135deg, #ff2b52, #be123c);
}

.call-alert .call-controll i,
.group-call-alert .call-controll i {
    font-size: 20px;
}

@keyframes whitooCallPulse {
    from {
        transform: translateY(0) scale(1);
    }
    to {
        transform: translateY(-2px) scale(1.03);
    }
}

@keyframes whitooCallRing {
    from {
        opacity: 0.62;
        transform: scale(0.72);
    }
    to {
        opacity: 0;
        transform: scale(1.42);
    }
}

@media (max-width: 767px) {
    .call-alert,
    .group-call-alert {
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        left: 10px !important;
        width: auto;
        min-height: 96px;
        padding: 12px;
        border-radius: 22px;
    }

    .call-alert .animbox,
    .group-call-alert .animbox {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .call-alert .phone,
    .group-call-alert .phone {
        width: 54px;
        height: 54px;
        border-radius: 18px;
    }

    .call-alert .caller-name-text,
    .group-call-alert .caller-name-text {
        font-size: 16px;
    }

    .call-alert .call-controll,
    .group-call-alert .call-controll {
        height: 38px;
        padding: 0 8px;
        font-size: 12px;
    }
}

@supports (height: 100dvh) {
    .container-fluid.group-chat {
        height: calc(100dvh - 50px);
    }
}

.lt-game-room-shell {
    min-height: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px;
    color: #eef6ff;
    background:
        radial-gradient(circle at 50% 18%, rgba(124, 58, 237, 0.34), transparent 34%),
        radial-gradient(circle at 78% 42%, rgba(14, 165, 233, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.94));
}

.lt-game-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    max-width: 980px;
    margin: 0 auto 22px;
}

.lt-game-kicker {
    color: #22d3ee;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.lt-game-hero h2 {
    margin: 4px 0 8px;
    font-size: 30px;
    font-weight: 950;
}

.lt-game-hero p {
    max-width: 560px;
    margin: 0;
    color: #b6c7da;
    font-weight: 700;
}

.lt-game-meta,
.lt-game-controls,
.lt-game-join {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lt-game-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-weight: 900;
}

.lt-game-arena {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 14px;
}

.lt-game-player {
    min-height: 178px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.66);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
}

.lt-game-player img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #8b5cf6;
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.64);
}

.lt-game-player strong {
    max-width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.lt-game-player span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
}

.lt-game-player.is-empty {
    border-style: dashed;
    color: #94a3b8;
}

.lt-game-player.is-empty i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.12);
    font-size: 24px;
}

.lt-game-controls {
    max-width: 980px;
    margin: 22px auto 0;
    justify-content: center;
}

.lt-game-audio {
    max-width: 980px;
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lt-game-audio-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.76);
    color: #dbeafe;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.lt-game-audio-btn:hover {
    transform: translateY(-1px);
}

.lt-game-audio-btn.is-on {
    border-color: rgba(34, 197, 94, 0.52);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.92), rgba(20, 184, 166, 0.88));
    color: #ecfdf5;
}

.lt-game-audio-btn.is-off {
    border-color: rgba(248, 113, 113, 0.46);
    background: rgba(127, 29, 29, 0.74);
    color: #fee2e2;
}

.lt-game-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid rgba(34, 211, 238, 0.32);
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    color: #fff;
    font-weight: 950;
}

.lt-game-play {
    background: linear-gradient(135deg, #0ea5a4, #2563eb);
    border-color: rgba(45, 212, 191, 0.42);
    text-decoration: none;
}

.lt-game-play:hover {
    color: #fff;
    filter: brightness(1.08);
}

.lt-game-leave {
    background: linear-gradient(135deg, #ef4444, #f97316);
    border-color: rgba(248, 113, 113, 0.4);
}

.lt-game-password {
    min-height: 42px;
    width: 220px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.72);
    color: #fff;
    outline: none;
}

@media (max-width: 900px) {
    .lt-game-room-shell {
        padding: 18px;
        overflow-y: auto;
    }

    .lt-game-hero {
        flex-direction: column;
    }

    .lt-game-arena {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .page-content-wrapper {
    height: calc((var(--vh, 1vh) * 100) - 50px) !important;
    min-height: 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .main-panel,
body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .height-scroll,
body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .height-scroll-rpanel {
    height: calc((var(--vh, 1vh) * 100) - 50px) !important;
    min-height: 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .rightbar-wrapper {
    min-height: 0 !important;
}

@supports (height: 100dvh) {
    body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .page-content-wrapper,
    body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .main-panel,
    body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .height-scroll,
    body.in-voice .main-tab-pane:not(#main-room):not(#main-private) .height-scroll-rpanel {
        height: calc(100dvh - 50px) !important;
    }
}

.woo-cinema-shell {
    min-height: 100%;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 0%, rgba(239, 68, 68, .22), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .10), transparent 28%),
        linear-gradient(135deg, rgba(8, 12, 24, .96), rgba(42, 9, 18, .92) 48%, rgba(8, 12, 24, .98));
}

.woo-cinema-hero,
.woo-cinema-stage,
.woo-cinema-tab,
.woo-cinema-chat-panel {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .74);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.woo-cinema-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 20px;
}

.woo-cinema-kicker {
    color: #fb7185;
    font-weight: 950;
    text-transform: uppercase;
    font-size: 12px;
}

.woo-cinema-hero h2 {
    margin: 4px 0;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 950;
}

.woo-cinema-hero p {
    margin: 0;
    color: rgba(226, 232, 240, .78);
}

.woo-cinema-chat-toggle {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #fb7185);
    font-weight: 900;
}

.woo-cinema-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.woo-cinema-tab {
    min-height: 58px;
    border-radius: 16px;
    color: rgba(255, 255, 255, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
}

.woo-cinema-tab.is-active {
    border-color: rgba(251, 113, 133, .72);
    background: linear-gradient(135deg, rgba(225, 29, 72, .82), rgba(15, 23, 42, .72));
}

.woo-cinema-live,
.woo-cinema-off {
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 10px;
}

.woo-cinema-live {
    background: rgba(34, 197, 94, .18);
    color: #86efac;
}

.woo-cinema-off {
    background: rgba(148, 163, 184, .14);
    color: #cbd5e1;
}

.woo-cinema-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    border-radius: 22px;
    padding: 16px;
}

.woo-cinema-player {
    position: relative;
    min-height: 460px;
    border-radius: 18px;
    overflow: hidden;
    background: #020617 center/cover no-repeat;
    display: grid;
    place-items: center;
}

.woo-cinema-video {
    width: 100%;
    height: 100%;
    min-height: 460px;
    background: #000;
}

.woo-cinema-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, .78);
    text-align: center;
}

.woo-cinema-empty i {
    font-size: 48px;
    color: #fb7185;
}

.woo-cinema-chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 460px;
    max-height: 620px;
    border-radius: 18px;
    overflow: hidden;
}

.woo-cinema-chat-head,
.woo-cinema-chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.woo-cinema-chat-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #fff;
}

.woo-cinema-spoiler-note {
    margin: 12px;
    padding: 10px;
    border-radius: 12px;
    color: #fecdd3;
    background: rgba(225, 29, 72, .12);
}

.woo-cinema-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.woo-cinema-chat-msg {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.woo-cinema-chat-msg img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.woo-cinema-chat-msg p {
    margin: 2px 0 0;
    color: rgba(226, 232, 240, .86);
}

.woo-cinema-chat-form {
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 0;
}

.woo-cinema-chat-form input {
    flex: 1;
    min-width: 0;
    border-radius: 999px !important;
}

.woo-cinema-chat-form button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #fb7185);
}

@media (max-width: 1100px) {
    .woo-cinema-stage {
        grid-template-columns: 1fr;
    }

    .woo-cinema-chat-panel {
        display: none;
    }

    .woo-cinema-chat-panel.is-open {
        display: flex;
        position: fixed;
        inset: 76px 12px 18px;
        z-index: 1050;
    }

    .woo-cinema-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.woo-cinema-landing {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
    padding: 42px 18px;
    background:
        radial-gradient(circle at 18% 18%, rgba(244, 63, 94, .18), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .08), transparent 28%),
        #070a13;
}

.woo-cinema-landing-card {
    width: min(900px, 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    padding: clamp(28px, 5vw, 64px);
    background: linear-gradient(135deg, rgba(18, 23, 38, .94), rgba(58, 18, 30, .86));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.woo-cinema-landing-card > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ff4d6d;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.woo-cinema-landing-card h1 {
    margin: 14px 0;
    color: #fff;
    font-size: clamp(34px, 6vw, 72px);
    line-height: 1;
}

.woo-cinema-landing-card p {
    max-width: 720px;
    color: rgba(255, 255, 255, .78);
    font-size: 17px;
}

.woo-cinema-page {
    min-height: calc(100vh - 78px);
    padding: 110px clamp(14px, 4vw, 46px) 46px;
    background:
        radial-gradient(circle at 10% 12%, rgba(244, 63, 94, .20), transparent 28%),
        radial-gradient(circle at 90% 4%, rgba(255, 255, 255, .08), transparent 24%),
        linear-gradient(135deg, #070a13 0%, #11131f 48%, #1c0a12 100%);
}

.woo-cinema-public-hero {
    width: min(1420px, 100%);
    margin: 0 auto 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(13, 19, 34, .92), rgba(69, 20, 32, .72));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.woo-cinema-public-hero h1 {
    margin: 10px 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 64px);
    line-height: .98;
}

.woo-cinema-public-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: 16px;
}

.woo-cinema-home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: 999px;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
}

.woo-cinema-home-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.woo-cinema-public-shell {
    width: min(1420px, 100%);
    margin: 0 auto;
}

.woo-cinema-public-shell .woo-cinema-stage,
.woo-cinema-public-shell .woo-cinema-player,
.woo-cinema-public-shell .woo-cinema-video-wrap,
.woo-cinema-public-shell .woo-cinema-chat-panel {
    min-width: 0;
}

.woo-cinema-public-shell .woo-cinema-tab {
    justify-content: flex-start;
    padding: 10px 12px;
    text-align: left;
}

.woo-cinema-public-shell .woo-cinema-tab strong {
    white-space: nowrap;
}

.woo-cinema-public-shell .woo-cinema-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-cinema-public-shell .woo-cinema-tab .woo-cinema-live,
.woo-cinema-public-shell .woo-cinema-tab .woo-cinema-off {
    flex: 0 0 auto;
    margin-left: auto;
}

.woo-cinema-now {
    position: absolute;
    left: 18px;
    bottom: 18px;
    max-width: calc(100% - 36px);
    padding: 12px 14px;
    border-radius: 16px;
    color: #fff;
    background: rgba(7, 10, 19, .74);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
}

.woo-cinema-now strong,
.woo-cinema-now span {
    display: block;
}

.woo-cinema-now span {
    margin-top: 2px;
    color: rgba(255, 255, 255, .68);
}

.woo-cinema-player .woo-cinema-now {
    top: 70px;
    right: 16px;
    bottom: auto;
    left: auto;
    z-index: 4;
    max-width: min(440px, calc(100% - 150px));
}

.woo-cinema-public-shell .woo-cinema-player .woo-cinema-now {
    top: auto;
    right: 16px;
    bottom: 84px;
    max-width: min(230px, calc(100% - 32px));
}

.woo-cinema-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.woo-cinema-video-wrap {
    position: absolute;
    inset: 0;
    background: #000;
}

.woo-cinema-player {
    aspect-ratio: 16 / 9;
    min-height: 420px;
}

.woo-cinema-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #000;
}

.woo-cinema-public-shell .woo-cinema-video {
    max-width: 100%;
}

.woo-cinema-live-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff;
    font-weight: 950;
    font-size: 12px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(225, 29, 72, .94), rgba(251, 113, 133, .82));
    box-shadow: 0 12px 32px rgba(225, 29, 72, .34);
}

.woo-cinema-view-tools {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    display: inline-flex;
    gap: 6px;
}

.woo-cinema-view-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    color: #fff;
    background: rgba(8, 11, 20, .72);
    backdrop-filter: blur(14px);
}

.woo-cinema-view-tools button:hover,
.woo-cinema-view-tools button.is-active {
    border-color: rgba(251, 113, 133, .6);
    background: rgba(225, 29, 72, .28);
}

.woo-cinema-drag-handle {
    display: none !important;
    cursor: grab;
    touch-action: none;
}

.woo-cinema-player.is-floating {
    position: fixed;
    z-index: 1090;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(430px, calc(100vw - 28px));
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(251, 113, 133, .4);
    border-radius: 18px;
    overflow: hidden;
    background: #020617;
    box-shadow: 0 24px 75px rgba(0, 0, 0, .68);
}

.woo-cinema-player.is-floating.is-dragging {
    user-select: none;
}

.woo-cinema-player.is-floating .woo-cinema-video-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.woo-cinema-player.is-floating .woo-cinema-drag-handle {
    display: inline-flex !important;
}

.woo-cinema-player.is-floating .woo-cinema-now,
.woo-cinema-player.is-floating .woo-cinema-select-wrap,
.woo-cinema-player.is-floating .woo-cinema-control-note,
.woo-cinema-player.is-floating .woo-cinema-subtitle-toggle {
    display: none;
}

.woo-cinema-player.is-floating .woo-cinema-live-badge {
    top: 12px;
    left: 12px;
    padding: 6px 9px;
    font-size: 10px;
}

.woo-cinema-player.is-floating .woo-cinema-view-tools {
    top: 9px;
    right: 9px;
}

.woo-cinema-player.is-floating .woo-cinema-view-tools button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.woo-cinema-player.is-floating .woo-cinema-controls {
    left: 9px;
    right: 9px;
    bottom: 9px;
    min-height: 42px;
    gap: 8px;
    padding: 5px;
    border-radius: 13px;
}

.woo-cinema-player.is-floating .woo-cinema-control-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 9px;
}

.woo-cinema-player.is-floating .woo-cinema-volume {
    width: min(130px, 35vw);
}

.woo-cinema-video-wrap:fullscreen,
.woo-cinema-video-wrap:-webkit-full-screen,
.woo-cinema-video-wrap.is-screen-mode {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    background: #000;
}

.woo-cinema-video-wrap:fullscreen .woo-cinema-video,
.woo-cinema-video-wrap:-webkit-full-screen .woo-cinema-video,
.woo-cinema-video-wrap.is-screen-mode .woo-cinema-video {
    height: 100%;
}

body.woo-cinema-screen-active {
    overflow: hidden;
}

.woo-cinema-start {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 13px 18px;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, rgba(225, 29, 72, .96), rgba(251, 113, 133, .86));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .42);
}

.woo-cinema-start[hidden] {
    display: none;
}

.woo-cinema-resume {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 6;
    width: min(410px, calc(100% - 32px));
    transform: translate(-50%, -50%);
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    color: #fff;
    background: rgba(8, 11, 20, .9);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .48);
}

.woo-cinema-resume[hidden] {
    display: none;
}

.woo-cinema-resume strong {
    font-size: 18px;
}

.woo-cinema-resume span {
    color: rgba(226, 232, 240, .76);
    font-size: 13px;
}

.woo-cinema-resume div {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.woo-cinema-resume button {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 0 13px;
    color: #fff;
    font-weight: 800;
    background: rgba(255, 255, 255, .07);
}

.woo-cinema-resume button:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-color: rgba(251, 113, 133, .48);
    background: linear-gradient(135deg, #e11d48, #fb7185);
}

.woo-cinema-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(8, 11, 20, .72);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.woo-cinema-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-weight: 900;
}

.woo-cinema-control-btn:hover,
.woo-cinema-control-btn.is-active {
    border-color: rgba(251, 113, 133, .62);
    background: rgba(225, 29, 72, .28);
}

.woo-cinema-volume {
    width: min(190px, 22vw);
    accent-color: #fb7185;
}

.woo-cinema-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 auto;
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    font-weight: 900;
}

.woo-cinema-quality {
    min-width: 116px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    padding: 0 10px;
    outline: 0;
}

.woo-cinema-quality option {
    color: #111827;
}

.woo-cinema-control-note {
    margin-left: auto;
    color: rgba(255, 255, 255, .64);
    font-weight: 800;
}

.woo-cinema-chat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.woo-cinema-chat-panel {
    min-height: 420px;
}

.woo-cinema-chat-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 113, 133, .55) transparent;
}

@media (max-width: 760px) {
    .woo-cinema-page {
        padding-top: 92px;
    }

    .woo-cinema-public-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .woo-cinema-tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .woo-cinema-player {
        min-height: 0;
    }

    .woo-cinema-chat-panel.is-open {
        inset: auto 10px 10px;
        max-height: 58dvh;
        min-height: 0;
        border-radius: 22px;
    }
}

@media (max-width: 760px) {
    .woo-cinema-public-hero h1 {
        font-size: 34px;
    }

    .woo-cinema-shell {
        padding: 14px;
    }

    .woo-cinema-stage {
        padding: 10px;
        border-radius: 18px;
    }

    .woo-cinema-controls {
        align-items: stretch;
        flex-wrap: wrap;
        min-height: 0;
        border-radius: 16px;
    }

    .woo-cinema-volume {
        flex: 1;
        min-width: 120px;
        width: auto;
    }

    .woo-cinema-select-wrap {
        order: 4;
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .woo-cinema-quality {
        flex: 1;
    }

    .woo-cinema-control-note {
        margin-left: 0;
        line-height: 42px;
    }

    .woo-cinema-now {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        max-width: none;
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 760px) {
    .woo-cinema-page {
        min-height: 100dvh;
        padding: 76px 10px 24px;
    }

    .woo-cinema-public-hero {
        gap: 14px;
        margin-bottom: 10px;
        padding: 17px 16px;
        border-radius: 18px;
    }

    .woo-cinema-kicker {
        font-size: 11px;
    }

    .woo-cinema-public-hero h1 {
        margin: 7px 0 8px;
        font-size: 27px;
        line-height: 1.1;
    }

    .woo-cinema-public-hero p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 13px;
        line-height: 1.45;
    }

    .woo-cinema-hero-actions {
        width: 100%;
    }

    .woo-cinema-chat-toggle,
    .woo-cinema-home-link {
        flex: 1;
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }

    .woo-cinema-shell {
        padding: 10px;
        border-radius: 18px;
    }

    .woo-cinema-tabs {
        display: flex;
        gap: 8px;
        margin: 0 0 10px;
        padding: 0 0 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .woo-cinema-tabs::-webkit-scrollbar {
        display: none;
    }

    .woo-cinema-tab {
        flex: 0 0 132px;
        min-height: 56px;
        padding: 8px 9px;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px 7px;
        border-radius: 13px;
        scroll-snap-align: start;
        text-align: left;
    }

    .woo-cinema-tab strong {
        font-size: 12px;
    }

    .woo-cinema-tab span {
        order: 3;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        color: rgba(226, 232, 240, .7);
    }

    .woo-cinema-live,
    .woo-cinema-off {
        margin-left: auto;
        padding: 2px 6px;
    }

    .woo-cinema-stage {
        display: block;
        padding: 7px;
        border-radius: 15px;
    }

    .woo-cinema-player {
        display: block;
        overflow: visible;
        aspect-ratio: auto;
        border-radius: 12px;
        background: transparent;
    }

    .woo-cinema-empty {
        min-height: min(50vw, 190px);
        padding: 20px 14px;
        border-radius: 12px;
        background: #020617;
    }

    .woo-cinema-empty i {
        font-size: 34px;
    }

    .woo-cinema-video-wrap {
        position: relative;
        inset: auto;
        overflow: hidden;
        border-radius: 12px;
        background: #020617;
    }

    .woo-cinema-video {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .woo-cinema-live-badge {
        top: 10px;
        left: 10px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .woo-cinema-view-tools {
        top: 8px;
        right: 8px;
        gap: 5px;
    }

    .woo-cinema-view-tools button {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .woo-cinema-start {
        padding: 11px 14px;
        gap: 7px;
        font-size: 12px;
    }

    .woo-cinema-resume {
        width: calc(100% - 20px);
        padding: 13px;
        border-radius: 14px;
    }

    .woo-cinema-resume strong {
        font-size: 15px;
    }

    .woo-cinema-resume div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .woo-cinema-resume button {
        width: 100%;
        justify-content: center;
        min-height: 38px;
        font-size: 12px;
    }

    .woo-cinema-controls {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 8px;
        margin: 7px;
        padding: 7px;
        border-radius: 13px;
        background: rgba(8, 11, 20, .9);
    }

    .woo-cinema-control-btn {
        height: 40px;
        min-width: 40px;
        border-radius: 11px;
        font-size: 12px;
    }

    .woo-cinema-volume {
        width: 100%;
        min-width: 0;
        align-self: center;
    }

    .woo-cinema-select-wrap {
        grid-column: 1 / -1;
        order: initial;
        gap: 10px;
        width: 100%;
    }

    .woo-cinema-quality {
        min-width: 0;
        height: 40px;
    }

    .woo-cinema-control-note {
        margin: 0;
        font-size: 12px;
        line-height: 40px;
    }

    .woo-cinema-subtitle-toggle {
        grid-column: 3;
        grid-row: 1;
    }

    .woo-cinema-now {
        margin: 8px 0 0;
        padding: 10px 11px;
        border-radius: 12px;
        font-size: 13px;
    }

    .woo-cinema-chat-panel.is-open {
        inset: auto 8px max(8px, env(safe-area-inset-bottom));
        max-height: min(66dvh, 530px);
        border-radius: 18px;
        box-shadow: 0 -16px 48px rgba(0, 0, 0, .52);
    }

    .woo-cinema-player.is-floating {
        width: min(360px, calc(100vw - 18px));
        right: 9px;
        bottom: max(9px, env(safe-area-inset-bottom));
        border-radius: 14px;
    }

    .woo-cinema-player.is-floating .woo-cinema-live-badge {
        display: none;
    }

    .woo-cinema-player.is-floating .woo-cinema-controls {
        display: flex;
        margin: 0;
    }

    .woo-cinema-player.is-floating .woo-cinema-view-tools button {
        width: 31px;
        height: 31px;
    }

    .woo-cinema-chat-head,
    .woo-cinema-chat-form {
        padding: 10px;
    }

    .woo-cinema-spoiler-note {
        margin: 9px;
        padding: 8px 9px;
        font-size: 12px;
    }
}

/* Woo Cinema mobile layout repair 202606151342 */
@media (max-width: 760px) {
    .woo-cinema-public-shell .woo-cinema-stage {
        display: block !important;
        overflow: visible !important;
        min-height: 0 !important;
    }

    .woo-cinema-public-shell .woo-cinema-player {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        border-radius: 16px !important;
        background: transparent !important;
    }

    .woo-cinema-public-shell .woo-cinema-video-wrap {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        min-height: 0 !important;
        border-radius: 16px !important;
        background: #020617 !important;
    }

    .woo-cinema-public-shell .woo-cinema-video {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: contain !important;
        background: #000 !important;
    }

    .woo-cinema-public-shell .woo-cinema-controls {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        width: auto !important;
        margin: 8px !important;
        padding: 8px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        background: rgba(8, 12, 23, .96) !important;
        box-shadow: none !important;
    }

    .woo-cinema-public-shell .woo-cinema-volume {
        width: 100% !important;
        min-width: 0 !important;
    }

    .woo-cinema-public-shell .woo-cinema-select-wrap {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .woo-cinema-public-shell .woo-cinema-quality {
        width: 100% !important;
        min-width: 0 !important;
    }

    .woo-cinema-public-shell .woo-cinema-control-note {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        line-height: 38px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .woo-cinema-public-shell .woo-cinema-now {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 10px 0 0 !important;
        padding: 11px 12px !important;
        transform: none !important;
        border-radius: 14px !important;
        background: rgba(5, 10, 20, .96) !important;
        box-shadow: none !important;
    }

    .woo-cinema-public-shell .woo-cinema-now strong,
    .woo-cinema-public-shell .woo-cinema-now span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .woo-cinema-public-shell .woo-cinema-chat-panel {
        display: none !important;
        position: fixed !important;
        z-index: 1080 !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-height: 0 !important;
        max-height: min(64dvh, 520px) !important;
        border-radius: 20px !important;
        box-shadow: 0 -18px 60px rgba(0, 0, 0, .62) !important;
    }

    .woo-cinema-public-shell .woo-cinema-chat-panel.is-open {
        display: flex !important;
    }

    .woo-cinema-public-shell .woo-cinema-chat-list {
        min-height: 160px !important;
    }
}

/* Woo premium layout polish final 202606162123 */
.woo-panel-page {
    width: min(1220px, calc(100% - 32px)) !important;
}

.woo-panel-hero {
    margin-left: 0 !important;
    min-height: 132px !important;
    padding: 22px 24px !important;
    border-radius: 12px !important;
    border-color: rgba(24, 199, 184, .18) !important;
    background:
        radial-gradient(circle at 18% -20%, rgba(139, 92, 246, .28), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(24, 199, 184, .20), transparent 30%),
        linear-gradient(135deg, rgba(19, 27, 46, .96), rgba(5, 13, 25, .98)) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .30) !important;
}

.woo-panel-hero h1 {
    font-size: clamp(34px, 4vw, 48px) !important;
    letter-spacing: 0 !important;
}

.woo-panel-status {
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(5, 12, 24, .86)) !important;
}

.woo-panel-grid {
    grid-template-columns: 220px minmax(0, 1fr) 300px !important;
    gap: 14px !important;
    align-items: start !important;
}

.woo-panel-side {
    align-self: stretch !important;
}

.woo-side-menu {
    position: sticky !important;
    top: 92px !important;
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    min-height: 0 !important;
    border: 1px solid rgba(24, 199, 184, .14) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(13, 23, 42, .94), rgba(7, 13, 26, .98)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24) !important;
}

.woo-side-title {
    padding: 4px 8px 2px !important;
    color: #3ce9da !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.woo-side-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #dce8fb !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    background: rgba(15, 23, 42, .54) !important;
}

.woo-side-item:hover,
.woo-side-item.is-active {
    border-color: rgba(24, 199, 184, .18) !important;
    background: linear-gradient(135deg, rgba(24, 199, 184, .20), rgba(44, 62, 94, .56)) !important;
    color: #fff !important;
}

.woo-side-item i {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    color: #7df9ee !important;
    background: rgba(24, 199, 184, .10) !important;
}

.woo-side-item span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.woo-action-card,
.woo-panel-feed section {
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(13, 23, 42, .94), rgba(7, 13, 26, .98)) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .26) !important;
}

.woo-action-tabs {
    border-radius: 10px !important;
    background: rgba(4, 10, 22, .46) !important;
}

.woo-action-tabs button {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

.woo-form-head h2 {
    font-size: 20px !important;
}

.woo-plan-grid {
    gap: 8px !important;
}

.woo-plan-grid span {
    min-height: 76px !important;
    border-radius: 10px !important;
    padding: 11px !important;
}

.woo-payment-methods {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
}

.woo-payment-methods span {
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.woo-bank-area,
.woo-panel-form input[type="text"],
.woo-panel-form input[type="file"],
.woo-submit-button {
    border-radius: 10px !important;
}

.woo-empty-state {
    min-height: 96px !important;
    border-radius: 10px !important;
    background: radial-gradient(circle at 50% 26%, rgba(24, 199, 184, .18), transparent 32%), rgba(5, 12, 24, .42) !important;
}

@media (max-width: 1080px) {
    .woo-panel-hero {
        margin-left: 0 !important;
    }

    .woo-panel-grid {
        grid-template-columns: 1fr !important;
    }

    .woo-side-menu {
        position: static !important;
        min-height: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .woo-side-title {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 760px) {
    .woo-panel-page {
        width: calc(100% - 18px) !important;
    }

    .woo-panel-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    .woo-side-menu {
        grid-template-columns: 1fr !important;
        border-radius: 14px !important;
    }

    .woo-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .woo-action-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Woo mobile feature cards compact 202606162135 */
@media (max-width: 760px) {
    .woo-panel-side {
        display: block !important;
    }

    .woo-side-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .woo-side-title {
        grid-column: 1 / -1 !important;
        padding: 0 2px 2px !important;
        font-size: 11px !important;
    }

    .woo-side-item {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        min-height: 54px !important;
        padding: 8px !important;
        gap: 7px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        background: rgba(15, 23, 42, .70) !important;
    }

    .woo-side-item i {
        width: 28px !important;
        height: 28px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
    }

    .woo-side-item span {
        display: -webkit-box !important;
        overflow: hidden !important;
        white-space: normal !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
}

/* Woo premium checkout redesign 202606162143 */
.woo-panel-page {
    width: min(1120px, calc(100% - 28px)) !important;
    margin-top: 76px !important;
}

.woo-panel-hero {
    margin: 0 0 14px !important;
    grid-template-columns: minmax(0, 1fr) 230px !important;
    min-height: 116px !important;
    padding: 20px 22px !important;
    border-radius: 9px !important;
}

.woo-panel-kicker {
    display: none !important;
}

.woo-panel-hero h1 {
    margin: 0 0 8px !important;
    font-size: 34px !important;
}

.woo-panel-hero p {
    max-width: 640px !important;
    font-size: 13px !important;
}

.woo-panel-status {
    position: relative !important;
    min-height: 82px !important;
    padding: 15px 72px 15px 16px !important;
    border-radius: 9px !important;
}

.woo-panel-status::after {
    content: "\\ea05";
    font-family: "tabler-icons" !important;
    position: absolute !important;
    right: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    color: #61fff3 !important;
    background: radial-gradient(circle, rgba(24, 199, 184, .38), rgba(24, 199, 184, .08) 62%, transparent 72%) !important;
    box-shadow: 0 0 28px rgba(24, 199, 184, .26) !important;
    font-size: 24px !important;
}

.woo-panel-status strong {
    font-size: 26px !important;
}

.woo-panel-grid {
    grid-template-columns: 210px minmax(0, 1fr) 285px !important;
    gap: 14px !important;
}

.woo-feature-rail {
    display: grid !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 13px !important;
    border: 1px solid rgba(24, 199, 184, .16) !important;
    border-radius: 9px !important;
    background:
        radial-gradient(circle at 0 0, rgba(24, 199, 184, .12), transparent 34%),
        linear-gradient(180deg, rgba(10, 18, 34, .94), rgba(5, 11, 22, .98)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
}

.woo-feature-rail-title {
    color: #62fff2 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.woo-feature-pill {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 10px !important;
    background: rgba(15, 23, 42, .58) !important;
    color: #e7eefc !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.woo-feature-pill i {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    color: #5ffff1 !important;
    background: rgba(24, 199, 184, .12) !important;
}

.woo-feature-pill span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.woo-action-card,
.woo-panel-feed section {
    border-radius: 9px !important;
    border-color: rgba(148, 163, 184, .14) !important;
    background:
        radial-gradient(circle at 0 0, rgba(24, 199, 184, .08), transparent 32%),
        linear-gradient(180deg, rgba(10, 18, 34, .95), rgba(5, 11, 22, .98)) !important;
}

.woo-action-card {
    padding: 16px !important;
}

.woo-action-tabs {
    margin-bottom: 20px !important;
    padding: 4px !important;
    border-radius: 8px !important;
}

.woo-action-tabs button {
    min-height: 34px !important;
    border-radius: 7px !important;
}

.woo-action-tabs button.is-active {
    background: linear-gradient(135deg, rgba(24, 199, 184, .30), rgba(244, 63, 94, .16)) !important;
}

.woo-form-head span {
    font-size: 10px !important;
}

.woo-form-head h2 {
    margin-top: 7px !important;
    font-size: 18px !important;
}

.woo-plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.woo-plan-grid span {
    position: relative !important;
    min-height: 92px !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.woo-plan-grid input:checked + span::after {
    content: "\\ea5e";
    font-family: "tabler-icons" !important;
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    color: #08231f !important;
    background: #20dccd !important;
    font-size: 12px !important;
}

.woo-payment-block h3 {
    margin-top: 4px !important;
    font-size: 14px !important;
}

.woo-payment-methods {
    grid-template-columns: 1fr !important;
}

.woo-payment-methods span {
    min-height: 46px !important;
    justify-content: start !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    gap: 9px !important;
    padding: 0 16px !important;
}

.woo-bank-area {
    border-style: solid !important;
    border-color: rgba(148, 163, 184, .14) !important;
    background: transparent !important;
}

.woo-panel-form input[type="text"] {
    min-height: 42px !important;
    background: rgba(15, 23, 42, .62) !important;
}

.woo-panel-form input[type="file"] {
    min-height: 52px !important;
    padding: 14px !important;
    color: #aebbd2 !important;
    background: rgba(15, 23, 42, .52) !important;
}

.woo-panel-form input[type="file"]::file-selector-button {
    margin-right: 12px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 7px !important;
    background: rgba(10, 18, 34, .92) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    font-weight: 800 !important;
}

.woo-submit-button {
    min-height: 54px !important;
    border-radius: 8px !important;
    background: linear-gradient(100deg, #ec2fa4 0%, #8b5cf6 52%, #25c7cf 100%) !important;
}

.woo-panel-feed {
    gap: 12px !important;
}

.woo-panel-feed section {
    min-height: 160px !important;
    padding: 16px !important;
}

.woo-empty-state {
    min-height: 110px !important;
    align-content: center !important;
}

.woo-empty-state i {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 8px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(24, 199, 184, .32), rgba(24, 199, 184, .08) 70%) !important;
    color: #58fff1 !important;
    font-size: 23px !important;
}

.woo-trust-card {
    min-height: 132px !important;
}

.woo-trust-list {
    display: grid !important;
    gap: 10px !important;
}

.woo-trust-list div {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    color: #cbd7ea !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.woo-trust-list i {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: rgba(24, 199, 184, .10) !important;
    color: #58fff1 !important;
}

@media (max-width: 900px) {
    .woo-panel-hero,
    .woo-panel-grid {
        grid-template-columns: 1fr !important;
    }

    .woo-panel-status {
        padding-right: 72px !important;
    }

    .woo-feature-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .woo-feature-rail-title {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 620px) {
    .woo-panel-page {
        width: calc(100% - 18px) !important;
        margin-top: 84px !important;
    }

    .woo-panel-hero {
        padding: 16px !important;
    }

    .woo-panel-hero h1 {
        font-size: 29px !important;
    }

    .woo-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .woo-panel-feed section {
        min-height: 132px !important;
    }
}


/* ===== whitoo-dm-tools.css ===== */
.lt-sidebar-shortcuts,
.lt-dm-tools {
    margin: 10px 10px 8px;
}

.lt-sidebar-shortcuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lt-sidebar-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .045)),
        rgba(22, 21, 29, .92);
    color: #f7f2f3;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lt-sidebar-shortcut i,
.lt-sidebar-shortcut .ti {
    color: #ef3b4f !important;
    font-size: 15px;
}

.lt-sidebar-shortcut:hover {
    color: #fff;
    border-color: rgba(215, 25, 53, .34);
    background:
        linear-gradient(135deg, rgba(215, 25, 53, .16), rgba(255, 255, 255, .06)),
        rgba(22, 21, 29, .96);
    box-shadow: 0 10px 24px rgba(215, 25, 53, .13), inset 0 1px 0 rgba(255, 255, 255, .10);
    transform: translateY(-1px);
}

.lt-ref-link {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(215, 25, 53, .08)),
        rgba(22, 21, 29, .92);
}

.lt-cinema-link {
    grid-column: 1 / -1;
    min-height: 40px;
    background:
        linear-gradient(135deg, rgba(215, 25, 53, .16), rgba(255, 255, 255, .07)),
        rgba(22, 21, 29, .94);
}

.lt-dm-tools {
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background: rgba(15, 23, 42, .42);
}

.lt-dm-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}

.lt-dm-filters button {
    border: 0;
    border-radius: 8px;
    padding: 7px 5px;
    background: rgba(148, 163, 184, .10);
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.lt-dm-filters button.active {
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #fff;
}

.lt-add-friend {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 6px;
}

.lt-add-friend .form-control {
    min-height: 36px;
    border-radius: 10px;
    border-color: rgba(148, 163, 184, .18);
    background: rgba(2, 6, 23, .45);
    color: #eef6ff;
    font-size: 12px;
}

.lt-add-friend-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #14b8a6;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lt-friend-requests {
    margin-top: 9px;
    border-top: 1px solid rgba(148, 163, 184, .12);
    padding-top: 8px;
}

.lt-friend-requests-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 7px;
}

.lt-friend-requests-refresh {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    color: #9ca3af;
    background: rgba(148, 163, 184, .10);
}

.lt-friend-request-list small {
    color: #94a3b8;
    font-size: 11px;
}

.lt-friend-request-item {
    display: grid;
    grid-template-columns: 30px 1fr 28px 28px;
    gap: 6px;
    align-items: center;
    padding: 7px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .66);
    margin-bottom: 6px;
}

.lt-friend-request-item img {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    object-fit: cover;
}

.lt-friend-request-name b,
.lt-friend-request-name span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lt-friend-request-name b {
    color: #eef6ff;
    font-size: 12px;
}

.lt-friend-request-name span {
    color: #94a3b8;
    font-size: 10px;
}

.lt-friend-approve,
.lt-friend-reject {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    color: #fff;
}

.lt-friend-approve {
    background: #10b981;
}

.lt-friend-reject {
    background: #ef4444;
}

.lt-user-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.lt-user-actions .btn {
    min-width: 0;
    white-space: nowrap;
}

.lt-user-actions .lt-user-friend-action {
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-user-actions #user-options-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 124px;
}

.lt-member-popover-actions {
    background: rgba(15, 23, 42, .72);
}

.lt-member-popover-actions .btn {
    width: 100%;
    border-radius: 10px;
    font-weight: 800;
}

.voice-channel-container {
    width: calc(100% - 16px) !important;
    min-height: 76px;
    height: auto !important;
    margin: 8px;
    padding: 10px !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 18%, rgba(45, 212, 191, .12), transparent 38%),
        radial-gradient(circle at 92% 0%, rgba(255, 54, 95, .08), transparent 34%),
        linear-gradient(145deg, rgba(8, 15, 29, .97), rgba(14, 22, 39, .94)) !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(255, 255, 255, .055);
    gap: 9px;
    align-items: center;
}

.voice-channel-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%);
    opacity: .65;
}

.voice-channel-container::after {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, #22c55e, #22d3ee);
    box-shadow: 0 0 16px rgba(34, 211, 238, .30);
    pointer-events: none;
}

.voice-channel-info {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    padding: 1px 0;
}

.voice-container-title {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 5px;
    padding: 4px 7px 4px 6px;
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 999px;
    background: rgba(6, 95, 70, .13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.voice-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .10), 0 0 12px rgba(34, 197, 94, .54);
}

.voice-name {
    width: auto !important;
    max-width: 86px;
    margin-top: 8px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
}

.voice-channel-controls {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, .10);
    border-radius: 14px;
    background: rgba(2, 6, 23, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.voice-channel-controls .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-width: 1px !important;
    font-size: 13px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.voice-channel-controls .btn:hover {
    transform: translateY(-1px);
}

.voice-toggle-mic {
    border-color: rgba(34, 197, 94, .34) !important;
    background: rgba(34, 197, 94, .09) !important;
    color: #67f0bf !important;
    box-shadow: none;
}

.voice-screen-share {
    border-color: rgba(56, 189, 248, .34) !important;
    background: rgba(14, 165, 233, .09) !important;
    color: #7dd3fc !important;
    box-shadow: none;
}

.voice-leave {
    border-color: rgba(255, 54, 95, .44) !important;
    background: rgba(255, 54, 95, .10) !important;
    color: #fb7185 !important;
    box-shadow: none;
}

.voice-channel-container.is-leaving {
    opacity: .45;
    transform: scale(.98);
    pointer-events: none;
}

.voice-member-list .voice-member[data-uid] {
    border-radius: 10px;
}

.page-content-wrapper .navbar.topbar {
    position: relative;
    z-index: 4600;
    overflow: visible;
}

.right-panel.rightbar-wrapper {
    position: relative;
    z-index: 40;
}

.lt-notification-dropdown,
.nav-item.dropdown:has(#notifications-panel) {
    position: relative;
    z-index: 4700;
}

.notifications-panel-card {
    z-index: 4800 !important;
    min-width: 320px !important;
    max-width: min(360px, calc(100vw - 24px));
    margin-top: 12px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: rgba(15, 23, 42, .98) !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .58), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(18px);
}

.notifications-panel-card .card,
.notifications-panel-card .card-header,
.notifications-panel-card .card-body {
    background: transparent !important;
    color: #eaf6ff;
}

.notifications-panel-card .card-header {
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    padding: 14px 16px;
    font-weight: 900;
}

.notifications-panel-card .dropdown-item,
.notifications-panel-card .list-group-item {
    color: #dbeafe;
    background: transparent;
}

.notifications-panel-card .dropdown-item:hover,
.notifications-panel-card .list-group-item:hover {
    background: rgba(45, 212, 191, .10);
    color: #fff;
}

.right-panel #rpanel-tab {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 8px;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 16px;
    background: rgba(15, 23, 42, .62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.right-panel #rpanel-tab .nav-item,
.right-panel #rpanel-tab .nav-link {
    width: 100%;
}

.right-panel #rpanel-tab .nav-link {
    min-height: 36px;
    border: 0;
    border-radius: 12px !important;
    color: #9fb0c7;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.right-panel #rpanel-tab .nav-link:hover {
    color: #fff;
    background: rgba(148, 163, 184, .10);
}

.right-panel #rpanel-tab .nav-link.active {
    color: #ecfeff !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, .95), rgba(37, 99, 235, .88)) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .24);
}

.right-panel .room-users-row > .m-1,
.right-panel .group-users-row > .m-1 {
    margin: 8px !important;
}

.right-panel .room-user-search,
.right-panel .group-user-search {
    min-height: 40px;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 14px !important;
    background: rgba(2, 6, 23, .42) !important;
    color: #eaf6ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.right-panel .room-user-search::placeholder,
.right-panel .group-user-search::placeholder {
    color: #8ea0b8;
}

.right-panel .input-icon-addon {
    color: #8ea0b8;
}

.right-panel .room-users,
.right-panel .group-users {
    padding: 0 6px 8px;
}

.right-panel .lt-role-user-section {
    margin: 8px 0 12px;
}

.right-panel .lt-role-user-heading {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 7px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--role-color, #94a3b8) 34%, rgba(255, 255, 255, .08));
    border-radius: 12px;
    color: rgba(248, 250, 252, .92);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--role-color, #94a3b8) 18%, transparent), rgba(255, 255, 255, .035)),
        rgba(11, 16, 28, .80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.right-panel .lt-role-user-heading span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 950;
}

.right-panel .lt-role-user-heading i {
    color: var(--role-color, #94a3b8);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--role-color, #94a3b8) 55%, transparent));
}

.right-panel .lt-role-user-heading b {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: color-mix(in srgb, var(--role-color, #94a3b8) 42%, rgba(15, 23, 42, .86));
    font-size: 11px;
    font-weight: 950;
}

.right-panel .lt-role-user-items {
    display: grid;
    gap: 4px;
}

.lt-manage-sidebar-head {
    margin: 10px 10px 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 49, 88, .20), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
        rgba(9, 13, 24, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 36px rgba(0, 0, 0, .20);
}

.lt-manage-sidebar-head span,
.lt-manage-hero span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ff5c79;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.lt-manage-sidebar-head h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-manage-room-list {
    padding: 0 6px 8px;
}

.lt-manage-room-list .form-selectgroup-item {
    width: 100%;
}

.lt-manage-room-list .room-manage-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 4px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 13px;
    color: rgba(248, 250, 252, .90);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        rgba(12, 16, 29, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.lt-manage-room-list .room-manage-row:hover {
    transform: translateX(2px);
    border-color: rgba(255, 49, 88, .34);
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .14), rgba(22, 199, 215, .08)),
        rgba(12, 16, 29, .86) !important;
}

.lt-manage-room-list .form-selectgroup-input:checked + .room-manage-label {
    border-color: rgba(255, 49, 88, .62);
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .28), rgba(22, 199, 215, .14)),
        rgba(17, 24, 39, .96) !important;
    box-shadow: 0 18px 34px rgba(255, 49, 88, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.lt-manage-room-list .room-manage-image {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 49, 88, .20);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .20);
}

.lt-manage-room-list .room-manage-image i {
    font-size: 20px;
}

.lt-manage-room-list .room-manage-name {
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
}

.lt-manage-room-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: rgba(226, 232, 240, .62);
    font-size: 11px;
    font-weight: 800;
}

.lt-manage-top-title {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, .54);
    font-weight: 900;
}

.lt-manage-page {
    padding: 18px clamp(14px, 3vw, 34px) 36px !important;
}

.lt-manage-hero {
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255, 49, 88, .26);
    border-radius: 22px;
    background:
        radial-gradient(circle at 82% 0%, rgba(22, 199, 215, .16), transparent 36%),
        radial-gradient(circle at 18% 0%, rgba(255, 49, 88, .24), transparent 40%),
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .024)),
        rgba(10, 14, 26, .90);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.lt-manage-hero h1 {
    margin: 8px 0 4px;
    color: #fff;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-manage-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(226, 232, 240, .72);
    font-size: 14px;
    font-weight: 750;
}

.lt-manage-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.lt-manage-hero-badges span {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(248, 250, 252, .90);
    background: rgba(255, 255, 255, .055);
    text-transform: none;
}

.lt-next-room-form.card {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 49, 88, .14), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(8, 12, 23, .98)) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* Panel basligi: baslik SOLDA, sekmeler SAGDA - tek kutu.
   Eskiden baslik ayri bir kutuydu (lt-manage-hero) ve sekmeler altta duruyordu;
   ikisi tek satirda birlestirildi. */
.lt-next-room-form .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 49, 88, .20) !important;
    background:
        radial-gradient(circle at 82% 0%, rgba(22, 199, 215, .14), transparent 42%),
        radial-gradient(circle at 12% 0%, rgba(255, 49, 88, .22), transparent 46%),
        rgba(255, 255, 255, .035) !important;
}

.lt-panel-title {
    flex: 1 1 240px;
    min-width: 0;
}

.lt-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff3158;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lt-next-room-form .card-header .lt-panel-title h1 {
    margin: 3px 0 2px;
    color: #fff;
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-next-room-form .card-header .lt-panel-title p {
    max-width: 560px;
    margin: 0;
    color: rgba(226, 232, 240, .66);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.lt-next-room-form #room-manage-tab {
    display: flex;
    flex: 0 0 auto;
    /* Kaydirma YOK: sekmelerin hepsi sabit ve gorunur kalir.
       Saga yaslamak icin margin-left:auto kullanilir. */
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
}

.lt-next-room-form #room-manage-tab .nav-link {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    color: rgba(226, 232, 240, .74);
    background: rgba(255, 255, 255, .045);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.lt-next-room-form #room-manage-tab .nav-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .20);
    background: rgba(255, 255, 255, .085);
}

.lt-next-room-form #room-manage-tab .nav-link.active {
    color: #fff;
    border-color: rgba(255, 49, 88, .62);
    background: linear-gradient(135deg, #ff2d55, #d01d3d);
    box-shadow: 0 10px 24px rgba(255, 49, 88, .26);
}

.lt-next-room-form .card-body {
    padding: clamp(16px, 2vw, 28px);
}

.lt-next-room-form .tab-pane h2,
.lt-roles-hero h2 {
    color: #fff;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-next-room-form .lt-form-note {
    display: block;
    color: rgba(226, 232, 240, .58);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.lt-next-room-form .form-label {
    margin-bottom: 6px;
    color: rgba(248, 250, 252, .88);
    font-weight: 950;
}

.lt-next-room-form .form-control,
.lt-next-room-form .form-select,
.lt-next-room-form textarea,
.lt-next-room-form select {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        rgba(4, 8, 18, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.lt-next-room-form .form-control:focus,
.lt-next-room-form textarea:focus,
.lt-next-room-form select:focus {
    border-color: rgba(22, 199, 215, .58) !important;
    box-shadow: 0 0 0 3px rgba(22, 199, 215, .13), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.lt-next-room-form .divide-y > div,
.lt-next-room-form .lt-plus-locked-row,
.lt-next-room-form .card-room-info > div > .row {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
}

.lt-next-room-form .divide-y {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.lt-next-room-form label.row {
    align-items: center;
    margin: 0;
}

.lt-next-room-form .card-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .035) !important;
}

.lt-next-room-form .update-chatroom {
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff3158, #16c7d7);
    box-shadow: 0 18px 34px rgba(255, 49, 88, .20);
    font-weight: 950;
}

.lt-room-bot-panel {
    display: grid;
    gap: 14px;
}

.lt-room-bot-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(255, 49, 88, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 80% 0%, rgba(22, 199, 215, .16), transparent 36%),
        radial-gradient(circle at 8% 0%, rgba(255, 49, 88, .20), transparent 40%),
        rgba(255, 255, 255, .035);
}

.lt-room-bot-hero span,
.lt-room-bot-card-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ff5c79;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.lt-room-bot-hero h2,
.lt-room-bot-card h3 {
    margin: 7px 0 4px;
    color: #fff;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-room-bot-hero p,
.lt-room-bot-card p {
    margin: 0;
    color: rgba(226, 232, 240, .66);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.lt-room-bot-orb {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #ff3158, #16c7d7);
    box-shadow: 0 18px 38px rgba(255, 49, 88, .20);
    font-size: 30px;
}

.lt-room-bot-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
}

.lt-room-bot-card {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .024)),
        rgba(7, 11, 22, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.lt-room-bot-card-head {
    margin-bottom: 12px;
}

.lt-room-bot-submit {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff3158, #16c7d7);
    box-shadow: 0 16px 32px rgba(255, 49, 88, .18);
    font-weight: 950;
}

.lt-room-bot-token {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(22, 199, 215, .28);
    border-radius: 16px;
    background: rgba(22, 199, 215, .08);
}

.lt-room-bot-token code {
    display: block;
    margin-top: 6px;
    color: #a5f3fc;
    word-break: break-all;
    font-weight: 900;
}

.lt-room-bot-perms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.lt-room-bot-perms label {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    color: rgba(248, 250, 252, .86);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 850;
}

.lt-room-bot-install-list {
    display: grid;
    gap: 9px;
}

.lt-room-bot-install {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.lt-room-bot-install-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 49, 88, .22);
}

.lt-room-bot-install strong,
.lt-room-bot-empty strong {
    display: block;
    color: #fff;
    font-weight: 950;
}

.lt-room-bot-install span,
.lt-room-bot-empty span {
    color: rgba(226, 232, 240, .62);
    font-size: 12px;
    font-weight: 750;
}

.lt-room-bot-install button {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: rgba(22, 199, 215, .24);
    font-weight: 900;
}

.lt-room-bot-install button.is-danger {
    background: rgba(255, 49, 88, .28);
}

.lt-room-bot-empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 18px;
    color: rgba(226, 232, 240, .70);
    background: rgba(255, 255, 255, .025);
}

.lt-room-bot-empty i {
    color: #ff5c79;
    font-size: 28px;
}

@media (max-width: 768px) {
    .lt-manage-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .lt-manage-hero-badges {
        justify-content: flex-start;
    }

    /* Dar ekranda baslik ve sekmeler alt alta gecer, sekmeler sola yaslanir. */
    .lt-next-room-form .card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .lt-next-room-form #room-manage-tab {
        justify-content: flex-start;
        width: 100%;
    }

    .lt-next-room-form .card-body {
        padding: 14px;
    }

    .lt-next-room-form label.row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 8px;
    }

    .lt-room-bot-hero,
    .lt-room-bot-grid {
        grid-template-columns: 1fr;
    }

    .lt-room-bot-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .lt-room-bot-perms,
    .lt-room-bot-install {
        grid-template-columns: 1fr;
    }
}

html.light .lt-sidebar-shortcut {
    border-color: rgba(215, 25, 53, .14);
    background: rgba(255, 255, 255, .92);
    color: #241015;
    box-shadow: 0 10px 24px rgba(60, 17, 26, .08);
}

html.light .lt-sidebar-shortcut i,
html.light .lt-sidebar-shortcut .ti {
    color: #d71935 !important;
    opacity: 1 !important;
}

html.light .lt-sidebar-shortcut:hover {
    background: #fff1f3;
    border-color: rgba(215, 25, 53, .28);
    color: #b9152d;
}

html.light .lt-dm-tools {
    border-color: rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .74);
}

html.light .lt-dm-filters button {
    background: rgba(15, 23, 42, .06);
    color: #64748b;
}

html.light .lt-dm-filters button i,
html.light .lt-add-friend button i,
html.light .lt-friend-request-actions i {
    color: inherit !important;
    opacity: 1 !important;
}

html.light .lt-add-friend .form-control,
html.light .right-panel .room-user-search,
html.light .right-panel .group-user-search {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .12) !important;
}

html.light .lt-friend-request-item {
    background: rgba(255, 255, 255, .88);
}

html.light .lt-friend-request-name b,
html.light .lt-friend-requests-head {
    color: #0f172a;
}

html.light .voice-channel-container {
    border-color: rgba(20, 184, 166, .22) !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(34, 197, 94, .12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .96)) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .70);
}

html.light .voice-name {
    color: #0f172a;
}

html.light .notifications-panel-card {
    border-color: rgba(15, 23, 42, .10) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

html.light .notifications-panel-card .card,
html.light .notifications-panel-card .card-header,
html.light .notifications-panel-card .card-body {
    color: #0f172a;
}

html.light .notifications-panel-card .dropdown-item,
html.light .notifications-panel-card .list-group-item {
    color: #334155;
}

html.light .notifications-panel-card i,
html.light .notifications-panel-card .ti,
html.light .notifications-panel-card .dropdown-item i,
html.light .notifications-panel-card .list-group-item i {
    color: #475569 !important;
    opacity: 1 !important;
}

html.light .notifications-panel-card .dropdown-item:hover,
html.light .notifications-panel-card .list-group-item:hover {
    background: rgba(20, 184, 166, .10);
    color: #0f172a;
}

html.light .right-panel #rpanel-tab {
    border-color: rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .76) !important;
}

html.light .right-panel #rpanel-tab .nav-link {
    color: #64748b;
}

html.light .right-panel #rpanel-tab .nav-link i,
html.light .right-panel #rpanel-tab .nav-link .ti,
html.light .right-panel .input-icon-addon i,
html.light .right-panel .input-icon-addon .ti {
    color: inherit !important;
    opacity: 1 !important;
}

html.light .right-panel #rpanel-tab .nav-link:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, .06);
}

html.light .right-panel #rpanel-tab .nav-link.active,
html.light .right-panel #rpanel-tab .nav-link.active i,
html.light .right-panel #rpanel-tab .nav-link.active .ti {
    color: #ffffff !important;
}

html.light .right-panel .room-user-search::placeholder,
html.light .right-panel .group-user-search::placeholder {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .lt-sidebar-shortcuts,
    .lt-dm-tools {
        margin-left: 8px;
        margin-right: 8px;
    }

    .lt-dm-filters button {
        font-size: 10px;
        padding: 7px 3px;
    }

    .lt-user-actions {
        grid-template-columns: 1fr;
    }

    .lt-user-actions #user-options-dropdown {
        max-width: none;
        width: 100%;
    }

    .notifications-panel-card {
        min-width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px);
    }
}

/* Whitoo DM control panel refresh */
.sidebar-private {
    --dm-red: #ff2b52;
    --dm-cyan: #18c7d8;
    --dm-panel-strong: rgba(20, 24, 38, .88);
    --dm-muted: rgba(226, 232, 240, .68);
}

.sidebar-private .topbar-private {
    padding: 14px 14px 10px;
    border-bottom: 0 !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 43, 82, .18), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(10, 14, 25, .62)) !important;
}

.sidebar-private .topbar-private > div,
.sidebar-private .topbar-private .input-icon {
    width: 100%;
}

.sidebar-private .topbar-private .form-control {
    width: 100%;
    height: 42px;
    padding-left: 15px;
    padding-right: 42px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
        rgba(10, 14, 25, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .18);
}

.sidebar-private .topbar-private .form-control::placeholder {
    color: rgba(226, 232, 240, .58);
}

.sidebar-private .topbar-private .input-icon-addon {
    right: 12px;
    color: rgba(255, 255, 255, .52);
}

.sidebar-private .lt-sidebar-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 14px 12px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 43, 82, .16), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
        rgba(12, 16, 29, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.sidebar-private .lt-sidebar-shortcut {
    position: relative;
    min-width: 0;
    min-height: 42px;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035)),
        var(--dm-panel-strong);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.sidebar-private .lt-sidebar-shortcut::after {
    content: "";
    position: absolute;
    inset: auto 10px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 43, 82, .58), transparent);
    opacity: 0;
    transition: opacity .18s ease;
}

.sidebar-private .lt-sidebar-shortcut i,
.sidebar-private .lt-sidebar-shortcut .ti {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    border-radius: 8px;
    color: #fff !important;
    background: rgba(255, 43, 82, .16);
    font-size: 12px;
}

.sidebar-private .lt-sidebar-shortcut:hover {
    color: #fff;
    border-color: rgba(255, 77, 109, .42);
    background:
        linear-gradient(135deg, rgba(255, 43, 82, .20), rgba(24, 199, 216, .10)),
        rgba(20, 24, 38, .95);
    box-shadow: 0 16px 34px rgba(255, 43, 82, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.sidebar-private .lt-sidebar-shortcut:hover::after {
    opacity: 1;
}

.sidebar-private .lt-cinema-link {
    grid-column: auto;
}

.sidebar-private .lt-market-link {
    grid-column: auto;
    width: 100%;
}

.sidebar-private .lt-dm-tools {
    margin: 0 14px 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 14%, rgba(24, 199, 216, .14), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02)),
        rgba(12, 16, 29, .74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.sidebar-private .lt-dm-filters {
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(2, 6, 23, .28);
}

.sidebar-private .lt-dm-filters button {
    min-height: 34px;
    border-radius: 12px;
    color: rgba(226, 232, 240, .72);
    background: transparent;
    font-size: 11px;
    font-weight: 950;
}

.sidebar-private .lt-dm-filters button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--dm-red), #ff6b86);
    box-shadow: 0 10px 24px rgba(255, 43, 82, .24);
}

.sidebar-private .lt-add-friend {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
}

.sidebar-private .lt-add-friend .form-control {
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        rgba(4, 8, 18, .56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.sidebar-private .lt-add-friend .form-control::placeholder {
    color: rgba(226, 232, 240, .55);
}

.sidebar-private .lt-add-friend-button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #15c6a7, #18c7d8);
    box-shadow: 0 12px 26px rgba(20, 184, 166, .22);
}

.sidebar-private .lt-friend-requests {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.sidebar-private .lt-friend-requests-head {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
}

.sidebar-private .lt-friend-requests-refresh {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .74);
    background: rgba(255, 255, 255, .08);
}

.sidebar-private .lt-friend-request-list small {
    display: block;
    padding: 2px 0 1px;
    color: var(--dm-muted);
    font-size: 12px;
}

.sidebar-private .lt-friend-request-item {
    grid-template-columns: 34px minmax(0, 1fr) 30px 30px;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(2, 6, 23, .35);
}

.sidebar-private .lt-friend-request-item img {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.sidebar-private .lt-friend-approve,
.sidebar-private .lt-friend-reject {
    width: 30px;
    height: 30px;
    border-radius: 11px;
}

.sidebar-private .private-list {
    padding: 0 10px 10px;
}

.sidebar-private .private-list .user-row {
    margin: 0 4px 8px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.sidebar-private .private-list .user-row:hover {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .055);
    transform: translateY(-1px);
}

@media (max-width: 991px) {
    .sidebar-private .topbar-private {
        padding: 12px 12px 8px;
    }

    .sidebar-private .lt-sidebar-shortcuts,
    .sidebar-private .lt-dm-tools {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (max-width: 520px) {
    .sidebar-private .lt-sidebar-shortcuts {
        gap: 8px;
        padding: 10px;
    }

    .sidebar-private .lt-sidebar-shortcut {
        min-height: 44px;
        padding: 0 10px;
        border-radius: 14px;
        font-size: 11px;
    }

    .sidebar-private .lt-sidebar-shortcut i,
    .sidebar-private .lt-sidebar-shortcut .ti {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        font-size: 15px;
    }

    .sidebar-private .lt-market-link {
        width: 100%;
    }

    .sidebar-private .lt-dm-tools {
        padding: 10px;
    }

    .sidebar-private .lt-dm-filters {
        grid-template-columns: 1fr;
    }

    .sidebar-private .lt-add-friend {
        grid-template-columns: minmax(0, 1fr) 40px;
    }
}

/* Right profile/media panel refresh */
.right-panel {
    --rp-red: #ff3158;
    --rp-cyan: #16c7d7;
    --rp-ink: #080d18;
}

.right-panel .ad-space.ad-rightbar-top {
    margin: 10px 10px 10px;
    padding: 3px;
    border: 1px solid rgba(255, 49, 88, .22);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .13), rgba(22, 199, 215, .06)),
        rgba(10, 14, 24, .82);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.right-panel .ad-space.ad-rightbar-top img,
.right-panel .ad-space.ad-rightbar-top iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px;
    object-fit: cover;
}

.right-panel #rpanel-tab {
    margin: 10px 12px 10px;
    padding: 7px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(22, 199, 215, .18), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        rgba(10, 16, 31, .78) !important;
}

.right-panel #rpanel-tab .nav-link {
    min-height: 38px;
    border-radius: 13px !important;
    color: rgba(219, 234, 254, .72);
}

.right-panel #rpanel-tab .nav-link i {
    font-size: 17px;
}

.right-panel #rpanel-tab .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--rp-red), #ff6b83) !important;
    box-shadow: 0 12px 26px rgba(255, 49, 88, .24), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.right-panel .user-info-panel {
    padding: 0 12px 14px !important;
}

.right-panel .user-info-panel .user-card,
.right-panel .user-info-panel .no-user-card {
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 22px !important;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 82% 10%, rgba(22, 199, 215, .14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        rgba(15, 16, 27, .88) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.right-panel .user-info-panel .active-user-cover {
    min-height: 106px;
    border-radius: 0 0 24px 24px;
    box-shadow: inset 0 -52px 58px rgba(8, 13, 24, .58);
}

.right-panel .user-info-panel .card-body {
    position: relative;
    padding: 0 16px 14px !important;
}

.right-panel .user-info-panel .user-image {
    width: 78px;
    height: 78px;
    margin-top: -39px;
    margin-bottom: 10px;
    border: 4px solid rgba(12, 16, 29, .92);
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 49, 88, .35);
}

.right-panel .user-info-panel .user-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0;
}

.right-panel .user-info-panel .text-muted {
    margin: 10px 0 12px !important;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: rgba(226, 232, 240, .76) !important;
    background: rgba(2, 6, 23, .26);
    font-size: 12px;
    line-height: 1.35;
}

.right-panel .user-info-panel hr {
    margin: 12px 0 !important;
    border-color: rgba(255, 255, 255, .10);
    opacity: 1;
}

.right-panel .user-info-panel .card-body > .row:not(:has(.user-badge)) {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin: 0 0 7px !important;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
}

.right-panel .user-info-panel .card-body > .row:not(:has(.user-badge)) > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.right-panel .user-info-panel label {
    margin: 0;
    color: rgba(226, 232, 240, .62);
    font-size: 10px !important;
    font-weight: 850;
    line-height: 1.1;
}

.right-panel .active-user-dob,
.right-panel .active-user-gender,
.right-panel .active-user-country {
    min-width: 0;
    color: #fff;
    font-size: 12px !important;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.right-panel .user-info-panel .card-footer {
    padding: 13px 14px 15px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)),
        rgba(5, 10, 20, .32) !important;
}

.right-panel .lt-user-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
}

.right-panel .lt-user-actions .btn {
    min-width: 0;
    min-height: 38px;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 900;
    white-space: normal;
    line-height: 1.15;
    overflow: visible;
    text-overflow: clip;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.right-panel .lt-user-friend-action {
    background: linear-gradient(135deg, var(--rp-red), #ff5c74) !important;
}

.right-panel #user-options-dropdown {
    background: linear-gradient(135deg, rgba(255, 49, 88, .95), rgba(22, 199, 215, .78)) !important;
}

.right-panel .dropdown-menu[aria-labelledby="user-options-dropdown"] {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(12, 16, 29, .98);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .34);
}

.right-panel .dropdown-menu[aria-labelledby="user-options-dropdown"] .dropdown-item {
    color: rgba(226, 232, 240, .88);
    font-weight: 750;
}

.right-panel .dropdown-menu[aria-labelledby="user-options-dropdown"] .dropdown-item:hover {
    color: #fff;
    background: rgba(255, 49, 88, .16);
}

.lt-feature-panel {
    position: fixed;
    inset: 0;
    z-index: 1088;
    pointer-events: none;
}

.lt-feature-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .42);
    opacity: 0;
    transition: opacity .18s ease;
}

.lt-feature-panel-card {
    position: absolute;
    top: 82px;
    left: clamp(78px, 17vw, 292px);
    width: min(370px, calc(100vw - 24px));
    max-height: calc(100vh - 110px);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    overflow: auto;
    color: #fff;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 49, 88, .24), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(22, 199, 215, .18), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028)),
        rgba(9, 13, 25, .96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(20px);
    transform: translateX(-16px) scale(.97);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}

.lt-feature-panel.is-open {
    pointer-events: auto;
}

.lt-feature-panel.is-open .lt-feature-panel-backdrop {
    opacity: 1;
}

.lt-feature-panel.is-open .lt-feature-panel-card {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.lt-feature-panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    color: rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .06);
}

.lt-feature-hero {
    padding: 6px 42px 0 0;
}

.lt-feature-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff3158, #16c7d7);
    box-shadow: 0 18px 34px rgba(255, 49, 88, .24);
}

.lt-feature-icon i {
    font-size: 26px;
}

.lt-feature-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #ff8ca0;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.lt-feature-hero h3 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
}

.lt-feature-hero p {
    margin: 10px 0 0;
    color: rgba(226, 232, 240, .76);
    font-size: 13px;
    line-height: 1.45;
}

.lt-feature-mini-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 18px 0;
}

.lt-feature-mini-grid span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    color: rgba(241, 245, 249, .88);
    background: rgba(255, 255, 255, .045);
    font-size: 12px;
    font-weight: 850;
}

.lt-feature-mini-grid i {
    color: #23d6e3;
}

.lt-feature-action {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, #ff3158, #16c7d7);
    box-shadow: 0 18px 36px rgba(255, 49, 88, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
    font-size: 13px;
    font-weight: 950;
}

.lt-feature-action:hover {
    filter: brightness(1.06);
}

.whitoo-local-gif {
    padding: 5px !important;
}

.whitoo-local-gif .gif-preview {
    width: 100%;
    min-height: 96px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    object-fit: cover;
    background: rgba(8, 13, 24, .72);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.whitoo-local-gif:hover .gif-preview {
    border-color: rgba(255, 49, 88, .42);
    box-shadow: 0 14px 34px rgba(255, 49, 88, .16);
}

.whitoo-gif-empty {
    width: 100%;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(226, 232, 240, .72);
    font-weight: 850;
}

.room-list {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.room-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.room-list::-webkit-scrollbar-thumb,
.room-list::-webkit-scrollbar-track {
    background: transparent !important;
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] {
    width: min(248px, calc(100vw - 22px));
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 49, 88, .20), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(22, 199, 215, .16), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .024)),
        rgba(10, 12, 22, .96);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(20px);
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 42%);
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .dropdown-item {
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 1px 0;
    padding: 6px 9px;
    border-radius: 12px;
    color: rgba(248, 250, 252, .92);
    background: transparent;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .dropdown-item:hover {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .18), rgba(22, 199, 215, .10)),
        rgba(255, 255, 255, .055);
    transform: translateX(2px);
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .dropdown-item i:not(.ti-circle-filled) {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    margin: 0 !important;
    border-radius: 9px;
    color: #ff4f70;
    background: rgba(255, 49, 88, .14);
    font-size: 15px;
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .change-status {
    min-height: 31px;
    padding: 5px 9px;
    font-size: 12px;
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .change-status .ti-circle-filled {
    width: 16px;
    margin: 0 !important;
    font-size: 16px;
    filter: drop-shadow(0 0 6px currentColor);
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .change-status:hover {
    background: rgba(255, 255, 255, .055);
    transform: translateX(0);
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .dropdown-divider,
.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] hr.dropdown-divider {
    margin: 7px 0;
    border-color: rgba(255, 255, 255, .12);
    opacity: 1;
}

.user-bottom-menu .lt-info-tabs {
    position: relative;
    margin: 5px 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.user-bottom-menu .lt-info-tabs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: rgba(226, 232, 240, .72);
    font-size: 11px;
    font-weight: 900;
}

.user-bottom-menu .lt-info-tabs-title i {
    color: #ff4f70;
}

.user-bottom-menu .lt-info-tabs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.user-bottom-menu .lt-info-tabs-grid a {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid rgba(22, 199, 215, .18);
    border-radius: 10px;
    color: #eaf6ff;
    background: rgba(12, 18, 32, .70);
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

.user-bottom-menu .lt-info-tabs-grid a:hover {
    border-color: rgba(255, 49, 88, .38);
    background: rgba(255, 49, 88, .12);
}

.user-bottom-menu .lt-contact-fixed {
    color: #fff !important;
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] a[href*="logout"] {
    margin-top: 2px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 49, 88, .20), rgba(255, 49, 88, .08));
}

.user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] a[href*="logout"] i {
    color: #fff !important;
    background: linear-gradient(135deg, #ff3158, #ff6b83) !important;
}

@media (max-width: 520px) {
    .user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] {
        width: min(256px, calc(100vw - 18px));
        padding: 9px;
        border-radius: 18px;
    }

    .user-bottom-menu .dropdown-menu[aria-labelledby="dropdownUserbtm"] .dropdown-item {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .right-panel .ad-space.ad-rightbar-top,
    .right-panel #rpanel-tab {
        margin-left: 10px;
        margin-right: 10px;
    }

    .right-panel .user-info-panel {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .lt-feature-panel-card {
        top: 70px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 92px);
    }
}

@media (max-width: 520px) {
    .right-panel .user-info-panel .active-user-cover {
        min-height: 92px;
    }

    .right-panel .user-info-panel .user-image {
        width: 68px;
        height: 68px;
        margin-top: -34px;
        border-radius: 21px;
    }

    .right-panel .user-info-panel .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .right-panel .lt-user-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ARKADAS LISTESI: ekranin altina kadar uzasin, icinde kaysin
   Onceden .lt-dm-tools blok duzenindeydi; kart 887px'e tasip
   goruntu alaninin disina cikiyordu ve .private-list overflow:hidden
   oldugu icin kalan isimlere hic ulasilamiyordu. Artik kart kalan
   alani doldurur, liste kendi icinde kayar; pencere buyuse de
   kucultulse de yapi sabit kalir.
   (Mevcut kurallar !important tasidigi icin burada da gerekli.)
   ============================================================ */
body.incallx .lt-dm-tools{
  display:flex!important;flex-direction:column!important;
  height:100%!important;min-height:0!important;
}
body.incallx .lt-dm-tools>.wcx-friends-card{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;
  display:flex!important;flex-direction:column!important;
}
body.incallx .wcx-friends-card>.wcx-friend-search-row,
body.incallx .wcx-friends-card>.lt-friend-requests,
body.incallx .wcx-friends-card>.lt-dm-filters{flex:0 0 auto!important}
body.incallx .wcx-friends-card>.private-list{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}
body.incallx .wcx-friends-card>.private-list::-webkit-scrollbar{width:7px}
body.incallx .wcx-friends-card>.private-list::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.28)}
body.incallx .wcx-friends-card>.private-list::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.45)}
body.incallx .wcx-friends-card>.private-list::-webkit-scrollbar-track{background:transparent}

/* Yukaridaki kurallari
   "body.incallx .sidebar-private .wcx-friends-card .private-list{overflow:hidden!important}"
   kurali eziyordu (bir sinif daha spesifik). Ozgullugu yukseltiyoruz. */
body.incallx .sidebar-private .lt-dm-tools{
  display:flex!important;flex-direction:column!important;
  height:100%!important;min-height:0!important;
}
body.incallx .sidebar-private .lt-dm-tools>.wcx-friends-card{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  display:flex!important;flex-direction:column!important;
}
body.incallx .sidebar-private .lt-dm-tools .wcx-friends-card>.private-list{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}

/* Ayni seciciyle (body.incallx .sidebar-private .lt-dm-tools) uc kural var;
   sonuncusu display:block!important ve esit ozgullukte oldugu icin kazaniyordu.
   .channel-bar eklenerek ozgulluk bir sinif yukseltildi. */
body.incallx .channel-bar.sidebar-private .lt-dm-tools{
  display:flex!important;flex-direction:column!important;
  height:100%!important;min-height:0!important;
}
body.incallx .channel-bar.sidebar-private .lt-dm-tools>.wcx-friends-card{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  display:flex!important;flex-direction:column!important;
}
body.incallx .channel-bar.sidebar-private .lt-dm-tools .wcx-friends-card>.private-list{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}

/* .lt-dm-tools uzerinde sabit max-height:640px vardi: ekran buyuyunce
   altta bosluk kaliyor, kuculunce dock'un ustune biniyordu.
   Kapsayici flex kolona alinip sinir kaldirildi -> panel her ekran
   boyutunda alta kadar uzanir, ustteki bloklar sabit kalir. */
/* DIKKAT: display:flex!important yazilirsa uygulamanin bu paneli gizleyen
   mantigi ezilir ve DM/arkadaslar paneli SUNUCU icinde de gorunur.
   Bu yuzden yalnizca uygulama paneli actiginda (inline display verildiginde)
   flex kolon uygulanir. */
body.incallx .channel-bar.sidebar-private[style*="display: block"],
body.incallx .channel-bar.sidebar-private[style*="display:block"]{
  display:flex!important;flex-direction:column!important;min-height:0!important;
}
body.incallx .channel-bar.sidebar-private{
  flex-direction:column!important;min-height:0!important;
}
body.incallx .channel-bar.sidebar-private>.topbar,
body.incallx .channel-bar.sidebar-private>.lt-sidebar-shortcuts,
body.incallx .channel-bar.sidebar-private>.wcx-tools-toggle{
  flex:0 0 auto!important;
}
body.incallx .channel-bar.sidebar-private>.lt-dm-tools{
  flex:1 1 auto!important;height:auto!important;
  max-height:none!important;min-height:0!important;
}


/* ════════════════════════════════════════════════════════════
   DOCK KAYBOLMASININ GERCEK SEBEBI VE COZUMU
   Yapi:  #sidebar-wrapper (display:block, sabit yukseklik,
          overflow:hidden)
            > .channel-bar        (kanal/arkadas listesi)
            > #voice-channel-container
            > .channel-list-bottom  <-- DOCK
   Arkadas listesi icin .channel-bar flex kolona alinip
   .lt-dm-tools'a height:100% verilince kanal cubugu wrapper'in
   TUM yuksekligini kapliyor, dock asagi tasip overflow:hidden
   tarafindan kirpiliyordu (silinmiyor, gorunmez oluyordu).
   Cozum: wrapper'i flex kolon yap; liste kalan alani alsin,
   dock sabit yukseklikte en altta kalsin.
   ════════════════════════════════════════════════════════════ */
body.incallx #sidebar-wrapper,
body.incallx .sidebar-wrapper{
  display:flex!important;flex-direction:column!important;
  min-height:0!important;overflow:hidden!important;
}
/* kanal / arkadas listesi: kalan alani alir */
body.incallx #sidebar-wrapper>.channel-bar,
body.incallx .sidebar-wrapper>.channel-bar{
  flex:1 1 auto!important;min-height:0!important;
}
/* dock: her zaman en altta, sabit, sikismaz */
body.incallx #sidebar-wrapper>.channel-list-bottom,
body.incallx .sidebar-wrapper>.channel-list-bottom{
  flex:0 0 auto!important;order:99!important;
  min-height:56px!important;
}
/* ses paneli dock'un hemen ustunde, sabit */
body.incallx #sidebar-wrapper>#voice-channel-container,
body.incallx .sidebar-wrapper>#voice-channel-container{
  flex:0 0 auto!important;order:98!important;
}

/* ════════════════════════════════════════════════════════════
   DOCK GORUNUMU
   Kullanici adi "@..." diye kesiliyordu: isim alani flex payi
   almadigi icin sifira sikisiyordu. Alan flex:1 + min-width:0
   ile duzeltildi, butonlar sabit genislikte.
   ════════════════════════════════════════════════════════════ */
body.incallx .channel-list-bottom{
  align-items:center!important;gap:8px!important;padding:8px 9px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(180deg,rgba(14,18,26,.92),rgba(9,12,18,.98))!important;
}
/* isim alani: kalan yeri alsin, tasarsa uc nokta */
body.incallx .channel-list-bottom .user-bottom-menu{
  flex:1 1 auto!important;min-width:0!important;
}
body.incallx .channel-list-bottom .user-bottom-trigger{
  display:flex!important;align-items:center!important;gap:9px!important;
  width:100%!important;min-width:0!important;padding:0!important;margin:0!important;
}
body.incallx .channel-list-bottom .user-bottom-trigger::after{display:none!important}
body.incallx .channel-list-bottom .user-bottom-avatar{flex:0 0 auto!important}
body.incallx .channel-list-bottom .user-bottom-avatar img{
  width:32px!important;height:32px!important;border-radius:11px!important;object-fit:cover!important;
}
body.incallx .channel-list-bottom .username-bottom,
body.incallx .channel-list-bottom .user-bottom-trigger>span:not(.user-bottom-avatar){
  flex:1 1 auto!important;min-width:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#f2f6fb!important;font-size:12.5px!important;font-weight:750!important;
}
/* butonlar: sabit, sikismaz */
body.incallx .channel-list-bottom .lt-account-dock-actions{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:1px!important;
  margin-left:auto!important;
}
body.incallx .channel-list-bottom .wcx-dock-btn{
  width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;
  display:grid!important;place-items:center!important;flex:0 0 auto!important;
  border:0!important;border-radius:9px!important;background:transparent!important;
  color:#9dabbd!important;font-size:16px!important;line-height:1!important;
  transition:background .15s ease,color .15s ease;
}
body.incallx .channel-list-bottom .wcx-dock-btn:hover{
  background:rgba(255,255,255,.075)!important;color:#fff!important;
}

/* --- Dock: isme yeterli alan ---
   Olculdu: dock 259px, butonlar 134px yiyordu, isme 44px kaliyordu
   ("@test" -> "@..."). Butonlar 28px'e indirildi, ayraç bosluğu
   kaldirildi; isme ~80px kaliyor. */
body.incallx .channel-list-bottom .lt-account-dock-actions{gap:0!important}
body.incallx .channel-list-bottom .wcx-dock-btn{
  width:28px!important;height:28px!important;min-width:28px!important;font-size:15px!important;
}
body.incallx .channel-list-bottom .lt-account-dock-actions [data-settings-open]{
  margin-left:4px!important;
}
body.incallx .channel-list-bottom .lt-account-dock-actions [data-settings-open]::before{display:none!important}
body.incallx .channel-list-bottom .username-bottom{
  min-width:76px!important;font-size:12px!important;
}

/* ---------------------------------------------------------------
   Sunucu secimi paneli: hizalama + yatay kaydirma duzeltmesi.
   Tabler'in .form-selectgroup kuralinda 'margin: 0 -.5rem -.5rem 0'
   var; bu negatif sag margin kartlari panelin disina tasiriyor ve
   .sidebar-height-fix'teki 'overflow:auto' yuzunden alt tarafta
   gereksiz bir yatay kaydirma cubugu cikiyordu.
   --------------------------------------------------------------- */
.lt-manage-room-list .form-selectgroup {
    margin: 0;
    width: 100%;
    display: flex;
}

.lt-manage-room-list .form-selectgroup-item {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Kartlar panelle ayni genislikte ve ayni hizada baslasin. */
.lt-manage-room-list .room-manage-row {
    width: 100%;
    min-width: 0;
    /* 2026-08-11: 5px -> 3px. Bu kural dosyada DAHA SONRA geldigi icin
       yukaridaki kompaktlamanin margin degerini geri aliyordu. */
    margin: 3px 0;
    box-sizing: border-box;
}

/* Uzun sunucu adi tasmasin, uc nokta ile kisalsin. */
.lt-manage-room-list .room-manage-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dikey liste yatay kaydirilmaz. */
.sidebar-manage.sidebar-height-fix,
.sidebar-manage .lt-manage-room-list {
    overflow-x: hidden;
}

/* ============================================================
   SUNUCU SECIMI LISTESI — 2026-08-11 tutarli gorunum

   Sorun: "Oda Ekle" agir kirmizi dolgulu bir blok gibi duruyordu, sunucu
   satirlari baska bir dille cizilmisti ve secili durum kirmizi dolguyla
   veriliyordu. Uc ayri gorsel dil yan yanaydi.

   Karar:
     - "Oda Ekle" bir EYLEM: kesikli cerceve, dolgu yok. Bir sunucu gibi
       gorunmemesi gerekir cunku sunucu degil.
     - Sunucular tek tip satir: ayni zemin, ayni cerceve, ayni yaricap.
     - SECILI durum dolguyla degil SOL VURGU CIZGISIYLE belirtilir; dolgu
       hem agir duruyor hem "Oda Ekle" ile karisiyordu.
   ============================================================ */
.lt-manage-room-list .form-selectgroup-item{margin:0 0 4px!important}
.lt-manage-room-list .form-selectgroup-input{position:absolute;opacity:0;pointer-events:none}

/* ortak satir */
.lt-manage-room-list .room-manage-row{
  position:relative;
  min-height:44px!important;
  gap:9px!important;
  margin:0!important;
  padding:7px 9px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.022)!important;
  box-shadow:none!important;
  transition:border-color .15s,background .15s!important;
}
.lt-manage-room-list .room-manage-row:hover{
  transform:none!important;
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.045)!important;
}

/* secili sunucu: sol vurgu cizgisi */
.lt-manage-room-list .form-selectgroup-input:checked + .room-manage-row{
  border-color:rgba(255,49,88,.34)!important;
  background:rgba(255,49,88,.055)!important;
}
.lt-manage-room-list .form-selectgroup-input:checked + .room-manage-row::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:#ff3158;
}

/* "Oda Ekle" — eylem satiri, sunucu gibi gorunmez */
.lt-manage-room-list .form-selectgroup-item:first-child .room-manage-row{
  border-style:dashed!important;
  border-color:rgba(255,49,88,.30)!important;
  background:transparent!important;
}
.lt-manage-room-list .form-selectgroup-item:first-child .room-manage-row:hover{
  border-color:rgba(255,49,88,.55)!important;
  background:rgba(255,49,88,.05)!important;
}
.lt-manage-room-list .form-selectgroup-item:first-child .form-selectgroup-input:checked + .room-manage-row::before{
  display:none;   /* eylem satirinda vurgu cizgisi olmaz */
}
.lt-manage-room-list .form-selectgroup-item:first-child .room-manage-image{
  background:rgba(255,49,88,.12)!important;
  color:#ff5c79!important;
}
.lt-manage-room-list .form-selectgroup-item:first-child .room-manage-name{
  color:#ff5c79!important;font-weight:800!important;
}

/* avatar ve metin */
.lt-manage-room-list .room-manage-image{
  width:30px!important;height:30px!important;flex:none!important;
  border-radius:9px!important;display:grid!important;place-items:center!important;
}
.lt-manage-room-list .room-manage-image img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
.lt-manage-room-list .room-manage-name{
  font-size:13px!important;font-weight:650!important;line-height:1.25!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lt-manage-room-list .lt-manage-room-meta{
  display:flex!important;align-items:center;gap:5px;margin-top:1px!important;
  font-size:11px!important;color:rgba(203,213,225,.60)!important;
}
.lt-manage-room-list .lt-manage-room-meta i{font-size:12px;opacity:.8}

/* ===== whitoo-next.css ===== */
:root {
    --ltx-bg: #070b16;
    --ltx-panel: #0d1424;
    --ltx-panel-2: #111827;
    --ltx-card: rgba(17, 24, 39, .82);
    --ltx-line: rgba(148, 163, 184, .16);
    --ltx-text: #eef6ff;
    --ltx-muted: #94a3b8;
    --ltx-cyan: #22d3ee;
    --ltx-teal: #14b8a6;
    --ltx-blue: #2563eb;
    --ltx-gold: #facc15;
}

body {
    background: radial-gradient(circle at top left, rgba(34, 211, 238, .10), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .12), transparent 34%),
        var(--ltx-bg) !important;
}

.room-bar {
    width: 76px;
    padding: 8px 0;
    background: linear-gradient(180deg, #080d19 0%, #0b1221 100%) !important;
    border-right: 1px solid rgba(34, 211, 238, .12);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}

.mini-brand img {
    filter: drop-shadow(0 8px 18px rgba(34, 211, 238, .28));
}

.mini-brand-seperator {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .55), transparent) !important;
    width: 42px;
    height: 1px;
}

.room-list {
    padding: 4px 0 8px;
    scrollbar-width: thin;
}

.room-list .room-list-item,
.private-messages,
.action-item {
    transform: translateZ(0);
}

.chatroom-item,
.private-messages .private-item,
.action-item {
    width: 50px;
    height: 50px;
    border-radius: 17px !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .96)) !important;
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .20);
}

.chatroom-item:hover,
.private-messages .private-item:hover,
.action-item:hover {
    border-color: rgba(34, 211, 238, .45);
    box-shadow: 0 14px 28px rgba(34, 211, 238, .12);
    transform: translateY(-1px);
}

.room-list-item.active .chatroom-item,
.private-messages.active .private-item,
.action-item.active {
    border-color: rgba(34, 211, 238, .72);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .12), 0 14px 30px rgba(37, 99, 235, .20);
}

.pill {
    background: linear-gradient(180deg, var(--ltx-cyan), var(--ltx-blue)) !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
}

.sidebar-wrapper,
.channel-bar,
.channel-list,
.rightbar-wrapper {
    background: rgba(13, 20, 36, .92) !important;
    border-color: var(--ltx-line) !important;
}

.topbar,
.topbar-channels,
.topbar-private,
.navbar.topbar {
    background: rgba(7, 11, 22, .78) !important;
    border-bottom: 1px solid var(--ltx-line) !important;
    backdrop-filter: blur(16px);
}

.room-name,
.room-title,
.top-channel-name,
.channel-cat-name,
.channel-name {
    color: var(--ltx-text) !important;
}

.channel-container,
.height-scroll,
.height-scroll-rpanel,
.messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, .35) transparent;
}

.channel-cat {
    color: var(--ltx-muted) !important;
    letter-spacing: .02em;
}

.channel-item,
.channel-cat,
.user-row,
.room-manage-row {
    border-radius: 10px;
    margin: 2px 8px;
}

.channel-item:hover,
.channel-item.active,
.channel-cat:hover,
.user-row:hover,
.room-manage-row:hover {
    background: rgba(34, 211, 238, .10) !important;
    color: var(--ltx-text) !important;
}

.messages {
    background: linear-gradient(180deg, rgba(7, 11, 22, .72), rgba(9, 14, 27, .96)) !important;
    padding: 18px;
}

.cht .message-data {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, .12);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.cht.replies .message-data {
    background: rgba(17, 24, 39, .82) !important;
}

.cht.sent .message-data {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
}

.editor-container {
    min-height: 52px;
    margin: 12px 16px 16px;
    border-radius: 18px !important;
    border: 1px solid rgba(34, 211, 238, .22);
    background: rgba(7, 11, 22, .90) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.editor-icon,
.attachment-col.dropup {
    color: #b7c7d8 !important;
}

.editor-icon:hover,
.attachment-col.dropup:hover {
    color: var(--ltx-cyan) !important;
}

.form-control,
.form-select,
.note-editor.note-frame {
    border-radius: 10px !important;
}


.lt-next-room-form.card,
.lt-next-channel-modal .modal-content {
    border: 1px solid rgba(34, 211, 238, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(8, 13, 25, .96));
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    overflow: hidden;
}

.lt-next-room-form .card-header,
.lt-next-channel-modal .modal-header {
    background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(37, 99, 235, .16));
    border-bottom: 1px solid rgba(34, 211, 238, .14);
}

.lt-next-room-form .nav-tabs .nav-link {
    border: 0;
    border-radius: 10px;
    color: var(--ltx-muted);
    font-weight: 700;
}

.lt-next-room-form .nav-tabs .nav-link.active {
    background: rgba(34, 211, 238, .14);
    color: var(--ltx-text);
}

.lt-next-room-form h2,
.lt-next-channel-modal .modal-title {
    color: var(--ltx-text);
}

.lt-form-note {
    display: block;
    margin-top: 5px;
    color: var(--ltx-muted);
    font-size: 12px;
    line-height: 1.45;
}

.lt-next-room-form .form-label,
.lt-next-channel-modal .form-label {
    color: #dbeafe;
    font-weight: 700;
}

.lt-next-room-form .form-control,
.lt-next-room-form .form-select,
.lt-next-channel-modal .form-control,
.lt-next-channel-modal .form-select {
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(2, 6, 23, .42) !important;
    color: var(--ltx-text) !important;
}

.lt-next-room-form textarea.form-control {
    min-height: 112px;
}

.lt-next-channel-modal .form-selectgroup-label {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .14);
    background: rgba(15, 23, 42, .58);
}

.lt-next-channel-modal .form-selectgroup-input:checked + .form-selectgroup-label {
    border-color: rgba(34, 211, 238, .55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .10);
}

@media (max-width: 768px) {
    .room-bar {
        width: 64px;
    }

    .chatroom-item,
    .private-messages .private-item,
    .action-item {
        width: 44px;
        height: 44px;
        border-radius: 14px !important;
    }

    .messages {
        padding: 12px;
        min-width: 0;
    }

    .editor-container {
        margin: 10px;
        border-radius: 14px !important;
    }
}

/* Theme guard: keep the modern layer from forcing dark colors in light mode. */
html.light {
    --ltx-bg: #f4f7fb;
    --ltx-panel: #ffffff;
    --ltx-panel-2: #f8fafc;
    --ltx-card: rgba(255, 255, 255, .92);
    --ltx-line: rgba(15, 23, 42, .10);
    --ltx-text: #0f172a;
    --ltx-muted: #64748b;
}

html.light body {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
    color: #0f172a !important;
}

html.light .room-bar {
    background: linear-gradient(180deg, #f8fafc 0%, #edf3fb 100%) !important;
    border-right-color: rgba(15, 23, 42, .10) !important;
}

html.light .sidebar-wrapper,
html.light .channel-bar,
html.light .channel-list,
html.light .rightbar-wrapper {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
}

html.light .topbar,
html.light .topbar-channels,
html.light .topbar-private,
html.light .navbar.topbar {
    background: rgba(255, 255, 255, .88) !important;
    border-bottom-color: rgba(15, 23, 42, .10) !important;
}

html.light .room-name,
html.light .room-title,
html.light .top-channel-name,
html.light .channel-cat-name,
html.light .channel-name {
    color: #0f172a !important;
}

html.light .chatroom-item,
html.light .private-messages .private-item,
html.light .action-item {
    background: linear-gradient(145deg, #ffffff, #eef4fb) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    color: #334155 !important;
}

html.light .room-bar .ti,
html.light .room-bar .action-item i,
html.light .private-messages .private-item i,
html.light .manage-room i,
html.light .explore-room i,
html.light .radio-container i,
html.light .mini-brand i {
    color: #334155 !important;
    opacity: 1 !important;
}

html.light .chatroom-item:hover,
html.light .private-messages .private-item:hover,
html.light .action-item:hover {
    color: #0f172a !important;
}

html.light .chatroom-item:hover i,
html.light .private-messages .private-item:hover i,
html.light .action-item:hover i {
    color: #0f172a !important;
}

html.light .room-list-item.active .chatroom-item i,
html.light .private-messages.active .private-item i,
html.light .action-item.active i {
    color: #0891b2 !important;
}

html.light .topbar i,
html.light .topbar .ti,
html.light .navbar.topbar i,
html.light .navbar.topbar .ti,
html.light .topbar .nav-link,
html.light .topbar .link-dark,
html.light .topbar .btn,
html.light .btn-ghost-dark,
html.light .rightbarToggle i {
    color: #475569 !important;
    opacity: 1 !important;
}

html.light .topbar a:hover i,
html.light .topbar button:hover i,
html.light .topbar .nav-link:hover,
html.light .btn-ghost-dark:hover {
    color: #0f172a !important;
}

html.light .join-voice i,
html.light .join-voice .ti {
    color: #16a34a !important;
}

html.light .messages {
    background: linear-gradient(180deg, #f8fbff, #edf3fb) !important;
}

html.light .cht.replies .message-data {
    background: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
}

html.light .editor-container {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(15, 23, 42, .12) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

html.light .editor-icon,
html.light .attachment-col.dropup {
    color: #64748b !important;
}

html.light .editor-container i,
html.light .editor-icon i,
html.light .attachment-col i,
html.light .message-editor-buttons i {
    color: #64748b !important;
    opacity: 1 !important;
}

html.light .editor-icon:hover,
html.light .attachment-col.dropup:hover,
html.light .message-editor-buttons button:hover i {
    color: #0f172a !important;
}

html.light .send-message i,
html.light .send-msg i,
html.light .chat-send-button i,
html.light button[type="submit"].btn-primary i,
html.light .btn-primary i {
    color: #ffffff !important;
}

html.light .lt-next-room-form h2,
html.light .lt-next-channel-modal .modal-title,
html.light .lt-next-room-form .nav-tabs .nav-link.active {
    color: #0f172a !important;
}

html.light .lt-next-room-form .form-label,
html.light .lt-next-channel-modal .form-label {
    color: #334155 !important;
}

html.light .lt-next-room-form .form-control,
html.light .lt-next-room-form .form-select,
html.light .lt-next-channel-modal .form-control,
html.light .lt-next-channel-modal .form-select,
html.light .form-control,
html.light .form-select {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .14) !important;
}

html.light .lt-next-channel-modal .form-selectgroup-label {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, .12) !important;
    color: #0f172a !important;
}

html.light .card,
html.light .modal-content,
html.light .dropdown-menu,
html.light .ltplus-checkout-card,
html.light .ltplus-benefit-panel,
html.light .ltplus-referral-card,
html.light .Whitoo AI-panel {
    background: rgba(255, 255, 255, .96) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10) !important;
}

html.light .card-header,
html.light .modal-header {
    background: rgba(248, 250, 252, .92) !important;
    border-bottom-color: rgba(15, 23, 42, .10) !important;
}

html.light .navbar.navbar-scroll,
html.light header .navbar {
    background: rgba(255, 255, 255, .88) !important;
    border-bottom-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 12px 38px rgba(15, 23, 42, .08);
}

html.light .navbar .nav-link {
    color: rgba(15, 23, 42, .78) !important;
}

html.light .navbar .nav-link:hover,
html.light .navbar .nav-link.active {
    background: rgba(20, 184, 166, .10) !important;
    color: #0f172a !important;
}

html.light .footer {
    background: rgba(255, 255, 255, .74) !important;
    border-top-color: rgba(15, 23, 42, .10) !important;
    color: #64748b !important;
}

html.light .room-loop,
html.light .room-item,
html.light .chat-room-card,
html.light .room-card {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10) !important;
}

html.light ::placeholder {
    color: rgba(100, 116, 139, .70) !important;
}

/* Whitoo manage studio final layer */
.lt-manage-room-list .room-manage-row {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        rgba(12, 16, 29, .72) !important;
}

.lt-manage-room-list .room-manage-row:hover,
.lt-manage-room-list .form-selectgroup-input:checked + .room-manage-label {
    border-color: rgba(255, 49, 88, .54) !important;
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .26), rgba(22, 199, 215, .14)),
        rgba(17, 24, 39, .96) !important;
}

.lt-next-room-form.card {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 49, 88, .14), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(8, 12, 23, .98)) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.lt-next-room-form .card-header {
    /* Baslik SOLDA, sekmeler SAGDA - tek satir. */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    background:
        radial-gradient(circle at 82% 0%, rgba(22, 199, 215, .14), transparent 42%),
        radial-gradient(circle at 12% 0%, rgba(255, 49, 88, .22), transparent 46%),
        rgba(255, 255, 255, .035) !important;
    border-bottom: 1px solid rgba(255, 49, 88, .20) !important;
}

.lt-next-room-form #room-manage-tab .nav-link {
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 999px !important;
    color: rgba(226, 232, 240, .72) !important;
    background: rgba(255, 255, 255, .045) !important;
}

.lt-next-room-form #room-manage-tab .nav-link.active {
    color: #fff !important;
    border-color: rgba(255, 45, 85, .62) !important;
    background: linear-gradient(135deg, #ff2d55, #d01d3d) !important;
    box-shadow: 0 10px 24px rgba(255, 49, 88, .26) !important;
}

.lt-next-room-form .form-control,
.lt-next-room-form .form-select,
.lt-next-room-form textarea,
.lt-next-room-form select {
    border-radius: 14px !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        rgba(4, 8, 18, .72) !important;
}

/* Whitoo Refresh 2026051902 */

:root {
    --woo-bg: #070a12;
    --woo-rail: #090d18;
    --woo-panel: rgba(12, 18, 31, .94);
    --woo-panel-2: rgba(16, 24, 39, .96);
    --woo-card: rgba(20, 30, 48, .78);
    --woo-line: rgba(148, 163, 184, .16);
    --woo-line-strong: rgba(45, 212, 191, .34);
    --woo-text: #f7fbff;
    --woo-muted: #9fb0c6;
    --woo-soft: #cbd5e1;
    --woo-teal: #2dd4bf;
    --woo-cyan: #38bdf8;
    --woo-red: #ef233c;
    --woo-gold: #f5c451;
    --woo-radius: 8px;
    --woo-shadow: 0 18px 46px rgba(0, 0, 0, .30);
}

body.incallx {
    background:
        linear-gradient(180deg, rgba(45, 212, 191, .08), transparent 260px),
        linear-gradient(135deg, #070a12 0%, #0c1220 48%, #080b14 100%) !important;
    color: var(--woo-text);
}

body.incallx #wrapper,
body.incallx .wrapper {
    background: transparent;
}

body.incallx .room-bar {
    width: 74px;
    padding: 10px 0;
    background: linear-gradient(180deg, #070a12, #0b101d) !important;
    border-right: 1px solid rgba(45, 212, 191, .14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03);
}

body.incallx .mini-brand {
    padding: 8px 0 12px;
}

body.incallx .mini-brand img {
    max-width: 44px;
    max-height: 44px;
    filter: drop-shadow(0 10px 22px rgba(45, 212, 191, .28));
}

body.incallx .mini-brand-seperator {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 212, 191, .58), transparent) !important;
}

body.incallx .room-list {
    margin-top: 12px;
    padding: 0 0 8px;
}

body.incallx .chatroom-item,
body.incallx .private-messages .private-item,
body.incallx .action-item {
    width: 50px;
    height: 50px;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .14);
    background: linear-gradient(145deg, rgba(20, 30, 48, .96), rgba(9, 13, 24, .96)) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .26);
}

body.incallx .chatroom-item:hover,
body.incallx .private-messages .private-item:hover,
body.incallx .action-item:hover,
body.incallx .room-list-item.active .chatroom-item,
body.incallx .private-messages.active .private-item,
body.incallx .action-item.active {
    border-color: var(--woo-line-strong);
    background: linear-gradient(145deg, rgba(20, 184, 166, .22), rgba(15, 23, 42, .96)) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .08), 0 16px 30px rgba(0, 0, 0, .34);
}

body.incallx .room-bar .ti,
body.incallx .private-item i,
body.incallx .action-item i {
    color: #dbeafe !important;
}

body.incallx .pill {
    width: 4px !important;
    background: linear-gradient(180deg, var(--woo-teal), var(--woo-cyan)) !important;
    border-radius: 0 999px 999px 0 !important;
}

body.incallx .sidebar-wrapper,
body.incallx .channel-bar,
body.incallx .rightbar-wrapper {
    background: var(--woo-panel) !important;
    border-color: var(--woo-line) !important;
}

body.incallx .sidebar-wrapper {
    width: 260px;
    min-width: 260px;
}

body.incallx .channel-bar {
    width: 260px;
}

body.incallx .rightbar-wrapper {
    width: 280px;
    min-width: 280px;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03);
}

body.incallx .topbar,
body.incallx .topbar-channels,
body.incallx .topbar-private,
body.incallx .navbar.topbar {
    min-height: 58px;
    background: rgba(7, 10, 18, .76) !important;
    border-bottom: 1px solid var(--woo-line) !important;
    backdrop-filter: blur(18px);
}

body.incallx .room-title,
body.incallx .top-channel-name,
body.incallx .channel-name,
body.incallx .disc-header {
    color: var(--woo-text) !important;
    letter-spacing: 0;
}

body.incallx .room-title {
    max-width: 205px;
    gap: 8px;
}

body.incallx .top-channel-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(45, 212, 191, .20);
    border-radius: var(--woo-radius);
    background: rgba(45, 212, 191, .08);
    color: var(--woo-teal);
}

body.incallx .top-channel-name {
    font-weight: 800;
}

body.incallx .navbar.topbar .nav-item,
body.incallx .navbar.topbar .btn-sm-round,
body.incallx .navbar.topbar .nav-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: var(--woo-radius);
    background: rgba(15, 23, 42, .62);
    color: #dbeafe !important;
}

body.incallx .navbar.topbar .nav-item:hover,
body.incallx .navbar.topbar .btn-sm-round:hover,
body.incallx .navbar.topbar .nav-link:hover {
    border-color: var(--woo-line-strong);
    background: rgba(45, 212, 191, .12);
}

body.incallx .channel-container,
body.incallx .sidebar-height-fix,
body.incallx .height-scroll-rpanel,
body.incallx .height-scroll-rpanelx,
body.incallx .chat-scroll,
body.incallx .messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 212, 191, .38) transparent;
}

body.incallx .channel-list {
    padding: 8px;
}

body.incallx .channel-cat {
    margin: 12px 8px 6px;
    color: var(--woo-muted) !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

body.incallx .channel-item,
body.incallx .room-manage-row,
body.incallx .disc-cat-row,
body.incallx .user-row,
body.incallx .private-list .user-list-item {
    border: 1px solid transparent;
    border-radius: var(--woo-radius);
    color: var(--woo-soft) !important;
}

body.incallx .channel-item:hover,
body.incallx .channel-item.active,
body.incallx .room-manage-row:hover,
body.incallx .disc-cat-row:hover,
body.incallx .user-row:hover,
body.incallx .private-list .user-list-item:hover {
    border-color: rgba(45, 212, 191, .16);
    background: rgba(45, 212, 191, .09) !important;
    color: var(--woo-text) !important;
}

body.incallx .lt-sidebar-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

body.incallx .lt-sidebar-shortcut {
    min-height: 66px;
    border-radius: var(--woo-radius);
    border: 1px solid rgba(148, 163, 184, .14);
    background: linear-gradient(145deg, rgba(20, 30, 48, .88), rgba(10, 15, 27, .92));
    box-shadow: none;
}

body.incallx .lt-sidebar-shortcut:hover {
    border-color: var(--woo-line-strong);
    transform: translateY(-1px);
}

body.incallx .lt-plus-link i {
    color: var(--woo-gold) !important;
}

body.incallx .lt-cinema-link i,
body.incallx .lt-market-link i {
    color: var(--woo-teal) !important;
}

body.incallx .main-panel {
    background:
        linear-gradient(180deg, rgba(12, 18, 31, .38), rgba(7, 10, 18, .94)),
        var(--woo-bg);
}

body.incallx .messages {
    position: relative;
    padding: 22px;
    background:
        linear-gradient(rgba(148, 163, 184, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(9, 13, 24, .94), rgba(7, 10, 18, .98)) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
}

body.incallx .chat-scroll {
    background: transparent;
}

body.incallx .cht {
    margin-bottom: 14px;
}

body.incallx .cht .message-data {
    max-width: min(720px, 78%);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: var(--woo-radius) !important;
    background: rgba(20, 30, 48, .82) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
}

body.incallx .cht.replies .message-data {
    background: rgba(17, 24, 39, .86) !important;
}

body.incallx .cht.sent .message-data {
    border-color: rgba(45, 212, 191, .30);
    background: linear-gradient(135deg, rgba(20, 184, 166, .94), rgba(14, 116, 144, .94)) !important;
    color: #ffffff !important;
}

body.incallx .message-html,
body.incallx .chat-txt {
    color: inherit;
    line-height: 1.48;
}

body.incallx .message-meta,
body.incallx .message-time {
    color: rgba(203, 213, 225, .72) !important;
}

body.incallx .room-editor,
body.incallx .private-editor {
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, rgba(7, 10, 18, .24), rgba(7, 10, 18, .92));
}

body.incallx .editor-wrap {
    position: relative;
}

body.incallx .editor-container.editor-controller {
    min-height: 58px;
    margin: 0;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(45, 212, 191, .22);
    background: rgba(12, 18, 31, .94) !important;
    box-shadow: var(--woo-shadow);
}

body.incallx .room-editor .attachment-col,
body.incallx .room-editor .emoji-col,
body.incallx .room-editor .send-col {
    min-height: 52px;
}

body.incallx .editor-icon,
body.incallx .attachment-col.dropup {
    color: #cbd5e1 !important;
}

body.incallx .editor-icon:hover,
body.incallx .attachment-col.dropup:hover {
    color: var(--woo-teal) !important;
}

body.incallx .room-editor .lt-send-message,
body.incallx .private-editor .lt-send-message {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--woo-radius) !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--woo-red), #f97316) !important;
    box-shadow: 0 12px 24px rgba(239, 35, 60, .26);
}

body.incallx .note-editor.note-frame,
body.incallx .note-editor.note-frame .note-editable {
    background: transparent !important;
    color: var(--woo-text) !important;
}

body.incallx .rightbar-wrapper {
    padding: 10px;
}

body.incallx #rpanel-tab {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0;
    margin: 0 0 10px;
}

body.incallx #rpanel-tab .nav-link {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: var(--woo-radius);
    background: rgba(15, 23, 42, .62);
    color: var(--woo-soft);
}

body.incallx #rpanel-tab .nav-link.active,
body.incallx #rpanel-tab .nav-link:hover {
    border-color: var(--woo-line-strong);
    background: rgba(45, 212, 191, .12);
    color: var(--woo-text);
}

body.incallx .input-icon .form-control,
body.incallx .form-control,
body.incallx .form-select,
body.incallx .whitoo-sidebar-category-select {
    min-height: 40px;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(7, 10, 18, .58) !important;
    color: var(--woo-text) !important;
}

body.incallx .input-icon .form-control:focus,
body.incallx .form-control:focus,
body.incallx .form-select:focus {
    border-color: rgba(45, 212, 191, .72) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .12) !important;
}

body.incallx .lt-room-verified {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--woo-teal), var(--woo-cyan)) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .12), 0 0 22px rgba(45, 212, 191, .30);
}

body.incallx .badge.bg-red,
body.incallx .noti-count {
    background: var(--woo-red) !important;
}

body.incallx .dropdown-menu,
body.incallx .modal-content,
body.incallx .offcanvas {
    border: 1px solid var(--woo-line);
    border-radius: var(--woo-radius);
    background: rgba(12, 18, 31, .98) !important;
    color: var(--woo-text);
    box-shadow: var(--woo-shadow);
}

body.incallx .dropdown-item {
    border-radius: var(--woo-radius);
    color: var(--woo-soft);
}

body.incallx .dropdown-item:hover {
    background: rgba(45, 212, 191, .10);
    color: var(--woo-text);
}

body.incallx .alert {
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .16);
}

body.incallx .ad-space {
    border-radius: var(--woo-radius);
    overflow: hidden;
}

html.light body.incallx .room-bar,
html.light body.incallx .sidebar-wrapper,
html.light body.incallx .channel-bar,
html.light body.incallx .rightbar-wrapper,
html.light body.incallx .messages,
html.light body.incallx .editor-container.editor-controller {
    border-radius: 0;
}

@media (max-width: 1200px) {
    body.incallx .rightbar-wrapper {
        width: 250px;
        min-width: 250px;
    }

    body.incallx .sidebar-wrapper,
    body.incallx .channel-bar {
        width: 240px;
        min-width: 240px;
    }
}

@media (max-width: 768px) {
    body.incallx .room-bar {
        width: 64px;
    }

    body.incallx .chatroom-item,
    body.incallx .private-messages .private-item,
    body.incallx .action-item {
        width: 44px;
        height: 44px;
    }

    body.incallx .messages {
        padding: 14px;
    }

    body.incallx .room-editor,
    body.incallx .private-editor {
        padding: 10px;
    }

    body.incallx .cht .message-data {
        max-width: 88%;
    }
}


/* Whitoo Refresh visible pass 2026051903 */

body.incallx {
    --woo-bg: #050811;
    --woo-panel: rgba(9, 14, 25, .98);
    --woo-panel-2: rgba(15, 23, 42, .98);
    --woo-red: #ff3347;
    --woo-teal: #20e0c4;
    --woo-cyan: #35bdf6;
    --woo-gold: #ffd166;
}

body.incallx #wrapper {
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .08), transparent 28%),
        linear-gradient(270deg, rgba(32, 224, 196, .08), transparent 24%),
        #050811 !important;
}

body.incallx .room-bar {
    background: #050811 !important;
    border-right: 2px solid rgba(255, 51, 71, .42) !important;
}

body.incallx .mini-brand {
    margin: 6px 8px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 51, 71, .24), rgba(32, 224, 196, .16));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px rgba(0, 0, 0, .36);
}

body.incallx .chatroom-item,
body.incallx .private-messages .private-item,
body.incallx .action-item {
    border-radius: 12px !important;
    border-color: rgba(255, 255, 255, .10) !important;
    background: linear-gradient(145deg, rgba(21, 31, 50, .98), rgba(6, 10, 19, .98)) !important;
}

body.incallx .room-list-item.active .chatroom-item,
body.incallx .private-messages.active .private-item,
body.incallx .action-item.active,
body.incallx .chatroom-item:hover,
body.incallx .private-messages .private-item:hover,
body.incallx .action-item:hover {
    border-color: rgba(255, 51, 71, .70) !important;
    background: linear-gradient(145deg, rgba(255, 51, 71, .36), rgba(9, 14, 25, .98)) !important;
    box-shadow: 0 0 0 3px rgba(255, 51, 71, .12), 0 16px 34px rgba(255, 51, 71, .18) !important;
}

body.incallx .sidebar-wrapper,
body.incallx .channel-bar {
    background:
        linear-gradient(180deg, rgba(18, 27, 43, .98), rgba(7, 11, 20, .98)) !important;
    border-right: 1px solid rgba(32, 224, 196, .22) !important;
}

body.incallx .topbar-channels,
body.incallx .topbar-private {
    background: linear-gradient(135deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .08)) !important;
}

body.incallx .room-title {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(5, 8, 17, .46);
}

body.incallx .channel-cat {
    color: #93f6e9 !important;
}

body.incallx .channel-item {
    min-height: 38px;
    margin: 4px 8px;
    padding-left: 8px;
}

body.incallx .channel-item.active,
body.incallx .channel-item:hover {
    border-left: 3px solid var(--woo-red) !important;
    background: linear-gradient(90deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .06)) !important;
}

body.incallx .page-content-wrapper {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 72px),
        #050811 !important;
}

body.incallx .navbar.topbar {
    background: rgba(5, 8, 17, .88) !important;
    box-shadow: inset 0 -1px 0 rgba(32, 224, 196, .22), 0 14px 34px rgba(0, 0, 0, .22);
}

body.incallx .top-channel-icon {
    border-color: rgba(255, 51, 71, .40) !important;
    background: linear-gradient(135deg, rgba(255, 51, 71, .22), rgba(32, 224, 196, .12)) !important;
}

body.incallx .top-channel-name {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .56);
}

body.incallx .main-panel {
    margin: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 51, 71, .14), transparent 23%),
        radial-gradient(circle at 85% 70%, rgba(32, 224, 196, .14), transparent 25%),
        #050811 !important;
}

body.incallx .messages {
    margin: 14px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        #070b16 !important;
    background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

body.incallx .cht .message-data {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(15, 23, 42, .94) !important;
}

body.incallx .cht.sent .message-data {
    border-color: rgba(32, 224, 196, .52) !important;
    background: linear-gradient(135deg, #16b8a6, #0f7ea0) !important;
}

body.incallx .cht.replies .message-data {
    border-color: rgba(255, 51, 71, .28) !important;
}

body.incallx .room-editor,
body.incallx .private-editor {
    padding: 8px 22px 20px;
}

body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(255, 51, 71, .42) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .09), rgba(32, 224, 196, .06)),
        rgba(7, 11, 22, .98) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .38), 0 0 0 3px rgba(255, 51, 71, .06) !important;
}

body.incallx .room-editor .lt-send-message,
body.incallx .private-editor .lt-send-message {
    background: linear-gradient(135deg, #ff3347, #ff7a18) !important;
    box-shadow: 0 12px 28px rgba(255, 51, 71, .34) !important;
}

body.incallx .rightbar-wrapper {
    background:
        linear-gradient(180deg, rgba(16, 24, 39, .98), rgba(7, 11, 20, .98)) !important;
    border-left: 1px solid rgba(255, 51, 71, .24) !important;
}

body.incallx .rightbar-wrapper .ad-space,
body.incallx #rpanel-tab,
body.incallx .room-users-row,
body.incallx .group-users-row,
body.incallx .media-row {
    border-radius: 12px;
}

body.incallx #rpanel-tab {
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(5, 8, 17, .58);
}

body.incallx #rpanel-tab .nav-link.active {
    background: linear-gradient(135deg, var(--woo-red), #ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.incallx .input-icon .form-control,
body.incallx .room-user-search,
body.incallx .group-user-search,
body.incallx .dm-user-search {
    border-color: rgba(32, 224, 196, .24) !important;
    background: rgba(5, 8, 17, .72) !important;
}

body.incallx .user-list-item,
body.incallx .room-users > div,
body.incallx .group-users > div {
    border-radius: 10px;
}

body.incallx .channel-list-bottom {
    background: linear-gradient(135deg, rgba(255, 51, 71, .15), rgba(32, 224, 196, .08)) !important;
    border-top: 1px solid rgba(32, 224, 196, .18) !important;
}

body.incallx .lt-room-verified {
    background: linear-gradient(135deg, #ff3347, #20e0c4) !important;
}



/* Whitoo template pass 2026051904 */

body.incallx .woo-room-hero-card {
    margin: 12px 10px 8px;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(5, 8, 17, .98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

body.incallx .woo-room-hero-cover {
    position: relative;
    min-height: 92px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .82), rgba(32, 224, 196, .34)),
        url('../img/room.png') center / cover no-repeat;
}

body.incallx .woo-room-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .22), transparent 28%),
        linear-gradient(180deg, transparent, rgba(5, 8, 17, .88));
}

body.incallx .woo-room-hero-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(5, 8, 17, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .woo-room-hero-badge i {
    color: #20e0c4 !important;
}

body.incallx .woo-room-hero-body {
    padding: 10px;
}

body.incallx .woo-room-hero-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

body.incallx .woo-room-hero-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-room-hero-title i {
    color: #ffd166 !important;
}

body.incallx .woo-room-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

body.incallx .woo-room-hero-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    background: rgba(15, 23, 42, .72);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .woo-room-status-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

body.incallx .woo-room-status-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 999px;
    background: rgba(15, 23, 42, .64);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

body.incallx .woo-room-status-strip i {
    color: #20e0c4 !important;
}

body.incallx .woo-right-profile-card {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 51, 71, .24);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .18), rgba(32, 224, 196, .08)),
        rgba(8, 12, 22, .96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body.incallx .woo-right-profile-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}

body.incallx .woo-right-profile-top img {
    width: 46px;
    height: 46px;
    border: 2px solid rgba(32, 224, 196, .42);
    border-radius: 14px;
    object-fit: cover;
}

body.incallx .woo-right-profile-top strong,
body.incallx .woo-right-profile-top span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-profile-top strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

body.incallx .woo-right-profile-top span {
    margin-top: 2px;
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 700;
}

body.incallx .woo-right-crown {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 209, 102, .32);
    border-radius: 12px;
    background: rgba(255, 209, 102, .12);
    color: #ffd166;
    text-decoration: none;
}

body.incallx .woo-right-crown i {
    color: #ffd166 !important;
}

body.incallx .woo-right-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body.incallx .woo-right-stats a {
    min-height: 54px;
    padding: 8px 6px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    background: rgba(5, 8, 17, .50);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

body.incallx .woo-right-stats a:hover {
    border-color: rgba(32, 224, 196, .38);
    background: rgba(32, 224, 196, .10);
}

body.incallx .woo-right-stats b,
body.incallx .woo-right-stats span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-stats b {
    font-size: 12px;
    font-weight: 900;
}

body.incallx .woo-right-stats span {
    margin-top: 3px;
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .room-img {
    display: none !important;
}

@media (max-width: 992px) {
    body.incallx .woo-room-status-strip {
        display: none;
    }
}



/* Whitoo presence override 2026051906 */
body.incallx .woo-room-hero-meta{grid-template-columns:repeat(3,minmax(0,1fr));}


/* Whitoo room card readability pass 2026051907 */

body.incallx .woo-room-hero-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(32, 224, 196, .30);
    background: #06101a;
}

body.incallx .woo-room-hero-cover {
    min-height: 104px;
    background-position: center;
    background-size: cover;
}

body.incallx .woo-room-hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .30) 0%, rgba(5, 8, 17, .72) 58%, rgba(5, 8, 17, .98) 100%),
        linear-gradient(90deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .12));
}

body.incallx .woo-room-hero-glow {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .18), transparent 24%),
        linear-gradient(180deg, transparent, rgba(5, 8, 17, .92));
}

body.incallx .woo-room-hero-badge {
    left: 12px;
    bottom: 12px;
    height: 30px;
    padding: 0 12px;
    border-color: rgba(32, 224, 196, .28);
    background: rgba(3, 7, 18, .78);
    color: #f8fbff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
    backdrop-filter: blur(10px);
}

body.incallx .woo-room-hero-body {
    position: relative;
    z-index: 1;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(6, 16, 26, .94), rgba(4, 8, 18, .98));
}

body.incallx .woo-room-hero-title {
    min-height: 34px;
    padding: 0 2px 2px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

body.incallx .woo-room-hero-title span {
    letter-spacing: 2px;
}

body.incallx .woo-room-hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

body.incallx .woo-room-hero-meta span {
    justify-content: flex-start;
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(32, 224, 196, .18);
    background: rgba(8, 14, 28, .88);
    color: #e6f6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.incallx .woo-room-hero-meta span:nth-child(3) {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
}

body.incallx .woo-room-hero-meta i {
    color: #9eefff !important;
}

body.incallx .woo-room-presence-active i {
    color: #20e0c4 !important;
}

body.incallx .woo-room-presence-offline i {
    color: #b7c7d8 !important;
}



/* Whitoo room cover blend 2026051909 */
body.incallx .woo-room-hero-card{background:linear-gradient(180deg,rgba(4,8,18,.56),rgba(4,8,18,.96)),var(--woo-room-cover-image,none) center/cover no-repeat,#06101a;}
body.incallx .woo-room-hero-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(4,8,18,.18),rgba(4,8,18,.88)),var(--woo-room-cover-image,none) center/cover no-repeat;opacity:.42;}
body.incallx .woo-room-hero-cover{position:relative;z-index:1;min-height:112px;background-position:center;background-size:cover;}
body.incallx .woo-room-hero-cover::before{background:linear-gradient(180deg,rgba(5,8,17,.10) 0%,rgba(5,8,17,.42) 62%,rgba(5,8,17,.86) 100%),linear-gradient(90deg,rgba(255,51,71,.10),rgba(32,224,196,.10));}
body.incallx .woo-room-hero-body{background:linear-gradient(180deg,rgba(6,16,26,.76),rgba(4,8,18,.92));backdrop-filter:blur(8px);}

/* Whitoo room card layering fix 2026051911 */
body.incallx .woo-room-hero-card::before{z-index:0;pointer-events:none;}
body.incallx .woo-room-hero-cover{overflow:hidden;}
body.incallx .woo-room-hero-cover::before,body.incallx .woo-room-hero-glow{z-index:1;pointer-events:none;}
body.incallx .woo-room-hero-badge{z-index:3;}
body.incallx .woo-room-hero-body{z-index:4;isolation:isolate;}
body.incallx .woo-room-hero-title,body.incallx .woo-room-hero-meta{position:relative;z-index:5;}

/* Whitoo sidebar header final overlap fix 2026051913 */
body.incallx .topbar-channels{position:sticky!important;top:0;z-index:9999!important;overflow:visible;background:#101826!important;opacity:1!important;}
body.incallx .topbar-channels::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(255,51,71,.45),rgba(32,224,196,.45));}
body.incallx .topbar-channels .room-title{background:#121b2b!important;border:1px solid rgba(255,255,255,.08);}
body.incallx .channel-container{padding-top:12px!important;}
body.incallx .woo-room-hero-card{margin-top:12px!important;}
body.incallx .woo-room-hero-card,body.incallx .woo-room-hero-cover,body.incallx .woo-room-hero-card::before{z-index:1;}

/* Whitoo sidebar header translucency tune 2026051914 */
body.incallx .topbar-channels{background:linear-gradient(90deg,rgba(255,51,71,.10),rgba(32,224,196,.08)),rgba(16,24,38,.82)!important;backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 10px 24px rgba(0,0,0,.24);}
body.incallx .topbar-channels::before{background:rgba(16,24,38,.50)!important;}
body.incallx .topbar-channels .room-title{background:rgba(18,27,43,.92)!important;backdrop-filter:blur(8px);}

/* Whitoo message hover options 2026051924 */
body.incallx .chat-actions{opacity:0!important;pointer-events:none;position:relative}body.incallx .message-data:hover+.chat-actions,body.incallx .cht:hover .chat-actions,body.incallx .cht:focus-within .chat-actions,body.incallx .chat-actions:hover,body.incallx .chat-actions.active{opacity:1!important;pointer-events:auto}body.incallx .chat-actions::before{content:"";position:absolute;inset:-12px -10px;border-radius:18px}

/* Whitoo right panel polish 2026051925 */
body.incallx .rightbar-wrapper{border-left-color:rgba(32,224,196,.18)!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.03)}body.incallx .woo-rpanel-head{min-height:44px;margin:2px 0 10px;padding:8px 10px;border:1px solid rgba(32,224,196,.16);border-radius:12px;background:linear-gradient(135deg,rgba(255,51,71,.10),rgba(32,224,196,.08)),rgba(8,14,28,.70)}body.incallx #rpanel-tab{padding:6px;border:1px solid rgba(148,163,184,.14);border-radius:14px}body.incallx #rpanel-tab .nav-link{min-height:34px;border-radius:10px!important}body.incallx .room-user-search,body.incallx .group-user-search{height:38px;border:1px solid rgba(148,163,184,.16)!important;color:#eaf7ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}body.incallx .room-user-search::placeholder,body.incallx .group-user-search::placeholder{color:rgba(203,213,225,.58)}body.incallx .room-users-row .input-icon-addon,body.incallx .group-users-row .input-icon-addon{color:rgba(125,249,235,.72)}body.incallx .lt-role-user-heading{min-height:34px;padding:0 10px;border-radius:10px;box-shadow:inset 3px 0 0 var(--role-color,#20e0c4)}body.incallx .room-users .user-row,body.incallx .group-users .user-row{min-height:58px;padding:9px 10px;border-radius:14px;background:linear-gradient(90deg,rgba(12,18,31,.84),rgba(8,14,28,.66))}body.incallx .room-users .user-row+.user-row,body.incallx .group-users .user-row+.user-row{margin-top:6px}body.incallx .channel-user-image .img-profile{width:40px;height:40px;border-radius:13px}body.incallx .load-more-users,body.incallx .load-more-media{min-height:34px;padding:7px 12px!important;font-weight:800}

/* Whitoo user profile card polish 2026051926 */
body.incallx .user-info-panel{padding:0!important}body.incallx .user-info-panel .user-card,body.incallx .user-info-panel .no-user-card{overflow:hidden;border:1px solid rgba(32,224,196,.20);border-radius:16px;background:linear-gradient(180deg,rgba(13,20,36,.94),rgba(6,10,20,.98))!important;box-shadow:0 18px 38px rgba(0,0,0,.26)}body.incallx .user-info-panel .active-user-cover{min-height:116px;border:0;background-color:#111827;background-size:cover;background-position:center;position:relative}body.incallx .user-info-panel .active-user-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,17,.04),rgba(5,8,17,.84)),linear-gradient(90deg,rgba(255,51,71,.16),rgba(32,224,196,.14))}body.incallx .user-info-panel .card-body{padding:0 14px 14px}body.incallx .user-info-panel .user-image{width:76px;height:76px;margin:-38px auto 10px;display:block;position:relative;z-index:2;border:4px solid #07101d;border-radius:22px;object-fit:cover;box-shadow:0 16px 30px rgba(0,0,0,.34)}body.incallx .user-info-panel .user-title{margin:0;color:#f8fbff;font-size:18px;font-weight:900;text-align:center}body.incallx .user-info-panel .text-muted{margin:10px 0 12px!important;padding:10px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(3,7,18,.42);color:rgba(203,213,225,.82)!important;line-height:1.45}body.incallx .user-info-panel .card-footer{padding:12px;border-top:1px solid rgba(148,163,184,.12);background:rgba(3,7,18,.42)}body.incallx .lt-user-actions{display:grid!important;grid-template-columns:1fr auto;gap:8px}body.incallx .lt-user-actions .btn{min-height:36px;border-radius:12px!important;font-weight:850}body.incallx .lt-user-friend-action{border:0!important;background:linear-gradient(135deg,#20e0c4,#0ea5e9)!important;color:#03101a!important}body.incallx #user-options-dropdown{border:1px solid rgba(148,163,184,.16)!important;background:rgba(15,23,42,.78)!important;color:#f8fbff!important}

/* Whitoo member click popover polish 2026051927 */
body.incallx .lt-member-popover{--bs-popover-bg:transparent;border:0!important;filter:drop-shadow(0 22px 44px rgba(0,0,0,.42))}body.incallx .lt-member-popover .popover-arrow{display:none}body.incallx .lt-member-popover-card{display:block!important;overflow:hidden;border:1px solid rgba(32,224,196,.24);border-radius:18px;background:linear-gradient(180deg,rgba(16,24,42,.98),rgba(5,9,18,.98))!important;color:#f8fbff}body.incallx .lt-member-popover-cover{min-height:118px;border:0;background-color:#111827;background-size:cover;background-position:center;position:relative}body.incallx .lt-member-popover-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,17,.08),rgba(5,8,17,.88)),linear-gradient(90deg,rgba(255,51,71,.18),rgba(32,224,196,.16))}body.incallx .lt-member-popover-card .card-body{padding:0 16px 16px;text-align:center}body.incallx .lt-member-popover-card .user-image{width:78px;height:78px;margin:-39px auto 10px;display:block;position:relative;z-index:2;border:4px solid #07101d;border-radius:24px;object-fit:cover;box-shadow:0 16px 30px rgba(0,0,0,.35)}body.incallx .lt-member-popover-card .user-title{margin:0;color:#fff;font-size:18px;font-weight:950}body.incallx .lt-member-popover-about{padding:10px 12px;border:1px solid rgba(148,163,184,.13);border-radius:12px;background:rgba(3,7,18,.44);color:rgba(226,232,240,.84)!important;line-height:1.45}body.incallx .lt-profile-role-box{padding:10px;border:1px solid rgba(32,224,196,.16);border-radius:12px;background:rgba(8,14,28,.54);text-align:left}body.incallx .lt-user-role-badge{padding:4px 8px;border:1px solid rgba(32,224,196,.18);border-radius:999px;background:rgba(32,224,196,.10);color:#eaffff;font-size:11px;font-weight:850}body.incallx .lt-member-popover-actions{padding:12px;border-top:1px solid rgba(148,163,184,.12);background:rgba(3,7,18,.50)}body.incallx .lt-member-popover-actions .btn{min-height:36px;border-radius:12px!important;font-weight:850}

/* Whitoo member popover spacing fix 2026051928 */
body.incallx .lt-member-popover-card .card-body{padding:0 18px 18px}body.incallx .lt-member-popover-card .user-image{width:72px;height:72px;margin:-24px auto 12px;border-radius:22px}body.incallx .lt-member-popover-card .user-title{position:relative;z-index:3;max-width:100%;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}body.incallx .lt-member-popover-about{margin-top:12px!important}

/* Whitoo member popover stronger layout 2026051929 */
body.incallx .popover.lt-member-popover{width:340px!important;max-width:340px!important}body.incallx .popover.lt-member-popover .popover-body{border-radius:20px;overflow:hidden}body.incallx .popover.lt-member-popover .lt-member-popover-card{border-radius:20px!important;background:radial-gradient(circle at 18% 0%,rgba(255,51,71,.22),transparent 32%),radial-gradient(circle at 86% 12%,rgba(32,224,196,.20),transparent 34%),linear-gradient(180deg,#121a2d 0%,#060a14 100%)!important}body.incallx .popover.lt-member-popover .lt-member-popover-cover{min-height:104px;opacity:.92}body.incallx .popover.lt-member-popover .card-body{display:flex!important;flex-direction:column;align-items:center!important;justify-content:flex-start;padding:0 18px 18px!important;text-align:center!important}body.incallx .popover.lt-member-popover .user-image{margin:-18px auto 12px!important}body.incallx .popover.lt-member-popover .user-title,body.incallx .popover.lt-member-popover h3.user-title.card-title{display:block!important;width:100%!important;margin:0 auto!important;padding:0 10px!important;text-align:center!important;align-self:center!important}body.incallx .popover.lt-member-popover .lt-member-popover-about,body.incallx .popover.lt-member-popover .lt-profile-role-box{width:100%}

/* Whitoo member popover compact professional 2026051930 */
body.incallx .popover.lt-member-popover{width:300px!important;max-width:300px!important}body.incallx .popover.lt-member-popover .lt-member-popover-card{border-radius:14px!important;background:linear-gradient(180deg,rgba(13,20,34,.98),rgba(6,10,18,.99))!important}body.incallx .popover.lt-member-popover .lt-member-popover-cover{min-height:82px}body.incallx .popover.lt-member-popover .user-image{width:58px;height:58px;margin:-20px auto 8px!important;border:3px solid #07101d;border-radius:16px}body.incallx .popover.lt-member-popover .user-title{font-size:15px!important;font-weight:850!important}body.incallx .popover.lt-member-popover .card-body{padding:0 14px 14px!important}body.incallx .popover.lt-member-popover .lt-member-popover-about{margin-top:10px!important;padding:8px 10px;font-size:12px}body.incallx .popover.lt-member-popover .lt-profile-role-box{margin-top:10px!important;padding:8px}body.incallx .lt-member-popover-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}body.incallx .lt-member-popover-actions{padding:10px}body.incallx .lt-member-popover-actions .btn{min-height:32px;padding:6px 8px!important;font-size:12px;border-radius:10px!important}

/* Whitoo member name center fix 2026051931 */
body.incallx .popover.lt-member-popover .lt-member-popover-card .card-body>h3.user-title,body.incallx .popover.lt-member-popover .lt-member-popover-card h3.card-title.user-title,body.incallx .popover.lt-member-popover h3.user-title{float:none!important;display:block!important;width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;justify-content:center!important;transform:none!important}

/* Whitoo member identity center hard fix 2026051932 */
body.incallx .popover.lt-member-popover .lt-member-popover-identity{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title{position:relative!important;top:auto!important;left:auto!important;right:auto!important}body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image{margin:-20px auto 8px!important}body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title{margin:0 auto!important;text-align:center!important}

/* Whitoo media panel polish 2026051933 */
body.incallx .media-row{padding:8px 2px 12px!important}body.incallx .media-row .row{margin:0!important;gap:8px 0}body.incallx .media-tab .recent-img{padding:4px!important;margin:0!important}body.incallx .media-tab .recent-img a{display:block;overflow:hidden;border:1px solid rgba(32,224,196,.16);border-radius:12px;background:rgba(8,14,28,.72);aspect-ratio:1;box-shadow:0 12px 22px rgba(0,0,0,.18)}body.incallx .media-tab .recent-img img{width:100%!important;height:100%!important;object-fit:cover;padding:0!important}body.incallx .media-tab .chat-video-block{padding:4px!important}body.incallx .media-tab .video-section{overflow:hidden;border:1px solid rgba(32,224,196,.16);border-radius:12px;background:rgba(8,14,28,.72);box-shadow:0 12px 22px rgba(0,0,0,.18)}body.incallx .media-tab .video-link{display:block;position:relative;aspect-ratio:16/10}body.incallx .media-tab .video-link:before{content:\"\\ea5f\";font-family:tabler-icons!important;position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;font-size:28px;background:rgba(0,0,0,.18)}body.incallx .media-tab .video-thumb{width:100%!important;height:100%!important;object-fit:cover}body.incallx .media-tab .chat-files-block{padding:4px!important;margin:0!important}body.incallx .media-tab .file-section{min-height:56px;border:1px solid rgba(32,224,196,.16);border-radius:12px;background:rgba(8,14,28,.72)!important;box-shadow:0 12px 22px rgba(0,0,0,.16)}body.incallx .media-tab .file-header{color:#eaf7ff!important}body.incallx .media-tab .file-title{max-width:158px;color:#f8fbff!important;font-size:12px;font-weight:850}body.incallx .media-tab .file-meta-swap{color:rgba(203,213,225,.62)!important;font-size:11px}body.incallx .media-tab img.recent-link-preview{width:42px!important;height:42px!important;border-radius:10px!important}body.incallx .media-tab .file-action-buttons{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(32,224,196,.18);border-radius:10px;background:rgba(32,224,196,.10);color:#9eefff!important}

/* Whitoo invite and channel modal polish 2026051934 */
body.incallx .whitoo-room-invite-modal .modal-content,body.incallx .lt-next-channel-modal .modal-content{overflow:hidden;border:1px solid rgba(32,224,196,.22)!important;border-radius:18px!important;background:radial-gradient(circle at 16% 0%,rgba(255,51,71,.15),transparent 30%),radial-gradient(circle at 92% 10%,rgba(32,224,196,.14),transparent 34%),linear-gradient(180deg,rgba(13,20,34,.98),rgba(5,9,18,.99))!important;color:#f8fbff;box-shadow:0 28px 70px rgba(0,0,0,.45)}body.incallx .whitoo-room-invite-modal .modal-header,body.incallx .lt-next-channel-modal .modal-header{min-height:64px;padding:16px 18px;border-bottom:1px solid rgba(148,163,184,.12)!important;background:rgba(3,7,18,.36)!important}body.incallx .whitoo-room-invite-modal .modal-title,body.incallx .lt-next-channel-modal .modal-title{color:#fff!important;font-size:18px;font-weight:900}body.incallx .whitoo-invite-modal-kicker,body.incallx .whitoo-ai-builder-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;color:#9eefff;font-size:11px;font-weight:900;text-transform:uppercase}body.incallx .whitoo-room-invite-modal .modal-body,body.incallx .lt-next-channel-modal .modal-body{padding:18px}body.incallx .whitoo-room-invite-panel,body.incallx .whitoo-ai-builder{border:1px solid rgba(32,224,196,.16);border-radius:14px;background:rgba(8,14,28,.62)}body.incallx .whitoo-room-invite-loading{padding:18px;color:rgba(226,232,240,.78);font-weight:750}body.incallx .lt-next-channel-modal .form-label{color:#eaf7ff!important;font-size:12px;font-weight:850}body.incallx .lt-next-channel-modal .form-control,body.incallx .lt-next-channel-modal .form-select{min-height:40px;border-color:rgba(148,163,184,.16)!important;border-radius:12px!important;background:rgba(3,7,18,.48)!important}body.incallx .lt-next-channel-modal .form-selectgroup-label{min-height:86px;border-radius:13px!important;background:rgba(8,14,28,.66)!important}body.incallx .lt-next-channel-modal .form-selectgroup-title{color:#f8fbff}body.incallx .lt-next-channel-modal .text-muted,body.incallx .lt-form-note{color:rgba(203,213,225,.66)!important}body.incallx .lt-next-channel-modal .modal-footer{border-top:1px solid rgba(148,163,184,.12);background:rgba(3,7,18,.32)}body.incallx .lt-next-channel-modal .btn,body.incallx .whitoo-room-invite-modal .btn{border-radius:11px!important;font-weight:850}

/* Whitoo compact channel modal 2026051935 */
body.incallx .lt-next-channel-modal .modal-dialog{max-width:760px}body.incallx .lt-next-channel-modal .modal-header{min-height:52px;padding:12px 16px}body.incallx .lt-next-channel-modal .modal-title{font-size:16px}body.incallx .lt-next-channel-modal .modal-body{max-height:min(76vh,680px);overflow:auto;padding:14px 16px}body.incallx .lt-next-channel-modal .whitoo-ai-builder{margin-bottom:12px;padding:10px}body.incallx .lt-next-channel-modal .whitoo-ai-builder-head small,body.incallx .lt-next-channel-modal .lt-form-note,body.incallx .lt-next-channel-modal .form-selectgroup-label .text-muted,body.incallx .lt-next-channel-modal .form-hint{display:none!important}body.incallx .lt-next-channel-modal .whitoo-ai-builder-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}body.incallx .lt-next-channel-modal #looai_builder_prompt{min-height:38px!important;height:38px!important;resize:none}body.incallx .lt-next-channel-modal #channel-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}body.incallx .lt-next-channel-modal #channel-form>.mb-3{margin-bottom:0!important}body.incallx .lt-next-channel-modal #channel-form>label.form-label,body.incallx .lt-next-channel-modal #channel-form>label.form-label+.lt-form-note,body.incallx .lt-next-channel-modal .form-selectgroup-boxes{grid-column:1/-1}body.incallx .lt-next-channel-modal .form-selectgroup-boxes{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:0!important}body.incallx .lt-next-channel-modal .form-selectgroup-boxes>[class*=\"col-\"]{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important}body.incallx .lt-next-channel-modal .form-selectgroup-label{min-height:52px!important;padding:8px!important;justify-content:center;text-align:center}body.incallx .lt-next-channel-modal .form-selectgroup-label>.me-3{display:none!important}body.incallx .lt-next-channel-modal .form-selectgroup-title{margin:0!important;font-size:12px}body.incallx .lt-next-channel-modal .form-selectgroup-title i{display:block;margin:0 auto 3px!important;font-size:17px}body.incallx .lt-next-channel-modal .game-room-settings,body.incallx .lt-next-channel-modal .channel-users{grid-column:1/-1}body.incallx .lt-next-channel-modal .game-room-settings .alert{display:none}body.incallx .lt-next-channel-modal .form-control,body.incallx .lt-next-channel-modal .form-select{min-height:36px;font-size:13px}body.incallx .lt-next-channel-modal .modal-footer{padding:10px 16px}body.incallx .lt-next-channel-modal .modal-footer .btn{min-height:34px;padding:6px 12px!important;font-size:13px}body.incallx .lt-next-channel-modal .submit-channel{border:0!important;background:linear-gradient(135deg,#20e0c4,#0ea5e9)!important;color:#03101a!important}

/* Whitoo alerts and feedback polish 2026051936 */
body.incallx .main-panel>.alert,body.incallx .room-notice>.alert,body.incallx .alert.alert-important{margin:10px 14px!important;padding:11px 44px 11px 14px!important;border:1px solid rgba(32,224,196,.18)!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(255,51,71,.10),rgba(32,224,196,.08)),rgba(8,14,28,.92)!important;color:#f8fbff!important;box-shadow:0 16px 32px rgba(0,0,0,.20)}body.incallx .alert .btn-close{top:50%;right:12px;width:26px;height:26px;padding:0;border-radius:8px;background-color:rgba(148,163,184,.14);transform:translateY(-50%);opacity:.82}body.incallx .toast-container{position:fixed!important;right:18px;bottom:18px;z-index:1088;display:grid;gap:10px}body.incallx .toast{overflow:hidden;width:min(360px,calc(100vw - 28px));border:1px solid rgba(32,224,196,.18)!important;border-radius:14px!important;background:rgba(8,14,28,.96)!important;color:#f8fbff!important;box-shadow:0 22px 48px rgba(0,0,0,.34);backdrop-filter:blur(14px)}body.incallx .toast-header{min-height:38px;border-bottom:1px solid rgba(148,163,184,.12)!important;background:linear-gradient(135deg,rgba(32,224,196,.16),rgba(15,23,42,.70))!important;color:#fff!important}body.incallx .toast-body{padding:11px 13px;color:rgba(226,232,240,.90);font-size:13px;line-height:1.45}body.incallx #load-more,body.incallx #load-more-end,body.incallx .whitoo-room-invite-loading,body.incallx .whitoo-invite-empty,body.incallx .no-user-card,body.incallx .profile-bot-empty,body.incallx .profile-security-empty,body.incallx .whitoo-gif-empty{border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(8,14,28,.66);color:rgba(226,232,240,.84)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}body.incallx #load-more,body.incallx #load-more-end{padding:10px 12px;font-size:12px;font-weight:850}body.incallx .whitoo-room-invite-loading,body.incallx .whitoo-invite-empty{padding:16px;text-align:center}

/* Whitoo search and explore polish 2026051937 */
body.incallx .whitoo-explore-search-hero{margin:4px 0 16px;padding:14px;border:1px solid rgba(32,224,196,.18);border-radius:16px;background:linear-gradient(135deg,rgba(255,51,71,.09),rgba(32,224,196,.08)),rgba(8,14,28,.72)}body.incallx .whitoo-home-search-copy span{color:#9eefff;font-size:11px;font-weight:900;text-transform:uppercase}body.incallx .whitoo-home-search-copy strong{color:#fff;font-size:18px;font-weight:950}body.incallx .whitoo-room-search{min-height:42px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(3,7,18,.58)!important;overflow:hidden}body.incallx .whitoo-room-search .form-control{border:0!important;background:transparent!important;color:#f8fbff!important}body.incallx .whitoo-room-search .form-control::placeholder{color:rgba(203,213,225,.56)}body.incallx .whitoo-room-search .input-icon-addon,body.incallx .whitoo-room-search-action{color:rgba(125,249,235,.76)!important}body.incallx .whitoo-room-search-actions{border-left:1px solid rgba(148,163,184,.12);background:rgba(15,23,42,.54)!important}body.incallx #chat-room-loop .room-card{overflow:hidden;border:1px solid rgba(32,224,196,.16);border-radius:16px;background:linear-gradient(180deg,rgba(13,20,34,.94),rgba(6,10,20,.98));box-shadow:0 14px 30px rgba(0,0,0,.18);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}body.incallx #chat-room-loop .room-card:hover{border-color:rgba(32,224,196,.32);box-shadow:0 22px 42px rgba(0,0,0,.28);transform:translateY(-2px)}body.incallx #chat-room-loop .card-img-top{min-height:118px;position:relative}body.incallx #chat-room-loop .card-img-top:after{content:\"\";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,17,.06),rgba(5,8,17,.74))}body.incallx #chat-room-loop .room-card .card-body{padding:30px 14px 14px}body.incallx #chat-room-loop .room-image{width:52px;height:52px;border:3px solid #07101d;border-radius:15px;object-fit:cover}body.incallx #chat-room-loop .lt-room-title{color:#fff;font-size:15px;font-weight:950}body.incallx #chat-room-loop .text-muted{color:rgba(203,213,225,.72)!important;font-size:12px;line-height:1.45}body.incallx #chat-room-loop .room-stats{margin-top:12px!important;padding-top:10px;border-top:1px solid rgba(148,163,184,.12);color:rgba(226,232,240,.82)}body.incallx #offcanvasSearch{border-left:1px solid rgba(32,224,196,.18);background:radial-gradient(circle at 20% 0%,rgba(255,51,71,.12),transparent 28%),linear-gradient(180deg,rgba(13,20,34,.98),rgba(5,9,18,.99));color:#f8fbff}body.incallx #offcanvasSearch .offcanvas-header{padding:14px;border-bottom:1px solid rgba(148,163,184,.12)}body.incallx #offcanvasSearch .chat-search-query{border:1px solid rgba(148,163,184,.16)!important;border-radius:12px!important;background:rgba(3,7,18,.52)!important;color:#f8fbff!important}body.incallx .chat-search-result{margin-bottom:8px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(8,14,28,.70);color:#eaf7ff}body.incallx .chat-search-result:hover{border-color:rgba(32,224,196,.28);background:rgba(32,224,196,.10)}

/* Whitoo profile screen polish 2026051938 */
body.incallx #main-profile{background:radial-gradient(circle at 18% 0%,rgba(255,51,71,.08),transparent 28%),radial-gradient(circle at 88% 12%,rgba(32,224,196,.08),transparent 30%),#070a12}body.incallx #main-profile .profile-section{max-width:1180px;margin:0 auto;padding:22px!important}body.incallx #main-profile .profile-header{width:100%;overflow:hidden;border:1px solid rgba(32,224,196,.18);border-radius:18px;background:linear-gradient(180deg,rgba(13,20,34,.94),rgba(6,10,20,.98));box-shadow:0 20px 44px rgba(0,0,0,.24)}body.incallx #main-profile .profile-header-cover{min-height:190px;position:relative}body.incallx #main-profile .profile-header-cover:after{content:\"\";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,17,.08),rgba(5,8,17,.78)),linear-gradient(90deg,rgba(255,51,71,.13),rgba(32,224,196,.13))}body.incallx #main-profile .profile-header-info{padding:0 18px 18px}body.incallx #main-profile .profile-header-desc{margin-top:-44px;position:relative;z-index:2}body.incallx #main-profile .profile-header-user-avatar{width:88px;height:88px;margin:0 auto 10px;border:4px solid #07101d;border-radius:24px;overflow:hidden;box-shadow:0 16px 32px rgba(0,0,0,.34)}body.incallx #main-profile .profile-header-user-title{margin:0;color:#fff;font-size:22px;font-weight:950;text-align:center}body.incallx #main-profile .profile-header-user-sub-title{margin:4px 0 0;color:rgba(125,249,235,.78);text-align:center;font-weight:800}body.incallx #main-profile .profile-section .card,body.incallx #main-profile .profile-form,body.incallx #main-profile .user-card{border:1px solid rgba(32,224,196,.16)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(13,20,34,.92),rgba(6,10,20,.98))!important;color:#f8fbff;box-shadow:0 16px 34px rgba(0,0,0,.20)}body.incallx #main-profile #v-profile-home .rounded.border{border-color:rgba(32,224,196,.14)!important;border-radius:14px!important;background:rgba(8,14,28,.60)}body.incallx #main-profile #v-profile-home .row.g-3 p{min-height:44px;padding:10px 12px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(8,14,28,.52);color:rgba(226,232,240,.86)}body.incallx #main-profile .profile-form .form-control,body.incallx #main-profile .profile-form .form-select,body.incallx #main-profile .profile-form .select2-selection{min-height:40px;border:1px solid rgba(148,163,184,.16)!important;border-radius:12px!important;background:rgba(3,7,18,.50)!important;color:#f8fbff!important}body.incallx #main-profile .btn-upload{width:100%;min-height:40px;border:1px dashed rgba(32,224,196,.28)!important;border-radius:12px!important;background:rgba(32,224,196,.08)!important;color:#9eefff!important}body.incallx #main-profile .save-profile{min-height:38px;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#20e0c4,#0ea5e9)!important;color:#03101a!important;font-weight:900}
/* Whitoo profile edit soft compact 2026051939 */
body.incallx #main-profile #v-profile-settings .profile-form{overflow:hidden;border-color:rgba(125,249,235,.18)!important;background:radial-gradient(circle at 8% 0%,rgba(32,224,196,.08),transparent 28%),linear-gradient(180deg,rgba(12,18,31,.94),rgba(5,9,18,.98))!important}body.incallx #main-profile #v-profile-settings .profile-form .card-body{display:grid;gap:12px;padding:18px!important}body.incallx #main-profile #v-profile-settings .profile-form h2{margin:0 0 2px!important;font-size:18px;letter-spacing:0}body.incallx #main-profile #v-profile-settings .profile-form h2:after{content:"Profilini hizlica ve sade sekilde guncelle.";display:block;margin-top:5px;color:rgba(226,232,240,.58);font-size:12px;font-weight:650}body.incallx #main-profile #v-profile-settings .profile-form h3.card-title{width:fit-content;margin:4px 0 0!important;padding:7px 10px;border:1px solid rgba(32,224,196,.14);border-left:3px solid #20e0c4;border-radius:11px;background:rgba(32,224,196,.06);font-size:13px;line-height:1.2}body.incallx #main-profile #v-profile-settings .profile-form .card-subtitle{display:none!important}body.incallx #main-profile #v-profile-settings .profile-form .row.g-3{margin-top:0!important;row-gap:10px}body.incallx #main-profile #v-profile-settings .profile-form .row.g-3>[class*=col]{padding-left:6px;padding-right:6px}body.incallx #main-profile #v-profile-settings .profile-form .form-label{margin-bottom:5px;color:rgba(226,232,240,.72);font-size:11px;text-transform:none;letter-spacing:0}body.incallx #main-profile #v-profile-settings .profile-form .form-control,body.incallx #main-profile #v-profile-settings .profile-form .form-select,body.incallx #main-profile #v-profile-settings .profile-form .select2-selection{min-height:38px;border-radius:11px!important;background:rgba(2,6,16,.46)!important}body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control{min-height:82px;resize:vertical}body.incallx #main-profile #v-profile-settings .btn-upload{display:flex;min-height:36px;align-items:center;justify-content:center;gap:6px;border-radius:11px!important;font-size:12px;font-weight:850}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings{margin-top:6px!important;padding:12px;border:1px solid rgba(32,224,196,.14);border-radius:14px;background:rgba(3,7,18,.42)}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head{margin-bottom:8px}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head h3{margin:2px 0 0;font-size:14px}body.incallx #main-profile #v-profile-settings .woo-effect-preview-line{min-height:38px;margin-bottom:8px;border-radius:12px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder{padding:10px;border-radius:12px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-head p{display:none}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button,body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions button{min-height:36px;border-radius:11px;font-size:12px;white-space:nowrap}body.incallx #main-profile #v-profile-settings .woo-effect-grid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px;margin-top:10px}body.incallx #main-profile #v-profile-settings .woo-effect-grid label>span{min-height:32px;padding:7px 8px;border-radius:10px;font-size:12px}body.incallx #main-profile #v-profile-settings .profile-form .card-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px!important}body.incallx #main-profile #v-profile-settings .profile-form .card-footer .btn{min-height:34px;padding:6px 13px;border-radius:11px!important;font-size:12px;font-weight:850}body.incallx #main-profile #v-profile-settings .profile-form .deactivate-user{border:1px solid rgba(248,113,113,.22)!important;background:rgba(248,113,113,.12)!important;color:#fecaca!important}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card{position:sticky;top:14px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card .card-body{padding:0 14px 14px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-image-preview{width:76px;height:76px;margin-top:-38px;border:3px solid #07101d;border-radius:22px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-title-preview{margin-top:8px!important;font-size:17px;text-align:center}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .text-muted{margin-top:10px!important;padding:9px 10px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(3,7,18,.38);color:rgba(226,232,240,.70)!important;font-size:12px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .card-footer{padding:10px 14px 14px;border-top:0!important;background:transparent!important}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .btn-success{width:100%;min-height:34px;border-radius:11px!important;font-size:12px}@media(max-width:991.98px){body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card{position:static}}@media(max-width:767.98px){body.incallx #main-profile #v-profile-settings .profile-form .card-body{padding:14px!important}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{grid-template-columns:1fr}body.incallx #main-profile #v-profile-settings .profile-form .card-footer{flex-direction:column-reverse;padding:12px 14px!important}}
/* Whitoo profile edit lighter AI controls 2026051940 */
body.incallx #main-profile #v-profile-settings .profile-form .card-body{gap:9px}body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control{min-height:68px}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings{padding:10px;border-radius:13px;background:rgba(2,6,16,.26)}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head{margin-bottom:6px}body.incallx #main-profile #v-profile-settings .woo-effect-preview-line{min-height:30px;margin-bottom:6px;padding:5px 8px;border-radius:10px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder{margin-top:4px;padding:7px;border:1px solid rgba(148,163,184,.10);border-radius:11px;background:rgba(8,14,28,.38)}body.incallx #main-profile #v-profile-settings .woo-ai-effect-head{display:none!important}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{grid-template-columns:minmax(0,1fr) 92px;gap:6px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls .form-control{min-height:32px;font-size:12px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button{min-height:32px;padding:5px 9px;font-size:11px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-options{display:none!important}body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions{margin-top:6px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions small{display:none}body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions button{min-height:28px;padding:4px 9px;border-radius:9px;font-size:11px}body.incallx #main-profile #v-profile-settings .woo-effect-grid{display:flex;grid-template-columns:none;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}body.incallx #main-profile #v-profile-settings .woo-effect-grid label{flex:0 0 auto;min-width:72px}body.incallx #main-profile #v-profile-settings .woo-effect-grid label>span{min-height:28px;padding:6px 9px;border-radius:999px;font-size:11px}@media(max-width:767.98px){body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{grid-template-columns:1fr}}
/* Whitoo profile edit overall compact 2026051941 */
body.incallx #main-profile #v-profile-settings .profile-settings-grid{--bs-gutter-x:14px;--bs-gutter-y:14px}body.incallx #main-profile #v-profile-settings .profile-form{box-shadow:0 12px 26px rgba(0,0,0,.18)}body.incallx #main-profile #v-profile-settings .profile-form .card-body{gap:7px;padding:14px!important}body.incallx #main-profile #v-profile-settings .profile-form h2{font-size:17px}body.incallx #main-profile #v-profile-settings .profile-form h2:after{font-size:11px}body.incallx #main-profile #v-profile-settings .profile-form h3.card-title{margin-top:2px!important;padding:5px 9px;border-radius:9px;font-size:12px}body.incallx #main-profile #v-profile-settings .profile-form .row.g-3,body.incallx #main-profile #v-profile-settings .profile-form .row.g-3.mt-2{margin-top:0!important;row-gap:7px}body.incallx #main-profile #v-profile-settings .profile-form .form-label{margin-bottom:4px;font-size:10.5px}body.incallx #main-profile #v-profile-settings .profile-form .form-control,body.incallx #main-profile #v-profile-settings .profile-form .form-select,body.incallx #main-profile #v-profile-settings .profile-form .select2-selection{min-height:34px;border-radius:10px!important;font-size:12px}body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control{min-height:58px}body.incallx #main-profile #v-profile-settings .btn-upload{min-height:32px;border-radius:10px!important}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings{margin-top:3px!important;padding:8px}body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head h3{font-size:13px}body.incallx #main-profile #v-profile-settings .woo-effect-eyebrow,body.incallx #main-profile #v-profile-settings .woo-effect-preview-line{display:none}body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder{padding:6px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls .form-control,body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button{min-height:30px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions{display:none}body.incallx #main-profile #v-profile-settings .woo-effect-grid{margin-top:6px}body.incallx #main-profile #v-profile-settings .woo-effect-grid label{min-width:64px}body.incallx #main-profile #v-profile-settings .woo-effect-grid label>span{min-height:26px;padding:5px 8px;font-size:10.5px}body.incallx #main-profile #v-profile-settings .profile-form .card-footer{padding:10px 14px!important}body.incallx #main-profile #v-profile-settings .profile-form .card-footer .btn{min-height:31px;padding:5px 12px;font-size:11.5px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card{border-radius:14px!important;box-shadow:0 10px 22px rgba(0,0,0,.16)}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-cover-preview{min-height:92px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-image-preview{width:64px;height:64px;margin-top:-32px;border-radius:18px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-title-preview{font-size:15px}body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .text-muted{max-height:58px;overflow:hidden;font-size:11px}
/* Whitoo profile overflow hard fix 2026051944 */
body.incallx #main-profile #v-profile-settings,body.incallx #main-profile #v-profile-settings .profile-settings-grid,body.incallx #main-profile #v-profile-settings .profile-form,body.incallx #main-profile #v-profile-settings .profile-form .card-body,body.incallx #main-profile #v-profile-settings .woo-name-effect-settings,body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder{max-width:100%;min-width:0;overflow-x:hidden}body.incallx #main-profile #v-profile-settings .profile-form .row{--bs-gutter-x:10px;max-width:100%}body.incallx #main-profile #v-profile-settings .profile-form .row>*{min-width:0}body.incallx #main-profile #v-profile-settings .woo-effect-preview-line{display:flex;min-height:32px;margin-bottom:6px;padding:5px 9px;align-items:center;justify-content:center;border-radius:10px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder{display:block}body.incallx #main-profile #v-profile-settings .woo-ai-effect-head{display:flex!important;margin-bottom:5px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-head span{font-size:11px}body.incallx #main-profile #v-profile-settings .woo-ai-effect-head p{display:none!important}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{grid-template-columns:minmax(0,1fr) 84px;width:100%}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls input{min-width:0}body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button{min-width:0;padding-left:6px;padding-right:6px}body.incallx #main-profile #v-profile-settings .woo-effect-grid{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;overflow:visible;padding-bottom:0}body.incallx #main-profile #v-profile-settings .woo-effect-grid label,body.incallx #main-profile #v-profile-settings .woo-effect-grid label>span{min-width:0;max-width:100%}body.incallx #main-profile #v-profile-settings .woo-effect-grid label>span,body.incallx #main-profile #v-profile-settings .form-control,body.incallx #main-profile #v-profile-settings .form-select,body.incallx #main-profile #v-profile-settings .btn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.incallx #main-profile #v-profile-settings textarea.form-control{white-space:normal}@media(max-width:575.98px){body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls{grid-template-columns:1fr}body.incallx #main-profile #v-profile-settings .woo-effect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Whitoo profile security polish 2026051945 */
body.incallx #main-profile #v-profile-security .row.justify-content-center{justify-content:flex-start!important}body.incallx #main-profile #v-profile-security .col-xl-9{max-width:820px}body.incallx #main-profile #password-form{overflow:hidden;border:1px solid rgba(32,224,196,.16)!important;border-radius:16px!important;background:radial-gradient(circle at 0% 0%,rgba(32,224,196,.07),transparent 30%),linear-gradient(180deg,rgba(12,18,31,.94),rgba(5,9,18,.98))!important;color:#f8fbff;box-shadow:0 14px 30px rgba(0,0,0,.18)}body.incallx #main-profile #password-form .card-body{display:grid;gap:9px;padding:15px!important}body.incallx #main-profile #password-form h2{margin:0!important;color:#fff;font-size:17px;font-weight:950}body.incallx #main-profile #password-form h2:after{content:"Hesap girisi ve sifre ayarlarini buradan yonet.";display:block;margin-top:5px;color:rgba(226,232,240,.58);font-size:11px;font-weight:650}body.incallx #main-profile #password-form h3.card-title{width:fit-content;margin:2px 0 0!important;padding:5px 9px;border:1px solid rgba(32,224,196,.14);border-left:3px solid #20e0c4;border-radius:9px;background:rgba(32,224,196,.06);color:rgba(248,251,255,.94);font-size:12px;font-weight:900}body.incallx #main-profile #password-form .card-subtitle{display:none!important}body.incallx #main-profile #password-form .form-check{min-height:38px;margin:0!important;padding:8px 10px 8px 44px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(3,7,18,.36)}body.incallx #main-profile #password-form .form-switch .form-check-input{margin-left:-34px}body.incallx #main-profile #password-form .form-check-input{border-color:rgba(148,163,184,.28);background-color:rgba(15,23,42,.88)}body.incallx #main-profile #password-form .form-check-input:checked{border-color:#20e0c4;background-color:#20e0c4}body.incallx #main-profile #password-form .form-check-label{color:rgba(226,232,240,.86);font-size:12px;font-weight:750}body.incallx #main-profile #password-form .profile-security-accordion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0!important}body.incallx #main-profile #password-form .profile-security-collapse{overflow:hidden;border:1px solid rgba(148,163,184,.12);border-radius:13px;background:rgba(3,7,18,.34)}body.incallx #main-profile #password-form .profile-security-collapse summary{display:flex;min-height:40px;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;cursor:pointer;list-style:none}body.incallx #main-profile #password-form .profile-security-collapse summary::-webkit-details-marker{display:none}body.incallx #main-profile #password-form .profile-security-collapse summary span{display:inline-flex;min-width:0;align-items:center;gap:6px;color:#f8fbff;font-size:12px;font-weight:900}body.incallx #main-profile #password-form .profile-security-collapse summary i{color:#20e0c4}body.incallx #main-profile #password-form .profile-security-collapse summary small{flex:0 0 auto;padding:3px 7px;border-radius:999px;background:rgba(32,224,196,.10);color:rgba(125,249,235,.90);font-size:10.5px;font-weight:850}body.incallx #main-profile #password-form .profile-security-collapse-body{max-height:220px;overflow:auto;padding:0 9px 9px}body.incallx #main-profile #password-form .profile-security-row,body.incallx #main-profile #password-form .profile-security-empty{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:10px;background:rgba(8,14,28,.58)}body.incallx #main-profile #password-form .profile-security-row+.profile-security-row{margin-top:6px}body.incallx #main-profile #password-form .profile-security-row strong{display:block;color:#fff;font-size:12px}body.incallx #main-profile #password-form .profile-security-row span,body.incallx #main-profile #password-form .profile-security-empty span{display:block;color:rgba(226,232,240,.58);font-size:10.5px}body.incallx #main-profile #password-form .profile-security-row>i,body.incallx #main-profile #password-form .profile-security-empty i{color:rgba(125,249,235,.82)}body.incallx #main-profile #password-form .alert-warning{margin:0!important;padding:8px 10px;border:1px solid rgba(251,191,36,.20);border-radius:11px;background:rgba(251,191,36,.08);color:rgba(254,243,199,.86);font-size:11.5px}body.incallx #main-profile #password-form .row.g-3,body.incallx #main-profile #password-form .row.g-3.mt-2{margin-top:0!important;row-gap:8px}body.incallx #main-profile #password-form .form-label{margin-bottom:4px;color:rgba(226,232,240,.72);font-size:10.5px;font-weight:850}body.incallx #main-profile #password-form .form-control{min-height:34px;border:1px solid rgba(148,163,184,.16)!important;border-radius:10px!important;background:rgba(2,6,16,.46)!important;color:#f8fbff!important;font-size:12px}body.incallx #main-profile #password-form .card-footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 15px!important;border-color:rgba(148,163,184,.12)!important;background:rgba(3,7,18,.32)!important}body.incallx #main-profile #password-form .card-footer .btn{min-height:31px;padding:5px 12px;border-radius:11px!important;font-size:11.5px;font-weight:850}body.incallx #main-profile #password-form .save-profile{border:0!important;background:linear-gradient(135deg,#20e0c4,#0ea5e9)!important;color:#03101a!important}body.incallx #main-profile #password-form .deactivate-user{border:1px solid rgba(248,113,113,.22)!important;background:rgba(248,113,113,.12)!important;color:#fecaca!important}@media(max-width:767.98px){body.incallx #main-profile #password-form .profile-security-accordion{grid-template-columns:1fr}body.incallx #main-profile #password-form .card-footer{flex-direction:column-reverse}}
/* Whitoo ad image fit 2026051946 */
body.incallx .ad-space{padding:0!important;border-radius:12px;background:transparent!important}body.incallx .ad-space a,body.incallx .ad-space picture{display:block;width:100%;height:100%}body.incallx .ad-space img,body.incallx .ad-space iframe{display:block;width:100%!important;height:100%!important;max-width:none!important;border:0!important;border-radius:inherit;object-fit:cover;object-position:center}body.incallx .ad-rightbar-top,body.incallx .ad-rightbar-bottom,body.incallx .ad-sidebar-top,body.incallx .ad-sidebar-bottom{min-height:78px;aspect-ratio:3.05/1}body.incallx .ad-main-top,body.incallx .ad-main-bottom{min-height:90px;aspect-ratio:8/1}body.incallx .ad-rightbar-top img,body.incallx .ad-rightbar-bottom img,body.incallx .ad-sidebar-top img,body.incallx .ad-sidebar-bottom img{transform:scale(1.035)}
/* Whitoo room edit professional compact 2026051947 */
body.incallx .chat-room-update-area{max-width:1240px}body.incallx .lt-next-room-form.card{overflow:hidden;border:1px solid rgba(32,224,196,.16)!important;border-radius:16px!important;background:radial-gradient(circle at 8% 0%,rgba(32,224,196,.07),transparent 28%),linear-gradient(180deg,rgba(12,18,31,.94),rgba(5,9,18,.98))!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important}body.incallx .lt-next-room-form>.card-header{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(255,49,88,.20)!important;background:radial-gradient(circle at 82% 0%,rgba(22,199,215,.13),transparent 42%),radial-gradient(circle at 12% 0%,rgba(255,49,88,.20),transparent 46%),rgba(3,7,18,.34)!important}body.incallx .lt-next-room-form #room-manage-tab{display:flex;flex:0 0 auto;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end;gap:4px;padding:4px;overflow:visible;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.035)}body.incallx .lt-next-room-form #room-manage-tab .nav-link{flex:0 0 auto;min-height:30px;padding:5px 10px;border:1px solid transparent!important;border-radius:999px!important;background:transparent!important;color:rgba(226,232,240,.72)!important;font-size:11.5px;font-weight:850}body.incallx .lt-next-room-form #room-manage-tab .nav-link.active{border-color:rgba(255,45,85,.62)!important;background:linear-gradient(135deg,#ff2d55,#d01d3d)!important;color:#fff!important;box-shadow:0 10px 24px rgba(255,49,88,.26)!important}body.incallx .lt-next-room-form .lt-panel-title{flex:0 1 auto;min-width:0;max-width:330px}body.incallx .lt-next-room-form .lt-panel-title h1{margin:2px 0 1px!important;color:#fff;font-size:20px!important;line-height:1.1;font-weight:950;letter-spacing:0}body.incallx .lt-next-room-form .lt-panel-title p{max-width:330px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgba(226,232,240,.62);font-size:11.5px;font-weight:700;line-height:1.3}@media(max-width:1100px){body.incallx .lt-next-room-form .lt-panel-title p{display:none}}@media(max-width:1240px){body.incallx .lt-next-room-form>.card-header{flex-wrap:wrap}body.incallx .lt-next-room-form #room-manage-tab{flex-wrap:wrap;justify-content:flex-start}}body.incallx .lt-next-room-form .lt-panel-kicker{font-size:10px;letter-spacing:.14em}body.incallx .lt-next-room-form .room-manage-tab-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}body.incallx .lt-next-room-form .room-manage-tab-item i{margin-right:0!important;color:#20e0c4}body.incallx .lt-next-room-form>.card-body{padding:14px!important}body.incallx .lt-next-room-form h2{margin:0 0 4px!important;color:#fff;font-size:18px;font-weight:950;letter-spacing:0}body.incallx .lt-next-room-form .lt-form-note{margin-top:3px;color:rgba(226,232,240,.54)!important;font-size:11px;line-height:1.35}body.incallx .lt-next-room-form .row{--bs-gutter-x:10px;--bs-gutter-y:8px}body.incallx .lt-next-room-form .row.g-3,body.incallx .lt-next-room-form .row.g-3.mt-2{margin-top:8px!important}body.incallx .lt-next-room-form .form-label{margin-bottom:4px;color:rgba(226,232,240,.82)!important;font-size:11.5px;font-weight:850}body.incallx .lt-next-room-form .form-control,body.incallx .lt-next-room-form .form-select,body.incallx .lt-next-room-form textarea,body.incallx .lt-next-room-form select{min-height:36px;border:1px solid rgba(148,163,184,.16)!important;border-radius:10px!important;background:rgba(2,6,16,.48)!important;color:#f8fbff!important;font-size:12.5px}body.incallx .lt-next-room-form textarea.form-control{min-height:82px;resize:vertical}body.incallx .lt-next-room-form .divide-y{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}body.incallx .lt-next-room-form .divide-y>div,body.incallx .lt-next-room-form .lt-plus-locked-row{min-width:0;padding:9px 10px;border:1px solid rgba(148,163,184,.12);border-radius:12px;background:rgba(3,7,18,.34)}body.incallx .lt-next-room-form .divide-y label.row,body.incallx .lt-next-room-form label.row{width:100%;margin:0;align-items:center}body.incallx .lt-next-room-form .divide-y label.row>.col-4,body.incallx .lt-next-room-form label.row>.col-4{flex:1 1 auto;width:auto;max-width:none;min-width:0}body.incallx .lt-next-room-form .divide-y label.row>.col-auto,body.incallx .lt-next-room-form label.row>.col-auto{flex:0 0 auto}body.incallx .lt-next-room-form .pin-area.text-end{flex:0 0 42px;width:42px;max-width:42px}body.incallx .lt-next-room-form .pin-area:not(.text-end){flex:0 0 110px;width:110px;max-width:110px}body.incallx .lt-next-room-form .form-check-input{border-color:rgba(148,163,184,.28);background-color:rgba(15,23,42,.86)}body.incallx .lt-next-room-form .form-check-input:checked{border-color:#20e0c4;background-color:#20e0c4}body.incallx .lt-next-room-form input[type=file].form-control-file{width:100%;min-height:36px;padding:7px 9px;border:1px dashed rgba(32,224,196,.24);border-radius:10px;background:rgba(32,224,196,.06);color:rgba(226,232,240,.78);font-size:12px}body.incallx .lt-next-room-form .room-coverimage-preview,body.incallx .lt-next-room-form .room-bgimage-preview{width:128px;height:58px;overflow:hidden;border:1px solid rgba(32,224,196,.18);border-radius:12px;background:rgba(3,7,18,.44)}body.incallx .lt-next-room-form .room-coverimage-preview img,body.incallx .lt-next-room-form .room-bgimage-preview img{display:block;width:100%;height:100%!important;object-fit:cover}body.incallx .lt-next-room-form .room-bgimage-remove{min-height:28px;margin-top:6px;border-radius:9px!important}body.incallx .lt-next-room-form hr{margin:12px 0;border-color:rgba(148,163,184,.12);opacity:1}body.incallx .lt-next-room-form .table{color:rgba(226,232,240,.86);font-size:12px}body.incallx .lt-next-room-form .table th{color:#f8fbff;font-size:11px;font-weight:900;text-transform:uppercase}body.incallx .lt-next-room-form .btn{border-radius:10px!important;font-size:12px;font-weight:850}body.incallx .lt-next-room-form .card-footer,body.incallx .chat-room-update-area .card-footer{padding:10px 14px!important;border-color:rgba(148,163,184,.12)!important;background:rgba(3,7,18,.32)!important}@media(max-width:991.98px){body.incallx .lt-next-room-form .divide-y{grid-template-columns:1fr}}@media(max-width:575.98px){body.incallx .lt-next-room-form>.card-body{padding:12px!important}body.incallx .lt-next-room-form label.row{gap:8px}body.incallx .lt-next-room-form .room-coverimage-preview,body.incallx .lt-next-room-form .room-bgimage-preview{width:100%}}


/* ============================================================
   WHITOO STUDIO PANEL BASLIGI - referans tasarimin birebir karsiligi.
   Dosyanin EN SONUNDA duruyor ki yukaridaki body.incallx kurallarini ezsin.
   Yapi: baslik BAGIMSIZ yuvarlak bir kutu, altinda bosluk, sonra icerik kutusu.
   ============================================================ */

/* Kart artik kendi cercevesini cizmez; bolumler ayri kutular halinde durur. */
body.incallx .lt-next-room-form.card,
.lt-next-room-form.card {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Baslik kutusu --- */
body.incallx .lt-next-room-form > .card-header,
.lt-next-room-form > .card-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0 0 14px !important;
    padding: 15px 20px !important;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    border-radius: 15px !important;
    background:
        radial-gradient(130% 190% at 0% 50%, rgba(255, 45, 85, .20), transparent 56%),
        linear-gradient(90deg, rgba(43, 13, 24, .92), rgba(11, 14, 23, .96) 46%, rgba(8, 11, 19, .98)) !important;
}

body.incallx .lt-next-room-form .lt-panel-title,
.lt-next-room-form .lt-panel-title {
    flex: 1 1 300px;
    /* min-width sart: yoksa baslik harf harf kirilana kadar sikisir ve
       sekmeler alt satira gecmez. Bu deger sarmalamayi zorunlu kilar. */
    min-width: 280px;
    max-width: 100%;
}

body.incallx .lt-next-room-form .lt-panel-kicker,
.lt-next-room-form .lt-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff3158;
    font-size: 10px !important;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.incallx .lt-next-room-form .lt-panel-title h1,
.lt-next-room-form .lt-panel-title h1 {
    margin: 5px 0 0 !important;
    color: #fff;
    font-size: 27px !important;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.01em;
}

body.incallx .lt-next-room-form .lt-panel-title p,
.lt-next-room-form .lt-panel-title p {
    max-width: 100%;
    margin: 6px 0 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(226, 232, 240, .56);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}

/* --- Sekme grubu: tek yuvarlak kutu, KAYDIRMA YOK --- */
body.incallx .lt-next-room-form #room-manage-tab,
.lt-next-room-form #room-manage-tab {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px !important;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
}

body.incallx .lt-next-room-form #room-manage-tab .nav-link,
.lt-next-room-form #room-manage-tab .nav-link {
    flex: 0 0 auto;
    min-height: 0 !important;
    padding: 6px 10px !important;
    display: inline-flex;
    align-items: center;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(226, 232, 240, .75) !important;
    background: transparent !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

body.incallx .lt-next-room-form #room-manage-tab .nav-link:hover,
.lt-next-room-form #room-manage-tab .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
}

body.incallx .lt-next-room-form #room-manage-tab .nav-link.active,
.lt-next-room-form #room-manage-tab .nav-link.active {
    color: #fff !important;
    background: #ff2d55 !important;
    box-shadow: 0 4px 14px rgba(255, 45, 85, .34) !important;
}

body.incallx .lt-next-room-form > .card-header #room-manage-tab .nav-link:focus,
body.incallx .lt-next-room-form > .card-header #room-manage-tab .nav-link:focus-visible,
.lt-next-room-form > .card-header #room-manage-tab .nav-link:focus,
.lt-next-room-form > .card-header #room-manage-tab .nav-link:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Aktif sekme: hicbir tema kurali ezemesin diye en yuksek ozgullukte. */
body.incallx .lt-next-room-form > .card-header #room-manage-tab .nav-link.active,
body.incallx .lt-next-room-form > .card-header #room-manage-tab .nav-link.active:focus,
.lt-next-room-form > .card-header #room-manage-tab .nav-link.active {
    border-color: transparent !important;
    background: #ff2d55 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 45, 85, .34) !important;
}

body.incallx .lt-next-room-form .room-manage-tab-item,
.lt-next-room-form .room-manage-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

body.incallx .lt-next-room-form .room-manage-tab-item i,
.lt-next-room-form .room-manage-tab-item i {
    margin-right: 0 !important;
    color: inherit !important;
    font-size: 14px;
}

/* "Woo" rozeti */
body.incallx .lt-next-room-form .room-manage-tab-item b,
.lt-next-room-form .room-manage-tab-item b {
    padding: 2px 6px;
    border-radius: 999px;
    background: #ff2d55;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
}

/* --- Icerik ve alt bar: baslikla ayni dilde ikinci kutu --- */
body.incallx .lt-next-room-form > .card-body,
.lt-next-room-form > .card-body {
    border: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(8, 12, 23, .98));
}

body.incallx .lt-next-room-form > .card-footer,
.lt-next-room-form > .card-footer {
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 0 16px 16px;
    background: rgba(8, 12, 23, .98) !important;
}

/* Dar ekran: kaydirma yerine alt satira gecer. */
@media (max-width: 760px) {
    body.incallx .lt-next-room-form #room-manage-tab,
    .lt-next-room-form #room-manage-tab {
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    body.incallx .lt-next-room-form .lt-panel-title h1,
    .lt-next-room-form .lt-panel-title h1 {
        font-size: 21px !important;
    }
}


/* ============================================================
   ROL YONETIMI (.wr-*) - referans tasarimin karsiligi.
   Ust: 3 ozet karti. Alt: solda rol listesi, sagda secili rolun detayi.
   ============================================================ */

.wr-roles { display: flex; flex-direction: column; gap: 14px; }

/* --- ust ozet kartlari --- */
.wr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wr-stat {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px;
    background: rgba(255, 255, 255, .022);
}
.wr-stat > div { min-width: 0; }
.wr-stat small { display: block; color: rgba(226, 232, 240, .55); font-size: 11px; font-weight: 750; }
.wr-stat b {
    display: block; margin: 1px 0 3px; color: #fff;
    font-size: 19px; font-weight: 900; line-height: 1.15;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wr-stat > div > span { display: block; color: rgba(226, 232, 240, .42); font-size: 11px; font-weight: 650; }

.wr-stat-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; font-size: 18px;
}
.wr-stat-icon.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.wr-stat-icon.c-red  { background: rgba(255, 49, 88, .13);  color: #ff6b85; }
.wr-stat-icon.c-blue { background: rgba(59, 130, 246, .15); color: #7aa7ff; }
.wr-stat-icon.c-rose { background: rgba(244, 63, 94, .13);  color: #fb7185; }

/* --- iki sutunlu govde --- */
.wr-body { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 12px; align-items: start; }

.wr-side {
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px;
    background: rgba(255, 255, 255, .022); overflow: hidden;
}
.wr-side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 12px 10px;
}
.wr-side-head > span {
    color: rgba(226, 232, 240, .5); font-size: 11px; font-weight: 900; letter-spacing: .12em;
}
.wr-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border: 0; border-radius: 9px;
    background: #ff2d55; color: #fff; font-size: 12px; font-weight: 800;
}
.wr-add:hover { background: #ff4467; }

.wr-side-list { display: flex; flex-direction: column; gap: 5px; padding: 0 10px 12px; }
.wr-role {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; text-align: left;
    border: 1px solid transparent; border-radius: 12px;
    background: rgba(255, 255, 255, .028); color: inherit;
}
.wr-role:hover { background: rgba(255, 255, 255, .055); }
.wr-role.is-active { border-color: rgba(255, 45, 85, .55); background: rgba(255, 45, 85, .10); }
.wr-dot {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
    background: var(--c, #ff3158); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.wr-role-main { min-width: 0; flex: 1 1 auto; }
.wr-role-main strong {
    display: block; color: #fff; font-size: 12.5px; font-weight: 800;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wr-role-main small { display: block; color: rgba(226, 232, 240, .45); font-size: 11px; font-weight: 650; }
.wr-role-flag { color: #7aa7ff; font-size: 12px; }

.wr-empty {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 26px 12px; text-align: center;
}
.wr-empty i { color: rgba(255, 45, 85, .7); font-size: 26px; }
.wr-empty strong { color: #fff; font-size: 13px; font-weight: 850; }
.wr-empty span { color: rgba(226, 232, 240, .45); font-size: 11.5px; }

/* --- sag: secili rolun detayi --- */
.wr-detail {
    padding: 14px 16px 16px;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px;
    background: rgba(255, 255, 255, .022);
}
.wr-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wr-detail-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; font-size: 19px;
    background: rgba(255, 255, 255, .05); color: #fff;
}
.wr-detail-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wr-detail-title h3 { margin: 0; color: #fff; font-size: 19px; font-weight: 900; letter-spacing: 0; }
.wr-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); color: rgba(226, 232, 240, .72);
    font-size: 9.5px; font-weight: 900; letter-spacing: .08em;
}
.wr-detail-actions { display: flex; gap: 8px; margin-left: auto; }

.wr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; border: 1px solid transparent;
    font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.wr-btn.sm { padding: 6px 11px; font-size: 12px; }
.wr-btn.w-100 { width: 100%; }
.wr-btn.ghost { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .045); color: rgba(226, 232, 240, .85); }
.wr-btn.ghost:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .085); color: #fff; }
.wr-btn.primary { background: #ff2d55; color: #fff; box-shadow: 0 4px 14px rgba(255, 45, 85, .28); }
.wr-btn.primary:hover { background: #ff4467; }

.wr-subtabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin: 14px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.wr-subtabs button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: rgba(226, 232, 240, .6);
    font-size: 12.5px; font-weight: 800;
}
.wr-subtabs button:hover { color: #fff; }
.wr-subtabs button.is-active { border-bottom-color: #ff2d55; color: #ff5c79; }

.wr-pane { display: none; padding-top: 16px; }
.wr-pane.is-active { display: block; }

.wr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.wr-field label {
    display: block; margin-bottom: 6px;
    color: rgba(226, 232, 240, .8); font-size: 12px; font-weight: 800;
}
.wr-input-wrap { position: relative; }
.wr-input-wrap .form-control { padding-right: 56px !important; }
.wr-input-wrap em {
    position: absolute; right: 11px; bottom: 9px;
    color: rgba(226, 232, 240, .4); font-size: 11px; font-style: normal; font-weight: 700;
    pointer-events: none;
}
.wr-input-wrap input.form-control ~ em { top: 50%; bottom: auto; transform: translateY(-50%); }

.wr-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.wr-swatch {
    position: relative; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 9px; background: var(--c, #ff3158);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.wr-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .18); }
.wr-swatch-more {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(255, 255, 255, .06); color: rgba(226, 232, 240, .8);
}
.wr-swatch-more input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.wr-icon-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wr-icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px; font-size: 21px;
    border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .05); color: #fff;
}
.wr-icon-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px;
    margin-top: 9px; padding: 9px;
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(0, 0, 0, .22);
}
.wr-icon-picker button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px;
    background: rgba(255, 255, 255, .04); color: rgba(226, 232, 240, .85); font-size: 17px;
}
.wr-icon-picker button:hover { border-color: rgba(255, 45, 85, .5); color: #fff; }

.wr-card {
    padding: 14px; border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px; background: rgba(255, 255, 255, .022);
}
.wr-card + .wr-card { margin-top: 14px; }
.wr-card-head { display: flex; align-items: center; gap: 8px; }
.wr-card-head strong { color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .09em; }
.wr-card > p { margin: 9px 0 12px; color: rgba(226, 232, 240, .5); font-size: 11.5px; font-weight: 650; line-height: 1.45; }
.wr-card .form-select { margin-bottom: 9px; }

.wr-switch { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.wr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wr-switch-ui {
    flex: 0 0 auto; position: relative; width: 38px; height: 21px; margin-top: 1px;
    border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .16s;
}
.wr-switch-ui::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
    border-radius: 50%; background: #fff; transition: transform .16s;
}
.wr-switch input:checked + .wr-switch-ui { background: #ff2d55; }
.wr-switch input:checked + .wr-switch-ui::after { transform: translateX(17px); }
.wr-switch-text b { display: block; color: #fff; font-size: 12.5px; font-weight: 800; }
.wr-switch-text small { display: block; color: rgba(226, 232, 240, .45); font-size: 11px; }

.wr-stepper { display: flex; align-items: center; gap: 9px; }
.wr-stepper-btns { display: flex; flex-direction: column; gap: 2px; }
.wr-stepper-btns button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 17px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .10); border-radius: 6px;
    background: rgba(255, 255, 255, .05); color: rgba(226, 232, 240, .8); font-size: 12px;
}
.wr-stepper-btns button:hover { border-color: rgba(255, 45, 85, .5); color: #fff; }
.wr-stepper input {
    width: 74px; height: 38px; text-align: center;
    border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px;
    background: rgba(0, 0, 0, .28); color: #fff; font-size: 14px; font-weight: 800;
}
.wr-stepper em { color: rgba(226, 232, 240, .45); font-size: 12.5px; font-style: normal; font-weight: 750; }

.wr-members-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
    padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px; background: rgba(255, 255, 255, .025);
}
.wr-members-note i { color: #7aa7ff; font-size: 18px; }
.wr-members-note strong { display: block; color: #fff; font-size: 12.5px; font-weight: 800; }
.wr-members-note span { display: block; margin-top: 3px; color: rgba(226, 232, 240, .5); font-size: 11.5px; line-height: 1.45; }

@media (max-width: 1100px) {
    .wr-stats { grid-template-columns: 1fr; }
    .wr-body { grid-template-columns: 1fr; }
    .wr-grid { grid-template-columns: 1fr; }
}


/* --- Role toplu uye atama --- */
.wr-assign-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.wr-search { position: relative; flex: 1 1 240px; min-width: 0; max-width: 380px; }
.wr-search i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: rgba(226, 232, 240, .4); font-size: 15px;
}
.wr-search input {
    width: 100%; height: 38px; padding: 0 12px 0 33px;
    border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px;
    background: rgba(0, 0, 0, .28); color: #fff; font-size: 12.5px; font-weight: 650;
}
.wr-search input::placeholder { color: rgba(226, 232, 240, .35); }
.wr-search input:focus { outline: 0; border-color: rgba(255, 45, 85, .45); }

.wr-assign-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-assign-count { color: rgba(226, 232, 240, .55); font-size: 12px; font-weight: 700; }
.wr-assign-count b { color: #fff; font-weight: 900; }
.wr-assign-count em { color: #ff6b85; font-style: normal; font-weight: 800; }
.wr-btn[disabled] { opacity: .45; pointer-events: none; }

.wr-userlist {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px;
    max-height: 340px; overflow-y: auto; padding-right: 3px;
}
.wr-user {
    position: relative; display: flex; align-items: center; gap: 9px; margin: 0;
    padding: 8px 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}
.wr-user:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
.wr-user.is-on { border-color: rgba(255, 45, 85, .5); background: rgba(255, 45, 85, .10); }
.wr-user-check { position: absolute; opacity: 0; width: 0; height: 0; }

.wr-user-tick {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .3);
    color: transparent; font-size: 12px;
}
.wr-user.is-on .wr-user-tick { border-color: #ff2d55; background: #ff2d55; color: #fff; }

.wr-user-avatar {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 9px;
    background: rgba(255, 255, 255, .07); color: #fff; font-size: 12px; font-weight: 900;
}
.wr-user-main { min-width: 0; flex: 1 1 auto; }
.wr-user-main strong {
    display: block; color: #fff; font-size: 12.5px; font-weight: 800;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wr-user-main small { display: block; color: rgba(226, 232, 240, .42); font-size: 10.5px; font-weight: 700; }

.wr-userlist-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 26px 12px; color: rgba(226, 232, 240, .45); font-size: 12.5px;
}
.wr-userlist-empty i { font-size: 18px; }

.wr-assign-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
    color: rgba(226, 232, 240, .45); font-size: 11.5px; font-weight: 650; line-height: 1.5;
}
.wr-assign-note i { color: #7aa7ff; font-size: 15px; }


/* --- Kategorili yetki ekrani --- */
.wr-permgroup { margin-bottom: 18px; }
.wr-permgroup-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 9px; padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.wr-permgroup-head h4 {
    margin: 0; color: rgba(226, 232, 240, .82);
    font-size: 11.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.wr-permgroup-all {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
    color: rgba(226, 232, 240, .5); font-size: 11.5px; font-weight: 700;
}
.wr-permgroup-all input { accent-color: #ff2d55; }
.lt-permission-card.is-danger {
    border-color: rgba(255, 45, 85, .35) !important;
    background: rgba(255, 45, 85, .07) !important;
}

/* --- Yetki ekrani KOMPAKT gorunum ---
   37 yetki 78px yuksekliginde kartlarla ~1000px'lik bir kaydirma yapiyordu.
   Kartlar tek satirlik sikisik satirlara donusturuldu; kisalan metnin tamami
   fare uzerine gelince ipucunda gorunur. */
.wr-permgroup .lt-permission-grid {
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 6px;
}

.wr-permgroup .lt-permission-card {
    align-items: center;
    gap: 9px;
    min-height: 0;
    padding: 7px 10px;
    border-radius: 10px;
}

.wr-permgroup .lt-permission-card > span {
    min-width: 0;
    flex: 1 1 auto;
}

.wr-permgroup .lt-permission-card input {
    margin-top: 0;
    flex: 0 0 auto;
    accent-color: #ff2d55;
}

.wr-permgroup .lt-permission-card strong {
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wr-permgroup .lt-permission-card small {
    font-size: 10.5px;
    line-height: 1.3;
    opacity: .5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wr-permgroup { margin-bottom: 13px; }

.wr-permgroup-head {
    margin-bottom: 7px;
    padding-bottom: 5px;
}

.wr-permgroup-head h4 { font-size: 10.5px; }

/* Yonetici kartinin tam genislikte ve belirgin kalmasi */
.wr-permgroup .lt-permission-card.is-danger { grid-column: 1 / -1; }

/* --- Yetki ekrani: modern kart + gecis anahtari gorunumu ---
   Her kategori TEK kart; satirlarin kendi cercevesi yok. Kutucuk yerine
   anahtar kullanildi (panelin geri kalaniyla ayni dil). */
.wr-permgroup {
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .022);
    overflow: hidden;
}

.wr-permgroup-head {
    margin: 0;
    padding: 9px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .022);
}

.wr-permgroup-head h4 { font-size: 10.5px; letter-spacing: .1em; }

.wr-permcount {
    margin-right: auto;
    margin-left: 9px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(226, 232, 240, .5);
    font-size: 10px;
    font-weight: 800;
}
.wr-permcount.is-on { background: rgba(255, 45, 85, .16); color: #ff8098; }

.wr-permgroup .lt-permission-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0;
    padding: 4px;
}

.wr-permgroup .lt-permission-card {
    align-items: center;
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 8px 9px;
    border: 0 !important;
    border-radius: 9px;
    background: transparent !important;
}
.wr-permgroup .lt-permission-card:hover { background: rgba(255, 255, 255, .045) !important; }

.wr-permgroup .lt-permission-card > span {
    order: 1;
    min-width: 0;
    flex: 1 1 auto;
}

.wr-permgroup .lt-permission-card strong {
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.25;
    color: rgba(248, 250, 252, .92);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wr-permgroup .lt-permission-card small {
    font-size: 10.5px;
    line-height: 1.3;
    color: rgba(226, 232, 240, .38);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Kutucuk -> anahtar */
.wr-permgroup .lt-permission-card input[type="checkbox"] {
    order: 2;
    flex: 0 0 auto;
    position: relative;
    width: 30px;
    height: 17px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    cursor: pointer;
    transition: background .15s;
}
.wr-permgroup .lt-permission-card input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.wr-permgroup .lt-permission-card input[type="checkbox"]:checked { background: #ff2d55; }
.wr-permgroup .lt-permission-card input[type="checkbox"]:checked::after { transform: translateX(13px); }

/* Yonetici: tam genislik, belirgin uyari */
.wr-permgroup .lt-permission-card.is-danger {
    grid-column: 1 / -1;
    background: rgba(255, 45, 85, .07) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 45, 85, .28);
}
.wr-permgroup .lt-permission-card.is-danger strong { color: #ff8098; }

.wr-permgroup-all { font-size: 10.5px; }

/* Rol panelinin baslik satiri (Sil / Kaydet) kaydirirken de gorunur kalsin.
   37 yetki asagi kaydirilinca Kaydet ekrandan cikiyordu; kullanici altta kalan
   "Update" dugmesini basiyor, o ise sunucu ayarlari formunu gonderiyordu ve
   yetki degisiklikleri kaydedilmiyordu. */
.wr-detail-head {
    position: sticky;
    top: -1px;
    z-index: 5;
    margin: -14px -16px 0;
    padding: 12px 16px;
    background: rgba(10, 14, 26, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px 16px 0 0;
}

.wr-subtabs {
    position: sticky;
    top: 62px;
    z-index: 4;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(10, 14, 26, .96);
    backdrop-filter: blur(6px);
}

/* Roller panosunun kendi alt cubugu. Oda formunun alt cubugu bu sekmede
   gizlenir (o dugme oda ayarlarini kaydeder ve can_manage_room ister). */
.wr-footer {
    position: sticky;
    bottom: -1px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px -16px -16px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(10, 14, 26, .96);
    backdrop-filter: blur(6px);
    border-radius: 0 0 16px 16px;
}
.wr-footer-note {
    color: rgba(226, 232, 240, .45);
    font-size: 11.5px;
    font-weight: 650;
}

/* Sunucu secimi satiri: ad tasmasin, simge kutusunu doldursun.
   Simge artik <img> ile ciziliyor (background-image yerine); bu, sohbet
   kenar cubugundaki calisan yontemle ayni. */
.lt-manage-room-list .room-manage-row { min-width: 0; }
.lt-manage-room-list .room-manage-row > .col,
.lt-manage-room-list .room-manage-row > .col-auto { min-width: 0; }

.lt-manage-room-list .room-manage-image { overflow: hidden; }
.lt-manage-room-list .room-manage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.lt-manage-room-list .room-manage-name {
    max-width: 100% !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lt-manage-room-list .lt-manage-room-meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ===== whitoo-brand.css ===== */
: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 {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #ff344f, #d91031) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    box-shadow: 0 0 0 2px rgba(239, 35, 60, .13), 0 5px 13px rgba(217, 16, 49, .3) !important;
    vertical-align: middle !important;
}

.lt-room-verified i,
.verified-room-badge i,
.lt-room-verified-header i {
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
}

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

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

/* Woo server verification: glossy red seal with a bold white check. */
.lt-room-verified,
.verified-room-badge,
.lt-room-verified-header {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 35% 24%,rgba(255,255,255,.72) 0 8%,rgba(255,255,255,.18) 18%,transparent 34%),
        linear-gradient(145deg,#ff4059 0%,#ef102f 48%,#9d061f 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.68),
        inset 0 -3px 5px rgba(88,0,16,.48),
        0 0 0 2px rgba(255,35,66,.17),
        0 0 10px rgba(255,20,52,.58),
        0 5px 12px rgba(88,0,16,.38) !important;
}
.lt-room-verified::before,
.verified-room-badge::before,
.lt-room-verified-header::before {
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    inset:-3px !important;
    border:1px solid rgba(255,38,67,.5) !important;
    border-radius:50% !important;
    box-shadow:0 0 8px rgba(255,25,55,.42) !important;
    pointer-events:none !important;
}
.lt-room-verified i,
.verified-room-badge i,
.lt-room-verified-header i {
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:100% !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:1000 !important;
    line-height:1 !important;
    stroke:#fff !important;
    stroke-width:3.8 !important;
    filter:drop-shadow(0 1px 1px rgba(77,0,12,.55)) !important;
}
.lt-room-verified-header {
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    flex-basis:19px !important;
}
.lt-room-verified-header i {font-size:12px !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;
}

/* ===== whitoo-ai-builder.css ===== */
.whitoo-ai-builder {
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.whitoo-ai-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.whitoo-ai-builder-head strong {
    display: block;
    color: var(--tblr-body-color, #f8fafc);
    font-size: 1rem;
}

.whitoo-ai-builder-head small {
    display: block;
    color: var(--tblr-muted, #94a3b8);
    margin-top: 3px;
}

.whitoo-ai-builder-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fb7185;
    font-weight: 700;
    font-size: .78rem;
    margin-bottom: 5px;
}

.whitoo-ai-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.whitoo-ai-builder-grid textarea {
    min-height: 86px;
    resize: vertical;
}

.whitoo-ai-builder-generate {
    min-width: 148px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #14b8a6);
    box-shadow: 0 12px 28px rgba(239, 68, 68, .22);
}

.whitoo-ai-builder-preview {
    margin-top: 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .48);
}

.whitoo-ai-builder-summary {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.whitoo-ai-builder-summary strong {
    display: block;
}

.whitoo-ai-builder-summary span {
    display: block;
    color: #94a3b8;
    font-size: .82rem;
}

.whitoo-ai-builder-apply {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #2563eb);
}

.whitoo-ai-builder-list {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.whitoo-ai-builder-card {
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,.035);
}

.whitoo-ai-builder-card b {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.whitoo-ai-builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    margin: 3px;
    border-radius: 999px;
    color: #e5e7eb;
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .18);
    font-size: .78rem;
}

html.light .whitoo-ai-builder {
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.10), transparent 36%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 16px 38px rgba(15,23,42,.10);
}

html.light .whitoo-ai-builder-preview,
html.light .whitoo-ai-builder-card {
    background: rgba(255,255,255,.86);
}

html.light .whitoo-ai-builder-chip {
    color: #0f172a;
    background: #fff;
}

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

    .whitoo-ai-builder-generate,
    .whitoo-ai-builder-apply {
        width: 100%;
    }

    .whitoo-ai-builder-summary {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ===== woo-theme-studio.css ===== */
:root{--wts-bg:#07101d;--wts-panel:#0f1b2d;--wts-accent:#20e0c4;--wts-accent2:#ff3158;--wts-text:#edf8ff;--wts-muted:#94a3b8;--wts-radius:16px;--wts-blur:18px;--wts-opacity:92%;--wts-border:.18;--wts-shadow:34px;--wts-glow:18px;--wts-font:Poppins,sans-serif}
.woo-theme-tab b{margin-left:5px;padding:2px 6px;border-radius:999px;background:linear-gradient(135deg,#ff3158,#20e0c4);color:#fff;font-size:8px}
.woo-theme-studio{color:#eaf6ff}.woo-theme-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid rgba(32,224,196,.2);border-radius:20px;background:radial-gradient(circle at 90% 0,rgba(32,224,196,.14),transparent 36%),linear-gradient(135deg,#101a2c,#09121f)}
.woo-theme-hero span{color:#63f4e4;font-size:10px;font-weight:900;letter-spacing:.08em}.woo-theme-hero h2{margin:5px 0 3px;font-size:23px}.woo-theme-hero p{margin:0;color:#9fb0c6;font-size:11px}.woo-theme-status{display:grid;justify-items:end}.woo-theme-status b{padding:7px 11px;border-radius:999px;background:#263247;color:#aebbcf;font-size:10px}.woo-theme-status b.is-live{background:rgba(16,185,129,.16);color:#6ee7b7}.woo-theme-status small{margin-top:6px;color:#6f8199}
.woo-theme-lock{display:flex;align-items:center;gap:13px;margin-top:12px;padding:14px;border:1px solid rgba(255,49,88,.28);border-radius:16px;background:rgba(255,49,88,.08)}.woo-theme-lock>i{font-size:26px;color:#ff6d8a}.woo-theme-lock div{display:grid;flex:1}.woo-theme-lock span{color:#9eabbc;font-size:10px}.woo-theme-lock a{padding:9px 12px;border-radius:11px;background:#ff3158;color:#fff!important;font-weight:850;text-decoration:none}.woo-theme-studio.is-locked .woo-theme-layout,.woo-theme-studio.is-locked .woo-theme-actions{opacity:.48;pointer-events:none;filter:grayscale(.3)}
.woo-theme-layout{display:grid;grid-template-columns:minmax(330px,42%) minmax(420px,58%);gap:12px;margin-top:12px}.woo-theme-tools,.woo-theme-preview-wrap{min-width:0;border:1px solid rgba(148,163,184,.14);border-radius:20px;background:#08111f;overflow:hidden}.woo-theme-tools{display:grid;grid-template-columns:132px 1fr;min-height:610px}.woo-theme-toolnav{display:flex;flex-direction:column;gap:4px;padding:10px;border-right:1px solid rgba(148,163,184,.1);background:#070e1a}.woo-theme-toolnav button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#8393aa;text-align:left;font-size:10px;font-weight:750}.woo-theme-toolnav button:hover,.woo-theme-toolnav button.active{background:linear-gradient(90deg,rgba(32,224,196,.16),rgba(32,224,196,.03));color:#7df5e8}.woo-theme-toolnav i{font-size:16px}.woo-theme-sections{padding:14px;overflow:auto}.woo-theme-section{display:none}.woo-theme-section.active{display:grid;gap:12px}.woo-theme-section label{display:grid;gap:6px;color:#a9b7ca;font-size:10px;font-weight:800}.woo-theme-section input[type=text],.woo-theme-section input[type=url],.woo-theme-section textarea,.woo-theme-section select{width:100%;min-height:39px;border:1px solid rgba(148,163,184,.16);border-radius:11px;background:#0d1829;color:#eef7ff;padding:9px 10px;outline:0}.woo-theme-section textarea{resize:vertical}.woo-theme-section input:focus,.woo-theme-section textarea:focus,.woo-theme-section select:focus{border-color:rgba(32,224,196,.55);box-shadow:0 0 0 3px rgba(32,224,196,.08)}
.woo-theme-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.woo-theme-presets button{min-width:0;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(148,163,184,.13);border-radius:11px;background:#0c1727;color:#d9e5f3;text-align:left;font-size:9px;font-weight:800}.woo-theme-presets button:hover,.woo-theme-presets button.active{border-color:var(--wts-accent);background:rgba(32,224,196,.08)}.woo-theme-presets i{width:29px;height:29px;flex:0 0 29px;border-radius:9px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:inset 0 0 0 4px var(--p)}.woo-theme-ai{display:grid;gap:9px;padding:12px;border:1px solid rgba(32,224,196,.2);border-radius:14px;background:linear-gradient(145deg,rgba(32,224,196,.08),rgba(255,49,88,.06))}.woo-theme-ai>span{font-weight:900}.woo-theme-ai button,[data-theme-ai-generate]{min-height:40px;border:0;border-radius:11px;background:linear-gradient(135deg,#ff3158,#20e0c4);color:#fff;font-weight:900}.woo-theme-ai small{color:#7e8ea4;font-size:9px}.woo-theme-colorgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.woo-theme-colorgrid label{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid rgba(148,163,184,.12);border-radius:11px;background:#0c1727}.woo-theme-colorgrid input{width:34px;height:28px;border:0;background:transparent}.woo-theme-section input[type=range]{accent-color:#20e0c4}.woo-theme-section output{float:right;color:#6ceee1}.woo-theme-switch{display:flex!important;align-items:center;gap:9px;padding:11px;border:1px solid rgba(148,163,184,.12);border-radius:11px;background:#0c1727}.woo-theme-switch input{accent-color:#20e0c4}.woo-theme-note{display:flex;gap:8px;padding:11px;border-radius:11px;background:rgba(32,224,196,.07);color:#8fa0b7;font-size:9px}.woo-theme-history{display:grid;gap:7px}.woo-theme-history button{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(148,163,184,.12);border-radius:11px;background:#0c1727;color:#dce8f6;text-align:left}.woo-theme-history span{display:grid;flex:1}.woo-theme-history small{color:#73849a}.woo-theme-history em{color:#65eade;font-size:9px;font-style:normal}
.woo-theme-preview-wrap{display:flex;flex-direction:column;padding:12px;background:radial-gradient(circle at 100% 0,rgba(32,224,196,.08),transparent 32%),#070e18}.woo-theme-previewbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#6f8199;font-size:9px;font-weight:900}.woo-theme-previewbar div{display:flex;gap:4px}.woo-theme-previewbar button{width:32px;height:28px;border:1px solid rgba(148,163,184,.12);border-radius:8px;background:#0c1727;color:#8798ad}.woo-theme-previewbar button.active{border-color:#20e0c4;color:#64eee0}.woo-theme-preview{position:relative;width:100%;height:520px;display:grid;grid-template-columns:48px 1fr;margin:auto;border:1px solid rgba(255,255,255,var(--wts-border));border-radius:var(--wts-radius);overflow:hidden;background:var(--wts-bg);color:var(--wts-text);font-family:var(--wts-font);box-shadow:0 20px var(--wts-shadow) rgba(0,0,0,.34);transition:.22s}.woo-theme-preview.device-tablet{max-width:520px}.woo-theme-preview.device-mobile{max-width:300px}.woo-theme-preview>aside{display:flex;flex-direction:column;align-items:center;gap:13px;padding-top:14px;background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)}.woo-theme-preview>aside i{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.06);color:var(--wts-accent)}.woo-theme-preview>section{display:grid;grid-template-rows:44px 1fr;min-width:0}.woo-theme-preview>section>header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,var(--wts-border));background:var(--wts-panel)}.woo-theme-preview>section>header span{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--wts-accent) 16%,transparent);color:var(--wts-accent);font-size:8px}.woo-theme-preview-body{display:grid;grid-template-columns:120px 1fr 112px;min-height:0}.woo-theme-preview-body>nav,.woo-theme-preview-body>aside{display:flex;flex-direction:column;gap:7px;padding:11px;background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent);color:var(--wts-muted);font-size:8px}.woo-theme-preview-body>nav span{padding:7px;border-radius:8px}.woo-theme-preview-body>nav span:first-of-type{background:color-mix(in srgb,var(--wts-accent) 14%,transparent);color:var(--wts-text)}.woo-theme-preview-body>article{display:flex;flex-direction:column;gap:10px;padding:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--wts-accent) 5%,transparent),transparent)}.woo-theme-preview-body>article>div{padding:10px;border:1px solid rgba(255,255,255,var(--wts-border));border-radius:var(--wts-radius);background:color-mix(in srgb,var(--wts-panel) 72%,transparent)}.woo-theme-preview-body p{margin:4px 0 0;color:var(--wts-muted);font-size:8px}.woo-theme-preview-body footer{display:flex;gap:6px;margin-top:auto}.woo-theme-preview-body footer input{min-width:0;flex:1;border:1px solid rgba(255,255,255,var(--wts-border));border-radius:10px;background:var(--wts-panel);padding:8px}.woo-theme-preview-body footer button{width:34px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--wts-accent2),var(--wts-accent));color:#fff}.woo-theme-preview.device-mobile .woo-theme-preview-body{grid-template-columns:76px 1fr}.woo-theme-preview.device-mobile .woo-theme-preview-body>aside{display:none}.woo-theme-preview.device-mobile .woo-theme-preview-body>nav{padding:6px}
.woo-theme-actions{display:flex;align-items:center;gap:8px;margin-top:12px;padding:12px;border:1px solid rgba(148,163,184,.13);border-radius:16px;background:#08111f}.woo-theme-actions span{flex:1}.woo-theme-actions button{min-height:40px;padding:0 13px;border:1px solid rgba(148,163,184,.15);border-radius:11px;background:#101b2c;color:#cad7e7;font-size:10px;font-weight:850}.woo-theme-actions button.primary{border:0;background:linear-gradient(135deg,#ff3158,#20e0c4);color:#fff}
body.woo-room-themed{background:var(--wts-bg)!important;color:var(--wts-text);font-family:var(--wts-font)}body.woo-room-themed:before{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--wts-bg-image,none);background-position:center;background-size:cover;opacity:.28;pointer-events:none}body.woo-room-themed .chat-wrapper,body.woo-room-themed .left-sidebar,body.woo-room-themed .rightbar-wrapper,body.woo-room-themed .chat-footer,body.woo-room-themed .modal-content{border-color:rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)!important;backdrop-filter:blur(var(--wts-blur))!important}body.woo-room-themed .card,body.woo-room-themed .user-row,body.woo-room-themed .message-row{border-radius:var(--wts-radius)!important}body.woo-room-themed a,body.woo-room-themed .active,body.woo-room-themed .ti{--tblr-primary:var(--wts-accent)}body.woo-room-themed .btn-primary{border-color:var(--wts-accent)!important;background:linear-gradient(135deg,var(--wts-accent2),var(--wts-accent))!important}
body.woo-room-themed[data-wts-motion=pulse] .room-name{animation:wtsPulse 2.8s ease-in-out infinite}body.woo-room-themed[data-wts-motion=float] .room-img{animation:wtsFloat 3.2s ease-in-out infinite}body.woo-room-themed[data-wts-motion=glow] .chat-footer{box-shadow:0 0 var(--wts-glow) color-mix(in srgb,var(--wts-accent) 35%,transparent)}@keyframes wtsPulse{50%{filter:drop-shadow(0 0 8px var(--wts-accent))}}@keyframes wtsFloat{50%{transform:translateY(-4px)}}
@media(max-width:1100px){.woo-theme-layout{grid-template-columns:1fr}.woo-theme-tools{min-height:520px}.woo-theme-preview{height:460px}}@media(max-width:700px){.woo-theme-tools{grid-template-columns:1fr}.woo-theme-toolnav{position:sticky;top:0;z-index:2;flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid rgba(148,163,184,.1)}.woo-theme-toolnav button{flex:0 0 auto}.woo-theme-presets{grid-template-columns:1fr}.woo-theme-preview-body{grid-template-columns:80px 1fr}.woo-theme-preview-body>aside{display:none}.woo-theme-actions{flex-wrap:wrap}.woo-theme-actions span{display:none}.woo-theme-actions button{flex:1}.woo-theme-hero p{display:none}}
@media(max-width:700px),(prefers-reduced-motion:reduce){body.woo-room-themed[data-wts-mobile-reduce="1"] *{animation:none!important;transition:none!important}}
.woo-theme-schedule{display:flex!important;align-items:center!important;gap:5px!important}.woo-theme-schedule input{height:40px;border:1px solid rgba(148,163,184,.15);border-radius:11px;background:#101b2c;color:#cad7e7;padding:0 8px;font-size:9px}
body.woo-room-themed[data-wts-message="bubbles"] .chat-message-row .message-content,body.woo-room-themed[data-wts-message="bubbles"] .chat-bubble{border-radius:20px 20px 20px 5px!important;background:color-mix(in srgb,var(--wts-panel) 88%,transparent)!important}body.woo-room-themed[data-wts-message="clean"] .chat-message-row .message-content{border:0!important;background:transparent!important;box-shadow:none!important}body.woo-room-themed[data-wts-sidebar="floating"] .left-sidebar,body.woo-room-themed[data-wts-sidebar="floating"] .rightbar-wrapper{margin:8px;border-radius:var(--wts-radius)!important}body.woo-room-themed[data-wts-input="glass"] .chat-footer,body.woo-room-themed[data-wts-input="glass"] .message-input{background:color-mix(in srgb,var(--wts-panel) 68%,transparent)!important}body.woo-room-themed[data-wts-density="compact"] .user-row{min-height:44px!important}body.woo-room-themed[data-wts-density="spacious"] .user-row{min-height:68px!important}body.woo-room-themed.woo-theme-high-contrast{--wts-muted:#d8e4f0;--wts-border:.38}body.woo-room-themed[data-wts-server-list="0"] .rooms-list-wrapper{filter:saturate(.45);opacity:.72}body.woo-room-themed[data-wts-member-list="0"] .rightbar-wrapper{filter:saturate(.5)}
.woo-theme-view-toggle-placeholder{display:none}
[data-woo-theme-view-toggle]{position:fixed;right:14px;bottom:76px;z-index:2147482000;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid rgba(32,224,196,.25);border-radius:999px;background:rgba(7,16,29,.92);color:#8ff8eb;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(12px);font-size:9px;font-weight:850}
.woo-theme-head-actions{display:flex;align-items:center;gap:12px}.woo-theme-head-actions>button{width:42px;height:42px;border:1px solid rgba(148,163,184,.16);border-radius:13px;background:#101b2d;color:#dbe8f6;font-size:20px}.woo-theme-studio.is-fullscreen{position:fixed!important;inset:12px!important;z-index:2147482500!important;display:flex!important;flex-direction:column!important;width:auto!important;height:auto!important;max-width:none!important;margin:0!important;padding:18px!important;border:1px solid rgba(32,224,196,.24)!important;border-radius:24px!important;background:radial-gradient(circle at 5% 0,rgba(255,49,88,.1),transparent 28%),radial-gradient(circle at 95% 0,rgba(32,224,196,.11),transparent 30%),#050b14!important;box-shadow:0 35px 120px rgba(0,0,0,.78)!important;overflow:hidden!important}.woo-theme-studio.is-fullscreen .woo-theme-hero{flex:0 0 auto;padding:17px 20px}.woo-theme-studio.is-fullscreen .woo-theme-layout{flex:1;min-height:0;grid-template-columns:minmax(420px,520px) minmax(620px,1fr);overflow:hidden}.woo-theme-studio.is-fullscreen .woo-theme-tools,.woo-theme-studio.is-fullscreen .woo-theme-preview-wrap{height:100%;min-height:0}.woo-theme-studio.is-fullscreen .woo-theme-tools{grid-template-columns:165px 1fr}.woo-theme-studio.is-fullscreen .woo-theme-toolnav button{min-height:46px;font-size:11px}.woo-theme-studio.is-fullscreen .woo-theme-sections{padding:18px}.woo-theme-studio.is-fullscreen .woo-theme-section label{font-size:11px}.woo-theme-studio.is-fullscreen .woo-theme-section input[type=text],.woo-theme-studio.is-fullscreen .woo-theme-section input[type=url],.woo-theme-studio.is-fullscreen .woo-theme-section textarea,.woo-theme-studio.is-fullscreen .woo-theme-section select{min-height:44px;font-size:12px}.woo-theme-studio.is-fullscreen .woo-theme-preview{height:100%;min-height:560px;max-height:calc(100vh - 220px)}.woo-theme-studio.is-fullscreen .woo-theme-actions{flex:0 0 auto}.woo-theme-editor-open{overflow:hidden!important}
@media(max-width:1050px){.woo-theme-studio.is-fullscreen{inset:4px!important;padding:10px!important;border-radius:16px!important}.woo-theme-studio.is-fullscreen .woo-theme-layout{grid-template-columns:1fr;overflow:auto}.woo-theme-studio.is-fullscreen .woo-theme-preview-wrap{min-height:600px}.woo-theme-studio.is-fullscreen .woo-theme-tools{min-height:620px}}
.woo-theme-section-title{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(32,224,196,.18);border-radius:13px;background:linear-gradient(135deg,rgba(32,224,196,.1),rgba(255,49,88,.05))}.woo-theme-section-title>i{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:rgba(32,224,196,.12);color:#64f1e1;font-size:18px}.woo-theme-section-title div{display:grid}.woo-theme-section-title small{color:#8394aa;font-size:9px}.woo-theme-section hr{width:100%;border-color:rgba(148,163,184,.12)}
/* Published theme: real server surface coverage */
body.woo-room-themed .room-bar,body.woo-room-themed .channel-bar,body.woo-room-themed .sidebar-room{background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)!important;border-color:rgba(255,255,255,var(--wts-border))!important;backdrop-filter:blur(var(--wts-blur))!important}body.woo-room-themed .page-content-wrapper,body.woo-room-themed .group-chat,body.woo-room-themed .wrapper,body.woo-room-themed .main-panel,body.woo-room-themed .chat-scroll,body.woo-room-themed .messages{background-color:transparent!important;color:var(--wts-text)!important}body.woo-room-themed .group-chat{background-image:linear-gradient(135deg,color-mix(in srgb,var(--wts-accent) 6%,transparent),color-mix(in srgb,var(--wts-accent2) 4%,transparent)),var(--wts-bg-image,none)!important;background-position:center!important;background-size:cover!important}body.woo-room-themed .topbar{border-bottom:1px solid rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)!important;color:var(--wts-text)!important;backdrop-filter:blur(var(--wts-blur))!important}body.woo-room-themed .top-channel-name,body.woo-room-themed .room-title,body.woo-room-themed .disc-cat-row,body.woo-room-themed .group-row,body.woo-room-themed .user-row,body.woo-room-themed .woo-right-profile-card,body.woo-room-themed .woo-right-tournament-card{color:var(--wts-text)!important}body.woo-room-themed .disc-cat-row:hover,body.woo-room-themed .disc-cat-row.active,body.woo-room-themed .group-row:hover,body.woo-room-themed .group-row.active{background:color-mix(in srgb,var(--wts-accent) 14%,transparent)!important;color:var(--wts-text)!important;box-shadow:inset 3px 0 0 var(--wts-accent)!important}body.woo-room-themed .woo-room-status-strip span,body.woo-room-themed .badge{border-color:color-mix(in srgb,var(--wts-accent) 30%,transparent)!important;background:color-mix(in srgb,var(--wts-accent) 12%,transparent)!important;color:var(--wts-accent)!important}body.woo-room-themed .right-panel,body.woo-room-themed .rightbar-wrapper{background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)!important;border-color:rgba(255,255,255,var(--wts-border))!important;color:var(--wts-text)!important}body.woo-room-themed .woo-right-profile-card,body.woo-room-themed .woo-right-tournament-card,body.woo-room-themed .woo-right-event-card,body.woo-room-themed .room-users .user-row{border-color:rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) 78%,transparent)!important;border-radius:var(--wts-radius)!important;box-shadow:0 10px var(--wts-shadow) rgba(0,0,0,.14)!important}body.woo-room-themed .room-editor{padding:10px!important;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--wts-bg) 78%,transparent))!important}body.woo-room-themed .editor-container,body.woo-room-themed .editor-wrap,body.woo-room-themed .editor-col{border-color:rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) var(--wts-opacity),transparent)!important;border-radius:var(--wts-radius)!important;color:var(--wts-text)!important;backdrop-filter:blur(var(--wts-blur))!important}body.woo-room-themed .lt-send-message,body.woo-room-themed .whitoo-attach-trigger{border-color:color-mix(in srgb,var(--wts-accent) 45%,transparent)!important;background:linear-gradient(135deg,var(--wts-accent2),var(--wts-accent))!important;color:#fff!important;box-shadow:0 8px var(--wts-glow) color-mix(in srgb,var(--wts-accent) 22%,transparent)!important}body.woo-room-themed .cht .message-data{border:1px solid rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) 84%,transparent)!important;color:var(--wts-text)!important;border-radius:var(--wts-radius)!important;box-shadow:0 8px var(--wts-shadow) rgba(0,0,0,.12)!important}body.woo-room-themed .cht.sent .message-data{background:color-mix(in srgb,var(--wts-accent) 14%,var(--wts-panel))!important;border-color:color-mix(in srgb,var(--wts-accent) 32%,transparent)!important}body.woo-room-themed .chat-txt,body.woo-room-themed .message-html{color:var(--wts-text)!important}body.woo-room-themed .message-time,body.woo-room-themed .message-meta,body.woo-room-themed small,body.woo-room-themed .text-muted{color:var(--wts-muted)!important}body.woo-room-themed .modal-content,body.woo-room-themed .dropdown-menu,body.woo-room-themed .offcanvas{border-color:rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-panel) 96%,var(--wts-bg))!important;color:var(--wts-text)!important;border-radius:var(--wts-radius)!important}body.woo-room-themed input,body.woo-room-themed textarea,body.woo-room-themed select{border-color:rgba(255,255,255,var(--wts-border))!important;background:color-mix(in srgb,var(--wts-bg) 62%,var(--wts-panel))!important;color:var(--wts-text)!important}body.woo-room-themed ::selection{background:var(--wts-accent);color:var(--wts-bg)}
/* Channel identity engine */
body.woo-room-themed .channel-container,body.woo-room-themed .channel-list{background:transparent!important}body.woo-room-themed .channel-main{margin:4px 8px!important;border:1px solid transparent!important;border-radius:var(--wts-radius)!important;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important}body.woo-room-themed .channel-main:hover,body.woo-room-themed .channel-main.active{transform:translateX(3px);border-color:color-mix(in srgb,var(--wts-accent) 28%,transparent)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--wts-accent) 15%,transparent),color-mix(in srgb,var(--wts-accent2) 6%,transparent))!important;box-shadow:inset 3px 0 0 var(--wts-accent),0 8px 24px rgba(0,0,0,.12)!important}body.woo-room-themed .channel-item{min-height:42px!important;padding:8px 10px!important;color:var(--wts-muted)!important}body.woo-room-themed .channel-icon{color:var(--wts-accent)!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--wts-accent) 45%,transparent))}body.woo-room-themed .channel-name{font-weight:850!important;letter-spacing:.01em;color:var(--wts-text)!important;transition:.2s ease!important}body.woo-room-themed[data-wts-channel-effect="gradient"] .channel-name,body.woo-room-themed[data-wts-channel-effect="gradient"] .top-channel-name{background:linear-gradient(90deg,var(--wts-accent),var(--wts-text),var(--wts-accent2));background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}body.woo-room-themed[data-wts-channel-effect="neon"] .channel-name,body.woo-room-themed[data-wts-channel-effect="neon"] .top-channel-name{color:var(--wts-accent)!important;text-shadow:0 0 5px var(--wts-accent),0 0 15px color-mix(in srgb,var(--wts-accent) 58%,transparent)}body.woo-room-themed[data-wts-channel-effect="glow"] .channel-name,body.woo-room-themed[data-wts-channel-effect="glow"] .top-channel-name{color:var(--wts-text)!important;text-shadow:0 0 10px color-mix(in srgb,var(--wts-accent) 72%,transparent)}body.woo-room-themed[data-wts-channel-effect="underline"] .channel-name{width:max-content;border-bottom:2px solid var(--wts-accent);padding-bottom:2px}body.woo-room-themed[data-wts-channel-animation="pulse"] .channel-main.active .channel-name{animation:wtsChannelPulse 2.2s ease-in-out infinite}body.woo-room-themed[data-wts-channel-animation="float"] .channel-main:hover .channel-name{animation:wtsChannelFloat 1.8s ease-in-out infinite}body.woo-room-themed[data-wts-channel-animation="shimmer"] .channel-name{background-size:220% 100%!important;animation:wtsChannelShimmer 4s linear infinite}body.woo-room-themed .channel-cat{margin:14px 10px 6px!important;padding:8px 10px!important;border-radius:10px!important;color:var(--wts-muted)!important}body.woo-room-themed[data-wts-category-effect="line"] .channel-cat{border-left:3px solid var(--wts-accent)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--wts-accent) 10%,transparent),transparent)!important}body.woo-room-themed[data-wts-category-effect="badge"] .channel-cat{border:1px solid color-mix(in srgb,var(--wts-accent) 20%,transparent)!important;background:color-mix(in srgb,var(--wts-panel) 82%,transparent)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}body.woo-room-themed[data-wts-category-effect="glow"] .channel-cat{color:var(--wts-accent)!important;text-shadow:0 0 10px var(--wts-accent);box-shadow:0 0 18px color-mix(in srgb,var(--wts-accent) 12%,transparent)}body.woo-room-themed[data-wts-server-icon-effect="ring"] .room-list .chatroom-item img{outline:2px solid var(--wts-accent);outline-offset:2px}body.woo-room-themed[data-wts-server-icon-effect="glow"] .room-list .chatroom-item img{box-shadow:0 0 8px var(--wts-accent),0 0 22px color-mix(in srgb,var(--wts-accent2) 55%,transparent)!important}body.woo-room-themed[data-wts-server-icon-effect="float"] .room-list .cn-tab{animation:wtsServerFloat 3s ease-in-out infinite}body.woo-room-themed[data-wts-background-pattern="grid"] .group-chat{background-image:linear-gradient(color-mix(in srgb,var(--wts-accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--wts-accent) 8%,transparent) 1px,transparent 1px),var(--wts-bg-image,none)!important;background-size:34px 34px,34px 34px,cover!important}body.woo-room-themed[data-wts-background-pattern="dots"] .group-chat{background-image:radial-gradient(circle,color-mix(in srgb,var(--wts-accent) 18%,transparent) 1px,transparent 1.5px),var(--wts-bg-image,none)!important;background-size:22px 22px,cover!important}body.woo-room-themed[data-wts-background-pattern="aurora"] .group-chat{background-image:radial-gradient(circle at 18% 10%,color-mix(in srgb,var(--wts-accent) 20%,transparent),transparent 34%),radial-gradient(circle at 84% 16%,color-mix(in srgb,var(--wts-accent2) 18%,transparent),transparent 36%),var(--wts-bg-image,none)!important;background-size:cover!important}body.woo-room-themed[data-wts-message-effect="accent"] .cht .message-data{box-shadow:inset 3px 0 0 var(--wts-accent),0 8px var(--wts-shadow) rgba(0,0,0,.12)!important}body.woo-room-themed[data-wts-message-effect="glass"] .cht .message-data{background:color-mix(in srgb,var(--wts-panel) 62%,transparent)!important;backdrop-filter:blur(var(--wts-blur))!important}body.woo-room-themed[data-wts-message-effect="outline"] .cht .message-data{border:1px solid color-mix(in srgb,var(--wts-accent) 42%,transparent)!important;background:transparent!important}
@keyframes wtsChannelPulse{50%{opacity:.76;text-shadow:0 0 16px var(--wts-accent)}}@keyframes wtsChannelFloat{50%{transform:translateY(-2px)}}@keyframes wtsChannelShimmer{to{background-position:220% center}}@keyframes wtsServerFloat{50%{transform:translateY(-3px)}}
.woo-theme-preview[data-wts-channel-effect="gradient"] .woo-theme-preview-body>nav span{background-image:linear-gradient(90deg,var(--wts-accent),var(--wts-text),var(--wts-accent2));background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.woo-theme-preview[data-wts-channel-effect="neon"] .woo-theme-preview-body>nav span{color:var(--wts-accent)!important;text-shadow:0 0 8px var(--wts-accent)}.woo-theme-preview[data-wts-channel-effect="glow"] .woo-theme-preview-body>nav span{text-shadow:0 0 10px var(--wts-accent)}.woo-theme-preview[data-wts-channel-animation="pulse"] .woo-theme-preview-body>nav span{animation:wtsChannelPulse 2.2s ease-in-out infinite}.woo-theme-preview[data-wts-channel-animation="float"] .woo-theme-preview-body>nav span{animation:wtsChannelFloat 2s ease-in-out infinite}.woo-theme-preview[data-wts-channel-animation="shimmer"] .woo-theme-preview-body>nav span{background-size:220% 100%;animation:wtsChannelShimmer 4s linear infinite}.woo-theme-preview[data-wts-message-effect="accent"] .woo-theme-preview-body>article>div{box-shadow:inset 3px 0 0 var(--wts-accent)}.woo-theme-preview[data-wts-message-effect="glass"] .woo-theme-preview-body>article>div{background:color-mix(in srgb,var(--wts-panel) 58%,transparent);backdrop-filter:blur(var(--wts-blur))}.woo-theme-preview[data-wts-background-pattern="grid"]{background-image:linear-gradient(color-mix(in srgb,var(--wts-accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--wts-accent) 9%,transparent) 1px,transparent 1px);background-size:28px 28px}.woo-theme-preview[data-wts-background-pattern="dots"]{background-image:radial-gradient(circle,color-mix(in srgb,var(--wts-accent) 24%,transparent) 1px,transparent 1.5px);background-size:18px 18px}
/* Per-channel and placed animated icons */
.woo-decoration-list{display:grid;gap:9px}.woo-decoration-card{display:grid;gap:10px;padding:12px;border:1px solid rgba(148,163,184,.13);border-radius:14px;background:#0b1626}.woo-decoration-card>header{display:flex;align-items:center;gap:9px}.woo-decoration-card>header>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(32,224,196,.1);color:#70f1e4;font-size:17px}.woo-decoration-card>header div{display:grid}.woo-decoration-card>header small{color:#71839a;font-size:9px}.woo-decoration-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.woo-decoration-fields label{min-width:0}.woo-decoration-fields input[type=color]{width:100%;height:44px;padding:4px;border:1px solid rgba(148,163,184,.16);border-radius:11px;background:#0d1829}
body.woo-room-themed .woo-theme-has-custom-icon .channel-icon>i.ti:not(.woo-theme-decoration){display:none!important}.woo-theme-decoration{--woo-decoration-color:var(--wts-accent);display:inline-grid!important;place-items:center;flex:0 0 auto;color:var(--woo-decoration-color)!important;font-size:17px!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--woo-decoration-color) 52%,transparent));transform-origin:center;will-change:transform,filter,opacity}.woo-theme-decoration-channel{margin-right:3px}.woo-theme-decoration-server{margin-right:7px;font-size:19px!important}.woo-theme-decoration-right{width:32px;height:32px;margin-right:7px;border:1px solid color-mix(in srgb,var(--woo-decoration-color) 32%,transparent);border-radius:10px;background:color-mix(in srgb,var(--woo-decoration-color) 10%,transparent)}.woo-theme-decoration[data-effect="gradient"]{background:linear-gradient(135deg,var(--woo-decoration-color),var(--wts-accent2));background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.woo-theme-decoration[data-effect="neon"]{text-shadow:0 0 5px var(--woo-decoration-color),0 0 14px var(--woo-decoration-color)}.woo-theme-decoration[data-effect="glow"]{filter:drop-shadow(0 0 7px var(--woo-decoration-color)) drop-shadow(0 0 15px color-mix(in srgb,var(--woo-decoration-color) 52%,transparent))}.woo-theme-decoration[data-effect="fire"]{background:linear-gradient(180deg,#fff3a4,#ff9d00,#ff3158);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 7px #ff5a36)}.woo-theme-decoration[data-effect="ice"]{background:linear-gradient(180deg,#fff,#8be9ff,#3b82f6);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 7px #64dffc)}.woo-theme-decoration[data-effect="gold"]{background:linear-gradient(135deg,#fff4a8,#f8c84a,#a66b00);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px #e8b52d)}.woo-theme-decoration[data-animation="pulse"]{animation:wooDecorationPulse 1.9s ease-in-out infinite}.woo-theme-decoration[data-animation="float"]{animation:wooDecorationFloat 2.6s ease-in-out infinite}.woo-theme-decoration[data-animation="spin"]{animation:wooDecorationSpin 4s linear infinite}.woo-theme-decoration[data-animation="shimmer"]{animation:wooDecorationShimmer 2.2s ease-in-out infinite}.woo-theme-decoration[data-animation="bounce"]{animation:wooDecorationBounce 1.8s ease-in-out infinite}.channel-main[data-woo-effect="gradient"] .channel-name{background:linear-gradient(90deg,var(--woo-decoration-color),var(--wts-text),var(--wts-accent2));background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.channel-main[data-woo-effect="neon"] .channel-name{color:var(--woo-decoration-color)!important;text-shadow:0 0 6px var(--woo-decoration-color),0 0 15px var(--woo-decoration-color)}.channel-main[data-woo-effect="glow"] .channel-name{color:var(--wts-text)!important;text-shadow:0 0 10px var(--woo-decoration-color)}.channel-main[data-woo-effect="fire"] .channel-name{background:linear-gradient(90deg,#ffcb52,#ff643d,#ff3158);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.channel-main[data-woo-effect="ice"] .channel-name{background:linear-gradient(90deg,#dffaff,#67dcff,#548cff);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.channel-main[data-woo-effect="gold"] .channel-name{background:linear-gradient(90deg,#fff4ac,#f2bf3c,#fff0a0);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.channel-main[data-woo-animation="pulse"]{animation:wooDecorationPulse 2.4s ease-in-out infinite}.channel-main[data-woo-animation="float"]{animation:wooDecorationFloat 3s ease-in-out infinite}.channel-main[data-woo-animation="shimmer"] .channel-name{background-size:220% 100%;animation:wtsChannelShimmer 3.5s linear infinite}.channel-main[data-woo-animation="bounce"] .channel-icon{animation:wooDecorationBounce 2s ease-in-out infinite}
@keyframes wooDecorationPulse{50%{opacity:.72;filter:brightness(1.35)}}@keyframes wooDecorationFloat{50%{transform:translateY(-3px)}}@keyframes wooDecorationSpin{to{transform:rotate(360deg)}}@keyframes wooDecorationShimmer{50%{filter:brightness(1.65) drop-shadow(0 0 10px var(--woo-decoration-color))}}@keyframes wooDecorationBounce{45%{transform:translateY(-4px) scale(1.08)}65%{transform:translateY(0) scale(.98)}}
@media(max-width:700px){.woo-decoration-fields{grid-template-columns:1fr}.woo-theme-decoration[data-animation="spin"]{animation-duration:7s}}@media(prefers-reduced-motion:reduce){.woo-theme-decoration,.channel-main{animation:none!important}}
.woo-theme-decoration-channel[data-position="after"]{margin-left:auto!important;margin-right:2px!important}.woo-theme-decoration-channel[data-position="badge"]{width:27px;height:27px;margin-left:auto!important;border:1px solid color-mix(in srgb,var(--woo-decoration-color) 40%,transparent);border-radius:9px;background:color-mix(in srgb,var(--woo-decoration-color) 12%,transparent)}.room-title,.woo-right-profile-top{position:relative}.woo-theme-decoration-server[data-position="badge"]{width:28px;height:28px;margin-left:7px;border:1px solid color-mix(in srgb,var(--woo-decoration-color) 40%,transparent);border-radius:9px;background:color-mix(in srgb,var(--woo-decoration-color) 12%,transparent)}.woo-theme-decoration-server[data-position="corner"]{position:absolute;right:-22px;top:-14px;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--woo-decoration-color) 14%,transparent)}.woo-theme-decoration-right[data-position="after"],.woo-theme-decoration-right[data-position="badge"]{margin-left:auto}.woo-theme-decoration-right[data-position="corner"]{position:absolute;right:5px;top:5px;z-index:3;margin:0}

/* Cinematic multi-layer atmosphere engine */
body.woo-room-themed .group-chat{position:relative;isolation:isolate;overflow:hidden;background-color:var(--wts-bg)!important}body.woo-room-themed .group-chat:before,body.woo-room-themed .group-chat:after{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;opacity:calc(var(--wts-ambient,.55) * .7);will-change:transform,background-position,filter}body.woo-room-themed .group-chat:before{background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--wts-accent) 30%,transparent),transparent 43%),radial-gradient(ellipse at 82% 24%,color-mix(in srgb,var(--wts-accent2) 25%,transparent),transparent 40%),radial-gradient(ellipse at 48% 90%,color-mix(in srgb,var(--wts-panel) 68%,transparent),transparent 48%);filter:blur(38px);animation:wtsAmbientDrift 18s cubic-bezier(.45,0,.55,1) infinite alternate}body.woo-room-themed .group-chat:after{background:linear-gradient(115deg,transparent 12%,color-mix(in srgb,var(--wts-accent) 13%,transparent) 36%,transparent 58%,color-mix(in srgb,var(--wts-accent2) 11%,transparent) 76%,transparent 92%);background-size:240% 240%;mix-blend-mode:screen;animation:wtsCinematicFlow 15s ease-in-out infinite}body.woo-room-themed[data-wts-gradient="soft"] .group-chat:before{filter:blur(68px);opacity:calc(var(--wts-ambient,.55) * .45)}body.woo-room-themed[data-wts-gradient="cinematic"] .group-chat:after{background:linear-gradient(122deg,rgba(0,0,0,.34),transparent 28%,color-mix(in srgb,var(--wts-accent) 18%,transparent) 48%,transparent 68%,rgba(0,0,0,.42));background-size:220% 220%}body.woo-room-themed[data-wts-gradient="spectral"] .group-chat:after{background:conic-gradient(from 210deg at 50% 50%,transparent,var(--wts-accent),transparent,var(--wts-accent2),transparent);filter:blur(70px);opacity:calc(var(--wts-ambient,.55) * .28)}
body.woo-room-themed[data-wts-ambient="smoke"] .group-chat:before{background:radial-gradient(ellipse at 20% 70%,rgba(165,174,181,.22),transparent 42%),radial-gradient(ellipse at 75% 25%,color-mix(in srgb,var(--wts-accent) 24%,transparent),transparent 38%),radial-gradient(ellipse at 55% 65%,rgba(54,62,69,.38),transparent 46%);filter:blur(46px);animation:wtsSmoke 22s ease-in-out infinite alternate}body.woo-room-themed[data-wts-ambient="embers"] .group-chat:after{background-image:radial-gradient(circle,#ffb14a 0 1px,transparent 2px),radial-gradient(circle,#ff5b32 0 1px,transparent 2px);background-size:61px 61px,89px 89px;animation:wtsEmbers 13s linear infinite}body.woo-room-themed[data-wts-ambient="blocks"] .group-chat:after{background-image:linear-gradient(30deg,color-mix(in srgb,var(--wts-accent) 12%,transparent) 12%,transparent 12.5%,transparent 87%,color-mix(in srgb,var(--wts-accent2) 10%,transparent) 87.5%),linear-gradient(150deg,color-mix(in srgb,var(--wts-accent) 10%,transparent) 12%,transparent 12.5%,transparent 87%,color-mix(in srgb,var(--wts-accent2) 8%,transparent) 87.5%);background-size:56px 96px;animation:wtsBlocks 20s linear infinite}body.woo-room-themed[data-wts-ambient="particles"] .group-chat:after{background-image:radial-gradient(circle,color-mix(in srgb,var(--wts-accent) 75%,white) 0 1px,transparent 2px);background-size:47px 47px;animation:wtsParticles 18s linear infinite}body.woo-room-themed[data-wts-ambient="scanlines"] .group-chat:after{inset:0;background:repeating-linear-gradient(180deg,transparent 0 5px,color-mix(in srgb,var(--wts-accent) 8%,transparent) 6px);animation:wtsScan 8s linear infinite}body.woo-room-themed[data-wts-ambient="stars"] .group-chat:after{background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,var(--wts-accent) 0 1px,transparent 2px);background-size:73px 73px,113px 113px;animation:wtsParticles 25s linear infinite}body.woo-room-themed[data-wts-ambient="waves"] .group-chat:after{border-radius:44%;background:color-mix(in srgb,var(--wts-accent) 11%,transparent);filter:blur(35px);animation:wtsWaves 18s ease-in-out infinite}body.woo-room-themed[data-wts-ambient="none"] .group-chat:before,body.woo-room-themed[data-wts-ambient="none"] .group-chat:after{display:none}
body.woo-room-themed[data-wts-visual-theme="csgo"] .channel-main.active{box-shadow:inset 3px 0 0 var(--wts-accent),0 0 25px color-mix(in srgb,var(--wts-accent) 13%,transparent)!important}body.woo-room-themed[data-wts-visual-theme="minecraft"] .channel-main,body.woo-room-themed[data-wts-visual-theme="minecraft"] .cht .message-data{border-radius:min(var(--wts-radius),8px)!important}
@keyframes wtsAmbientDrift{0%{transform:translate3d(-4%,-2%,0) scale(1)}50%{transform:translate3d(5%,3%,0) scale(1.08)}100%{transform:translate3d(-1%,7%,0) scale(1.03)}}@keyframes wtsCinematicFlow{0%,100%{background-position:0 20%;transform:rotate(-2deg) scale(1.04)}50%{background-position:100% 80%;transform:rotate(2deg) scale(1.1)}}@keyframes wtsSmoke{0%{transform:translate3d(-8%,3%,0) scale(1)}100%{transform:translate3d(9%,-5%,0) scale(1.14)}}@keyframes wtsEmbers{from{background-position:0 300px,30px 520px}to{background-position:40px -300px,-20px -520px}}@keyframes wtsBlocks{to{background-position:112px 192px}}@keyframes wtsParticles{to{background-position:90px -180px,140px -260px}}@keyframes wtsScan{to{background-position:0 120px}}@keyframes wtsWaves{0%,100%{transform:translate(-8%,-3%) rotate(0) scale(.9)}50%{transform:translate(8%,5%) rotate(160deg) scale(1.12)}}
@media(max-width:768px){body.woo-room-themed[data-wts-mobile-reduce="1"] .group-chat:before,body.woo-room-themed[data-wts-mobile-reduce="1"] .group-chat:after{animation-duration:32s!important;filter:blur(58px)}}@media(prefers-reduced-motion:reduce){body.woo-room-themed .group-chat:before,body.woo-room-themed .group-chat:after{animation:none!important}}

/* Reliable icon motion, AI proposals and protected profile panel */
.woo-theme-decoration{position:relative;z-index:2!important;line-height:1!important}.woo-theme-glyph{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;font-style:normal!important;-webkit-text-fill-color:initial!important;background:none!important}.channel-main[data-woo-animation="pulse"] .woo-theme-decoration{animation:wooDecorationPulse 1.9s ease-in-out infinite!important}.channel-main[data-woo-animation="float"] .woo-theme-decoration{animation:wooDecorationFloat 2.4s ease-in-out infinite!important}.channel-main[data-woo-animation="spin"] .woo-theme-decoration{animation:wooDecorationSpin 4s linear infinite!important}.channel-main[data-woo-animation="shimmer"] .woo-theme-decoration{animation:wooDecorationShimmer 2.2s ease-in-out infinite!important}.channel-main[data-woo-animation="bounce"] .woo-theme-decoration{animation:wooDecorationBounce 1.8s ease-in-out infinite!important}body.woo-room-themed[data-wts-channel-animation="pulse"] .channel-name{animation:wtsChannelPulse 2.2s ease-in-out infinite!important}body.woo-room-themed[data-wts-channel-animation="float"] .channel-name{animation:wtsChannelFloat 2.6s ease-in-out infinite!important}body.woo-room-themed[data-wts-channel-animation="shimmer"] .channel-name{background-size:240% 100%!important;animation:wtsChannelShimmer 3.4s linear infinite!important}
.woo-icon-proposals{display:grid;gap:7px;max-height:260px;overflow:auto}.woo-icon-proposal{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid rgba(148,163,184,.14);border-radius:11px;background:#091525}.woo-icon-proposal-glyph{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(32,224,196,.1);font-size:20px}.woo-icon-proposal div{display:grid;flex:1}.woo-icon-proposal small{color:#7890aa}.woo-icon-proposal>i{color:#52e8d7}.woo-icon-accept{background:linear-gradient(135deg,#10b981,#22d3ee)!important}.woo-icon-accept[hidden],.woo-icon-proposals[hidden]{display:none!important}
.woo-decoration-card[data-decoration-scope="right_panel"]{display:none!important}.woo-theme-decoration-right{display:none!important}body.woo-room-themed #rightbar-wrapper,body.woo-room-themed .woo-right-profile-card,body.woo-room-themed .woo-right-profile-top{transform:none!important;animation:none!important;filter:none!important;background-image:none!important;background-size:auto!important}body.woo-room-themed .woo-right-profile-top{position:relative!important;display:flex!important;align-items:center!important;min-width:0!important}body.woo-room-themed .woo-right-profile-top>*{max-width:100%}

/* Performance pass: GIF-like motion without heavy image decoding */
body.woo-room-themed .group-chat{contain:paint}body.woo-room-themed .group-chat:before,body.woo-room-themed .group-chat:after{inset:-12%;filter:none!important;backface-visibility:hidden;transform:translateZ(0);animation-duration:28s!important}.woo-theme-decoration{transform:translateZ(0);backface-visibility:hidden;filter:none!important}.woo-theme-decoration[data-effect="glow"],.woo-theme-decoration[data-effect="neon"]{text-shadow:0 0 8px var(--woo-decoration-color),0 0 18px color-mix(in srgb,var(--woo-decoration-color) 45%,transparent)}@keyframes wooDecorationPulse{0%,100%{transform:translateZ(0) scale(1);opacity:.84}50%{transform:translateZ(0) scale(1.16);opacity:1}}@keyframes wooDecorationFloat{0%,100%{transform:translate3d(0,2px,0) rotate(-2deg)}50%{transform:translate3d(0,-3px,0) rotate(2deg)}}@keyframes wooDecorationShimmer{0%,100%{transform:translateZ(0) scale(1);opacity:.72}50%{transform:translateZ(0) scale(1.12);opacity:1}}@media(max-width:900px){body.woo-room-themed .group-chat:after{display:none!important}body.woo-room-themed .group-chat:before{animation-duration:40s!important;opacity:.28!important}}

/* Universe Studio v2 */
.woo-theme-studio.is-fullscreen{background:linear-gradient(145deg,#050a12,#07111f 45%,#091421)!important}.woo-theme-hero{position:sticky;top:0;z-index:12;border-radius:0 0 20px 20px!important;background:linear-gradient(110deg,#0b1424 0%,#101a2c 46%,#102433 100%)!important;box-shadow:0 15px 45px rgba(0,0,0,.28)}.woo-theme-hero:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#20e0c4,#7c3aed,#ff3158,transparent)}.woo-theme-layout{grid-template-columns:minmax(390px,44%) minmax(480px,56%)!important;gap:16px!important}.woo-theme-tools,.woo-theme-preview-wrap{border-color:rgba(99,244,228,.16)!important;box-shadow:0 24px 70px rgba(0,0,0,.24)}.woo-theme-toolnav{width:150px;background:linear-gradient(180deg,#07101d,#081525)!important}.woo-theme-toolnav button{min-height:44px!important;border:1px solid transparent!important}.woo-theme-toolnav button.active{border-color:rgba(32,224,196,.18)!important;box-shadow:inset 3px 0 0 #20e0c4}.woo-ai-production{display:grid;gap:10px;padding:12px;border:1px solid rgba(32,224,196,.18);border-radius:13px;background:#071321}.woo-ai-production[hidden]{display:none}.woo-ai-production header{display:flex;justify-content:space-between;color:#dffcf8;font-size:10px}.woo-ai-production>div{height:7px;overflow:hidden;border-radius:999px;background:#101f31}.woo-ai-production>div i{display:block;width:8%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20e0c4,#38bdf8,#8b5cf6,#ff3158);transition:width .45s ease}.woo-ai-production.is-running>div i{box-shadow:0 0 18px rgba(32,224,196,.5)}.woo-ai-production.is-error{border-color:rgba(255,49,88,.35)}.woo-ai-production ol{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0;padding:0;list-style:none}.woo-ai-production li{padding:6px;border-radius:8px;background:rgba(255,255,255,.035);color:#8194aa;font-size:8px;text-align:center}
body.woo-room-themed .group-chat:before{background:radial-gradient(ellipse at 10% 15%,color-mix(in srgb,var(--wts-accent) 28%,transparent),transparent 38%),radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--wts-accent2) 25%,transparent),transparent 38%),radial-gradient(ellipse at 72% 88%,color-mix(in srgb,var(--wts-accent3) 22%,transparent),transparent 42%),radial-gradient(ellipse at 20% 82%,color-mix(in srgb,var(--wts-accent4) 18%,transparent),transparent 38%)!important}body.woo-room-themed .group-chat:after{opacity:calc(var(--wts-ambient,.55) * var(--wts-particles,.35));animation-duration:calc(36s - (var(--wts-speed,.55) * 18s))!important}body.woo-room-themed[data-wts-ambient-secondary="embers"] .group-chat:after{background-image:radial-gradient(circle,#ffd078 0 1px,transparent 2px),radial-gradient(circle,var(--wts-accent3) 0 1px,transparent 2px);background-size:61px 61px,91px 91px}body.woo-room-themed[data-wts-ambient-secondary="stars"] .group-chat:after{background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,var(--wts-accent4) 0 1px,transparent 2px);background-size:73px 73px,113px 113px}body.woo-room-themed[data-wts-ambient-secondary="blocks"] .group-chat:after{background-image:linear-gradient(30deg,color-mix(in srgb,var(--wts-accent3) 18%,transparent) 12%,transparent 12.5%,transparent 87%,color-mix(in srgb,var(--wts-accent4) 14%,transparent) 87.5%);background-size:58px 96px}
@media(max-width:1000px){.woo-theme-layout{grid-template-columns:1fr!important}.woo-theme-preview-wrap{min-height:560px}.woo-theme-tools{min-height:auto!important}}@media(max-width:650px){.woo-theme-tools{grid-template-columns:1fr!important}.woo-theme-toolnav{width:auto;display:flex!important;flex-direction:row!important;overflow-x:auto;border-right:0!important}.woo-theme-toolnav button{flex:0 0 auto}.woo-ai-production ol{grid-template-columns:1fr 1fr}}
body.woo-room-themed .group-chat:after{opacity:var(--wts-particle-opacity,.2)!important;animation-duration:var(--wts-duration,28s)!important}
.woo-theme-spin{display:inline-block;animation:wooThemeButtonSpin .8s linear infinite}@keyframes wooThemeButtonSpin{to{transform:rotate(360deg)}}[data-theme-publish][data-busy="1"]{cursor:wait;opacity:.82}

/* ===== whitoo-screen-share.css ===== */
.whitoo-screen-share-stage {
    position: fixed;
    inset: 72px 28px 28px 280px;
    /* 2026-08-27: mesaj kutusu (.editor-wrap) z-index 2147482001 ile
       geliyordu ve paylasilan ekrani ortuyordu. Onun uzerine cikiyoruz;
       kanal menusu (2147483000) hala ustte kaliyor. */
    z-index: 2147482100;
    pointer-events: none;
    overflow: hidden;
}

.whitoo-screen-share-stage.is-dragged {
    inset: auto;
    width: min(1320px, calc(100vw - 16px));
    height: min(820px, calc(100vh - 16px));
}

.whitoo-screen-share-stage.is-hidden {
    display: none;
}

.whitoo-screen-share-card {
    /* 2026-08-27: kart artik sahneyi TAM doldurur. Once 1320x820 ile sinirliydi
       ve saga yapisiyordu, bu yuzden "tam ekran" tam ekran olmuyordu. */
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: rgba(12, 18, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    pointer-events: auto;
    backdrop-filter: blur(18px);
}

.whitoo-screen-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 43, 82, 0.20), rgba(255, 255, 255, 0.06));
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    cursor: default;
    user-select: none;
    touch-action: auto;
}

.whitoo-screen-share-stage.is-dragging .whitoo-screen-share-head {
    cursor: default;
}

.screen-kicker {
    display: block;
    color: #ff4d6d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.screen-title {
    display: block;
    color: #ffffff;
    font-size: 16px;
}

.screen-subtitle {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 700;
}

.screen-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.screen-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.screen-actions .screen-size-preset {
    width: 34px;
    min-width: 34px;
    font-size: 17px;
}

.screen-actions .screen-quality-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 0 10px;
    font-weight: 900;
    font-size: 12px;
}

.screen-actions .screen-quality-toggle.is-active {
    border-color: rgba(52, 211, 153, 0.48);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(34, 197, 94, 0.14));
    color: #bbf7d0;
}

.whitoo-screen-share-stage.is-smooth-mode .whitoo-screen-share-card {
    border-color: rgba(52, 211, 153, 0.22);
}

.whitoo-screen-share-body {
    display: grid;
    /* tek yayinda surut yok; ikinci yayin gelince acilir */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 14px;
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 43, 82, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(7, 10, 19, 0.72), rgba(11, 16, 28, 0.96));
}

.screen-main,
.screen-rail {
    min-height: 0;
    min-width: 0;
}

.screen-main {
    display: grid;
    min-height: 0;
}

.screen-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 77, 109, 0.58) transparent;
}

.screen-tile {
    position: relative;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #050914;
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.screen-tile:hover,
.screen-tile:focus-visible {
    border-color: rgba(255, 77, 109, 0.62);
    box-shadow: 0 16px 38px rgba(255, 43, 82, 0.13);
}

.screen-tile.is-active {
    cursor: default;
    border-color: rgba(255, 77, 109, 0.72);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34);
}

.screen-main .screen-tile {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.screen-rail .screen-tile {
    flex: 0 0 148px;
    min-height: 148px;
    border-radius: 12px;
}

.screen-rail .screen-tile.is-active {
    display: none;
}

.screen-tile video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050914;
    image-rendering: auto;
    transform: translateZ(0);
}

.screen-local-preview {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 77, 109, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(12, 18, 30, 0.96), rgba(6, 10, 19, 0.98));
}

.screen-local-preview-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #ff2b52, #22c7d8);
    box-shadow: 0 18px 48px rgba(255, 43, 82, 0.28);
    font-size: 29px;
}

.screen-local-preview strong {
    font-size: 18px;
    line-height: 1.2;
}

.screen-local-preview span {
    max-width: 360px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    font-weight: 700;
}

.screen-label {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #ffffff;
    background: rgba(5, 9, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-weight: 700;
}

.screen-main .screen-label {
    left: 18px;
    bottom: 18px;
    padding: 10px 13px;
    font-size: 14px;
}

.screen-rail .screen-label {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    justify-content: center;
    border-radius: 12px;
    font-size: 12px;
}

.screen-rail .screen-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-screen-share.is-sharing,
.call-toggle-screen.is-sharing {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff2b52, #ff6b86) !important;
    border-color: transparent !important;
}

.whitoo-screen-share-stage.is-minimized {
    inset: auto 24px 24px auto;
    width: 330px;
    height: 220px;
}

.whitoo-screen-share-stage.is-minimized.is-dragged {
    inset: auto;
    width: 330px;
    height: 220px;
}

.whitoo-screen-share-stage.is-minimized .whitoo-screen-share-card {
    width: 100%;
    height: 100%;
}

.whitoo-screen-share-stage.is-minimized .screen-label {
    display: none;
}

.whitoo-screen-share-stage.is-minimized .whitoo-screen-share-body {
    grid-template-columns: 1fr;
    padding: 8px;
}

.whitoo-screen-share-stage.is-minimized .screen-main .screen-tile {
    min-height: 0;
}

.whitoo-screen-share-stage.is-minimized .screen-rail,
.whitoo-screen-share-stage.is-minimized .screen-subtitle {
    display: none;
}

@media (max-width: 991px) {
    .whitoo-screen-share-stage {
        inset: 72px 10px 82px 10px;
    }

    .whitoo-screen-share-card {
        border-radius: 14px;
    }

    .whitoo-screen-share-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        padding: 10px;
    }

    .screen-main .screen-tile {
        min-height: 260px;
    }

    .screen-rail {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 2px;
    }

    .screen-rail .screen-tile {
        flex: 0 0 min(220px, 52vw);
        min-height: 112px;
    }
}

@media (max-width: 767px) {
    .whitoo-screen-share-stage {
        inset: 8px;
    }

    .whitoo-screen-share-card {
        width: 100%;
        height: 100%;
        border-radius: 16px;
    }

    .whitoo-screen-share-head {
        min-height: 54px;
        padding: 9px 10px;
    }

    .screen-actions button {
        min-width: 34px;
        height: 34px;
    }

    .screen-actions .screen-quality-toggle {
        min-width: 74px;
    }

    .whitoo-screen-share-body {
        padding: 8px;
    }

    .screen-main .screen-tile {
        min-height: 0;
    }
}


/* === 2026-08-27 kendi ekranini izleme ===
   Yayinladigin ekran artik canli olarak sahnede gorunuyor. Tum ekrani
   paylasirken sonsuz ayna etkisi olusabildigi icin basliktaki goz dugmesiyle
   kapatilabiliyor; tercih hatirlaniyor. */
.screen-tile.is-local video { display: block; }
.screen-tile.is-local .screen-local-preview { display: none; }
.whitoo-screen-share-stage.hide-self-preview .screen-tile.is-local video { display: none; }
.whitoo-screen-share-stage.hide-self-preview .screen-tile.is-local .screen-local-preview { display: flex; }

.screen-actions .screen-self-toggle.is-off {
    color: #ff8fa1;
    border-color: rgba(242, 56, 98, 0.42);
    background: rgba(242, 56, 98, 0.12);
}
.screen-tile.is-local .screen-label i { color: #4ade80; }


/* === 2026-08-27 sahne duzeni ===
   Cok yayin, boyut dugmeleri ve en-boy orani. */

/* 4 - surut yalniz birden fazla yayin varken */
.whitoo-screen-share-stage .screen-rail { display: none; }
.whitoo-screen-share-stage.has-multiple-screens .whitoo-screen-share-body {
    grid-template-columns: minmax(0, 1fr) 240px;
}
.whitoo-screen-share-stage.has-multiple-screens .screen-rail {
    display: flex;
}

/* dar boyutta surut yana degil ALTA gecsin */
.whitoo-screen-share-stage.screen-size-small.has-multiple-screens .whitoo-screen-share-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 66px;
}
/* kucultulmus halde yalniz etkin yayin gorunur; digerleri buyutunce secilir */
.whitoo-screen-share-stage.is-minimized .screen-rail { display: none; }
.whitoo-screen-share-stage.is-minimized.has-multiple-screens .whitoo-screen-share-body {
    /* kucultulmus halde surut gizli oldugu icin ikinci satiri da kaldiriyoruz;
       yoksa screen-size-small kurali 66px'lik bos serit birakiyordu */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}
.whitoo-screen-share-stage.is-minimized .whitoo-screen-share-head { min-height: 44px; }
.whitoo-screen-share-stage.is-minimized .whitoo-screen-share-body { padding: 8px; }
.whitoo-screen-share-stage.screen-size-small .screen-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 2px;
}
.whitoo-screen-share-stage.screen-size-small .screen-rail .screen-tile {
    flex: 0 0 108px;
    min-height: 0;
    height: 100%;
}

/* 5 - goruntu gerilmesin: ana karoda tamami gorunur, surutte kirpilir */
.screen-main .screen-tile video { object-fit: contain; background: #050914; }
.screen-rail .screen-tile video { object-fit: cover; }

/* kucultulmus halde baslik sadelesir */
.whitoo-screen-share-stage.is-minimized .screen-kicker,
.whitoo-screen-share-stage.is-minimized .screen-subtitle,
.whitoo-screen-share-stage.is-minimized .screen-size-preset,
.whitoo-screen-share-stage.is-minimized .screen-quality-toggle { display: none; }
.whitoo-screen-share-stage.is-minimized .whitoo-screen-share-head { padding: 8px 10px; }
.whitoo-screen-share-stage.is-minimized .screen-title { font-size: 13px; }

/* etkin boyut dugmesi belli olsun */
.screen-actions .screen-size-preset.is-active {
    border-color: rgba(255, 77, 109, 0.62);
    background: rgba(255, 43, 82, 0.16);
    color: #ffd7de;
}

/* kac yayin var - baslikta rozet */
.screen-count-badge {
    display: none;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 43, 82, 0.18);
    color: #ffb3c0;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}
.whitoo-screen-share-stage.has-multiple-screens .screen-count-badge { display: inline-block; }

/* ===== whitoo-refresh.css ===== */
:root {
    --woo-bg: #070a12;
    --woo-rail: #090d18;
    --woo-panel: rgba(12, 18, 31, .94);
    --woo-panel-2: rgba(16, 24, 39, .96);
    --woo-card: rgba(20, 30, 48, .78);
    --woo-line: rgba(148, 163, 184, .16);
    --woo-line-strong: rgba(45, 212, 191, .34);
    --woo-text: #f7fbff;
    --woo-muted: #9fb0c6;
    --woo-soft: #cbd5e1;
    --woo-teal: #2dd4bf;
    --woo-cyan: #38bdf8;
    --woo-red: #ef233c;
    --woo-gold: #f5c451;
    --woo-radius: 8px;
    --woo-shadow: 0 18px 46px rgba(0, 0, 0, .30);
}

/* Channel form controls: visible native actions in dark mode */
body.incallx .whitoo-compact-channel-modal .whitoo-date-control,
body.incallx .whitoo-compact-channel-modal .whitoo-number-stepper{display:grid!important;grid-template-columns:minmax(0,1fr) 42px;align-items:stretch;gap:7px}
body.incallx .whitoo-compact-channel-modal .whitoo-number-stepper{grid-template-columns:42px minmax(0,1fr) 42px}
body.incallx .whitoo-compact-channel-modal .whitoo-step-btn,
body.incallx .whitoo-compact-channel-modal .whitoo-date-picker-btn{display:grid;place-items:center;min-width:42px;height:44px;padding:0;border:1px solid rgba(251,45,73,.34);border-radius:12px;background:linear-gradient(145deg,rgba(255,41,72,.18),rgba(10,16,24,.96));color:#ff4964;font-size:17px;box-shadow:inset 0 1px rgba(255,255,255,.04);transition:.16s ease}
body.incallx .whitoo-compact-channel-modal .whitoo-step-btn:hover,
body.incallx .whitoo-compact-channel-modal .whitoo-date-picker-btn:hover{border-color:#ff3654;background:linear-gradient(145deg,#ff2948,#a81931);color:#fff;transform:translateY(-1px)}
body.incallx .whitoo-compact-channel-modal .whitoo-step-btn:active,
body.incallx .whitoo-compact-channel-modal .whitoo-date-picker-btn:active{transform:translateY(0) scale(.96)}
body.incallx .whitoo-compact-channel-modal #group_order{text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
body.incallx .whitoo-compact-channel-modal input[type=number]::-webkit-inner-spin-button,
body.incallx .whitoo-compact-channel-modal input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}
body.incallx .whitoo-compact-channel-modal input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:0;width:0;padding:0;margin:0}
/* Mobile account popover compact final 20260614 */
@media (max-width: 768px) {
    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        left: 64px !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
        width: 224px !important;
        min-width: 0 !important;
        max-width: 224px !important;
        max-height: min(348px, calc(100dvh - 170px)) !important;
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: linear-gradient(145deg, rgba(7, 18, 29, .99), rgba(14, 17, 30, .98) 62%, rgba(42, 10, 25, .98)) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 42px !important;
        grid-template-columns: 32px 1fr 28px !important;
        gap: 7px !important;
        padding: 6px 7px !important;
        border-radius: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head img {
        width: 30px !important;
        height: 30px !important;
        border-radius: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-name {
        max-width: 118px !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-meta {
        max-width: 118px !important;
        font-size: 11px !important;
        line-height: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-arrow {
        width: 28px !important;
        height: 28px !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        min-height: 30px !important;
        padding: 3px !important;
        gap: 3px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status {
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status i {
        width: 11px !important;
        height: 11px !important;
        font-size: 11px !important;
        line-height: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        gap: 6px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        min-height: 42px !important;
        gap: 3px !important;
        padding: 5px !important;
        border-radius: 13px !important;
        font-size: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only i {
        font-size: 17px !important;
        line-height: 17px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal a[href*="dashboard"] {
        min-height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        grid-template-columns: 18px 1fr !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-title i {
        font-size: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        gap: 3px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid a {
        min-height: 23px !important;
        padding: 0 2px !important;
        border-radius: 10px !important;
        font-size: 8px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        min-height: 36px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }
}
body.incallx {
    background:
        linear-gradient(180deg, rgba(45, 212, 191, .08), transparent 260px),
        linear-gradient(135deg, #070a12 0%, #0c1220 48%, #080b14 100%) !important;
    color: var(--woo-text);
}
body.incallx #wrapper,
body.incallx .wrapper {
    background: transparent;
}

body.incallx .room-bar {
    width: 74px;
    padding: 10px 0;
    background: linear-gradient(180deg, #070a12, #0b101d) !important;
    border-right: 1px solid rgba(45, 212, 191, .14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .03);
}

body.incallx .mini-brand {
    padding: 8px 0 12px;
}

body.incallx .mini-brand img {
    max-width: 44px;
    max-height: 44px;
    filter: drop-shadow(0 10px 22px rgba(45, 212, 191, .28));
}

body.incallx .mini-brand-seperator {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 212, 191, .58), transparent) !important;
}

body.incallx .room-list {
    margin-top: 12px;
    padding: 0 0 8px;
}

body.incallx .chatroom-item,
body.incallx .private-messages .private-item,
body.incallx .action-item {
    width: 50px;
    height: 50px;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .14);
    background: linear-gradient(145deg, rgba(20, 30, 48, .96), rgba(9, 13, 24, .96)) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .26);
}

body.incallx .chatroom-item:hover,
body.incallx .private-messages .private-item:hover,
body.incallx .action-item:hover,
body.incallx .room-list-item.active .chatroom-item,
body.incallx .private-messages.active .private-item,
body.incallx .action-item.active {
    border-color: var(--woo-line-strong);
    background: linear-gradient(145deg, rgba(20, 184, 166, .22), rgba(15, 23, 42, .96)) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .08), 0 16px 30px rgba(0, 0, 0, .34);
}

body.incallx .room-bar .ti,
body.incallx .private-item i,
body.incallx .action-item i {
    color: #dbeafe !important;
}

body.incallx .pill {
    width: 4px !important;
    background: linear-gradient(180deg, var(--woo-teal), var(--woo-cyan)) !important;
    border-radius: 0 999px 999px 0 !important;
}

body.incallx .sidebar-wrapper,
body.incallx .channel-bar,
body.incallx .rightbar-wrapper {
    background: var(--woo-panel) !important;
    border-color: var(--woo-line) !important;
}

body.incallx .sidebar-wrapper {
    width: 260px;
    min-width: 260px;
}

body.incallx:has(#main-explore.active.show) {
    overflow-x: hidden !important;
}

body.incallx:has(#main-explore.active.show) #wrapper,
body.incallx:has(#main-explore.active.show) .main-container,
body.incallx:has(#main-explore.active.show) .main-tab-content {
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body.incallx:has(#main-explore.active.show) #sidebar-wrapper {
    display: none !important;
}

body.incallx:has(#main-explore.active.show) .main-container,
body.incallx:has(#main-explore.active.show) .main-tab-content,
body.incallx:has(#main-explore.active.show) #main-explore,
body.incallx:has(#main-explore.active.show) #main-explore .page-content-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.incallx:has(#main-explore.active.show) #main-explore .page-content-wrapper {
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 51, 71, .10), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(32, 224, 196, .10), transparent 28%),
        #050811 !important;
    overflow-x: hidden;
}

body.incallx .channel-bar {
    width: 260px;
}

body.incallx .rightbar-wrapper {
    width: 280px;
    min-width: 280px;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03);
}

body.incallx .topbar,
body.incallx .topbar-channels,
body.incallx .topbar-private,
body.incallx .navbar.topbar {
    min-height: 58px;
    background: rgba(7, 10, 18, .76) !important;
    border-bottom: 1px solid var(--woo-line) !important;
    backdrop-filter: blur(18px);
}

body.incallx .room-title,
body.incallx .top-channel-name,
body.incallx .channel-name,
body.incallx .disc-header {
    color: var(--woo-text) !important;
    letter-spacing: 0;
}

body.incallx .room-title {
    max-width: 205px;
    gap: 8px;
}

body.incallx.whitoo-match-room .room-bar,
body.incallx.whitoo-match-room .channel-bar,
body.incallx.whitoo-match-room .rightbar-wrapper,
body.incallx.whitoo-match-room .sidebar-wrapper {
    display: none !important;
}

body.incallx.whitoo-match-room #wrapper,
body.incallx.whitoo-match-room .main-container,
body.incallx.whitoo-match-room .tab-content,
body.incallx.whitoo-match-room .tab-pane,
body.incallx.whitoo-match-room .page-content-wrapper {
    width: 100% !important;
    max-width: none !important;
}

body.incallx.whitoo-match-room .navbar.topbar {
    padding-inline: 18px;
}

body.incallx.whitoo-match-room .sidebarToggle {
    display: none !important;
}

body.incallx.whitoo-match-room .chat-scroll,
body.incallx.whitoo-match-room .group-chat,
body.incallx.whitoo-match-room .chat-content {
    background:
        radial-gradient(circle at 72% 18%, rgba(35, 213, 208, .16), transparent 34%),
        radial-gradient(circle at 20% 78%, rgba(255, 75, 104, .13), transparent 38%),
        #070a12 !important;
}

body.incallx.lt-game-active .lt-game-room-shell {
    max-width: 1360px;
    margin: 8px auto;
    container-type: inline-size;
}

body.incallx.lt-game-active .chats {
    container-type: inline-size;
}

body.incallx.lt-game-active .lt-game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: stretch;
}

body.incallx.lt-game-active .lt-game-main {
    min-width: 0;
}

body.incallx.lt-game-active .lt-game-hero {
    max-width: 1360px;
    margin-bottom: 8px;
}

body.incallx.lt-game-active .lt-game-hero h2 {
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: 0;
}

body.incallx.lt-game-active .lt-game-hero p {
    max-width: 720px;
}

body.incallx.lt-game-active .lt-game-arena {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}

body.incallx.lt-game-active .lt-game-player {
    min-height: 92px;
    border-radius: 18px;
    gap: 5px;
}

body.incallx.lt-game-active .lt-game-player img {
    width: 38px;
    height: 38px;
    border-width: 2px;
}

body.incallx.lt-game-active .lt-game-player.is-empty i {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    font-size: 20px;
}

body.incallx.lt-game-active .lt-game-player strong {
    font-size: 12px;
}

body.incallx.lt-game-active .lt-game-player span,
body.incallx.lt-game-active .lt-game-member-role {
    font-size: 10px;
}

body.incallx.lt-game-active .lt-game-audio {
    max-width: none;
    margin-top: 10px;
    justify-content: flex-start;
    gap: 8px;
}

body.incallx.lt-game-active .lt-game-audio-btn {
    min-height: 34px;
    padding: 0 11px;
    font-size: 12px;
    box-shadow: none;
}

body.incallx.lt-game-active .lt-game-hub {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 75, 104, .16), transparent 32%),
        radial-gradient(circle at 94% 16%, rgba(45, 212, 191, .16), transparent 30%),
        linear-gradient(135deg, rgba(11, 18, 32, .92), rgba(8, 13, 25, .94));
    box-shadow: 0 22px 70px rgba(0, 0, 0, .30);
}

body.incallx.lt-game-active .lt-game-hub-head,
body.incallx.lt-game-active .lt-game-hub-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

body.incallx.lt-game-active .lt-game-hub-current.is-starting {
    border-color: rgba(45, 212, 191, .36);
    background: rgba(45, 212, 191, .09);
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08), 0 16px 46px rgba(45, 212, 191, .08);
}

body.incallx.lt-game-active .lt-game-hub-head span {
    display: block;
    color: #ff4967;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx.lt-game-active .lt-game-hub-head h3 {
    margin: 3px 0 0;
    color: #fff;
    font-size: clamp(18px, 1.8vw, 25px);
    line-height: 1.1;
    letter-spacing: 0;
}

body.incallx.lt-game-active .lt-game-hub-head b {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(45, 212, 191, .24);
    border-radius: 999px;
    background: rgba(45, 212, 191, .09);
    color: #7df5e7;
    font-size: 11px;
    white-space: nowrap;
}

body.incallx.lt-game-active .lt-game-hub-current {
    justify-content: flex-start;
    margin: 10px 0;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
}

body.incallx.lt-game-active .lt-game-hub-current > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff3158, #2dd4bf);
    color: #fff;
    font-size: 20px;
}

body.incallx.lt-game-active .lt-game-hub-current strong,
body.incallx.lt-game-active .lt-game-hub-current small {
    display: block;
    overflow-wrap: anywhere;
}

body.incallx.lt-game-active .lt-game-hub-current strong {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-hub-current small {
    margin-top: 2px;
    color: #9fb0c6;
    font-size: 12px;
    line-height: 1.4;
}

body.incallx.lt-game-active .lt-game-hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 10px;
}

body.incallx.lt-game-active .lt-game-hub.is-external-mode .lt-game-hub-grid {
    grid-template-columns: 1fr;
}

body.incallx.lt-game-active .lt-game-hub-grid article {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 18px;
    background: rgba(3, 7, 18, .34);
}

body.incallx.lt-game-active .lt-game-hub-grid header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #dbeafe;
    font-size: 12px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-hub-grid header i {
    color: #2dd4bf;
}

body.incallx.lt-game-active .lt-game-hub-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.incallx.lt-game-active .lt-game-hub-card {
    min-height: 64px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 8px;
    align-items: center;
    text-align: left;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 15px;
    background: rgba(15, 23, 42, .68);
    color: #eaf2ff;
    cursor: pointer;
    min-width: 0;
}

body.incallx.lt-game-active .lt-game-hub-card:disabled,
body.incallx.lt-game-active .lt-game-external-chip:disabled {
    cursor: not-allowed;
    opacity: .58;
}

body.incallx.lt-game-active .lt-game-hub-card > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 49, 88, .13);
    color: #ff4967;
    font-size: 18px;
}

body.incallx.lt-game-active .lt-game-hub-card strong,
body.incallx.lt-game-active .lt-game-hub-card small {
    display: block;
}

body.incallx.lt-game-active .lt-game-hub-card strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx.lt-game-active .lt-game-hub-card small {
    margin-top: 2px;
    color: #8fa3bd;
    font-size: 11px;
}

body.incallx.lt-game-active .lt-game-hub-card em {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(45, 212, 191, .11);
    color: #6ff7e7;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-hub-card.is-primary,
body.incallx.lt-game-active .lt-game-hub-card.is-selected,
body.incallx.lt-game-active .lt-game-external-chip.is-selected {
    border-color: rgba(45, 212, 191, .72);
    background:
        linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(255, 49, 88, .12)),
        rgba(15, 23, 42, .78);
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .18), 0 14px 34px rgba(45, 212, 191, .10);
}

body.incallx.lt-game-active .lt-game-hub-card,
body.incallx.lt-game-active .lt-game-external-chip {
    position: relative;
}

body.incallx.lt-game-active .lt-game-hub-card.is-selected::after,
body.incallx.lt-game-active .lt-game-external-chip.is-selected::after {
    content: "\2713";
    display: grid;
    place-items: center;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2dd4bf;
    color: #031018;
    font-size: 12px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-external-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.incallx.lt-game-active .lt-game-external-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 999px;
    background: rgba(15, 23, 42, .70);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
}

body.incallx.lt-game-active .lt-game-external-chip i {
    color: #2dd4bf;
}

body.incallx.lt-game-active .lt-game-play-stage {
    margin: 8px 0 10px;
    padding: 12px;
    border: 1px solid rgba(255, 49, 88, .20);
    border-radius: 20px;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 49, 88, .18), transparent 30%),
        rgba(4, 9, 20, .58);
}

body.incallx.lt-game-active .lt-game-play-stage.is-waiting {
    min-height: 96px;
    display: grid;
    place-items: center;
    text-align: center;
}

body.incallx.lt-game-active .lt-external-stage {
    min-height: 118px;
    display: grid;
    place-items: center;
    text-align: center;
    border-color: rgba(45, 212, 191, .26);
    background:
        radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .20), transparent 34%),
        rgba(4, 9, 20, .58);
}

body.incallx.lt-game-active .lt-external-stage div {
    display: grid;
    gap: 6px;
    justify-items: center;
}

body.incallx.lt-game-active .lt-external-stage i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(45, 212, 191, .12);
    color: #2dd4bf;
    font-size: 24px;
}

body.incallx.lt-game-active .lt-external-stage span,
body.incallx.lt-game-active .lt-external-stage small {
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 850;
}

body.incallx.lt-game-active .lt-external-stage strong {
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-back-mini-games {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    padding: 0 14px;
    border: 1px solid rgba(45, 212, 191, .34);
    border-radius: 999px;
    background: rgba(45, 212, 191, .12);
    color: #7df5e7;
    font-size: 12px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-back-mini-games:hover {
    border-color: rgba(45, 212, 191, .64);
    background: rgba(45, 212, 191, .18);
}

body.incallx.lt-game-active .lt-mini-return-row {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 10px;
}

body.incallx.lt-game-active .lt-game-play-stage.is-waiting div {
    display: grid;
    gap: 6px;
    justify-items: center;
}

body.incallx.lt-game-active .lt-game-play-stage.is-waiting i {
    color: #2dd4bf;
    font-size: 24px;
}

body.incallx.lt-game-active .lt-game-play-stage header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

body.incallx.lt-game-active .lt-game-play-stage header span {
    color: #2dd4bf;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx.lt-game-active .lt-game-play-stage h4 {
    margin: 2px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-reset {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(45, 212, 191, .24);
    border-radius: 999px;
    background: rgba(45, 212, 191, .10);
    color: #7df5e7;
    font-size: 11px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-xox-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: min(330px, 68vh);
    margin: 0 auto;
}

body.incallx.lt-game-active .lt-xox-cell {
    aspect-ratio: 1;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 950;
}

body.incallx.lt-game-active .lt-xox-cell.is-filled {
    border-color: rgba(255, 49, 88, .42);
    background: rgba(255, 49, 88, .14);
}

body.incallx.lt-game-active .lt-rps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.incallx.lt-game-active .lt-rps-choice {
    min-height: 82px;
    display: grid;
    place-items: center;
    gap: 7px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 18px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-rps-choice.is-selected,
body.incallx.lt-game-active .lt-quiz-option.is-selected {
    border-color: rgba(45, 212, 191, .88);
    background:
        linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(255, 49, 88, .12)),
        rgba(15, 23, 42, .88);
    box-shadow: inset 0 0 0 2px rgba(45, 212, 191, .22), 0 14px 34px rgba(45, 212, 191, .12);
}

body.incallx.lt-game-active .lt-rps-choice.is-selected i,
body.incallx.lt-game-active .lt-quiz-option.is-selected > span {
    color: #2dd4bf;
}

body.incallx.lt-game-active .lt-rps-choice i {
    color: #ff4967;
    font-size: 30px;
}

body.incallx.lt-game-active .lt-rps-choice strong,
body.incallx.lt-game-active .lt-rps-choice span,
body.incallx.lt-game-active .lt-quiz-option strong,
body.incallx.lt-game-active .lt-quiz-option em {
    display: block;
}

body.incallx.lt-game-active .lt-rps-choice span,
body.incallx.lt-game-active .lt-quiz-option em {
    color: #7df5e7;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-quiz-stage h5 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-quiz-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.incallx.lt-game-active .lt-quiz-option {
    min-height: 78px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    text-align: left;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    cursor: pointer;
}

body.incallx.lt-game-active .lt-quiz-option > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 49, 88, .13);
    color: #ff4967;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-quiz-option.is-correct {
    border-color: rgba(34, 197, 94, .78);
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, .18);
}

body.incallx.lt-game-active .lt-draw-secret,
body.incallx.lt-game-active .lt-draw-guess {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(45, 212, 191, .20);
    border-radius: 16px;
    background: rgba(15, 23, 42, .72);
}

body.incallx.lt-game-active .lt-draw-stage {
    padding: 14px;
}

body.incallx.lt-game-active .lt-draw-stage header {
    margin-bottom: 12px;
}

body.incallx.lt-game-active .lt-draw-secret {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    margin-bottom: 10px;
}

body.incallx.lt-game-active .lt-draw-secret i {
    color: #2dd4bf;
    font-size: 24px;
}

body.incallx.lt-game-active .lt-draw-secret span {
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 900;
}

body.incallx.lt-game-active .lt-draw-secret strong {
    color: #fff;
    font-size: 22px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-draw-clear {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #e5edf7;
    font-size: 12px;
    font-weight: 900;
}

body.incallx.lt-game-active .lt-draw-guess {
    grid-template-columns: minmax(0, 1fr) 44px;
    margin-bottom: 10px;
}

body.incallx.lt-game-active .lt-draw-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    align-items: stretch;
}

body.incallx.lt-game-active .lt-draw-canvas-wrap {
    min-height: 260px;
    border: 1px solid rgba(45, 212, 191, .22);
    border-radius: 18px;
    background:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px),
        #08111f;
    background-size: 24px 24px;
    overflow: hidden;
}

body.incallx.lt-game-active .lt-draw-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

body.incallx.lt-game-active .lt-draw-canvas-wrap[data-can-draw="0"] .lt-draw-canvas {
    cursor: default;
}

body.incallx.lt-game-active .lt-draw-side {
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 16px;
    background: rgba(3, 7, 18, .34);
}

body.incallx.lt-game-active .lt-draw-side > strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-draw-guess-input {
    min-width: 0;
    height: 44px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 13px;
    background: rgba(3, 7, 18, .72);
    color: #fff;
    padding: 0 13px;
    outline: none;
}

body.incallx.lt-game-active .lt-draw-guess-send {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff4b68, #2dd4bf);
    color: #fff;
}

body.incallx.lt-game-active .lt-draw-guesses {
    display: grid;
    gap: 7px;
    max-height: 214px;
    overflow-y: auto;
}

body.incallx.lt-game-active .lt-draw-guesses div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    color: #dbeafe;
    font-size: 12px;
}

body.incallx.lt-game-active .lt-game-play-stage p {
    margin: 12px 0 0;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

body.incallx.lt-game-active .lt-game-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 360px;
    border: 1px solid rgba(45, 212, 191, .20);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 75, 104, .14), transparent 34%),
        rgba(8, 14, 28, .82);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
    overflow: hidden;
}

body.incallx.lt-game-active .lt-game-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

body.incallx.lt-game-active .lt-game-chat-head strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-chat-head i {
    color: #2dd4bf !important;
}

body.incallx.lt-game-active .lt-game-chat-head span {
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 850;
}

body.incallx.lt-game-active .lt-game-chat-list {
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

body.incallx.lt-game-active .lt-game-chat-msg {
    margin-bottom: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 13px;
    background: rgba(15, 23, 42, .72);
}

body.incallx.lt-game-active .lt-game-chat-msg strong,
body.incallx.lt-game-active .lt-game-chat-msg span {
    display: block;
}

body.incallx.lt-game-active .lt-game-chat-msg strong {
    color: #67e8f9;
    font-size: 12px;
    font-weight: 950;
}

body.incallx.lt-game-active .lt-game-chat-msg span {
    margin-top: 3px;
    color: #e5edf7;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

body.incallx.lt-game-active .lt-game-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}

body.incallx.lt-game-active .lt-game-chat-input {
    min-width: 0;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 13px;
    background: rgba(3, 7, 18, .72);
    color: #fff;
    padding: 0 12px;
    outline: none;
}

body.incallx.lt-game-active .lt-game-chat-send {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff4b68, #2dd4bf);
    color: #fff;
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact {
    padding: 12px;
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-layout,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-hub-grid,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-draw-board {
    grid-template-columns: 1fr;
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-hero,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-hub-head,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-hub-current {
    align-items: flex-start;
    flex-direction: column;
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-arena {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-hub-cards,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-quiz-options,
body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-rps-grid {
    grid-template-columns: 1fr;
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-external-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

body.incallx.lt-game-active .lt-game-room-shell.is-compact .lt-game-chat-panel {
    min-height: 260px;
}

body.incallx.lt-game-active .lt-game-room-shell.is-narrow {
    padding: 8px;
    margin: 0;
}

body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-hero p,
body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-hub-current small,
body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-chat-head span,
body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-member-role,
body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-member-state {
    display: none;
}

body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-arena,
body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-external-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.incallx.lt-game-active .lt-game-room-shell.is-narrow .lt-game-external-chip {
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
}

@media (max-width: 991.98px) {
    body.incallx.lt-game-active .lt-game-layout {
        grid-template-columns: 1fr;
    }

    body.incallx.lt-game-active .lt-game-hub-grid {
        grid-template-columns: 1fr;
    }

    body.incallx.lt-game-active .lt-draw-board {
        grid-template-columns: 1fr;
    }

    body.incallx.lt-game-active .lt-draw-canvas-wrap {
        min-height: 220px;
    }

    body.incallx.lt-game-active .lt-game-chat-panel {
        min-height: 300px;
    }
}

@container (max-width: 760px) {
    body.incallx.lt-game-active .lt-game-room-shell {
        padding: 12px;
    }

    body.incallx.lt-game-active .lt-game-layout {
        grid-template-columns: 1fr;
    }

    body.incallx.lt-game-active .lt-game-hero {
        flex-direction: column;
        gap: 10px;
    }

    body.incallx.lt-game-active .lt-game-hero h2 {
        font-size: 24px;
        line-height: 1.05;
    }

    body.incallx.lt-game-active .lt-game-meta,
    body.incallx.lt-game-active .lt-game-controls,
    body.incallx.lt-game-active .lt-game-join {
        width: 100%;
    }

    body.incallx.lt-game-active .lt-game-arena {
        grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
    }

    body.incallx.lt-game-active .lt-game-player {
        min-height: 84px;
        padding: 8px 6px;
        border-radius: 14px;
    }

    body.incallx.lt-game-active .lt-game-hub {
        padding: 10px;
        border-radius: 18px;
    }

    body.incallx.lt-game-active .lt-game-hub-head,
    body.incallx.lt-game-active .lt-game-hub-current {
        align-items: flex-start;
        flex-direction: column;
    }

    body.incallx.lt-game-active .lt-game-hub-head b {
        white-space: normal;
    }

    body.incallx.lt-game-active .lt-game-hub-grid,
    body.incallx.lt-game-active .lt-game-hub-cards,
    body.incallx.lt-game-active .lt-quiz-options,
    body.incallx.lt-game-active .lt-rps-grid,
    body.incallx.lt-game-active .lt-draw-board {
        grid-template-columns: 1fr;
    }

    body.incallx.lt-game-active .lt-game-hub-card {
        min-height: 54px;
    }

    body.incallx.lt-game-active .lt-game-external-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }

    body.incallx.lt-game-active .lt-game-external-chip {
        justify-content: flex-start;
        border-radius: 13px;
    }

    body.incallx.lt-game-active .lt-game-chat-panel {
        min-height: 260px;
    }

    body.incallx.lt-game-active .lt-game-audio {
        position: sticky;
        bottom: 8px;
        z-index: 3;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, .14);
        border-radius: 999px;
        background: rgba(7, 10, 18, .82);
        backdrop-filter: blur(14px);
    }
}

@container (max-width: 460px) {
    body.incallx.lt-game-active .lt-game-room-shell {
        padding: 8px;
        margin: 0;
    }

    body.incallx.lt-game-active .lt-game-hero p,
    body.incallx.lt-game-active .lt-game-hub-current small,
    body.incallx.lt-game-active .lt-game-chat-head span {
        display: none;
    }

    body.incallx.lt-game-active .lt-game-arena {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.incallx.lt-game-active .lt-game-player .lt-game-member-role,
    body.incallx.lt-game-active .lt-game-player .lt-game-member-state {
        display: none;
    }

    body.incallx.lt-game-active .lt-game-hub-grid article {
        padding: 8px;
    }

    body.incallx.lt-game-active .lt-game-external-list {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    body.incallx.lt-game-active .lt-game-external-chip {
        min-height: 34px;
        padding: 0 9px;
        font-size: 11px;
    }

    body.incallx.lt-game-active .lt-game-chat-form {
        grid-template-columns: minmax(0, 1fr) 40px;
        padding: 9px;
    }
}

body.incallx .top-channel-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(45, 212, 191, .20);
    border-radius: var(--woo-radius);
    background: rgba(45, 212, 191, .08);
    color: var(--woo-teal);
}

body.incallx .top-channel-name {
    font-weight: 800;
}

body.incallx .navbar.topbar .nav-item,
body.incallx .navbar.topbar .btn-sm-round,
body.incallx .navbar.topbar .nav-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: var(--woo-radius);
    background: rgba(15, 23, 42, .62);
    color: #dbeafe !important;
}

body.incallx .navbar.topbar .nav-item:hover,
body.incallx .navbar.topbar .btn-sm-round:hover,
body.incallx .navbar.topbar .nav-link:hover {
    border-color: var(--woo-line-strong);
    background: rgba(45, 212, 191, .12);
}

body.incallx .channel-container,
body.incallx .sidebar-height-fix,
body.incallx .height-scroll-rpanel,
body.incallx .height-scroll-rpanelx,
body.incallx .chat-scroll,
body.incallx .messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 212, 191, .38) transparent;
}

body.incallx .channel-list {
    padding: 8px;
}

body.incallx .channel-cat {
    margin: 12px 8px 6px;
    color: var(--woo-muted) !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

body.incallx .channel-item,
body.incallx .room-manage-row,
body.incallx .disc-cat-row,
body.incallx .user-row,
body.incallx .private-list .user-list-item {
    border: 1px solid transparent;
    border-radius: var(--woo-radius);
    color: var(--woo-soft) !important;
}

body.incallx .channel-item:hover,
body.incallx .channel-item.active,
body.incallx .room-manage-row:hover,
body.incallx .disc-cat-row:hover,
body.incallx .user-row:hover,
body.incallx .private-list .user-list-item:hover {
    border-color: rgba(45, 212, 191, .16);
    background: rgba(45, 212, 191, .09) !important;
    color: var(--woo-text) !important;
}

body.incallx .lt-sidebar-shortcuts {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin: 8px 12px 10px;
    padding: 8px;
    border: 1px solid rgba(45, 212, 191, .12) !important;
    border-radius: 17px;
    overflow: visible;
    background:
        radial-gradient(circle at 12% 0, rgba(255, 49, 88, .16), transparent 34%),
        radial-gradient(circle at 92% 16%, rgba(45, 212, 191, .12), transparent 30%),
        linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(8, 13, 24, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 22px rgba(0, 0, 0, .14) !important;
}

body.incallx .lt-sidebar-shortcut {
    position: relative;
    justify-content: center;
    min-width: 0;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    overflow: visible;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    color: rgba(248, 250, 252, .94) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026)),
        rgba(15, 23, 42, .72) !important;
    box-shadow: none !important;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.incallx .lt-sidebar-shortcut::after {
    content: "";
    pointer-events: none;
}

body.incallx .lt-sidebar-shortcut span {
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    z-index: 30;
    min-width: max-content;
    max-width: 150px;
    padding: 7px 10px;
    border: 1px solid rgba(45, 212, 191, .20);
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 49, 88, .16), rgba(45, 212, 191, .12)),
        rgba(8, 13, 24, .96);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px) scale(.96);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

body.incallx .lt-sidebar-shortcut span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 8px;
    height: 8px;
    border-left: 1px solid rgba(45, 212, 191, .20);
    border-top: 1px solid rgba(45, 212, 191, .20);
    background: rgba(8, 13, 24, .96);
    transform: translateX(-50%) rotate(45deg);
}

body.incallx .lt-sidebar-shortcut i,
body.incallx .lt-sidebar-shortcut .ti {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    border-radius: 8px;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255, 49, 88, .28), rgba(45, 212, 191, .16));
    font-size: 12px;
}

body.incallx .lt-sidebar-shortcut:hover {
    border-color: rgba(45, 212, 191, .32) !important;
    background:
        linear-gradient(135deg, rgba(45, 212, 191, .15), rgba(255, 49, 88, .12)),
        rgba(15, 23, 42, .88) !important;
    box-shadow: 0 12px 22px rgba(45, 212, 191, .10) !important;
    transform: translateY(-1px);
}

body.incallx .lt-sidebar-shortcut:hover span,
body.incallx .lt-sidebar-shortcut:focus-visible span {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

body.incallx .lt-plus-link i {
    background: linear-gradient(135deg, rgba(255, 193, 7, .34), rgba(255, 49, 88, .24));
}

body.incallx .lt-ref-link i {
    background: linear-gradient(135deg, rgba(45, 212, 191, .30), rgba(59, 130, 246, .18));
}

body.incallx .lt-cinema-link i {
    background: linear-gradient(135deg, rgba(168, 85, 247, .28), rgba(255, 49, 88, .22));
}

body.incallx .lt-games-link i {
    background: linear-gradient(135deg, rgba(59, 130, 246, .30), rgba(45, 212, 191, .18));
}

body.incallx .lt-market-link i {
    background: linear-gradient(135deg, rgba(45, 212, 191, .32), rgba(251, 146, 60, .20));
}

body.incallx .main-panel {
    background:
        linear-gradient(180deg, rgba(12, 18, 31, .38), rgba(7, 10, 18, .94)),
        var(--woo-bg);
}

body.incallx .messages {
    position: relative;
    padding: 22px;
    background:
        linear-gradient(rgba(148, 163, 184, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(9, 13, 24, .94), rgba(7, 10, 18, .98)) !important;
    background-size: 32px 32px, 32px 32px, auto !important;
}

body.incallx .chat-scroll {
    background: transparent;
}

body.incallx .cht {
    margin-bottom: 14px;
}

body.incallx .cht .message-data {
    max-width: min(720px, 78%);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: var(--woo-radius) !important;
    background: rgba(20, 30, 48, .82) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .20);
}

body.incallx .cht.replies .message-data {
    background: rgba(17, 24, 39, .86) !important;
}

body.incallx .cht.sent .message-data {
    border-color: rgba(45, 212, 191, .30);
    background: linear-gradient(135deg, rgba(20, 184, 166, .94), rgba(14, 116, 144, .94)) !important;
    color: #ffffff !important;
}

body.incallx .message-html,
body.incallx .chat-txt {
    color: inherit;
    line-height: 1.48;
}

body.incallx .message-meta,
body.incallx .message-time {
    color: rgba(203, 213, 225, .72) !important;
}

body.incallx .room-editor,
body.incallx .private-editor {
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, rgba(7, 10, 18, .24), rgba(7, 10, 18, .92));
}

body.incallx .editor-wrap {
    position: relative;
}

body.incallx .editor-container.editor-controller {
    min-height: 58px;
    margin: 0;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(45, 212, 191, .22);
    background: rgba(12, 18, 31, .94) !important;
    box-shadow: var(--woo-shadow);
}

body.incallx .room-editor .attachment-col,
body.incallx .room-editor .emoji-col,
body.incallx .room-editor .send-col {
    min-height: 52px;
}

body.incallx .editor-icon,
body.incallx .attachment-col.dropup {
    color: #cbd5e1 !important;
}

body.incallx .editor-icon:hover,
body.incallx .attachment-col.dropup:hover {
    color: var(--woo-teal) !important;
}

body.incallx .room-editor .lt-send-message,
body.incallx .private-editor .lt-send-message {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--woo-radius) !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--woo-red), #f97316) !important;
    box-shadow: 0 12px 24px rgba(239, 35, 60, .26);
}

body.incallx .note-editor.note-frame,
body.incallx .note-editor.note-frame .note-editable {
    background: transparent !important;
    color: var(--woo-text) !important;
}

body.incallx .rightbar-wrapper {
    padding: 10px;
}

body.incallx #rpanel-tab {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0;
    margin: 0 0 10px;
}

body.incallx #rpanel-tab .nav-link {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: var(--woo-radius);
    background: rgba(15, 23, 42, .62);
    color: var(--woo-soft);
}

body.incallx #rpanel-tab .nav-link.active,
body.incallx #rpanel-tab .nav-link:hover {
    border-color: var(--woo-line-strong);
    background: rgba(45, 212, 191, .12);
    color: var(--woo-text);
}

body.incallx .input-icon .form-control,
body.incallx .form-control,
body.incallx .form-select,
body.incallx .whitoo-sidebar-category-select {
    min-height: 40px;
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(7, 10, 18, .58) !important;
    color: var(--woo-text) !important;
}

body.incallx .input-icon .form-control:focus,
body.incallx .form-control:focus,
body.incallx .form-select:focus {
    border-color: rgba(45, 212, 191, .72) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .12) !important;
}

body.incallx .lt-room-verified {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--woo-teal), var(--woo-cyan)) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .12), 0 0 22px rgba(45, 212, 191, .30);
}

body.incallx .badge.bg-red,
body.incallx .noti-count {
    background: var(--woo-red) !important;
}

body.incallx .dropdown-menu,
body.incallx .modal-content,
body.incallx .offcanvas {
    border: 1px solid var(--woo-line);
    border-radius: var(--woo-radius);
    background: rgba(12, 18, 31, .98) !important;
    color: var(--woo-text);
    box-shadow: var(--woo-shadow);
}

body.incallx .dropdown-item {
    border-radius: var(--woo-radius);
    color: var(--woo-soft);
}

body.incallx .dropdown-item:hover {
    background: rgba(45, 212, 191, .10);
    color: var(--woo-text);
}

body.incallx .alert {
    border-radius: var(--woo-radius) !important;
    border: 1px solid rgba(148, 163, 184, .16);
}

body.incallx .ad-space {
    border-radius: var(--woo-radius);
    overflow: hidden;
}

html.light body.incallx .room-bar,
html.light body.incallx .sidebar-wrapper,
html.light body.incallx .channel-bar,
html.light body.incallx .rightbar-wrapper,
html.light body.incallx .messages,
html.light body.incallx .editor-container.editor-controller {
    border-radius: 0;
}

@media (max-width: 1200px) {
    body.incallx .rightbar-wrapper {
        width: 250px;
        min-width: 250px;
    }

    body.incallx .sidebar-wrapper,
    body.incallx .channel-bar {
        width: 240px;
        min-width: 240px;
    }
}

@media (max-width: 768px) {
    body.incallx .room-bar {
        width: 64px;
    }

    body.incallx .chatroom-item,
    body.incallx .private-messages .private-item,
    body.incallx .action-item {
        width: 44px;
        height: 44px;
    }

    body.incallx .messages {
        padding: 14px;
    }

    body.incallx .room-editor,
    body.incallx .private-editor {
        padding: 10px;
    }

    body.incallx .cht .message-data {
        max-width: 88%;
    }
}

/* Whitoo Refresh visible pass 2026051903 */
body.incallx {
    --woo-bg: #050811;
    --woo-panel: rgba(9, 14, 25, .98);
    --woo-panel-2: rgba(15, 23, 42, .98);
    --woo-red: #ff3347;
    --woo-teal: #20e0c4;
    --woo-cyan: #35bdf6;
    --woo-gold: #ffd166;
}

body.incallx #wrapper {
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .08), transparent 28%),
        linear-gradient(270deg, rgba(32, 224, 196, .08), transparent 24%),
        #050811 !important;
}

body.incallx .room-bar {
    background: #050811 !important;
    border-right: 2px solid rgba(255, 51, 71, .42) !important;
}

body.incallx .mini-brand {
    margin: 6px 8px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 51, 71, .24), rgba(32, 224, 196, .16));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px rgba(0, 0, 0, .36);
}

body.incallx .chatroom-item,
body.incallx .private-messages .private-item,
body.incallx .action-item {
    border-radius: 12px !important;
    border-color: rgba(255, 255, 255, .10) !important;
    background: linear-gradient(145deg, rgba(21, 31, 50, .98), rgba(6, 10, 19, .98)) !important;
}

body.incallx .room-list-item.active .chatroom-item,
body.incallx .private-messages.active .private-item,
body.incallx .action-item.active,
body.incallx .chatroom-item:hover,
body.incallx .private-messages .private-item:hover,
body.incallx .action-item:hover {
    border-color: rgba(255, 51, 71, .70) !important;
    background: linear-gradient(145deg, rgba(255, 51, 71, .36), rgba(9, 14, 25, .98)) !important;
    box-shadow: 0 0 0 3px rgba(255, 51, 71, .12), 0 16px 34px rgba(255, 51, 71, .18) !important;
}

body.incallx .sidebar-wrapper,
body.incallx .channel-bar {
    background:
        linear-gradient(180deg, rgba(18, 27, 43, .98), rgba(7, 11, 20, .98)) !important;
    border-right: 1px solid rgba(32, 224, 196, .22) !important;
}

body.incallx .topbar-channels,
body.incallx .topbar-private {
    background: linear-gradient(135deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .08)) !important;
}

body.incallx .room-title {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(5, 8, 17, .46);
}

body.incallx .channel-cat {
    color: #93f6e9 !important;
}

body.incallx .channel-item {
    min-height: 38px;
    margin: 4px 8px;
    padding-left: 8px;
}

body.incallx .channel-item.active,
body.incallx .channel-item:hover {
    border-left: 3px solid var(--woo-red) !important;
    background: linear-gradient(90deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .06)) !important;
}

body.incallx .page-content-wrapper {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 72px),
        #050811 !important;
}

body.incallx .navbar.topbar {
    background: rgba(5, 8, 17, .88) !important;
    box-shadow: inset 0 -1px 0 rgba(32, 224, 196, .22), 0 14px 34px rgba(0, 0, 0, .22);
}

body.incallx .top-channel-icon {
    border-color: rgba(255, 51, 71, .40) !important;
    background: linear-gradient(135deg, rgba(255, 51, 71, .22), rgba(32, 224, 196, .12)) !important;
}

body.incallx .top-channel-name {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .56);
}

body.incallx .main-panel {
    margin: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 51, 71, .14), transparent 23%),
        radial-gradient(circle at 85% 70%, rgba(32, 224, 196, .14), transparent 25%),
        #050811 !important;
}

body.incallx .messages {
    margin: 14px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        #070b16 !important;
    background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

body.incallx .cht .message-data {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(15, 23, 42, .94) !important;
}

body.incallx .cht.sent .message-data {
    border-color: rgba(32, 224, 196, .52) !important;
    background: linear-gradient(135deg, #16b8a6, #0f7ea0) !important;
}

body.incallx .cht.replies .message-data {
    border-color: rgba(255, 51, 71, .28) !important;
}

body.incallx .room-editor,
body.incallx .private-editor {
    padding: 8px 22px 20px;
}

body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(255, 51, 71, .42) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .09), rgba(32, 224, 196, .06)),
        rgba(7, 11, 22, .98) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .38), 0 0 0 3px rgba(255, 51, 71, .06) !important;
}

body.incallx .room-editor .lt-send-message,
body.incallx .private-editor .lt-send-message {
    background: linear-gradient(135deg, #ff3347, #ff7a18) !important;
    box-shadow: 0 12px 28px rgba(255, 51, 71, .34) !important;
}

body.incallx .rightbar-wrapper {
    background:
        linear-gradient(180deg, rgba(16, 24, 39, .98), rgba(7, 11, 20, .98)) !important;
    border-left: 1px solid rgba(255, 51, 71, .24) !important;
}

body.incallx .rightbar-wrapper .ad-space,
body.incallx #rpanel-tab,
body.incallx .room-users-row,
body.incallx .group-users-row,
body.incallx .media-row {
    border-radius: 12px;
}

body.incallx #rpanel-tab {
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(5, 8, 17, .58);
}

body.incallx #rpanel-tab .nav-link.active {
    background: linear-gradient(135deg, var(--woo-red), #ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.incallx .input-icon .form-control,
body.incallx .room-user-search,
body.incallx .group-user-search,
body.incallx .dm-user-search {
    border-color: rgba(32, 224, 196, .24) !important;
    background: rgba(5, 8, 17, .72) !important;
}

body.incallx .user-list-item,
body.incallx .room-users > div,
body.incallx .group-users > div {
    border-radius: 10px;
}

body.incallx .channel-list-bottom {
    background: linear-gradient(135deg, rgba(255, 51, 71, .15), rgba(32, 224, 196, .08)) !important;
    border-top: 1px solid rgba(32, 224, 196, .18) !important;
}

body.incallx .lt-room-verified {
    background: linear-gradient(135deg, #ff3347, #20e0c4) !important;
}

/* Whitoo template pass 2026051904 */
body.incallx .woo-room-hero-card {
    margin: 12px 10px 8px;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 24, 39, .96), rgba(5, 8, 17, .98));
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

body.incallx .woo-room-hero-cover {
    position: relative;
    min-height: 92px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .82), rgba(32, 224, 196, .34)),
        url('../img/room.png') center / cover no-repeat;
}

body.incallx .woo-room-hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .22), transparent 28%),
        linear-gradient(180deg, transparent, rgba(5, 8, 17, .88));
}

body.incallx .woo-room-hero-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(5, 8, 17, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .woo-room-hero-badge i {
    color: #20e0c4 !important;
}

body.incallx .woo-room-hero-body {
    padding: 10px;
}

body.incallx .woo-room-hero-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

body.incallx .woo-room-hero-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-room-hero-title i {
    color: #ffd166 !important;
}

body.incallx .woo-room-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}

body.incallx .woo-room-hero-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    background: rgba(15, 23, 42, .72);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .woo-room-status-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

body.incallx .woo-room-status-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 999px;
    background: rgba(15, 23, 42, .64);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

body.incallx .woo-room-status-strip i {
    color: #20e0c4 !important;
}

body.incallx .woo-right-profile-card {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 51, 71, .24);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .18), rgba(32, 224, 196, .08)),
        rgba(8, 12, 22, .96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body.incallx .woo-right-profile-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}

body.incallx .woo-right-profile-top img {
    width: 46px;
    height: 46px;
    border: 2px solid rgba(32, 224, 196, .42);
    border-radius: 14px;
    object-fit: cover;
}

body.incallx .woo-right-profile-top strong,
body.incallx .woo-right-profile-top span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-profile-top strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

body.incallx .woo-right-profile-top span {
    margin-top: 2px;
    color: #9fb0c6;
    font-size: 12px;
    font-weight: 700;
}

body.incallx .profile-auto-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 10px 0 2px;
}

body.incallx .profile-auto-badges:empty {
    display: none;
}

body.incallx .profile-auto-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 31px;
    height: 31px;
    max-width: 31px;
    min-height: 31px;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(45, 212, 191, .22);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(8, 13, 26, .72));
    color: #dffafe;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.14);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

body.incallx .profile-auto-badge:hover {
    color: #fff;
    border-color: rgba(45, 212, 191, .42);
    transform: translateY(-1px);
}

body.incallx .profile-auto-badge i {
    display: inline-grid;
    width: 100%;
    height: 100%;
    place-items: center;
    flex: 1 1 auto;
    border-radius: inherit;
    background: transparent;
    color: #2dd4bf;
    font-size: 17px;
}

body.incallx .profile-auto-badge-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

body.incallx .profile-auto-badge.is-premium {
    border-color: rgba(251, 191, 36, .42);
    background:
        linear-gradient(135deg, rgba(244, 63, 94, .16), rgba(45, 212, 191, .12)),
        rgba(15, 23, 42, .92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    animation: none;
}

body.incallx .profile-auto-badge.is-premium i {
    position: relative;
    overflow: hidden;
    color: #fbbf24;
    animation: wooPremiumIconPulse 2.4s ease-in-out infinite;
}

body.incallx .profile-auto-badge.is-premium i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 22%, rgba(255,255,255,.65) 46%, transparent 62%);
    opacity: .0;
    transform: translateX(-60%);
    animation: wooPremiumIconShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes wooPremiumIconPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.18); }
}

@keyframes wooPremiumIconShine {
    0%, 38% { opacity: 0; transform: translateX(-60%); }
    48% { opacity: .55; }
    68%, 100% { opacity: 0; transform: translateX(60%); }
}

body.incallx .profile-auto-badge-verified_seller i,
body.incallx .profile-auto-badge-safe_store i,
body.incallx .profile-auto-badge-identity_verified i {
    background: rgba(45, 212, 191, .15);
    color: #2dd4bf;
}

body.incallx .profile-auto-badge-woo_member i,
body.incallx .profile-auto-badge-tournament_champion i {
    background: rgba(245, 158, 11, .16);
    color: #fbbf24;
}

body.incallx .profile-auto-badge-successful_seller i,
body.incallx .profile-auto-badge-high_satisfaction i {
    background: rgba(244, 63, 94, .15);
    color: #fb7185;
}

body.incallx .user-info-panel .profile-auto-badges {
    justify-content: center;
    margin: -4px 0 12px;
}

body.incallx .user-info-panel .profile-auto-badge {
    width: 31px;
    max-width: 31px;
    font-size: 10.5px;
}

body.incallx .popover.lt-member-popover .profile-auto-badges {
    justify-content: center;
    width: 100%;
    margin: 8px 0 0;
}

body.incallx .popover.lt-member-popover .profile-auto-badge {
    width: 30px;
    height: 30px;
    max-width: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 10px;
}

body.incallx .woo-market-seller-badge {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(45, 212, 191, .25);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(34, 211, 238, .10));
    color: #d1fae5;
    text-decoration: none;
}

body.incallx .woo-market-seller-badge i {
    grid-row: span 2;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 8px;
    background: rgba(45, 212, 191, .18);
    color: #2dd4bf;
    font-size: 15px;
}

body.incallx .woo-market-seller-badge span,
body.incallx .woo-market-seller-badge small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-market-seller-badge span {
    color: #ecfeff;
    font-size: 12px;
    font-weight: 950;
}

body.incallx .woo-market-seller-badge small {
    color: rgba(226, 232, 240, .62);
    font-size: 10px;
    font-weight: 800;
}

body.incallx .woo-market-seller-hub {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

body.incallx .woo-right-profile-details {
    margin-top: 10px;
    border: 1px solid rgba(45, 212, 191, .16);
    border-radius: 12px;
    background: rgba(3, 7, 18, .30);
    overflow: hidden;
}

body.incallx .woo-right-profile-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
    color: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

body.incallx .woo-right-profile-details summary::-webkit-details-marker {
    display: none;
}

body.incallx .woo-right-profile-details summary span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

body.incallx .woo-right-profile-details summary i:first-child {
    color: #2dd4bf;
}

body.incallx .woo-right-profile-details summary > i {
    color: #9fb0c6;
    transition: transform .18s ease;
}

body.incallx .woo-right-profile-details[open] summary > i {
    transform: rotate(180deg);
}

body.incallx .woo-right-profile-details-body {
    display: grid;
    gap: 8px;
    padding: 0 8px 9px;
}

body.incallx .woo-market-seller-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.incallx .woo-market-seller-metrics span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid rgba(45, 212, 191, .14);
    border-radius: 10px;
    background: rgba(2, 6, 23, .50);
    text-align: center;
}

body.incallx .woo-market-seller-metrics b,
body.incallx .woo-market-seller-metrics em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-market-seller-metrics b {
    color: #ecfeff;
    font-size: 13px;
    font-weight: 950;
}

body.incallx .woo-market-seller-metrics em {
    color: rgba(203, 213, 225, .64);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
}

body.incallx .woo-market-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.incallx .woo-market-trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(34, 211, 238, .20);
    border-radius: 999px;
    background: rgba(34, 211, 238, .08);
    color: #bae6fd;
    font-size: 10px;
    font-weight: 900;
}

body.incallx .woo-market-trust-badges i {
    color: #22d3ee !important;
}

body.incallx .woo-market-alert {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(255, 51, 71, .20);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 51, 71, .13), rgba(34, 211, 238, .08));
    color: #f8fafc;
    text-decoration: none;
}

body.incallx .woo-market-alert i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 51, 71, .16);
    color: #ff5c73 !important;
}

body.incallx .woo-market-alert span {
    overflow: hidden;
    color: rgba(248, 250, 252, .82);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.25;
}

body.incallx .woo-market-quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body.incallx .woo-market-quick-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 10px;
    background: rgba(15, 23, 42, .58);
    color: #dbeafe;
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
}

body.incallx .woo-market-quick-links a:hover {
    border-color: rgba(45, 212, 191, .34);
    background: rgba(45, 212, 191, .10);
}

body.incallx .woo-market-quick-links span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-crown {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 209, 102, .32);
    border-radius: 12px;
    background: rgba(255, 209, 102, .12);
    color: #ffd166;
    text-decoration: none;
}

body.incallx .woo-right-crown i {
    color: #ffd166 !important;
}

body.incallx .woo-right-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

body.incallx .woo-right-stats a {
    min-height: 54px;
    padding: 8px 6px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    background: rgba(5, 8, 17, .50);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

body.incallx .woo-right-stats a:hover {
    border-color: rgba(32, 224, 196, .38);
    background: rgba(32, 224, 196, .10);
}

body.incallx .woo-right-stats b,
body.incallx .woo-right-stats span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-stats b {
    font-size: 12px;
    font-weight: 900;
}

body.incallx .woo-right-stats span {
    margin-top: 3px;
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .woo-right-tournament-card {
    margin-bottom: 10px;
    padding: 0;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(32, 224, 196, .10), rgba(255, 51, 71, .08)), rgba(8, 12, 22, .92);
    overflow: hidden;
}

body.incallx .woo-right-tournament-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 0 11px;
    cursor: pointer;
    list-style: none;
}

body.incallx .woo-right-tournament-head::-webkit-details-marker {
    display: none;
}

body.incallx .woo-right-tournament-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

body.incallx .woo-right-tournament-head small {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    margin-left: auto;
    border-radius: 999px;
    background: rgba(45, 212, 191, .12);
    color: #7df9eb;
    font-size: 11px;
    font-weight: 950;
}

body.incallx .woo-right-tournament-head > i {
    color: #9fb0c6;
    transition: transform .18s ease;
}

body.incallx .woo-right-tournament-card[open] .woo-right-tournament-head > i {
    transform: rotate(180deg);
}

body.incallx .woo-right-tournament-body {
    display: grid;
    gap: 8px;
    padding: 0 10px 10px;
}

body.incallx .woo-right-see-all {
    justify-self: end;
    color: #7df9eb;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

body.incallx .woo-right-tournament-item {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(2, 6, 16, .45);
    text-decoration: none;
}

body.incallx .woo-right-tournament-item b,
body.incallx .woo-right-tournament-item span,
body.incallx .woo-right-tournament-item em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-right-tournament-item b {
    color: #fff;
    font-size: 12px;
}

body.incallx .woo-right-tournament-item span,
body.incallx .woo-right-tournament-empty {
    color: #9fb0c6;
    font-size: 11px;
    font-weight: 750;
}

body.incallx .woo-right-tournament-item em {
    width: fit-content;
    margin-top: 2px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #86efac;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

body.incallx .room-img {
    display: none !important;
}

@media (max-width: 992px) {
    body.incallx .woo-room-status-strip {
        display: none;
    }
}

/* Whitoo room card readability pass 2026051907 */
body.incallx .woo-room-hero-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(32, 224, 196, .30);
    background:
        linear-gradient(180deg, rgba(4, 8, 18, .56), rgba(4, 8, 18, .96)),
        var(--woo-room-cover-image, none) center / cover no-repeat,
        #06101a;
}

body.incallx .woo-room-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(4, 8, 18, .18), rgba(4, 8, 18, .88)),
        var(--woo-room-cover-image, none) center / cover no-repeat;
    opacity: .42;
}

body.incallx .woo-room-hero-cover {
    position: relative;
    z-index: 1;
    min-height: 112px;
    background-position: center;
    background-size: cover;
}

body.incallx .woo-room-hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .10) 0%, rgba(5, 8, 17, .42) 62%, rgba(5, 8, 17, .86) 100%),
        linear-gradient(90deg, rgba(255, 51, 71, .10), rgba(32, 224, 196, .10));
}

body.incallx .woo-room-hero-glow {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .18), transparent 24%),
        linear-gradient(180deg, transparent, rgba(5, 8, 17, .92));
}

body.incallx .woo-room-hero-badge {
    left: 12px;
    bottom: 12px;
    height: 30px;
    padding: 0 12px;
    border-color: rgba(32, 224, 196, .28);
    background: rgba(3, 7, 18, .78);
    color: #f8fbff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
    backdrop-filter: blur(10px);
}

body.incallx .woo-room-hero-body {
    position: relative;
    z-index: 1;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(6, 16, 26, .76), rgba(4, 8, 18, .92));
    backdrop-filter: blur(8px);
}

body.incallx .woo-room-hero-title {
    min-height: 34px;
    padding: 0 2px 2px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

body.incallx .woo-room-hero-title span {
    letter-spacing: 2px;
}

body.incallx .woo-room-hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

body.incallx .woo-room-hero-meta span {
    justify-content: flex-start;
    min-height: 34px;
    padding: 0 10px;
    border-color: rgba(32, 224, 196, .18);
    background: rgba(8, 14, 28, .88);
    color: #e6f6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.incallx .woo-room-hero-meta span:nth-child(3) {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
}

body.incallx .woo-room-hero-meta i {
    color: #9eefff !important;
}

body.incallx .woo-room-presence-active i {
    color: #20e0c4 !important;
}

body.incallx .woo-room-presence-offline i {
    color: #b7c7d8 !important;
}


/* Whitoo right panel pass 2026051910 */
body.incallx .rightbar-wrapper {
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(9, 14, 25, .98), rgba(5, 8, 17, .98)) !important;
}

body.incallx .woo-right-profile-card {
    margin-bottom: 12px;
    border-color: rgba(32, 224, 196, .24);
    background:
        linear-gradient(145deg, rgba(255, 51, 71, .13), rgba(32, 224, 196, .08)),
        rgba(6, 12, 24, .96);
}

body.incallx .woo-right-profile-top img {
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

body.incallx .woo-rpanel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 9px;
    padding: 0 2px;
}

body.incallx .woo-rpanel-head span,
body.incallx .woo-rpanel-head small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-rpanel-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f8fbff;
    font-size: 13px;
    font-weight: 900;
}

body.incallx .woo-rpanel-head span i {
    color: #20e0c4 !important;
}

body.incallx .woo-rpanel-head small {
    color: #93a4ba;
    font-size: 11px;
    font-weight: 800;
}

body.incallx #rpanel-tab {
    margin-bottom: 10px;
    border-color: rgba(32, 224, 196, .14);
    background: rgba(3, 7, 18, .62);
}

body.incallx #rpanel-tab .nav-link {
    border-radius: 10px;
}

body.incallx #rpanel-tab .nav-link.active {
    background: linear-gradient(135deg, #ff3347, #20e0c4) !important;
}

body.incallx .room-users-row,
body.incallx .group-users-row,
body.incallx .media-row {
    padding: 0 0 10px;
    background: transparent;
}

body.incallx .room-users-row .input-icon,
body.incallx .group-users-row .input-icon {
    margin-bottom: 9px;
}

body.incallx .room-user-search,
body.incallx .group-user-search {
    height: 42px;
    padding-left: 14px;
    border-radius: 12px !important;
    background: rgba(3, 7, 18, .72) !important;
}

body.incallx .lt-role-user-section {
    margin: 9px 0 12px;
}

body.incallx .lt-role-user-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin: 0 0 6px;
    padding: 0 8px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(32, 224, 196, .12), rgba(15, 23, 42, .62));
    color: #f8fbff;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    body.incallx .lt-role-user-heading {
        border-color: color-mix(in srgb, var(--role-color, #94a3b8) 44%, transparent);
        background: linear-gradient(90deg, color-mix(in srgb, var(--role-color, #94a3b8) 18%, transparent), rgba(15, 23, 42, .62));
    }
}

body.incallx .lt-role-user-heading span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900;
}

body.incallx .lt-role-user-heading span i {
    color: var(--role-color, #20e0c4) !important;
}

body.incallx .lt-role-user-heading b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 11px;
}

body.incallx .lt-role-user-items {
    display: grid;
    gap: 6px;
}

body.incallx .room-users .user-row,
body.incallx .group-users .user-row {
    position: relative;
    min-height: 54px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .11);
    border-radius: 12px;
    background: rgba(8, 14, 28, .68);
}

body.incallx .room-users .user-row:hover,
body.incallx .group-users .user-row:hover {
    border-color: rgba(32, 224, 196, .28);
    background: linear-gradient(90deg, rgba(32, 224, 196, .10), rgba(8, 14, 28, .80)) !important;
    transform: translateY(-1px);
}

body.incallx .channel-user-image {
    flex: 0 0 auto;
}

body.incallx .channel-user-image .img-profile {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    object-fit: cover;
}

body.incallx .channel-user-image .online-status {
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border: 2px solid #050811;
    border-radius: 999px;
    background: #050811;
}

body.incallx .channel-user-image .online-status .ti {
    font-size: 10px;
}

body.incallx .channel-user-details {
    min-width: 0;
    flex: 1;
}

body.incallx .user-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

body.incallx .channel-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f8fbff;
    font-size: 13px;
    font-weight: 850;
}

body.incallx .user-type-badge {
    border-radius: 999px;
    padding: 3px 6px;
    font-size: 8px;
    font-weight: 900;
}

body.incallx .more-actions {
    margin: 10px 0 0;
    text-align: center;
}

body.incallx .load-more-users,
body.incallx .load-more-media {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, .18) !important;
    color: #f8fbff !important;
}

body.incallx .load-more-users:hover,
body.incallx .load-more-media:hover {
    border-color: rgba(32, 224, 196, .35) !important;
    background: rgba(32, 224, 196, .12) !important;
}

/* Whitoo room card layering fix 2026051911 */
body.incallx .woo-room-hero-card::before {
    z-index: 0;
    pointer-events: none;
}

body.incallx .woo-room-hero-cover {
    overflow: hidden;
}

body.incallx .woo-room-hero-cover::before,
body.incallx .woo-room-hero-glow {
    z-index: 1;
    pointer-events: none;
}

body.incallx .woo-room-hero-badge {
    z-index: 3;
}

body.incallx .woo-room-hero-body {
    z-index: 4;
    isolation: isolate;
}

body.incallx .woo-room-hero-title,
body.incallx .woo-room-hero-meta {
    position: relative;
    z-index: 5;
}

/* Whitoo sidebar header hard layer fix 2026051912 */
body.incallx .sidebar-room {
    isolation: isolate;
}

body.incallx .topbar-channels {
    position: relative;
    z-index: 30;
    min-height: 52px;
    border-bottom: 1px solid rgba(32, 224, 196, .18) !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .10)),
        #101826 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

body.incallx .topbar-channels::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #101826;
}

body.incallx .topbar-channels .room-name,
body.incallx .topbar-channels .dropdown-toggle,
body.incallx .topbar-channels .room-title {
    position: relative;
    z-index: 35;
}

body.incallx .topbar-channels .room-title {
    max-width: 198px;
    background: rgba(5, 8, 17, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.incallx .channel-container {
    position: relative;
    z-index: 1;
    padding-top: 10px;
}

body.incallx .woo-room-hero-card {
    position: relative;
    z-index: 2;
    margin-top: 12px !important;
}

/* Whitoo sidebar header final overlap fix 2026051913 */
body.incallx .topbar-channels {
    position: sticky !important;
    top: 0;
    z-index: 9999 !important;
    overflow: visible;
    background: #101826 !important;
    opacity: 1 !important;
}

body.incallx .topbar-channels::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 51, 71, .45), rgba(32, 224, 196, .45));
}

body.incallx .topbar-channels .room-title {
    background: #121b2b !important;
    border: 1px solid rgba(255, 255, 255, .08);
}

body.incallx .channel-container {
    padding-top: 12px !important;
}

body.incallx .woo-room-hero-card,
body.incallx .woo-room-hero-cover,
body.incallx .woo-room-hero-card::before {
    z-index: 1;
}

/* Whitoo sidebar header translucency tune 2026051914 */
body.incallx .topbar-channels {
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .10), rgba(32, 224, 196, .08)),
        rgba(16, 24, 38, .82) !important;
    backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

body.incallx .topbar-channels::before {
    background: rgba(16, 24, 38, .50) !important;
}

body.incallx .topbar-channels .room-title {
    background: rgba(18, 27, 43, .92) !important;
    backdrop-filter: blur(8px);
}

/* Whitoo message hover options 2026051924 */
body.incallx .chat-actions {
    opacity: 0 !important;
    pointer-events: none;
}

body.incallx .message-data:hover + .chat-actions,
body.incallx .cht:hover .chat-actions,
body.incallx .cht:focus-within .chat-actions,
body.incallx .chat-actions:hover,
body.incallx .chat-actions.active {
    opacity: 1 !important;
    pointer-events: auto;
}

body.incallx .chat-actions {
    position: relative;
}

body.incallx .chat-actions::before {
    content: "";
    position: absolute;
    inset: -12px -10px;
    border-radius: 18px;
}

/* Whitoo right panel polish 2026051925 */
body.incallx .rightbar-wrapper {
    border-left-color: rgba(32, 224, 196, .18) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03);
}

body.incallx .woo-rpanel-head {
    min-height: 44px;
    margin: 2px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 51, 71, .10), rgba(32, 224, 196, .08)), rgba(8, 14, 28, .70);
}

body.incallx #rpanel-tab {
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
}

body.incallx #rpanel-tab .nav-link {
    min-height: 34px;
    border-radius: 10px !important;
}

body.incallx .room-user-search,
body.incallx .group-user-search {
    height: 38px;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    color: #eaf7ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.incallx .room-user-search::placeholder,
body.incallx .group-user-search::placeholder {
    color: rgba(203, 213, 225, .58);
}

body.incallx .room-users-row .input-icon-addon,
body.incallx .group-users-row .input-icon-addon {
    color: rgba(125, 249, 235, .72);
}

body.incallx .lt-role-user-section {
    margin: 10px 0 14px;
}

body.incallx .lt-role-user-heading {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    box-shadow: inset 3px 0 0 var(--role-color, #20e0c4);
}

body.incallx .lt-role-user-heading span {
    font-size: 12px;
    letter-spacing: .2px;
}

body.incallx .room-users .user-row,
body.incallx .group-users .user-row {
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(12, 18, 31, .84), rgba(8, 14, 28, .66));
}

body.incallx .room-users .user-row + .user-row,
body.incallx .group-users .user-row + .user-row {
    margin-top: 6px;
}

body.incallx .channel-user-image .img-profile {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

body.incallx .channel-user-name {
    font-size: 13px;
    line-height: 1.2;
}

body.incallx .user-row .flag-icon,
body.incallx .user-row .fi {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

body.incallx .load-more-users,
body.incallx .load-more-media {
    min-height: 34px;
    padding: 7px 12px !important;
    font-weight: 800;
}

/* Whitoo user profile card polish 2026051926 */
body.incallx .user-info-panel {
    padding: 0 !important;
}

body.incallx .user-info-panel .user-card,
body.incallx .user-info-panel .no-user-card {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .20);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(13, 20, 36, .94), rgba(6, 10, 20, .98)) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

body.incallx .user-info-panel .active-user-cover {
    min-height: 116px;
    border: 0;
    background-color: #111827;
    background-size: cover;
    background-position: center;
    position: relative;
}

body.incallx .user-info-panel .active-user-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .04), rgba(5, 8, 17, .84)),
        linear-gradient(90deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .14));
}

body.incallx .user-info-panel .card-body {
    padding: 0 14px 14px;
}

body.incallx .user-info-panel .user-image {
    width: 76px;
    height: 76px;
    margin: -38px auto 10px;
    display: block;
    position: relative;
    z-index: 2;
    border: 4px solid #07101d;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .34);
}

body.incallx .user-info-panel .user-title {
    margin: 0;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

body.incallx .user-info-panel .text-muted {
    margin: 10px 0 12px !important;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(3, 7, 18, .42);
    color: rgba(203, 213, 225, .82) !important;
    line-height: 1.45;
}

body.incallx .user-info-panel hr {
    margin: 12px 0 !important;
    border-color: rgba(148, 163, 184, .12);
}

body.incallx .user-info-panel .user-badge {
    width: 32px;
    height: 32px;
    margin: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 10px;
    background: rgba(8, 14, 28, .72);
}

body.incallx .user-info-panel .badge-icon {
    max-width: 20px;
    max-height: 20px;
}

body.incallx .user-info-panel .card-body > .row:not(:has(.user-badge)) {
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, .10);
    border-radius: 10px;
    background: rgba(8, 14, 28, .46);
}

body.incallx .user-info-panel label {
    color: rgba(148, 163, 184, .86);
    font-size: 11px;
    font-weight: 800;
}

body.incallx .active-user-dob,
body.incallx .active-user-gender,
body.incallx .active-user-country {
    color: #eaf7ff;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

body.incallx .user-info-panel .card-footer {
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, .12);
    background: rgba(3, 7, 18, .42);
}

body.incallx .lt-user-actions {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

body.incallx .lt-user-actions .btn {
    min-height: 36px;
    border-radius: 12px !important;
    font-weight: 850;
}

body.incallx .lt-user-friend-action {
    border: 0 !important;
    background: linear-gradient(135deg, #20e0c4, #0ea5e9) !important;
    color: #03101a !important;
}

body.incallx #user-options-dropdown {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #f8fbff !important;
}

body.incallx .user-info-panel .dropdown-menu {
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 12px;
    background: rgba(8, 14, 28, .98);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .32);
}

body.incallx .user-info-panel .dropdown-item {
    color: #dbeafe;
    border-radius: 9px;
}

body.incallx .user-info-panel .dropdown-item:hover {
    background: rgba(32, 224, 196, .12);
    color: #ffffff;
}

/* Whitoo member click popover polish 2026051927 */
body.incallx .lt-member-popover {
    --bs-popover-border-color: rgba(32, 224, 196, .24);
    --bs-popover-bg: transparent;
    border: 0 !important;
    filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .42));
}

body.incallx .lt-member-popover .popover-arrow {
    display: none;
}

body.incallx .lt-member-popover-card {
    display: block !important;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .24);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(16, 24, 42, .98), rgba(5, 9, 18, .98)) !important;
    color: #f8fbff;
}

body.incallx .lt-member-popover-cover {
    min-height: 118px;
    border: 0;
    background-color: #111827;
    background-size: cover;
    background-position: center;
    position: relative;
}

body.incallx .lt-member-popover-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .08), rgba(5, 8, 17, .88)),
        linear-gradient(90deg, rgba(255, 51, 71, .18), rgba(32, 224, 196, .16));
}

body.incallx .lt-member-popover-card .card-body {
    padding: 0 16px 16px;
    text-align: center;
}

body.incallx .lt-member-popover-card .user-image {
    width: 78px;
    height: 78px;
    margin: -39px auto 10px;
    display: block;
    position: relative;
    z-index: 2;
    border: 4px solid #07101d;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
}

body.incallx .lt-member-popover-card .user-title {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
}

body.incallx .lt-member-popover-about {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(3, 7, 18, .44);
    color: rgba(226, 232, 240, .84) !important;
    line-height: 1.45;
}

body.incallx .lt-profile-role-box {
    padding: 10px;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 12px;
    background: rgba(8, 14, 28, .54);
    text-align: left;
}

body.incallx .lt-profile-role-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #9eefff;
    font-size: 12px;
    font-weight: 900;
}

body.incallx .lt-user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.incallx .lt-user-role-badge {
    padding: 4px 8px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 999px;
    background: rgba(32, 224, 196, .10);
    color: #eaffff;
    font-size: 11px;
    font-weight: 850;
}

body.incallx .lt-member-popover-actions {
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, .12);
    background: rgba(3, 7, 18, .50);
}

body.incallx .lt-member-popover-actions .btn {
    min-height: 36px;
    border-radius: 12px !important;
    font-weight: 850;
}

body.incallx .lt-member-popover-actions .start-chat {
    border: 0 !important;
    background: linear-gradient(135deg, #20e0c4, #0ea5e9) !important;
    color: #03101a !important;
}

/* Whitoo member popover spacing fix 2026051928 */
body.incallx .lt-member-popover-card .card-body {
    padding: 0 18px 18px;
}

body.incallx .lt-member-popover-card .user-image {
    width: 72px;
    height: 72px;
    margin: -24px auto 12px;
    border-radius: 22px;
}

body.incallx .lt-member-popover-card .user-title {
    position: relative;
    z-index: 3;
    max-width: 100%;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

body.incallx .lt-member-popover-about {
    margin-top: 12px !important;
}

/* Whitoo member popover stronger layout 2026051929 */
body.incallx .popover.lt-member-popover {
    width: 340px !important;
    max-width: 340px !important;
}

body.incallx .popover.lt-member-popover .popover-body {
    border-radius: 20px;
    overflow: hidden;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card {
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 51, 71, .22), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(32, 224, 196, .20), transparent 34%),
        linear-gradient(180deg, #121a2d 0%, #060a14 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover {
    min-height: 104px;
    opacity: .92;
}

body.incallx .popover.lt-member-popover .card-body {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start;
    padding: 0 18px 18px !important;
    text-align: center !important;
}

body.incallx .popover.lt-member-popover .user-image {
    margin: -18px auto 12px !important;
}

body.incallx .popover.lt-member-popover .user-title,
body.incallx .popover.lt-member-popover h3.user-title.card-title {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    text-align: center !important;
    align-self: center !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-about,
body.incallx .popover.lt-member-popover .lt-profile-role-box {
    width: 100%;
}

/* Whitoo member popover compact professional 2026051930 */
body.incallx .popover.lt-member-popover {
    width: 300px !important;
    max-width: 300px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card {
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(13, 20, 34, .98), rgba(6, 10, 18, .99)) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover {
    min-height: 82px;
}

body.incallx .popover.lt-member-popover .user-image {
    width: 58px;
    height: 58px;
    margin: -20px auto 8px !important;
    border: 3px solid #07101d;
    border-radius: 16px;
}

body.incallx .popover.lt-member-popover .user-title {
    font-size: 15px !important;
    font-weight: 850 !important;
}

body.incallx .popover.lt-member-popover .card-body {
    padding: 0 14px 14px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-about {
    margin-top: 10px !important;
    padding: 8px 10px;
    font-size: 12px;
}

body.incallx .popover.lt-member-popover .lt-profile-role-box {
    margin-top: 10px !important;
    padding: 8px;
}

body.incallx .popover.lt-member-popover .lt-profile-role-title {
    margin-bottom: 6px;
    font-size: 11px;
}

body.incallx .popover.lt-member-popover .lt-user-role-badge {
    padding: 3px 7px;
    font-size: 10px;
}

body.incallx .lt-member-popover-actions {
    padding: 10px;
}

body.incallx .lt-member-popover-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body.incallx .lt-member-popover-actions .btn {
    min-height: 32px;
    padding: 6px 8px !important;
    font-size: 12px;
    border-radius: 10px !important;
}

/* Whitoo member name center fix 2026051931 */
body.incallx .popover.lt-member-popover .lt-member-popover-card .card-body > h3.user-title,
body.incallx .popover.lt-member-popover .lt-member-popover-card h3.card-title.user-title,
body.incallx .popover.lt-member-popover h3.user-title {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-content: center !important;
    transform: none !important;
}

/* Whitoo member identity center hard fix 2026051932 */
body.incallx .popover.lt-member-popover .lt-member-popover-identity {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image {
    margin: -20px auto 8px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title {
    margin: 0 auto !important;
    text-align: center !important;
}

/* Profile popover badge polish 2026052408 */
body.incallx .popover.lt-member-popover {
    width: 318px !important;
    max-width: min(318px, calc(100vw - 24px)) !important;
    filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .38));
}

body.incallx .popover.lt-member-popover .popover-body {
    border: 1px solid rgba(45, 212, 191, .22);
    border-radius: 18px;
    background: #070b16;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(244, 63, 94, .23), transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(34, 211, 238, .22), transparent 35%),
        linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(4, 8, 18, 1)) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover {
    min-height: 94px;
    opacity: .86;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover::after {
    background:
        linear-gradient(180deg, rgba(3, 7, 18, .12), rgba(3, 7, 18, .86)),
        linear-gradient(90deg, rgba(244, 63, 94, .18), rgba(45, 212, 191, .12));
}

body.incallx .popover.lt-member-popover .card-body {
    padding: 0 14px 14px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 62px;
    height: 62px;
    margin: -26px auto 8px !important;
    border: 3px solid rgba(8, 13, 26, .96);
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(45,212,191,.16);
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 6px;
    margin: 9px 0 0;
}

body.incallx .popover.lt-member-popover .profile-auto-badge {
    min-height: 25px;
    max-width: 132px;
    padding: 5px 8px;
    border-color: rgba(45, 212, 191, .26);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(9, 15, 30, .82));
    color: #e9feff;
    font-size: 10px;
    font-weight: 950;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i {
    width: 16px;
    height: 16px;
    font-size: 11px;
}

body.incallx .popover.lt-member-popover .lt-member-popover-about {
    width: 100%;
    margin-top: 10px !important;
    border-color: rgba(148, 163, 184, .14);
    background: rgba(3, 7, 18, .42);
    font-size: 11.5px;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions {
    padding: 10px;
    border-top: 1px solid rgba(148, 163, 184, .10);
    background: rgba(3, 7, 18, .44);
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 34px;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-size: 12px;
}

/* Profile popover final layout 2026052409 */
body.incallx .popover.lt-member-popover,
.popover.lt-member-popover {
    width: 332px !important;
    max-width: min(332px, calc(100vw - 20px)) !important;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}

body.incallx .popover.lt-member-popover .popover-body,
.popover.lt-member-popover .popover-body {
    border: 1px solid rgba(45, 212, 191, .24);
    border-radius: 20px;
    overflow: hidden;
    background: #050914;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card,
.popover.lt-member-popover .lt-member-popover-card {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 0%, rgba(244, 63, 94, .28), transparent 32%),
        radial-gradient(circle at 94% 8%, rgba(34, 211, 238, .24), transparent 36%),
        linear-gradient(180deg, #111827 0%, #060a14 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover,
.popover.lt-member-popover .lt-member-popover-cover {
    min-height: 96px !important;
    opacity: .82;
}

body.incallx .popover.lt-member-popover .card-body,
.popover.lt-member-popover .card-body {
    padding: 0 15px 15px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity,
.popover.lt-member-popover .lt-member-popover-identity {
    display: grid !important;
    justify-items: center !important;
    width: 100%;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
.popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 64px !important;
    height: 64px !important;
    margin: -28px auto 8px !important;
    border: 3px solid #070d19 !important;
    border-radius: 19px !important;
    box-shadow: 0 16px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(45,212,191,.18) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title,
.popover.lt-member-popover .lt-member-popover-identity .user-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-align: center !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges,
.popover.lt-member-popover .profile-auto-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    min-height: 25px;
    margin: 10px 0 0 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge,
.popover.lt-member-popover .profile-auto-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(45, 212, 191, .28) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(8, 14, 28, .88)) !important;
    color: #ecfeff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i,
.popover.lt-member-popover .profile-auto-badge i {
    display: inline-grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: rgba(45, 212, 191, .16) !important;
    color: #2dd4bf !important;
    font-size: 11px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge-label,
.popover.lt-member-popover .profile-auto-badge-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions,
.popover.lt-member-popover .lt-member-popover-actions {
    padding: 10px !important;
    background: rgba(3, 7, 18, .52) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn,
.popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 34px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* High-end profile popover redesign 2026052412 */
body.incallx .popover.lt-member-popover,
.popover.lt-member-popover {
    width: 336px !important;
    max-width: min(336px, calc(100vw - 22px)) !important;
    border: 0 !important;
    filter: drop-shadow(0 26px 54px rgba(0,0,0,.48)) !important;
}

body.incallx .popover.lt-member-popover .popover-arrow,
.popover.lt-member-popover .popover-arrow {
    display: none !important;
}

body.incallx .popover.lt-member-popover .popover-body,
.popover.lt-member-popover .popover-body {
    padding: 0 !important;
    border: 1px solid rgba(105, 125, 155, .22) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(14, 20, 32, .98), rgba(5, 8, 16, .99)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card,
.popover.lt-member-popover .lt-member-popover-card {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(244, 63, 94, .14), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(45, 212, 191, .13), transparent 36%),
        linear-gradient(180deg, #101827 0%, #060a13 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover,
.popover.lt-member-popover .lt-member-popover-cover {
    min-height: 108px !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: .74 !important;
    filter: saturate(.92) contrast(1.04) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover::after,
.popover.lt-member-popover .lt-member-popover-cover::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(180deg, rgba(4, 8, 16, .10) 0%, rgba(6, 10, 19, .76) 78%, #060a13 100%),
        linear-gradient(90deg, rgba(244, 63, 94, .08), rgba(45, 212, 191, .08)) !important;
}

body.incallx .popover.lt-member-popover .card-body,
.popover.lt-member-popover .card-body {
    display: grid !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 0 18px 16px !important;
    text-align: center !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity,
.popover.lt-member-popover .lt-member-popover-identity {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
.popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 68px !important;
    height: 68px !important;
    margin: -34px auto 10px !important;
    border: 3px solid rgba(8, 13, 24, .98) !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    background: #0a1020 !important;
    box-shadow:
        0 18px 34px rgba(0,0,0,.42),
        0 0 0 1px rgba(45,212,191,.22),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title,
.popover.lt-member-popover .lt-member-popover-identity .user-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: #f8fafc !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges,
.popover.lt-member-popover .profile-auto-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 11px 0 0 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge,
.popover.lt-member-popover .profile-auto-badge {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(115, 135, 166, .26) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(20, 30, 46, .96), rgba(9, 14, 26, .98)) !important;
    color: #e8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i,
.popover.lt-member-popover .profile-auto-badge i {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: #38dcca !important;
    font-size: 16px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge.is-premium,
.popover.lt-member-popover .profile-auto-badge.is-premium {
    border-color: rgba(245, 158, 11, .34) !important;
    background:
        linear-gradient(180deg, rgba(28, 34, 51, .98), rgba(11, 15, 28, .98)) !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge.is-premium i,
.popover.lt-member-popover .profile-auto-badge.is-premium i {
    color: #fbbf24 !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-about,
.popover.lt-member-popover .lt-member-popover-about {
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(115, 135, 166, .16) !important;
    border-radius: 12px !important;
    background: rgba(3, 7, 18, .42) !important;
    color: rgba(226, 232, 240, .82) !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions,
.popover.lt-member-popover .lt-member-popover-actions {
    padding: 12px !important;
    border-top: 1px solid rgba(115, 135, 166, .12) !important;
    background:
        linear-gradient(180deg, rgba(4, 8, 16, .25), rgba(3, 7, 18, .58)) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-action-grid,
.popover.lt-member-popover .lt-member-popover-action-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn,
.popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn-danger,
.popover.lt-member-popover .lt-member-popover-actions .btn-danger,
body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn-primary,
.popover.lt-member-popover .lt-member-popover-actions .btn-primary {
    border: 1px solid rgba(244, 63, 94, .38) !important;
    background: rgba(244, 63, 94, .14) !important;
    color: #fecdd3 !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .start-chat,
.popover.lt-member-popover .lt-member-popover-actions .start-chat {
    border: 1px solid rgba(34, 211, 238, .36) !important;
    background: linear-gradient(135deg, #1fc7cc, #1594d4) !important;
    color: #021018 !important;
}

/* Final centering lock for profile popover 2026052413 */
.popover.lt-member-popover .lt-member-popover-card > .card-body,
body.incallx .popover.lt-member-popover .lt-member-popover-card > .card-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.popover.lt-member-popover .lt-member-popover-identity,
body.incallx .popover.lt-member-popover .lt-member-popover-identity {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.popover.lt-member-popover .lt-member-popover-identity .user-image,
body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image {
    float: none !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.popover.lt-member-popover .lt-member-popover-identity .user-title,
body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title {
    float: none !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.popover.lt-member-popover .lt-popover-auto-badges,
body.incallx .popover.lt-member-popover .lt-popover-auto-badges {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mockup-match slim profile popover 2026052414 */
body.incallx .popover.lt-member-popover,
.popover.lt-member-popover {
    width: 324px !important;
    max-width: min(324px, calc(100vw - 24px)) !important;
    filter: drop-shadow(0 18px 38px rgba(0,0,0,.36)) !important;
}

body.incallx .popover.lt-member-popover .popover-body,
.popover.lt-member-popover .popover-body {
    border: 1px solid rgba(91, 112, 142, .20) !important;
    border-radius: 14px !important;
    background: #070b14 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card,
.popover.lt-member-popover .lt-member-popover-card {
    border: 0 !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(244, 63, 94, .09), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(45, 212, 191, .08), transparent 34%),
        linear-gradient(180deg, #0d1422 0%, #060a13 100%) !important;
    box-shadow: none !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover,
.popover.lt-member-popover .lt-member-popover-cover {
    min-height: 92px !important;
    opacity: .72 !important;
    filter: saturate(.86) contrast(1.02) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover::after,
.popover.lt-member-popover .lt-member-popover-cover::after {
    background:
        linear-gradient(180deg, rgba(6,10,19,.05) 0%, rgba(6,10,19,.70) 76%, #060a13 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card > .card-body,
.popover.lt-member-popover .lt-member-popover-card > .card-body {
    padding: 0 16px 14px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
.popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 56px !important;
    height: 56px !important;
    margin: -28px auto 9px !important;
    border: 1px solid rgba(45, 212, 191, .24) !important;
    border-radius: 15px !important;
    background: #090f1c !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title,
.popover.lt-member-popover .lt-member-popover-identity .user-title {
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges,
.popover.lt-member-popover .profile-auto-badges {
    min-height: 25px !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge,
.popover.lt-member-popover .profile-auto-badge {
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    border-radius: 8px !important;
    border-color: rgba(111, 130, 160, .22) !important;
    background: linear-gradient(180deg, rgba(18, 27, 42, .92), rgba(8, 13, 24, .96)) !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i,
.popover.lt-member-popover .profile-auto-badge i {
    font-size: 14px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions,
.popover.lt-member-popover .lt-member-popover-actions {
    padding: 10px 12px 12px !important;
    background: rgba(3, 7, 18, .38) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-action-grid,
.popover.lt-member-popover .lt-member-popover-action-grid {
    gap: 9px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn,
.popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn-danger,
.popover.lt-member-popover .lt-member-popover-actions .btn-danger,
body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn-primary,
.popover.lt-member-popover .lt-member-popover-actions .btn-primary {
    border-color: rgba(244, 63, 94, .34) !important;
    background: rgba(244, 63, 94, .10) !important;
    color: #fecdd3 !important;
}

/* Gradient-edge ultra slim profile card 2026052415 */
body.incallx .popover.lt-member-popover,
.popover.lt-member-popover {
    width: 316px !important;
    max-width: min(316px, calc(100vw - 24px)) !important;
    border: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 20px 42px rgba(0,0,0,.42)) !important;
}

body.incallx .popover.lt-member-popover .popover-body,
.popover.lt-member-popover .popover-body {
    padding: 1px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background:
        linear-gradient(135deg, rgba(244,63,94,.54), rgba(45,212,191,.48) 48%, rgba(91,112,142,.24)) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.025),
        0 16px 40px rgba(0,0,0,.30) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card,
.popover.lt-member-popover .lt-member-popover-card {
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(244,63,94,.18), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(45,212,191,.15), transparent 36%),
        linear-gradient(180deg, #0d1523 0%, #060a13 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover,
.popover.lt-member-popover .lt-member-popover-cover {
    min-height: 86px !important;
    opacity: .70 !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card > .card-body,
.popover.lt-member-popover .lt-member-popover-card > .card-body {
    padding: 0 15px 13px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
.popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 52px !important;
    height: 52px !important;
    margin: -26px auto 8px !important;
    border: 1px solid rgba(45,212,191,.30) !important;
    border-radius: 14px !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.035) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title,
.popover.lt-member-popover .lt-member-popover-identity .user-title {
    font-size: 13.5px !important;
    font-weight: 900 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges,
.popover.lt-member-popover .profile-auto-badges {
    margin-top: 9px !important;
    min-height: 23px !important;
    gap: 6px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge,
.popover.lt-member-popover .profile-auto-badge {
    width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    border-radius: 7px !important;
    border-color: rgba(135, 154, 184, .20) !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i,
.popover.lt-member-popover .profile-auto-badge i {
    font-size: 13px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions,
.popover.lt-member-popover .lt-member-popover-actions {
    padding: 9px 11px 11px !important;
    border-top: 1px solid rgba(135, 154, 184, .09) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn,
.popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 31px !important;
    padding: 5px 9px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
}

/* Ultra compact profile popover 2026052416 */
body.incallx .popover.lt-member-popover,
.popover.lt-member-popover {
    width: 292px !important;
    max-width: min(292px, calc(100vw - 22px)) !important;
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.34)) !important;
}

body.incallx .popover.lt-member-popover .popover-body,
.popover.lt-member-popover .popover-body {
    padding: 1px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(244,63,94,.38), rgba(45,212,191,.34) 52%, rgba(91,112,142,.18)) !important;
    box-shadow: none !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card,
.popover.lt-member-popover .lt-member-popover-card {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(244,63,94,.12), transparent 32%),
        radial-gradient(circle at 92% 8%, rgba(45,212,191,.10), transparent 34%),
        linear-gradient(180deg, #0b1220 0%, #050914 100%) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-cover,
.popover.lt-member-popover .lt-member-popover-cover {
    min-height: 72px !important;
    opacity: .66 !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-card > .card-body,
.popover.lt-member-popover .lt-member-popover-card > .card-body {
    padding: 0 12px 10px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-image,
.popover.lt-member-popover .lt-member-popover-identity .user-image {
    width: 46px !important;
    height: 46px !important;
    margin: -23px auto 7px !important;
    border: 1px solid rgba(45,212,191,.24) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-identity .user-title,
.popover.lt-member-popover .lt-member-popover-identity .user-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badges,
.popover.lt-member-popover .profile-auto-badges {
    min-height: 21px !important;
    margin-top: 8px !important;
    gap: 5px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge,
.popover.lt-member-popover .profile-auto-badge {
    width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    border-radius: 6px !important;
}

body.incallx .popover.lt-member-popover .profile-auto-badge i,
.popover.lt-member-popover .profile-auto-badge i {
    font-size: 12px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions,
.popover.lt-member-popover .lt-member-popover-actions {
    padding: 8px 10px 10px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-action-grid,
.popover.lt-member-popover .lt-member-popover-action-grid {
    gap: 8px !important;
}

body.incallx .popover.lt-member-popover .lt-member-popover-actions .btn,
.popover.lt-member-popover .lt-member-popover-actions .btn {
    min-height: 28px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
}

/* Fix v2 isolation from legacy user-card styles 2026052418 */
.popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-avatar {
    display: block !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-name {
    display: block !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Whitoo media panel polish 2026051933 */
body.incallx .media-row {
    padding: 8px 2px 12px !important;
}

body.incallx .media-row .row {
    margin: 0 !important;
    gap: 8px 0;
}

body.incallx .media-tab .recent-img {
    padding: 4px !important;
    margin: 0 !important;
}

body.incallx .media-tab .recent-img a {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 12px;
    background: rgba(8, 14, 28, .72);
    aspect-ratio: 1;
    box-shadow: 0 12px 22px rgba(0, 0, 0, .18);
}

body.incallx .media-tab .recent-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    padding: 0 !important;
    transition: transform .18s ease;
}

body.incallx .media-tab .recent-img a:hover img {
    transform: scale(1.04);
}

body.incallx .media-tab .chat-video-block {
    padding: 4px !important;
}

body.incallx .media-tab .video-section {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 12px;
    background: rgba(8, 14, 28, .72);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .18);
}

body.incallx .media-tab .video-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
}

body.incallx .media-tab .video-link::before {
    content: "\ea5f";
    font-family: tabler-icons !important;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 28px;
    background: rgba(0, 0, 0, .18);
}

body.incallx .media-tab .video-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

body.incallx .media-tab .chat-files-block {
    padding: 4px !important;
    margin: 0 !important;
}

body.incallx .media-tab .file-section {
    min-height: 56px;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 12px;
    background: rgba(8, 14, 28, .72) !important;
    box-shadow: 0 12px 22px rgba(0, 0, 0, .16);
}

body.incallx .media-tab .file-header {
    color: #eaf7ff !important;
}

body.incallx .media-tab .file-title {
    max-width: 158px;
    color: #f8fbff !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx .media-tab .file-meta-swap {
    color: rgba(203, 213, 225, .62) !important;
    font-size: 11px;
}

body.incallx .media-tab img.recent-link-preview {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
}

body.incallx .media-tab .file-action-buttons {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 10px;
    background: rgba(32, 224, 196, .10);
    color: #9eefff !important;
}

body.incallx .media-tab .more-actions {
    padding: 8px 4px 0;
}

/* Whitoo invite and channel modal polish 2026051934 */
body.incallx .whitoo-room-invite-modal .modal-content,
body.incallx .lt-next-channel-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 51, 71, .15), transparent 30%),
        radial-gradient(circle at 92% 10%, rgba(32, 224, 196, .14), transparent 34%),
        linear-gradient(180deg, rgba(13, 20, 34, .98), rgba(5, 9, 18, .99)) !important;
    color: #f8fbff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
}

body.incallx .whitoo-room-invite-modal .modal-header,
body.incallx .lt-next-channel-modal .modal-header {
    min-height: 64px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    background: rgba(3, 7, 18, .36) !important;
}

body.incallx .whitoo-room-invite-modal .modal-title,
body.incallx .lt-next-channel-modal .modal-title {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 900;
}

body.incallx .whitoo-invite-modal-kicker,
body.incallx .whitoo-ai-builder-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #9eefff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body.incallx .whitoo-room-invite-modal .modal-body,
body.incallx .lt-next-channel-modal .modal-body {
    padding: 18px;
}

body.incallx .whitoo-room-invite-panel,
body.incallx .whitoo-ai-builder {
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 14px;
    background: rgba(8, 14, 28, .62);
}

body.incallx .whitoo-room-invite-loading {
    padding: 18px;
    color: rgba(226, 232, 240, .78);
    font-weight: 750;
}

body.incallx .lt-next-channel-modal .form-label {
    color: #eaf7ff !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx .lt-next-channel-modal .form-control,
body.incallx .lt-next-channel-modal .form-select {
    min-height: 40px;
    border-color: rgba(148, 163, 184, .16) !important;
    border-radius: 12px !important;
    background: rgba(3, 7, 18, .48) !important;
}

body.incallx .lt-next-channel-modal .form-selectgroup-label {
    min-height: 86px;
    border-radius: 13px !important;
    background: rgba(8, 14, 28, .66) !important;
}

body.incallx .lt-next-channel-modal .form-selectgroup-title {
    color: #f8fbff;
}

body.incallx .lt-next-channel-modal .text-muted,
body.incallx .lt-form-note {
    color: rgba(203, 213, 225, .66) !important;
}

body.incallx .lt-next-channel-modal .modal-footer {
    border-top: 1px solid rgba(148, 163, 184, .12);
    background: rgba(3, 7, 18, .32);
}

body.incallx .lt-next-channel-modal .btn,
body.incallx .whitoo-room-invite-modal .btn {
    border-radius: 11px !important;
    font-weight: 850;
}

/* Whitoo compact channel modal 2026051935 */
body.incallx .lt-next-channel-modal .modal-dialog {
    max-width: 760px;
}

body.incallx .lt-next-channel-modal .modal-header {
    min-height: 52px;
    padding: 12px 16px;
}

body.incallx .lt-next-channel-modal .modal-title {
    font-size: 16px;
}

body.incallx .lt-next-channel-modal .modal-body {
    max-height: min(76vh, 680px);
    overflow: auto;
    padding: 14px 16px;
}

body.incallx .lt-next-channel-modal .whitoo-ai-builder {
    margin-bottom: 12px;
    padding: 10px;
}

body.incallx .lt-next-channel-modal .whitoo-ai-builder-head small,
body.incallx .lt-next-channel-modal .lt-form-note,
body.incallx .lt-next-channel-modal .form-selectgroup-label .text-muted,
body.incallx .lt-next-channel-modal .form-hint {
    display: none !important;
}

body.incallx .lt-next-channel-modal .whitoo-ai-builder-head strong {
    font-size: 13px;
}

body.incallx .lt-next-channel-modal .whitoo-ai-builder-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
}

body.incallx .lt-next-channel-modal #looai_builder_prompt {
    min-height: 38px !important;
    height: 38px !important;
    resize: none;
}

body.incallx .lt-next-channel-modal .whitoo-ai-builder-generate {
    min-height: 38px;
    padding: 0 12px !important;
    white-space: nowrap;
}

body.incallx .lt-next-channel-modal #channel-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

body.incallx .lt-next-channel-modal #channel-form > .mb-3 {
    margin-bottom: 0 !important;
}

body.incallx .lt-next-channel-modal #channel-form > label.form-label,
body.incallx .lt-next-channel-modal #channel-form > label.form-label + .lt-form-note,
body.incallx .lt-next-channel-modal .form-selectgroup-boxes {
    grid-column: 1 / -1;
}

body.incallx .lt-next-channel-modal .form-selectgroup-boxes {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0 !important;
}

body.incallx .lt-next-channel-modal .form-selectgroup-boxes > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.incallx .lt-next-channel-modal .form-selectgroup-label {
    min-height: 52px !important;
    padding: 8px !important;
    justify-content: center;
    text-align: center;
}

body.incallx .lt-next-channel-modal .form-selectgroup-label > .me-3 {
    display: none !important;
}

body.incallx .lt-next-channel-modal .form-selectgroup-title {
    margin: 0 !important;
    font-size: 12px;
}

body.incallx .lt-next-channel-modal .form-selectgroup-title i {
    display: block;
    margin: 0 auto 3px !important;
    font-size: 17px;
}

body.incallx .lt-next-channel-modal .game-room-settings,
body.incallx .lt-next-channel-modal .channel-users {
    grid-column: 1 / -1;
}

body.incallx .lt-next-channel-modal .game-room-settings .alert {
    display: none;
}

body.incallx .lt-next-channel-modal .row {
    margin-left: 0;
    margin-right: 0;
}

body.incallx .lt-next-channel-modal .row > * {
    padding-left: 0;
    padding-right: 0;
}

body.incallx .lt-next-channel-modal .form-label {
    margin-bottom: 5px;
}

body.incallx .lt-next-channel-modal .form-control,
body.incallx .lt-next-channel-modal .form-select {
    min-height: 36px;
    font-size: 13px;
}

body.incallx .lt-next-channel-modal .modal-footer {
    padding: 10px 16px;
}

body.incallx .lt-next-channel-modal .modal-footer .btn {
    min-height: 34px;
    padding: 6px 12px !important;
    font-size: 13px;
}

body.incallx .lt-next-channel-modal .submit-channel {
    border: 0 !important;
    background: linear-gradient(135deg, #20e0c4, #0ea5e9) !important;
    color: #03101a !important;
}

/* Whitoo alerts and feedback polish 2026051936 */
body.incallx .main-panel > .alert,
body.incallx .room-notice > .alert,
body.incallx .alert.alert-important {
    margin: 10px 14px !important;
    padding: 11px 44px 11px 14px !important;
    border: 1px solid rgba(32, 224, 196, .18) !important;
    border-radius: 12px !important;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .10), rgba(32, 224, 196, .08)),
        rgba(8, 14, 28, .92) !important;
    color: #f8fbff !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .20);
}

body.incallx .alert .btn-close {
    top: 50%;
    right: 12px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    background-color: rgba(148, 163, 184, .14);
    transform: translateY(-50%);
    opacity: .82;
}

body.incallx .toast-container {
    position: fixed !important;
    right: 18px;
    bottom: 18px;
    z-index: 1088;
    display: grid;
    gap: 10px;
}

body.incallx .toast {
    overflow: hidden;
    width: min(360px, calc(100vw - 28px));
    border: 1px solid rgba(32, 224, 196, .18) !important;
    border-radius: 14px !important;
    background: rgba(8, 14, 28, .96) !important;
    color: #f8fbff !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .34);
    backdrop-filter: blur(14px);
}

body.incallx .toast-header {
    min-height: 38px;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    background: linear-gradient(135deg, rgba(32, 224, 196, .16), rgba(15, 23, 42, .70)) !important;
    color: #ffffff !important;
}

body.incallx .toast-header strong {
    font-size: 13px;
    font-weight: 900;
}

body.incallx .toast-body {
    padding: 11px 13px;
    color: rgba(226, 232, 240, .90);
    font-size: 13px;
    line-height: 1.45;
}

body.incallx .toast .btn-close {
    filter: invert(1);
    opacity: .72;
}

body.incallx #load-more,
body.incallx #load-more-end,
body.incallx .whitoo-room-invite-loading,
body.incallx .whitoo-invite-empty,
body.incallx .no-user-card,
body.incallx .profile-bot-empty,
body.incallx .profile-security-empty,
body.incallx .whitoo-gif-empty {
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: rgba(8, 14, 28, .66);
    color: rgba(226, 232, 240, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.incallx #load-more,
body.incallx #load-more-end {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 850;
}

body.incallx .whitoo-room-invite-loading,
body.incallx .whitoo-invite-empty {
    padding: 16px;
    text-align: center;
}

body.incallx .loadingoverlay {
    border-radius: 14px;
    background: rgba(3, 7, 18, .58) !important;
    backdrop-filter: blur(4px);
}

@media (max-width: 767.98px) {
    body.incallx .toast-container {
        right: 10px;
        bottom: 10px;
        left: 10px;
    }

    body.incallx .toast {
        width: 100%;
    }
}

/* Cinema channel fitted player and view controls 2026052504 */
body.incallx .messages:has(.woo-cinema-shell) {
    overflow-x: hidden;
}

body.incallx .messages .woo-cinema-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

body.incallx .messages .woo-cinema-hero {
    min-width: 0;
    padding: 16px;
    border-radius: 12px;
}

body.incallx .messages .woo-cinema-hero h2 {
    font-size: 25px;
}

body.incallx .messages .woo-cinema-room-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

body.incallx .messages .woo-cinema-header-tools {
    position: relative;
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

body.incallx .messages .woo-cinema-header-tools button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #d8e6f5;
    background: rgba(10, 18, 35, 0.7);
    border: 1px solid rgba(79, 109, 150, 0.35);
    border-radius: 11px;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

body.incallx .messages .woo-cinema-header-tools button:hover,
body.incallx .messages .woo-cinema-header-tools button.is-active {
    color: #fff;
    border-color: rgba(44, 210, 205, 0.58);
    background: rgba(18, 43, 59, 0.92);
}

body.incallx .messages .woo-cinema-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    gap: 8px;
    margin: 12px 0;
}

body.incallx .messages .woo-cinema-tab {
    min-width: 0;
    min-height: 52px;
    padding: 7px;
    gap: 5px;
    border-radius: 10px;
    font-size: 12px;
}

body.incallx .messages .woo-cinema-stage {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 13px;
}

body.incallx .messages .woo-cinema-player {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
}

body.incallx .messages .woo-cinema-video-wrap {
    min-width: 0;
    overflow: hidden;
}

body.incallx .messages .woo-cinema-video {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    object-fit: contain;
}

body.incallx .messages .woo-cinema-start,
body.incallx .messages .woo-cinema-resume {
    z-index: 12;
}

body.incallx .messages .woo-cinema-start:not([hidden]) {
    display: inline-flex !important;
}

body.incallx .messages .woo-cinema-resume:not([hidden]) {
    display: grid !important;
}

body.incallx .messages .woo-cinema-player .woo-cinema-now {
    top: 54px;
    right: 13px;
    max-width: min(230px, calc(100% - 190px));
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12px;
}

body.incallx .messages .woo-cinema-player .woo-cinema-now strong,
body.incallx .messages .woo-cinema-player .woo-cinema-now span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .messages .woo-cinema-view-tools {
    top: 10px;
    right: 10px;
}

body.incallx .messages .woo-cinema-view-tools button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

body.incallx .messages .woo-cinema-player-tools {
    display: none;
}

body.incallx .messages .woo-cinema-player.is-floating .woo-cinema-player-tools,
body.incallx .messages .woo-cinema-video-wrap.is-screen-mode .woo-cinema-player-tools,
body.incallx .messages .woo-cinema-video-wrap:fullscreen .woo-cinema-player-tools {
    display: inline-flex;
}

body.incallx .messages .woo-cinema-live-badge {
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    font-size: 10px;
}

body.incallx .messages .woo-cinema-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 6px;
    border-radius: 11px;
}

body.incallx .messages .woo-cinema-control-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
}

body.incallx .messages .woo-cinema-volume {
    flex: 1 1 120px;
    min-width: 60px;
    width: min(170px, 28%);
}

body.incallx .messages .woo-cinema-select-wrap,
body.incallx .messages .woo-cinema-control-note {
    min-width: 0;
    white-space: nowrap;
}

body.incallx .messages .woo-cinema-quality {
    min-width: 80px;
    max-width: 115px;
    height: 36px;
}

body.incallx .messages .woo-cinema-chat-panel {
    display: none;
}

body.incallx .messages .woo-cinema-chat-panel.is-open {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 1085;
    display: flex;
    width: min(340px, calc(100vw - 28px));
    height: min(540px, calc(100dvh - 90px));
    min-height: 0;
    border-radius: 12px;
}

body.incallx .messages .woo-cinema-player.is-floating {
    min-height: 0;
    aspect-ratio: 16 / 9;
}

body.incallx .messages .woo-cinema-player.is-floating .woo-cinema-video-wrap {
    position: absolute;
    inset: 0;
}

@media (max-width: 900px) {
    body.incallx .messages .woo-cinema-shell {
        padding: 9px;
    }

    body.incallx .messages .woo-cinema-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    body.incallx .messages .woo-cinema-hero h2 {
        font-size: 20px;
    }

    body.incallx .messages .woo-cinema-room-actions {
        width: 100%;
        justify-content: space-between;
    }

    body.incallx .messages .woo-cinema-header-tools button {
        width: 37px;
        height: 37px;
    }

    body.incallx .messages .woo-cinema-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.incallx .messages .woo-cinema-tab {
        flex: 0 0 102px;
    }

    body.incallx .messages .woo-cinema-player .woo-cinema-now {
        display: none;
    }

    body.incallx .messages .woo-cinema-player-tools button {
        width: 31px;
        height: 31px;
    }

    body.incallx .messages .woo-cinema-controls {
        position: absolute;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    body.incallx .messages .woo-cinema-volume {
        width: 100%;
    }

    body.incallx .messages .woo-cinema-select-wrap,
    body.incallx .messages .woo-cinema-control-note {
        display: none;
    }
}

/* Whitoo search and explore polish 2026051937 */
body.incallx .whitoo-explore-search-hero {
    margin: 4px 0 16px;
    padding: 14px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .09), rgba(32, 224, 196, .08)),
        rgba(8, 14, 28, .72);
}

body.incallx .whitoo-home-search-copy span {
    color: #9eefff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body.incallx .whitoo-home-search-copy strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
}

body.incallx .whitoo-room-search {
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 14px;
    background: rgba(3, 7, 18, .58) !important;
    overflow: hidden;
}

body.incallx .whitoo-room-search .form-control {
    border: 0 !important;
    background: transparent !important;
    color: #f8fbff !important;
}

body.incallx .whitoo-room-search .form-control::placeholder {
    color: rgba(203, 213, 225, .56);
}

body.incallx .whitoo-room-search .input-icon-addon,
body.incallx .whitoo-room-search-action {
    color: rgba(125, 249, 235, .76) !important;
}

body.incallx .whitoo-room-search-actions {
    border-left: 1px solid rgba(148, 163, 184, .12);
    background: rgba(15, 23, 42, .54) !important;
}

body.incallx .whitoo-room-search .dropdown-menu,
body.incallx #offcanvasSearch .dropdown-menu {
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 12px;
    background: rgba(8, 14, 28, .98);
    color: #eaf7ff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .32);
}

body.incallx #chat-room-loop {
    gap: 14px 0;
}

body.incallx #chat-room-loop .room-loop-link {
    color: inherit;
}

body.incallx #chat-room-loop .room-card {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(13, 20, 34, .94), rgba(6, 10, 20, .98));
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.incallx #chat-room-loop .room-card:hover {
    border-color: rgba(32, 224, 196, .32);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .28);
    transform: translateY(-2px);
}

body.incallx #chat-room-loop .card-img-top {
    min-height: 118px;
    position: relative;
}

body.incallx #chat-room-loop .card-img-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 17, .06), rgba(5, 8, 17, .74));
}

body.incallx #chat-room-loop .room-card .card-body {
    padding: 30px 14px 14px;
}

body.incallx #chat-room-loop .room-image {
    width: 52px;
    height: 52px;
    border: 3px solid #07101d;
    border-radius: 15px;
    object-fit: cover;
}

body.incallx #chat-room-loop .lt-room-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
}

body.incallx #chat-room-loop .text-muted {
    color: rgba(203, 213, 225, .72) !important;
    font-size: 12px;
    line-height: 1.45;
}

body.incallx #chat-room-loop .room-stats {
    margin-top: 12px !important;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, .12);
    color: rgba(226, 232, 240, .82);
}

body.incallx #offcanvasSearch {
    border-left: 1px solid rgba(32, 224, 196, .18);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 51, 71, .12), transparent 28%),
        linear-gradient(180deg, rgba(13, 20, 34, .98), rgba(5, 9, 18, .99));
    color: #f8fbff;
}

body.incallx #offcanvasSearch .offcanvas-header {
    padding: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

body.incallx #offcanvasSearch .chat-search-query {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 12px !important;
    background: rgba(3, 7, 18, .52) !important;
    color: #f8fbff !important;
}

body.incallx .chat-search-result {
    margin-bottom: 8px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(8, 14, 28, .70);
    color: #eaf7ff;
}

body.incallx .chat-search-result:hover {
    border-color: rgba(32, 224, 196, .28);
    background: rgba(32, 224, 196, .10);
}

body.incallx .res-chat-time {
    color: rgba(125, 249, 235, .76);
}

body.incallx .res-chat-txt {
    color: rgba(226, 232, 240, .88);
}

/* Whitoo profile screen polish 2026051938 */
body.incallx #main-profile {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 51, 71, .08), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(32, 224, 196, .08), transparent 30%),
        #070a12;
}

body.incallx #main-profile .profile-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px !important;
}

body.incallx #main-profile .profile-header {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(13, 20, 34, .94), rgba(6, 10, 20, .98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, .24);
}

body.incallx #main-profile .profile-header-cover {
    min-height: 190px;
    position: relative;
}

body.incallx #main-profile .profile-header-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .08), rgba(5, 8, 17, .78)),
        linear-gradient(90deg, rgba(255, 51, 71, .13), rgba(32, 224, 196, .13));
}

body.incallx #main-profile .profile-header-info {
    padding: 0 18px 18px;
}

body.incallx #main-profile .profile-header-desc {
    margin-top: -44px;
    position: relative;
    z-index: 2;
}

body.incallx #main-profile .profile-header-user-avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto 10px;
    border: 4px solid #07101d;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .34);
}

body.incallx #main-profile .profile-header-user-title {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
    text-align: center;
}

body.incallx #main-profile .profile-header-user-sub-title {
    margin: 4px 0 0;
    color: rgba(125, 249, 235, .78);
    text-align: center;
    font-weight: 800;
}

body.incallx #main-profile #v-profile-home .btn-success[disabled] {
    min-height: 36px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background: rgba(15, 23, 42, .70) !important;
    color: rgba(226, 232, 240, .78) !important;
}

body.incallx #main-profile .profile-section .card,
body.incallx #main-profile .profile-form,
body.incallx #main-profile .user-card {
    border: 1px solid rgba(32, 224, 196, .16) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(13, 20, 34, .92), rgba(6, 10, 20, .98)) !important;
    color: #f8fbff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .20);
}

body.incallx #main-profile .profile-section .card-header,
body.incallx #main-profile .profile-form .card-footer {
    border-color: rgba(148, 163, 184, .12) !important;
    background: rgba(3, 7, 18, .32) !important;
}

body.incallx #main-profile .profile-section .card-title,
body.incallx #main-profile .profile-form h2,
body.incallx #main-profile .profile-form h3 {
    color: #ffffff;
    font-weight: 900;
}

body.incallx #main-profile #v-profile-home .rounded.border {
    border-color: rgba(32, 224, 196, .14) !important;
    border-radius: 14px !important;
    background: rgba(8, 14, 28, .60);
}

body.incallx #main-profile #v-profile-home .row.g-3 p {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(8, 14, 28, .52);
    color: rgba(226, 232, 240, .86);
}

body.incallx #main-profile #v-profile-home .row.g-3 p i {
    color: #20e0c4;
}

body.incallx #main-profile .profile-form .card-body {
    padding: 20px;
}

body.incallx #main-profile .profile-form .form-label {
    color: #eaf7ff;
    font-size: 12px;
    font-weight: 850;
}

body.incallx #main-profile .profile-form .form-control,
body.incallx #main-profile .profile-form .form-select,
body.incallx #main-profile .profile-form .select2-selection {
    min-height: 40px;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 12px !important;
    background: rgba(3, 7, 18, .50) !important;
    color: #f8fbff !important;
}

body.incallx #main-profile .profile-form textarea.form-control {
    min-height: 104px;
}

body.incallx #main-profile .btn-upload {
    width: 100%;
    min-height: 40px;
    border: 1px dashed rgba(32, 224, 196, .28) !important;
    border-radius: 12px !important;
    background: rgba(32, 224, 196, .08) !important;
    color: #9eefff !important;
}

body.incallx #main-profile .save-profile {
    min-height: 38px;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #20e0c4, #0ea5e9) !important;
    color: #03101a !important;
    font-weight: 900;
}

body.incallx #main-profile .profile-preview-sidebar .user-card {
    display: block;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    body.incallx #main-profile .profile-section {
        padding: 14px !important;
    }

    body.incallx #main-profile .profile-header-cover {
        min-height: 145px;
    }
}

@media (max-width: 767.98px) {
    body.incallx .lt-next-channel-modal #channel-form,
    body.incallx .lt-next-channel-modal .whitoo-ai-builder-grid,
    body.incallx .lt-next-channel-modal .form-selectgroup-boxes {
        grid-template-columns: 1fr;
    }
}

/* Whitoo profile edit soft compact 2026051939 */
body.incallx #main-profile #v-profile-settings .profile-settings-grid {
    align-items: flex-start;
}

body.incallx #main-profile #v-profile-settings .profile-form {
    overflow: hidden;
    border-color: rgba(125, 249, 235, .18) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 224, 196, .08), transparent 28%),
        linear-gradient(180deg, rgba(12, 18, 31, .94), rgba(5, 9, 18, .98)) !important;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-body {
    display: grid;
    gap: 12px;
    padding: 18px !important;
}

body.incallx #main-profile #v-profile-settings .profile-form h2 {
    margin: 0 0 2px !important;
    font-size: 18px;
    letter-spacing: 0;
}

body.incallx #main-profile #v-profile-settings .profile-form h2::after {
    content: "Profilini hizlica ve sade sekilde guncelle.";
    display: block;
    margin-top: 5px;
    color: rgba(226, 232, 240, .58);
    font-size: 12px;
    font-weight: 650;
}

body.incallx #main-profile #v-profile-settings .profile-form h3.card-title {
    width: fit-content;
    margin: 4px 0 0 !important;
    padding: 7px 10px;
    border: 1px solid rgba(32, 224, 196, .14);
    border-left: 3px solid #20e0c4;
    border-radius: 11px;
    background: rgba(32, 224, 196, .06);
    color: rgba(248, 251, 255, .94);
    font-size: 13px;
    line-height: 1.2;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-subtitle {
    display: none !important;
}

body.incallx #main-profile #v-profile-settings .profile-form .row.g-3 {
    margin-top: 0 !important;
    row-gap: 10px;
}

body.incallx #main-profile #v-profile-settings .profile-form .row.g-3 > [class*="col"] {
    padding-left: 6px;
    padding-right: 6px;
}

body.incallx #main-profile #v-profile-settings .profile-form .form-label {
    margin-bottom: 5px;
    color: rgba(226, 232, 240, .72);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

body.incallx #main-profile #v-profile-settings .profile-form .form-control,
body.incallx #main-profile #v-profile-settings .profile-form .form-select,
body.incallx #main-profile #v-profile-settings .profile-form .select2-selection {
    min-height: 38px;
    border-radius: 11px !important;
    background: rgba(2, 6, 16, .46) !important;
}

body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control {
    min-height: 82px;
    resize: vertical;
}

body.incallx #main-profile #v-profile-settings .btn-upload {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 11px !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings {
    margin-top: 6px !important;
    padding: 12px;
    border: 1px solid rgba(32, 224, 196, .14);
    border-radius: 14px;
    background: rgba(3, 7, 18, .42);
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head {
    margin-bottom: 8px;
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head h3 {
    margin: 2px 0 0;
    font-size: 14px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-eyebrow,
body.incallx #main-profile #v-profile-settings .woo-effect-status,
body.incallx #main-profile #v-profile-settings .woo-effect-upgrade {
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-preview-line {
    min-height: 38px;
    margin-bottom: 8px;
    border-radius: 12px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder {
    padding: 10px;
    border-radius: 12px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-head p {
    display: none;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button,
body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions button {
    min-height: 36px;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-options {
    gap: 8px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions {
    align-items: center;
    gap: 8px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions small {
    color: rgba(226, 232, 240, .52);
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 7px;
    margin-top: 10px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span {
    min-height: 32px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 12px;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px !important;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-footer .btn {
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 11px !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx #main-profile #v-profile-settings .profile-form .deactivate-user {
    border: 1px solid rgba(248, 113, 113, .22) !important;
    background: rgba(248, 113, 113, .12) !important;
    color: #fecaca !important;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card {
    position: sticky;
    top: 14px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card .card-body {
    padding: 0 14px 14px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-image-preview {
    width: 76px;
    height: 76px;
    margin-top: -38px;
    border: 3px solid #07101d;
    border-radius: 22px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-title-preview {
    margin-top: 8px !important;
    font-size: 17px;
    text-align: center;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .text-muted {
    margin-top: 10px !important;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(3, 7, 18, .38);
    color: rgba(226, 232, 240, .70) !important;
    font-size: 12px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .card-footer {
    padding: 10px 14px 14px;
    border-top: 0 !important;
    background: transparent !important;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .btn-success {
    width: 100%;
    min-height: 34px;
    border-radius: 11px !important;
    font-size: 12px;
}

@media (max-width: 991.98px) {
    body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    body.incallx #main-profile #v-profile-settings .profile-form .card-body {
        padding: 14px !important;
    }

    body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
        grid-template-columns: 1fr;
    }

    body.incallx #main-profile #v-profile-settings .profile-form .card-footer {
        flex-direction: column-reverse;
        padding: 12px 14px !important;
    }
}

/* Whitoo profile edit lighter AI controls 2026051940 */
body.incallx #main-profile #v-profile-settings .profile-form .card-body {
    gap: 9px;
}

body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control {
    min-height: 68px;
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings {
    padding: 10px;
    border-radius: 13px;
    background: rgba(2, 6, 16, .26);
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head {
    margin-bottom: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-preview-line {
    min-height: 30px;
    margin-bottom: 6px;
    padding: 5px 8px;
    border-radius: 10px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder {
    margin-top: 4px;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .10);
    border-radius: 11px;
    background: rgba(8, 14, 28, .38);
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-head {
    display: none !important;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls .form-control {
    min-height: 32px;
    font-size: 12px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-options {
    display: none !important;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions {
    margin-top: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions small {
    display: none;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions button {
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 9px;
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label {
    flex: 0 0 auto;
    min-width: 72px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span {
    min-height: 28px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
}

@media (max-width: 767.98px) {
    body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
        grid-template-columns: 1fr;
    }
}

/* Whitoo profile edit overall compact 2026051941 */
body.incallx #main-profile #v-profile-settings .profile-settings-grid {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}

body.incallx #main-profile #v-profile-settings .profile-form {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}

body.incallx #main-profile #v-profile-settings .profile-form .card-body {
    gap: 7px;
    padding: 14px !important;
}

body.incallx #main-profile #v-profile-settings .profile-form h2 {
    font-size: 17px;
}

body.incallx #main-profile #v-profile-settings .profile-form h2::after {
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .profile-form h3.card-title {
    margin-top: 2px !important;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 12px;
}

body.incallx #main-profile #v-profile-settings .profile-form .row.g-3,
body.incallx #main-profile #v-profile-settings .profile-form .row.g-3.mt-2 {
    margin-top: 0 !important;
    row-gap: 7px;
}

body.incallx #main-profile #v-profile-settings .profile-form .form-label {
    margin-bottom: 4px;
    font-size: 10.5px;
}

body.incallx #main-profile #v-profile-settings .profile-form .form-control,
body.incallx #main-profile #v-profile-settings .profile-form .form-select,
body.incallx #main-profile #v-profile-settings .profile-form .select2-selection {
    min-height: 34px;
    border-radius: 10px !important;
    font-size: 12px;
}

body.incallx #main-profile #v-profile-settings .profile-form textarea.form-control {
    min-height: 58px;
}

body.incallx #main-profile #v-profile-settings .btn-upload {
    min-height: 32px;
    border-radius: 10px !important;
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings {
    margin-top: 3px !important;
    padding: 8px;
}

body.incallx #main-profile #v-profile-settings .woo-name-effect-settings-head h3 {
    font-size: 13px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-eyebrow {
    display: none;
}

body.incallx #main-profile #v-profile-settings .woo-effect-preview-line {
    display: none;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder {
    padding: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls .form-control,
body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button {
    min-height: 30px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-actions {
    display: none;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid {
    margin-top: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label {
    min-width: 64px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 10.5px;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-footer {
    padding: 10px 14px !important;
}

body.incallx #main-profile #v-profile-settings .profile-form .card-footer .btn {
    min-height: 31px;
    padding: 5px 12px;
    font-size: 11.5px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-card {
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-cover-preview {
    min-height: 92px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-image-preview {
    width: 64px;
    height: 64px;
    margin-top: -32px;
    border-radius: 18px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .user-title-preview {
    font-size: 15px;
}

body.incallx #main-profile #v-profile-settings .profile-preview-sidebar .text-muted {
    max-height: 58px;
    overflow: hidden;
    font-size: 11px;
}

/* Whitoo profile AI effect visible grid fix 2026051943 */
body.incallx #main-profile #v-profile-settings .woo-effect-preview-line {
    display: flex;
    min-height: 32px;
    margin-bottom: 6px;
    padding: 5px 9px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder {
    display: block;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-head {
    display: flex !important;
    margin-bottom: 5px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-head span {
    font-size: 11px;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-head p {
    display: none !important;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    overflow: visible;
    padding-bottom: 0;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label {
    min-width: 0;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span {
    width: 100%;
    border-radius: 10px;
}

/* Whitoo profile overflow hard fix 2026051944 */
body.incallx #main-profile #v-profile-settings,
body.incallx #main-profile #v-profile-settings .profile-settings-grid,
body.incallx #main-profile #v-profile-settings .profile-form,
body.incallx #main-profile #v-profile-settings .profile-form .card-body,
body.incallx #main-profile #v-profile-settings .woo-name-effect-settings,
body.incallx #main-profile #v-profile-settings .woo-ai-effect-builder {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.incallx #main-profile #v-profile-settings .profile-form .row {
    --bs-gutter-x: 10px;
    max-width: 100%;
}

body.incallx #main-profile #v-profile-settings .profile-form .row > * {
    min-width: 0;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
    grid-template-columns: 42px minmax(0, 1fr) 92px;
    width: 100%;
    align-items: center;
    padding: 6px;
    border: 1px solid rgba(32, 224, 196, .12);
    border-radius: 14px;
    background: rgba(2, 6, 16, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-icon-preview {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 224, 196, .24);
    border-radius: 12px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 88, 112, .32), transparent 46%), rgba(10, 18, 34, .9);
    color: #7df9eb;
    font-size: 17px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(32, 224, 196, .09);
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls input {
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    border: 0;
    background: linear-gradient(135deg, #21e6bd, #5bf277);
    color: #03111b;
    box-shadow: 0 10px 22px rgba(33, 230, 189, .16);
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 6px;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label,
body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span {
    min-width: 0;
    max-width: 100%;
}

body.incallx #main-profile #v-profile-settings .woo-effect-grid label > span,
body.incallx #main-profile #v-profile-settings .form-control,
body.incallx #main-profile #v-profile-settings .form-select,
body.incallx #main-profile #v-profile-settings .btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx #main-profile #v-profile-settings textarea.form-control {
    white-space: normal;
}

@media (max-width: 575.98px) {
    body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    body.incallx #main-profile #v-profile-settings .woo-ai-effect-controls button {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.incallx #main-profile #v-profile-settings .woo-effect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Whitoo profile security polish 2026051945 */
body.incallx #main-profile #v-profile-security .row.justify-content-center {
    justify-content: flex-start !important;
}

body.incallx #main-profile #v-profile-security .col-xl-9 {
    max-width: 820px;
}

body.incallx #main-profile #password-form {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .16) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 224, 196, .07), transparent 30%),
        linear-gradient(180deg, rgba(12, 18, 31, .94), rgba(5, 9, 18, .98)) !important;
    color: #f8fbff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

body.incallx #main-profile #password-form .card-body {
    display: grid;
    gap: 9px;
    padding: 15px !important;
}

body.incallx #main-profile #password-form h2 {
    margin: 0 !important;
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
}

body.incallx #main-profile #password-form h2::after {
    content: "Hesap girisi ve sifre ayarlarini buradan yonet.";
    display: block;
    margin-top: 5px;
    color: rgba(226, 232, 240, .58);
    font-size: 11px;
    font-weight: 650;
}

body.incallx #main-profile #password-form h3.card-title {
    width: fit-content;
    margin: 2px 0 0 !important;
    padding: 5px 9px;
    border: 1px solid rgba(32, 224, 196, .14);
    border-left: 3px solid #20e0c4;
    border-radius: 9px;
    background: rgba(32, 224, 196, .06);
    color: rgba(248, 251, 255, .94);
    font-size: 12px;
    font-weight: 900;
}

body.incallx #main-profile #password-form .card-subtitle {
    display: none !important;
}

body.incallx #main-profile #password-form .form-check {
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 10px 8px 44px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(3, 7, 18, .36);
}

body.incallx #main-profile #password-form .form-switch .form-check-input {
    margin-left: -34px;
}

body.incallx #main-profile #password-form .form-check-input {
    border-color: rgba(148, 163, 184, .28);
    background-color: rgba(15, 23, 42, .88);
}

body.incallx #main-profile #password-form .form-check-input:checked {
    border-color: #20e0c4;
    background-color: #20e0c4;
}

body.incallx #main-profile #password-form .form-check-label {
    color: rgba(226, 232, 240, .86);
    font-size: 12px;
    font-weight: 750;
}

body.incallx #main-profile #password-form .profile-security-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 !important;
}

body.incallx #main-profile #password-form .profile-security-collapse {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 13px;
    background: rgba(3, 7, 18, .34);
}

body.incallx #main-profile #password-form .profile-security-collapse summary {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    cursor: pointer;
    list-style: none;
}

body.incallx #main-profile #password-form .profile-security-collapse summary::-webkit-details-marker {
    display: none;
}

body.incallx #main-profile #password-form .profile-security-collapse summary span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #f8fbff;
    font-size: 12px;
    font-weight: 900;
}

body.incallx #main-profile #password-form .profile-security-collapse summary i {
    color: #20e0c4;
}

body.incallx #main-profile #password-form .profile-security-collapse summary small {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(32, 224, 196, .10);
    color: rgba(125, 249, 235, .90);
    font-size: 10.5px;
    font-weight: 850;
}

body.incallx #main-profile #password-form .profile-security-collapse-body {
    max-height: 220px;
    overflow: auto;
    padding: 0 9px 9px;
}

body.incallx #main-profile #password-form .profile-security-row,
body.incallx #main-profile #password-form .profile-security-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(8, 14, 28, .58);
}

body.incallx #main-profile #password-form .profile-security-row + .profile-security-row {
    margin-top: 6px;
}

body.incallx #main-profile #password-form .profile-security-row strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
}

body.incallx #main-profile #password-form .profile-security-row span,
body.incallx #main-profile #password-form .profile-security-empty span {
    display: block;
    color: rgba(226, 232, 240, .58);
    font-size: 10.5px;
}

body.incallx #main-profile #password-form .profile-security-row > i,
body.incallx #main-profile #password-form .profile-security-empty i {
    color: rgba(125, 249, 235, .82);
}

body.incallx #main-profile #password-form .alert-warning {
    margin: 0 !important;
    padding: 8px 10px;
    border: 1px solid rgba(251, 191, 36, .20);
    border-radius: 11px;
    background: rgba(251, 191, 36, .08);
    color: rgba(254, 243, 199, .86);
    font-size: 11.5px;
}

body.incallx #main-profile #password-form .row.g-3,
body.incallx #main-profile #password-form .row.g-3.mt-2 {
    margin-top: 0 !important;
    row-gap: 8px;
}

body.incallx #main-profile #password-form .form-label {
    margin-bottom: 4px;
    color: rgba(226, 232, 240, .72);
    font-size: 10.5px;
    font-weight: 850;
}

body.incallx #main-profile #password-form .form-control {
    min-height: 34px;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 10px !important;
    background: rgba(2, 6, 16, .46) !important;
    color: #f8fbff !important;
    font-size: 12px;
}

body.incallx #main-profile #password-form .card-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 15px !important;
    border-color: rgba(148, 163, 184, .12) !important;
    background: rgba(3, 7, 18, .32) !important;
}

body.incallx #main-profile #password-form .card-footer .btn {
    min-height: 31px;
    padding: 5px 12px;
    border-radius: 11px !important;
    font-size: 11.5px;
    font-weight: 850;
}

body.incallx #main-profile #password-form .save-profile {
    border: 0 !important;
    background: linear-gradient(135deg, #20e0c4, #0ea5e9) !important;
    color: #03101a !important;
}

body.incallx #main-profile #password-form .deactivate-user {
    border: 1px solid rgba(248, 113, 113, .22) !important;
    background: rgba(248, 113, 113, .12) !important;
    color: #fecaca !important;
}

@media (max-width: 767.98px) {
    body.incallx #main-profile #password-form .profile-security-accordion {
        grid-template-columns: 1fr;
    }

    body.incallx #main-profile #password-form .card-footer {
        flex-direction: column-reverse;
    }
}

/* Whitoo ad image fit 2026051946 */
body.incallx .ad-space {
    padding: 0 !important;
    border-radius: 12px;
    background: transparent !important;
}

body.incallx .ad-space a,
body.incallx .ad-space picture {
    display: block;
    width: 100%;
    height: 100%;
}

body.incallx .ad-space img,
body.incallx .ad-space iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
}

body.incallx .ad-rightbar-top,
body.incallx .ad-rightbar-bottom,
body.incallx .ad-sidebar-top,
body.incallx .ad-sidebar-bottom {
    min-height: 78px;
    aspect-ratio: 3.05 / 1;
}

body.incallx .ad-main-top,
body.incallx .ad-main-bottom {
    min-height: 90px;
    aspect-ratio: 8 / 1;
}

body.incallx .ad-rightbar-top img,
body.incallx .ad-rightbar-bottom img,
body.incallx .ad-sidebar-top img,
body.incallx .ad-sidebar-bottom img {
    transform: scale(1.035);
}

/* Whitoo room edit professional compact 2026051947 */
body.incallx .chat-room-update-area {
    max-width: 980px;
}

body.incallx .lt-next-room-form.card {
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .16) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 224, 196, .07), transparent 28%),
        linear-gradient(180deg, rgba(12, 18, 31, .94), rgba(5, 9, 18, .98)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22) !important;
}

body.incallx .lt-next-room-form > .card-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    background: rgba(3, 7, 18, .34) !important;
}

body.incallx .lt-next-room-form #room-manage-tab {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    border: 0;
    scrollbar-width: thin;
}

body.incallx .lt-next-room-form #room-manage-tab .nav-link {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 10px !important;
    background: rgba(8, 14, 28, .56) !important;
    color: rgba(226, 232, 240, .72) !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx .lt-next-room-form #room-manage-tab .nav-link.active {
    border-color: rgba(32, 224, 196, .38) !important;
    background: rgba(32, 224, 196, .12) !important;
    color: #f8fbff !important;
    box-shadow: inset 0 -2px 0 #20e0c4;
}

body.incallx .lt-next-room-form .room-manage-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

body.incallx .lt-next-room-form .room-manage-tab-item i {
    margin-right: 0 !important;
    color: #20e0c4;
}

body.incallx .lt-next-room-form > .card-body {
    padding: 14px !important;
}

body.incallx .lt-next-room-form #chatroom-info {
    max-width: 100%;
    min-width: 0;
}

body.incallx .lt-next-room-form .card-room-info,
body.incallx .lt-next-room-form .card-room-users,
body.incallx .lt-next-room-form .lt-roles-panel,
body.incallx .lt-next-room-form .lt-room-bot-panel {
    max-width: 100%;
    min-width: 0;
}

body.incallx .lt-next-room-form h2 {
    margin: 0 0 4px !important;
    color: #ffffff;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

body.incallx .lt-next-room-form .lt-form-note {
    margin-top: 3px;
    color: rgba(226, 232, 240, .54) !important;
    font-size: 11px;
    line-height: 1.35;
}

body.incallx .lt-next-room-form .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 8px;
}

body.incallx .lt-next-room-form .row.g-3,
body.incallx .lt-next-room-form .row.g-3.mt-2 {
    margin-top: 8px !important;
}

body.incallx .lt-next-room-form .form-label {
    margin-bottom: 4px;
    color: rgba(226, 232, 240, .82) !important;
    font-size: 11.5px;
    font-weight: 850;
}

body.incallx .lt-next-room-form .form-control,
body.incallx .lt-next-room-form .form-select,
body.incallx .lt-next-room-form textarea,
body.incallx .lt-next-room-form select {
    min-height: 36px;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 10px !important;
    background: rgba(2, 6, 16, .48) !important;
    color: #f8fbff !important;
    font-size: 12.5px;
}

body.incallx .lt-next-room-form textarea.form-control {
    min-height: 82px;
    resize: vertical;
}

body.incallx .lt-next-room-form .divide-y {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

body.incallx .lt-next-room-form .divide-y > div,
body.incallx .lt-next-room-form .lt-plus-locked-row {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 12px;
    background: rgba(3, 7, 18, .34);
}

body.incallx .lt-next-room-form .divide-y label.row,
body.incallx .lt-next-room-form label.row {
    width: 100%;
    margin: 0;
    align-items: center;
}

body.incallx .lt-next-room-form .divide-y label.row > .col-4,
body.incallx .lt-next-room-form label.row > .col-4 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

body.incallx .lt-next-room-form .divide-y label.row > .col-auto,
body.incallx .lt-next-room-form label.row > .col-auto {
    flex: 0 0 auto;
}

body.incallx .lt-next-room-form .pin-area.text-end {
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px;
}

body.incallx .lt-next-room-form .pin-area:not(.text-end) {
    flex: 0 0 110px;
    width: 110px;
    max-width: 110px;
}

body.incallx .lt-next-room-form .form-check-input {
    border-color: rgba(148, 163, 184, .28);
    background-color: rgba(15, 23, 42, .86);
}

body.incallx .lt-next-room-form .form-check-input:checked {
    border-color: #20e0c4;
    background-color: #20e0c4;
}

body.incallx .lt-next-room-form input[type="file"].form-control-file {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px dashed rgba(32, 224, 196, .24);
    border-radius: 10px;
    background: rgba(32, 224, 196, .06);
    color: rgba(226, 232, 240, .78);
    font-size: 12px;
}

body.incallx .lt-next-room-form .room-coverimage-preview,
body.incallx .lt-next-room-form .room-bgimage-preview {
    width: 128px;
    height: 58px;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 12px;
    background: rgba(3, 7, 18, .44);
}

body.incallx .lt-next-room-form .room-coverimage-preview img,
body.incallx .lt-next-room-form .room-bgimage-preview img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

body.incallx .lt-next-room-form .room-bgimage-remove {
    min-height: 28px;
    margin-top: 6px;
    border-radius: 9px !important;
}

body.incallx .lt-next-room-form hr {
    margin: 12px 0;
    border-color: rgba(148, 163, 184, .12);
    opacity: 1;
}

body.incallx .lt-next-room-form .table {
    color: rgba(226, 232, 240, .86);
    font-size: 12px;
}

body.incallx .lt-next-room-form .table th {
    color: #f8fbff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body.incallx .lt-next-room-form .btn {
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 850;
}

body.incallx .lt-next-room-form .card-footer,
body.incallx .chat-room-update-area .card-footer {
    padding: 10px 14px !important;
    border-color: rgba(148, 163, 184, .12) !important;
    background: rgba(3, 7, 18, .32) !important;
}

@media (max-width: 991.98px) {
    body.incallx .lt-next-room-form .divide-y {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    body.incallx .lt-next-room-form > .card-body {
        padding: 12px !important;
    }

    body.incallx .lt-next-room-form label.row {
        gap: 8px;
    }

    body.incallx .lt-next-room-form .room-coverimage-preview,
    body.incallx .lt-next-room-form .room-bgimage-preview {
        width: 100%;
    }
}

/* Whitoo room hero voice presence badge 2026052012 */
body.incallx .woo-room-hero-meta {
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch;
}

body.incallx .woo-room-hero-meta .woo-room-presence-voice {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 36px;
    border-color: rgba(35, 213, 208, .28) !important;
    background:
        radial-gradient(circle at 18% 50%, rgba(35, 213, 208, .16), transparent 42%),
        rgba(8, 14, 28, .90) !important;
    color: #e9ffff;
    font-weight: 900;
}

body.incallx .woo-room-hero-meta .woo-room-presence-voice i {
    color: #23d5d0 !important;
    filter: drop-shadow(0 0 8px rgba(35, 213, 208, .38));
}

/* Woo Match */
body.incallx .lt-quick-match-dm {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(35, 213, 208, .28);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255, 75, 104, .22), rgba(35, 213, 208, .16)),
        rgba(8, 14, 28, .88);
    color: #f8fbff;
    font-size: 13px;
    font-weight: 900;
}

body.incallx .whitoo-quick-match-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

body.incallx .whitoo-quick-match-modal.is-open {
    display: flex;
}

body.incallx .whitoo-quick-match-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(10px);
}

body.incallx .whitoo-quick-match-card {
    position: relative;
    width: min(590px, 100%);
    overflow: hidden;
    border: 1px solid rgba(35, 213, 208, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 75, 104, .24), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(35, 213, 208, .18), transparent 38%),
        rgba(10, 16, 30, .96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    color: #fff;
    padding: 22px;
}

body.incallx .whitoo-quick-match-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    background: rgba(15, 23, 42, .72);
    color: #e2e8f0;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

body.incallx .whitoo-quick-match-x:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 75, 104, .5);
    background: rgba(255, 75, 104, .16);
}

body.incallx .whitoo-quick-match-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding-right: 36px;
}

body.incallx .whitoo-quick-match-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: linear-gradient(135deg, #ff4b68, #23d5d0);
    font-size: 24px;
    box-shadow: 0 12px 34px rgba(255, 75, 104, .24);
}

body.incallx .whitoo-quick-match-head span {
    color: #23d5d0;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .whitoo-quick-match-head h3 {
    margin: 2px 0 5px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

body.incallx .whitoo-quick-match-head p {
    max-width: 420px;
    margin: 0;
    color: #b8c5d8;
    font-size: 13px;
    line-height: 1.45;
}

body.incallx .whitoo-quick-match-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

body.incallx .whitoo-quick-match-intents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

body.incallx .whitoo-quick-match-modes label,
body.incallx .whitoo-quick-match-intents label,
body.incallx .whitoo-quick-match-grid label {
    margin: 0;
}

body.incallx .whitoo-quick-match-modes label,
body.incallx .whitoo-quick-match-intents label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 14px;
    background: rgba(15, 23, 42, .66);
    color: #dbeafe;
    font-weight: 900;
    cursor: pointer;
}

body.incallx .whitoo-quick-match-modes label.active,
body.incallx .whitoo-quick-match-intents label.active {
    border-color: rgba(255, 75, 104, .72);
    background: linear-gradient(135deg, rgba(255, 75, 104, .92), rgba(255, 75, 104, .52));
    color: #fff;
}

body.incallx .whitoo-quick-match-modes label:hover,
body.incallx .whitoo-quick-match-grid select:hover,
body.incallx .whitoo-quick-match-check:hover {
    border-color: rgba(35, 213, 208, .34);
}

body.incallx .whitoo-quick-match-modes input,
body.incallx .whitoo-quick-match-intents input {
    display: none;
}

body.incallx .whitoo-quick-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

body.incallx .whitoo-quick-match-grid label > span {
    display: block;
    margin-bottom: 6px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
}

body.incallx .whitoo-quick-match-grid select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 13px;
    background: rgba(3, 7, 18, .58);
    color: #fff;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}

body.incallx .whitoo-quick-match-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 13px;
    background: rgba(15, 23, 42, .56);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.incallx .whitoo-quick-match-check input {
    width: 16px;
    height: 16px;
    accent-color: #23d5d0;
}

body.incallx .whitoo-quick-match-check i {
    color: #23d5d0;
}

body.incallx .whitoo-quick-match-check.active {
    border-color: rgba(35, 213, 208, .48);
    background: rgba(35, 213, 208, .12);
    box-shadow: inset 0 0 0 1px rgba(35, 213, 208, .08);
}

body.incallx .whitoo-quick-match-check span {
    margin: 0 !important;
    color: #e2e8f0 !important;
}

body.incallx .whitoo-quick-match-status {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(35, 213, 208, .18);
    border-radius: 14px;
    background: rgba(35, 213, 208, .08);
    color: #cfffff;
    font-size: 13px;
    font-weight: 850;
}

body.incallx .whitoo-quick-match-result {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 75, 104, .24);
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 50%, rgba(255, 75, 104, .2), transparent 34%),
        rgba(15, 23, 42, .76);
}

body.incallx .whitoo-quick-match-result[hidden],
body.incallx .whitoo-quick-match-actions button[hidden] {
    display: none !important;
}

body.incallx .whitoo-quick-match-live {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: rgba(5,10,18,.64);
}
body.incallx .whitoo-quick-match-live > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
body.incallx .whitoo-quick-match-live > header strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f7f9ff;
    font-size: 12px;
}
body.incallx .whitoo-quick-match-live > header strong i { color: #20e0c4; }
body.incallx .whitoo-quick-match-live > header span {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #20e0c4;
    background: rgba(32,224,196,.1);
    text-align: center;
    font: 700 11px/1.4 inherit;
}
body.incallx [data-quick-match-live-list] { display: grid; gap: 7px; max-height: 188px; overflow: auto; }
body.incallx .whitoo-quick-live-item {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    color: #fff;
    background: rgba(255,255,255,.035);
    text-align: left;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
body.incallx .whitoo-quick-live-item:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(32,224,196,.42); background: rgba(32,224,196,.07); }
body.incallx .whitoo-quick-live-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #20e0c4; background: rgba(32,224,196,.1); }
body.incallx .whitoo-quick-live-item.is-game .whitoo-quick-live-icon { color: #ff4058; background: rgba(255,64,88,.11); }
body.incallx .whitoo-quick-live-item span:nth-child(2) { min-width: 0; display: grid; }
body.incallx .whitoo-quick-live-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body.incallx .whitoo-quick-live-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.48); font-size: 10px; }
body.incallx .whitoo-quick-live-item > b { color: #20e0c4; font-size: 9px; letter-spacing: .7px; }
body.incallx .whitoo-quick-live-item.is-mine { opacity: .65; cursor: default; }
body.incallx .whitoo-quick-live-empty { display: flex; align-items: center; gap: 8px; min-height: 48px; color: rgba(255,255,255,.42); font-size: 11px; }

body.incallx .whitoo-quick-match-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.incallx .whitoo-quick-match-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: linear-gradient(135deg, #ff4b68, #23d5d0);
    color: #fff;
    font-size: 18px;
    font-weight: 950;
}

body.incallx .whitoo-quick-match-player strong,
body.incallx .whitoo-quick-match-player small {
    display: block;
}

body.incallx .whitoo-quick-match-player strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
}

body.incallx .whitoo-quick-match-player small {
    margin-top: 2px;
    color: #b8c5d8;
    font-size: 12px;
    font-weight: 800;
}

body.incallx .whitoo-quick-match-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

body.incallx .whitoo-quick-match-actions button {
    min-height: 42px;
    border-radius: 13px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 950;
}

body.incallx .whitoo-quick-match-cancel {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(15, 23, 42, .72);
    color: #dbeafe;
}

body.incallx .whitoo-quick-match-start {
    border: 0;
    background: linear-gradient(135deg, #ff4b68, #23d5d0);
    color: #fff;
}

body.incallx .whitoo-quick-match-accept {
    border: 0;
    background: linear-gradient(135deg, #23d5d0, #2dd4bf);
    color: #04111f;
}

body.incallx .lt-game-member-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: #7f91ab;
    font-size: 11px;
    text-transform: capitalize;
}

body.incallx .lt-game-member-state.is-ready {
    color: #24d2b1;
}

body.incallx .lt-game-lobby-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

body.incallx .lt-game-lobby-tools label {
    display: grid;
    gap: 5px;
    margin: 0;
}

body.incallx .lt-game-lobby-tools label span {
    color: #8696ac;
    font-size: 11px;
    font-weight: 800;
}

body.incallx .lt-game-lobby-tools select,
body.incallx .lt-game-invite input {
    height: 40px;
    min-width: 116px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 11px;
    padding: 0 10px;
    background: rgba(7, 13, 26, .74);
    color: #e6edf8;
    font-size: 12px;
    outline: none;
}

body.incallx .lt-game-ready.is-ready {
    border-color: rgba(36, 210, 177, .46);
    background: rgba(36, 210, 177, .16);
    color: #25d4b4;
}

body.incallx .lt-game-ready {
    min-width: 128px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff3158, #ef476f);
    box-shadow: 0 12px 32px rgba(255, 49, 88, .22);
}

body.incallx .lt-game-ready-count {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #aebcd0;
    font-size: 12px;
    font-weight: 900;
}

body.incallx .lt-game-ready-count.is-complete {
    border-color: rgba(45, 212, 191, .40);
    background: rgba(45, 212, 191, .12);
    color: #7df5e7;
}

body.incallx .lt-game-invite {
    display: flex;
    gap: 6px;
}

body.incallx .lt-game-invite button {
    height: 40px;
    border: 1px solid rgba(35, 213, 208, .35);
    border-radius: 11px;
    padding: 0 12px;
    background: rgba(35, 213, 208, .13);
    color: #26d4cf;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 575.98px) {
    body.incallx .lt-game-lobby-tools,
    body.incallx .lt-game-invite {
        width: 100%;
    }
    body.incallx .lt-game-lobby-tools label {
        flex: 1;
    }
    body.incallx .lt-game-lobby-tools select,
    body.incallx .lt-game-invite input {
        width: 100%;
        min-width: 0;
    }
    body.incallx .lt-game-invite input {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    body.incallx .whitoo-quick-match-card {
        padding: 16px;
        border-radius: 18px;
    }

    body.incallx .whitoo-quick-match-grid {
        grid-template-columns: 1fr;
    }
}

/* Clean profile popover v2 2026052417 */
.popover.woo-profile-popover-v2 {
    width: 322px !important;
    max-width: min(322px, calc(100vw - 24px)) !important;
    border: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .42)) !important;
}

.popover.woo-profile-popover-v2 .popover-arrow {
    display: none !important;
}

.popover.woo-profile-popover-v2 .popover-body {
    padding: 1px !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(244, 63, 94, .55), rgba(45, 212, 191, .48) 50%, rgba(120, 140, 170, .24)) !important;
}

.woo-profile-card-v2 {
    overflow: hidden;
    border-radius: 17px;
    background:
        radial-gradient(circle at 16% 0%, rgba(244, 63, 94, .18), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(45, 212, 191, .16), transparent 36%),
        linear-gradient(180deg, #0f1726 0%, #060a13 100%);
    color: #f8fafc;
}

.woo-profile-v2-cover {
    position: relative;
    min-height: 92px;
    background-size: cover;
    background-position: center;
    opacity: .78;
}

.woo-profile-v2-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 8, 16, .08) 0%, rgba(5, 9, 17, .64) 76%, #060a13 100%),
        linear-gradient(90deg, rgba(244, 63, 94, .10), rgba(45, 212, 191, .10));
}

.woo-profile-v2-body {
    display: grid;
    justify-items: center;
    padding: 0 16px 15px;
    text-align: center;
}

.woo-profile-v2-identity {
    display: grid;
    justify-items: center;
    width: 100%;
}

.woo-profile-v2-avatar {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: -29px auto 9px !important;
    border: 1px solid rgba(45, 212, 191, .34) !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    background: #09101d !important;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 255, 255, .035) !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
}

.woo-profile-v2-name {
    display: block !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.woo-profile-v2-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 28px !important;
    margin: 10px 0 0 !important;
}

.woo-profile-v2-badges .profile-auto-badge {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    border: 1px solid rgba(118, 138, 166, .24) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(18, 27, 42, .94), rgba(8, 13, 24, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.woo-profile-v2-badges .profile-auto-badge i {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    border-radius: inherit !important;
    background: transparent !important;
    color: #2dd4bf !important;
    font-size: 15px !important;
}

.woo-profile-v2-badges .profile-auto-badge.is-premium {
    border-color: rgba(245, 158, 11, .34) !important;
}

.woo-profile-v2-badges .profile-auto-badge.is-premium i {
    color: #fbbf24 !important;
}

.woo-profile-v2-about {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(118, 138, 166, .15);
    border-radius: 12px;
    background: rgba(3, 7, 18, .42);
    color: rgba(226, 232, 240, .82);
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
}

.woo-profile-v2-about i {
    color: #2dd4bf;
    flex: 0 0 auto;
}

.woo-profile-v2-about span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-profile-v2-roles {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: 1px solid rgba(45, 212, 191, .14);
    border-radius: 12px;
    background: rgba(8, 14, 28, .48);
    text-align: left;
}

.woo-profile-v2-role-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #9eefff;
    font-size: 11px;
    font-weight: 900;
}

.woo-profile-v2-actions {
    padding: 11px 12px 12px;
    border-top: 1px solid rgba(118, 138, 166, .12);
    background: rgba(3, 7, 18, .42);
}

.woo-profile-v2-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.woo-profile-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.woo-profile-v2-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-profile-v2-btn-soft {
    border-color: rgba(244, 63, 94, .34);
    background: rgba(244, 63, 94, .11);
    color: #fecdd3;
}

.woo-profile-v2-btn-main {
    border-color: rgba(34, 211, 238, .34);
    background: linear-gradient(135deg, #20c7cb, #1597d7);
    color: #021018;
}

.woo-profile-v2-btn:hover {
    transform: translateY(-1px);
}

/* Compact right panel layout 2026052502 */
body.incallx #rightbar-wrapper {
    padding: 9px 8px 12px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .05), transparent 30%),
        linear-gradient(180deg, #08101c, #050912) !important;
}

body.incallx #rightbar-wrapper .woo-right-profile-card {
    margin-bottom: 8px;
    padding: 9px;
    border-radius: 9px;
    border-color: rgba(45, 212, 191, .22);
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .08), transparent 46%),
        linear-gradient(145deg, rgba(244, 63, 94, .09), rgba(8, 14, 27, .96) 42%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

body.incallx #rightbar-wrapper .woo-right-profile-top {
    grid-template-columns: 39px minmax(0, 1fr) 32px;
    gap: 8px;
}

body.incallx #rightbar-wrapper .woo-right-profile-top img {
    width: 39px;
    height: 39px;
    border-width: 1px;
    border-radius: 9px;
}

body.incallx #rightbar-wrapper .woo-right-profile-top strong {
    font-size: 13px;
    line-height: 1.15;
}

body.incallx #rightbar-wrapper .woo-right-profile-top span {
    font-size: 10.5px;
}

body.incallx #rightbar-wrapper .woo-right-crown {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border-color: rgba(148, 163, 184, .15);
    background: rgba(15, 23, 42, .68);
    color: #9fb0c6;
}

body.incallx #rightbar-wrapper .woo-right-crown i {
    color: #9fb0c6 !important;
    font-size: 15px;
}

body.incallx #rightbar-wrapper .woo-right-crown.is-active {
    border-color: rgba(251, 191, 36, .30);
    background: rgba(251, 191, 36, .10);
}

body.incallx #rightbar-wrapper .woo-right-crown.is-active i {
    color: #fbbf24 !important;
}

body.incallx #rightbar-wrapper .profile-auto-badges-self {
    gap: 5px;
    margin: 6px 0 0;
}

body.incallx #rightbar-wrapper .profile-auto-badges-self .profile-auto-badge {
    width: 25px;
    height: 25px;
    min-height: 25px;
    max-width: 25px;
    border-radius: 7px;
}

body.incallx #rightbar-wrapper .profile-auto-badges-self .profile-auto-badge i {
    font-size: 14px;
}

body.incallx #rightbar-wrapper .woo-right-profile-details {
    margin-top: 6px;
    border-radius: 8px;
}

body.incallx #rightbar-wrapper .woo-right-profile-details summary {
    min-height: 29px;
    padding: 0 8px;
    font-size: 10.5px;
}

body.incallx .woo-right-tools {
    display: flex;
    gap: 5px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(148, 163, 184, .09);
}

body.incallx .woo-right-tool {
    display: grid;
    place-items: center;
    flex: 1 1 0;
    height: 31px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 7px;
    background: rgba(4, 8, 18, .48);
    color: #8fa5be;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

body.incallx .woo-right-tool i {
    font-size: 15px;
    color: inherit !important;
}

body.incallx .woo-right-tool:hover,
body.incallx .woo-right-tool.is-active {
    border-color: rgba(45, 212, 191, .26);
    background: rgba(45, 212, 191, .09);
    color: #2dd4bf;
}

body.incallx #rightbar-wrapper .woo-right-tournament-card {
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(8, 13, 25, .92);
}

body.incallx #rightbar-wrapper .woo-right-tournament-head {
    min-height: 36px;
    padding: 0 9px;
}

body.incallx #rightbar-wrapper .woo-right-tournament-head span {
    font-size: 11px;
}

body.incallx #rightbar-wrapper .woo-right-tournament-head small {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
}

body.incallx #rightbar-wrapper .ad-rightbar-top {
    height: 62px !important;
    min-height: 62px !important;
    aspect-ratio: auto !important;
    margin: 0 0 8px !important;
    border-radius: 8px !important;
    overflow: hidden;
}

body.incallx #rightbar-wrapper .ad-rightbar-top img,
body.incallx #rightbar-wrapper .ad-rightbar-top iframe {
    transform: none !important;
    object-fit: cover !important;
}

body.incallx #rightbar-wrapper .woo-rpanel-head {
    min-height: 33px;
    margin: 0 0 6px;
    padding: 0 9px;
    border: 1px solid rgba(45, 212, 191, .13);
    border-radius: 8px;
    background: rgba(8, 13, 25, .76);
}

body.incallx #rightbar-wrapper .woo-rpanel-head span {
    font-size: 11.5px;
}

body.incallx #rightbar-wrapper .woo-rpanel-head small {
    font-size: 10px;
}

body.incallx #rightbar-wrapper #rpanel-tab {
    min-height: 37px;
    margin-bottom: 7px;
    padding: 3px;
    border-radius: 8px;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-link {
    height: 29px;
    border-radius: 6px;
}

body.incallx #rightbar-wrapper .room-users-row .input-icon,
body.incallx #rightbar-wrapper .group-users-row .input-icon {
    margin-bottom: 7px;
}

body.incallx #rightbar-wrapper .room-user-search,
body.incallx #rightbar-wrapper .group-user-search {
    height: 38px;
    border-radius: 8px !important;
}

body.incallx #rightbar-wrapper .lt-role-user-section {
    margin: 7px 0 9px;
}

/* In-chat feature workspace 2026052503 */
body.incallx.woo-chat-workspace-open {
    overflow: hidden;
}

body.incallx .woo-chat-workspace {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.incallx .woo-chat-workspace.is-open {
    display: flex;
}

body.incallx .woo-chat-workspace-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 13, .72);
    backdrop-filter: blur(5px);
}

body.incallx .woo-chat-workspace-card {
    position: relative;
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    width: min(1240px, calc(100vw - 44px));
    height: min(840px, calc(100vh - 44px));
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, .22);
    border-radius: 12px;
    background: #080d18;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}

body.incallx .woo-chat-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 17px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background:
        linear-gradient(90deg, rgba(244, 63, 94, .10), transparent 34%, rgba(45, 212, 191, .07)),
        #0a111e;
}

body.incallx .woo-chat-workspace-head div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.incallx .woo-chat-workspace-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2dd4bf;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body.incallx .woo-chat-workspace-head strong {
    overflow: hidden;
    border-left: 1px solid rgba(148, 163, 184, .18);
    padding-left: 12px;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .woo-chat-workspace-head button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    background: rgba(15, 23, 42, .72);
    color: #cbd5e1;
}

body.incallx .woo-chat-workspace-head button:hover {
    border-color: rgba(244, 63, 94, .38);
    color: #fff;
}

body.incallx .woo-chat-workspace-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #060a13;
}

@media (max-width: 767.98px) {
    body.incallx .woo-chat-workspace {
        padding: 0;
    }

    body.incallx .woo-chat-workspace-card {
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

body.incallx .lt-blocked-room-panel {
    display: grid;
    gap: 12px;
}

body.incallx .lt-blocked-room-list {
    display: grid;
    gap: 9px;
}

body.incallx .lt-blocked-room-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(248, 113, 113, .18);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(244, 63, 94, .10), rgba(8, 14, 28, .72));
}

body.incallx .lt-blocked-room-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb7185, #22d3ee);
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}

body.incallx .lt-blocked-room-main {
    min-width: 0;
}

body.incallx .lt-blocked-room-main strong,
body.incallx .profile-blocked-user-row strong {
    display: block;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .lt-blocked-room-main span {
    display: block;
    overflow: hidden;
    color: rgba(226, 232, 240, .60);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .profile-unblock-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 112px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(32, 224, 196, .22);
    border-radius: 10px;
    background: rgba(32, 224, 196, .10);
    color: #7df9eb;
    font-size: 11px;
    font-weight: 900;
}

body.incallx .profile-unblock-user:hover {
    border-color: rgba(32, 224, 196, .42);
    background: rgba(32, 224, 196, .18);
    color: #fff;
}

body.incallx .profile-blocked-user-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(244, 63, 94, .08), rgba(8, 14, 28, .64));
}

body.incallx .profile-blocked-user-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 13px;
    object-fit: cover;
    background: rgba(15, 23, 42, .86);
}

body.incallx .profile-blocked-user-info {
    min-width: 0;
}

body.incallx .profile-blocked-user-info strong,
body.incallx .profile-blocked-user-info span,
body.incallx .profile-blocked-user-info small,
body.incallx .profile-blocked-user-info em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .profile-blocked-user-info strong {
    color: #fff;
    font-size: 12.5px;
    font-weight: 950;
}

body.incallx .profile-blocked-user-info span {
    color: rgba(125, 249, 235, .78);
    font-size: 10.5px;
    font-weight: 800;
}

body.incallx .profile-blocked-user-info small,
body.incallx .profile-blocked-user-info em {
    color: rgba(226, 232, 240, .56);
    font-size: 10.5px;
    font-style: normal;
}

@media (max-width: 575.98px) {
    body.incallx .lt-blocked-room-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    body.incallx .lt-blocked-room-item .lt-room-action {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    body.incallx .profile-blocked-user-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    body.incallx .profile-blocked-user-avatar {
        width: 38px;
        height: 38px;
    }

    body.incallx .profile-blocked-user-card .profile-unblock-user {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Unified chat composer */
body.incallx .room-editor,
body.incallx .private-editor {
    padding: 0 14px 12px !important;
    background:
        linear-gradient(180deg, rgba(2, 6, 16, .90), rgba(2, 6, 16, .98)) !important;
    border-top: 1px solid rgba(32, 224, 196, .16);
}

body.incallx .editor-wrap {
    display: grid;
    gap: 0;
}

body.incallx .editor-container.editor-controller.woo-composer-active {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    min-height: 68px;
    margin: 0 !important;
    padding: 9px !important;
    position: relative;
    border: 1px solid rgba(255, 51, 71, .30) !important;
    border-top-color: rgba(32, 224, 196, .22) !important;
    border-radius: 0 0 15px 15px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .10), rgba(32, 224, 196, .06)),
        rgba(8, 12, 24, .98) !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.incallx .editor-container.editor-controller .attachment-col {
    display: grid !important;
    place-items: center;
    width: 42px;
    min-height: 42px !important;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(15, 23, 42, .86);
}

body.incallx .editor-container.editor-controller .attachment-col svg {
    width: 22px;
    height: 22px;
}

body.incallx .editor-container.editor-controller .editor-col {
    min-width: 0;
}

body.incallx .editor-container.editor-controller .note-editor.note-frame {
    min-height: 48px;
    border: 1px solid rgba(32, 224, 196, .10) !important;
    border-radius: 12px !important;
    background: rgba(12, 18, 31, .88) !important;
}

body.incallx .editor-container.editor-controller .note-editor.note-frame:focus-within {
    border-color: rgba(32, 224, 196, .32) !important;
    box-shadow: 0 0 0 3px rgba(32, 224, 196, .06);
}

body.incallx .editor-container.editor-controller .note-editing-area,
body.incallx .editor-container.editor-controller .note-editable {
    min-height: 48px !important;
}

body.incallx .editor-container.editor-controller .note-editable {
    padding: 13px 14px !important;
    color: rgba(248, 251, 255, .94) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body.incallx .editor-container.editor-controller .emoji-col {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 40px !important;
}

body.incallx .editor-container.editor-controller .editor-icon {
    width: 25px;
    height: 25px;
    margin-left: 0 !important;
    padding: 3px;
    border-radius: 9px;
    color: rgba(203, 213, 225, .78) !important;
}

body.incallx .editor-container.editor-controller .editor-icon:hover {
    background: rgba(32, 224, 196, .10);
    color: #7df9eb !important;
}

body.incallx .editor-container.editor-controller .send-col {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 40px !important;
    padding-left: 0 !important;
}

body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 13px !important;
    background: rgba(32, 224, 196, .10) !important;
    color: #7df9eb !important;
}

body.incallx .editor-container.editor-controller .lt-send-message {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #ff3347, #ff7a18) !important;
    box-shadow: 0 12px 28px rgba(255, 51, 71, .30) !important;
}

body.incallx .editor-container.editor-controller .lt-voice-recorder {
    position: absolute;
    inset: 7px;
    z-index: 9;
    min-height: 52px;
    margin: 0 !important;
    border: 1px solid rgba(32, 224, 196, .24);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(244, 63, 94, .18), rgba(32, 224, 196, .16)),
        rgba(8, 14, 28, .98);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
}

body.incallx .editor-container.editor-controller .lt-voice-recorder:not(.is-recording):not(.is-locked) {
    display: none !important;
}

@media (max-width: 767.98px) {
    body.incallx .editor-container.editor-controller {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        max-width: none;
        border-radius: 14px !important;
    }

    body.incallx .editor-container.editor-controller .emoji-col {
        display: none !important;
    }

    body.incallx .woo-composer-title span {
        display: none;
    }
}

/* Chat surface + composer merged into one panel */
body.incallx .main-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    min-height: 0;
    overflow: hidden;
    padding: 12px 12px 0 !important;
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 51, 71, .10), transparent 24%),
        radial-gradient(circle at 86% 72%, rgba(32, 224, 196, .10), transparent 26%),
        #050811 !important;
}

body.incallx .main-panel > .ad-space,
body.incallx .main-panel > .alert,
body.incallx .main-panel > .room-notice {
    margin: 0 0 8px !important;
}

body.incallx .chat-scroll {
    min-height: 0;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(32, 224, 196, .18);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        #070b16 !important;
    scrollbar-gutter: stable;
}

body.incallx .chat-scroll::-webkit-scrollbar {
    width: 8px;
}

body.incallx .chat-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(32, 224, 196, .72), rgba(255, 51, 71, .55));
}

body.incallx .chat-scroll::-webkit-scrollbar-track {
    background: rgba(2, 6, 16, .72);
}

body.incallx .messages {
    min-height: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 22px 22px 16px !important;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        transparent !important;
    background-size: 36px 36px, 36px 36px, auto !important;
    box-shadow: none !important;
}

body.incallx .room-editor,
body.incallx .private-editor {
    padding: 0 0 12px !important;
    background: transparent !important;
    border-top: 0 !important;
}

body.incallx .editor-wrap {
    border: 1px solid rgba(32, 224, 196, .18);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: #070b16;
    box-shadow: none;
}

body.incallx .editor-container.editor-controller.woo-composer-active {
    border: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 14px 12px !important;
}

body.incallx .attachments-container.gse-container {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 0 !important;
    background: rgba(8, 14, 28, .96) !important;
}

body.incallx .reply-msg-row {
    margin: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: rgba(8, 14, 28, .88);
}

body.incallx .is-typing {
    margin: 0 0 5px 8px;
}

body.incallx .rightbar-wrapper,
body.incallx .height-scroll-rpanel,
body.incallx .height-scroll-rpanelx {
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 224, 196, .28) transparent;
}

/* Private DM composer bottom lock 20260610 */
body.incallx #main-private,
body.incallx #main-private .page-content-wrapper,
body.incallx #main-private .private-chat,
body.incallx #main-private .private-chat > .wrapper {
    min-height: 0 !important;
    height: 100% !important;
}

body.incallx #main-private .private-chat > .wrapper {
    align-items: stretch !important;
}

body.incallx #main-private .main-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    align-self: stretch !important;
    min-height: calc(100vh - 74px) !important;
    height: calc(100vh - 74px) !important;
    padding: 12px 12px 0 !important;
    overflow: hidden !important;
}

body.incallx #main-private .chat-scroll {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 224, 196, .20) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        #070b16 !important;
    background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
}

body.incallx #main-private .messages.chats {
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px !important;
    scroll-padding-bottom: 24px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.incallx #main-private .messages.chats::-webkit-scrollbar {
    width: 8px;
}

body.incallx #main-private .messages.chats::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(32, 224, 196, .72), rgba(255, 51, 71, .55));
}

body.incallx #main-private .messages.chats::-webkit-scrollbar-track {
    background: rgba(2, 6, 16, .72);
}

body.incallx #main-private .private-editor {
    position: relative !important;
    z-index: 3 !important;
    align-self: end !important;
    min-height: 0 !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
}

body.incallx #main-private .private-editor .editor-wrap {
    position: relative !important;
    z-index: 4 !important;
    border: 1px solid rgba(32, 224, 196, .20) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .08), rgba(32, 224, 196, .06)),
        #070b16 !important;
}

body.incallx #main-private .private-editor .editor-container.editor-controller,
body.incallx #main-private .private-editor .editor-container.editor-controller.woo-composer-active {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 9px 12px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 17px 17px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx #main-private .private-editor .note-editor.note-frame {
    min-height: 44px !important;
    border-radius: 14px !important;
}

body.incallx #main-private .private-editor .note-editing-area,
body.incallx #main-private .private-editor .note-editable {
    min-height: 44px !important;
}

body.incallx #main-private .private-editor .note-editable {
    padding: 12px 14px !important;
}

body.incallx #main-private .private-editor .lt-send-message {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 15px !important;
}

body.incallx #main-private .rightbar-wrapper {
    height: calc(100vh - 74px) !important;
    max-height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
}

@media (max-width: 767.98px) {
    body.incallx #main-private .main-panel {
        min-height: calc(100vh - 62px) !important;
        height: calc(100vh - 62px) !important;
        padding: 8px 8px 0 !important;
    }

    body.incallx #main-private .private-editor .editor-container.editor-controller,
    body.incallx #main-private .private-editor .editor-container.editor-controller.woo-composer-active {
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        padding: 8px !important;
    }
}

/* Private DM fixed stage final pass 20260610 */
body.incallx #main-private .private-chat > .wrapper {
    min-height: 0 !important;
    height: 100% !important;
}

body.incallx #main-private .private-chat .main-panel {
    position: relative !important;
    display: block !important;
    min-height: calc(100vh - 74px) !important;
    height: calc(100vh - 74px) !important;
    padding: 12px !important;
    overflow: hidden !important;
}

body.incallx #main-private .private-chat .chat-scroll {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: 82px !important;
    left: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        #070b16 !important;
    background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

body.incallx #main-private .private-chat .messages.chats {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
}

body.incallx #main-private .private-chat .private-editor {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.incallx #main-private .private-chat .private-editor .editor-wrap {
    overflow: hidden !important;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .08), rgba(32, 224, 196, .07)),
        #070b16 !important;
}

body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller,
body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller.woo-composer-active {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
}

body.incallx #main-private .private-chat .ad-main-top {
    position: relative !important;
    z-index: 6 !important;
}

@media (max-width: 767.98px) {
    body.incallx #main-private .private-chat .main-panel {
        min-height: calc(100vh - 62px) !important;
        height: calc(100vh - 62px) !important;
        padding: 8px !important;
    }

    body.incallx #main-private .private-chat .chat-scroll {
        inset: 8px 8px 76px 8px !important;
    }

    body.incallx #main-private .private-chat .private-editor {
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
    }
}

body.incallx .rightbar-wrapper::-webkit-scrollbar,
body.incallx .height-scroll-rpanel::-webkit-scrollbar,
body.incallx .height-scroll-rpanelx::-webkit-scrollbar {
    width: 6px;
}

body.incallx .rightbar-wrapper::-webkit-scrollbar-thumb,
body.incallx .height-scroll-rpanel::-webkit-scrollbar-thumb,
body.incallx .height-scroll-rpanelx::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(32, 224, 196, .38);
}

/* Manage Rooms sidebar v2 */
body.incallx .sidebar-manage {
    padding: 12px 8px !important;
    background: #07101d !important;
}

body.incallx .sidebar-manage .lt-manage-sidebar-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: auto;
    margin: 0 0 10px;
    padding: 12px;
    overflow: visible;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 14px;
    background: rgba(15, 23, 42, .62);
    box-shadow: none;
}

body.incallx .sidebar-manage .lt-manage-sidebar-head::after {
    display: none;
}

body.incallx .sidebar-manage .lt-manage-head-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(125, 249, 235, .18);
    border-radius: 11px;
    background: rgba(32, 224, 196, .08);
    color: rgba(125, 249, 235, .92);
    font-size: 17px;
}

body.incallx .sidebar-manage .lt-manage-sidebar-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 107, 127, .92);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .sidebar-manage .lt-manage-sidebar-head h2 {
    margin: 3px 0 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.08;
}

body.incallx .sidebar-manage .lt-manage-sidebar-head small {
    display: block;
    margin-top: 3px;
    color: rgba(203, 213, 225, .62);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}

body.incallx .sidebar-manage .lt-manage-room-list {
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .10);
    border-radius: 14px;
    background: rgba(8, 14, 28, .52);
    box-shadow: none;
}

body.incallx .sidebar-manage .lt-manage-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 8px;
}

body.incallx .sidebar-manage .lt-manage-list-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(125, 249, 235, .82);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-boxes {
    gap: 8px;
}

body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-item {
    width: 100%;
    margin: 0 !important;
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-row {
    position: relative;
    min-height: 54px;
    margin: 0 !important;
    padding: 8px;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, .54) !important;
    color: #f8fbff;
    box-shadow: none !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-item:first-child .room-manage-row {
    min-height: 56px;
    border-color: rgba(255, 51, 71, .22) !important;
    background: rgba(255, 51, 71, .08) !important;
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-row:hover,
body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-input:checked + .room-manage-label {
    border-color: rgba(32, 224, 196, .24) !important;
    background: rgba(32, 224, 196, .08) !important;
    box-shadow: none !important;
    transform: none;
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-row::after {
    content: "\ea61";
    font-family: "tabler-icons";
    margin-left: auto;
    color: rgba(125, 249, 235, .70);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-row:hover::after,
body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-input:checked + .room-manage-label::after {
    opacity: 1;
    transform: translateX(0);
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-image {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background-color: rgba(15, 23, 42, .75);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
}

body.incallx .sidebar-manage .lt-manage-room-list .form-selectgroup-item:first-child .room-manage-image {
    border-color: rgba(255, 51, 71, .24);
    background: rgba(255, 51, 71, .16);
    color: #ffffff;
    font-size: 18px;
}

body.incallx .sidebar-manage .lt-manage-room-list .room-manage-name {
    max-width: 128px;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .sidebar-manage .lt-manage-room-meta {
    margin-top: 4px;
    color: rgba(203, 213, 225, .64);
    font-size: 10px;
    font-weight: 850;
}

body.incallx .sidebar-manage .lt-manage-room-meta i {
    color: #7df9eb;
}

/* Explore v2 command center */
body.incallx .sidebar-discovery {
    display: none !important;
}

body.incallx .sidebar-discovery .disc-header {
    margin: 0 4px 12px;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

body.incallx .sidebar-discovery .disc-cat-list {
    padding: 10px;
    border: 1px solid rgba(32, 224, 196, .14);
    border-radius: 18px;
    background: rgba(6, 11, 22, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.incallx .sidebar-discovery .whitoo-category-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #7df9eb;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}

body.incallx .sidebar-discovery .whitoo-sidebar-filter-select-wrap {
    height: 36px;
    margin-bottom: 10px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;
    background: rgba(15, 23, 42, .66);
}

body.incallx .sidebar-discovery .whitoo-sidebar-category-select {
    height: 34px;
    color: rgba(248, 251, 255, .92);
    font-size: 12px;
    font-weight: 800;
}

body.incallx .sidebar-discovery .whitoo-sidebar-category-radios,
body.incallx .sidebar-discovery .whitoo-category-filter-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow: auto;
    padding-right: 2px;
}

body.incallx .sidebar-discovery .form-selectgroup-item {
    min-width: 0;
    margin: 0 !important;
}

body.incallx .sidebar-discovery .disc-cat-row {
    min-height: 42px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(15, 23, 42, .68);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

body.incallx .sidebar-discovery .disc-cat-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 9px;
    background: rgba(32, 224, 196, .10);
    color: #7df9eb;
    font-size: 14px;
}

body.incallx .sidebar-discovery .disc-cat-name {
    min-width: 0;
    overflow: hidden;
    color: rgba(248, 251, 255, .86);
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .sidebar-discovery .form-selectgroup-input:checked + .disc-cat-row,
body.incallx .sidebar-discovery .disc-cat-row:hover {
    border-color: rgba(32, 224, 196, .40);
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .14), rgba(32, 224, 196, .12)),
        rgba(15, 23, 42, .82);
    transform: translateY(-1px);
}

body.incallx .sidebar-discovery .whitoo-sidebar-create-hub {
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 8px;
    border: 1px solid rgba(32, 224, 196, .12);
    border-radius: 18px;
    background: rgba(6, 11, 22, .70);
}

body.incallx .sidebar-discovery .whitoo-create-tile {
    grid-template-columns: 36px minmax(0, 1fr) 14px !important;
    gap: 9px !important;
    min-height: 56px !important;
    padding: 8px !important;
    border-color: rgba(148, 163, 184, .13) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .70) !important;
    box-shadow: none;
}

body.incallx .sidebar-discovery .whitoo-create-tile:hover {
    border-color: rgba(32, 224, 196, .38) !important;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .13), rgba(32, 224, 196, .10)),
        rgba(15, 23, 42, .86) !important;
}

body.incallx .sidebar-discovery .whitoo-create-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
}

body.incallx .sidebar-discovery .whitoo-create-tile strong {
    max-width: 128px;
    color: #f8fbff;
    font-size: 12px !important;
    font-weight: 950;
}

body.incallx .sidebar-discovery .whitoo-create-tile small {
    max-width: 128px;
    color: rgba(203, 213, 225, .68) !important;
    font-size: 10px !important;
}

body.incallx .whitoo-explore-v2 .whitoo-explore-board {
    width: min(100%, 1520px);
    max-width: none;
    margin: 0 auto;
    padding: clamp(14px, 1.8vw, 28px) clamp(18px, 3.2vw, 44px) 34px !important;
    box-sizing: border-box;
    overflow-x: clip;
}

body.incallx .whitoo-explore-v2,
body.incallx .whitoo-explore-v2 .row,
body.incallx .whitoo-explore-v2 .col,
body.incallx .whitoo-explore-v2 .whitoo-explore-command,
body.incallx .whitoo-explore-v2 .lt-join-link-card,
body.incallx .whitoo-explore-v2 .whitoo-explore-category-deck,
body.incallx .whitoo-explore-v2 .whitoo-explore-search-hero {
    max-width: 100%;
    min-width: 0;
}

body.incallx .whitoo-explore-v2 .disc-slider {
    margin-bottom: 18px !important;
    overflow: hidden;
    border: 1px solid rgba(32, 224, 196, .14);
    border-radius: 24px;
    background: rgba(8, 14, 28, .62);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}

body.incallx .whitoo-explore-v2 .carousel,
body.incallx .whitoo-explore-v2 .carousel-inner,
body.incallx .whitoo-explore-v2 .carousel-item {
    border-radius: 24px;
}

body.incallx .whitoo-explore-v2 .carousel,
body.incallx .whitoo-explore-v2 .carousel-inner,
body.incallx .whitoo-explore-v2 .carousel-item,
body.incallx .whitoo-explore-v2 .carousel-item img {
    max-height: clamp(190px, 24vw, 310px);
}

body.incallx .whitoo-explore-command {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    align-items: center;
    gap: clamp(22px, 3.5vw, 46px);
    min-height: 286px;
    margin: 0 0 20px;
    padding: clamp(26px, 3.4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(125, 249, 235, .20);
    border-radius: 30px;
    background:
        linear-gradient(115deg, rgba(255, 51, 71, .16), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(255, 51, 71, .28), transparent 22%),
        radial-gradient(circle at 92% 78%, rgba(32, 224, 196, .22), transparent 27%),
        radial-gradient(circle at 14% 8%, rgba(32, 224, 196, .18), transparent 32%),
        linear-gradient(135deg, rgba(8, 14, 28, .98), rgba(5, 31, 39, .95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 34px 86px rgba(0, 0, 0, .38);
}

body.incallx .whitoo-explore-command::after {
    content: "";
    position: absolute;
    inset: -120px -80px auto auto;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 51, 71, .28), rgba(32, 224, 196, .08) 42%, transparent 68%);
    filter: blur(2px);
    pointer-events: none;
}

body.incallx .whitoo-explore-command::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 24px;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.78), transparent 78%);
    pointer-events: none;
}

body.incallx .whitoo-explore-command span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7df9eb;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .whitoo-explore-command strong {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 760px;
    margin-top: 10px;
    color: #ffffff;
    font-size: clamp(36px, 4.2vw, 64px);
    font-weight: 950;
    line-height: .98;
    letter-spacing: -.025em;
    text-shadow: 0 18px 38px rgba(0, 0, 0, .35);
}

body.incallx .whitoo-explore-command p {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 14px 0 0;
    color: rgba(226, 232, 240, .82);
    font-size: clamp(13px, 1.25vw, 17px);
    font-weight: 650;
    line-height: 1.45;
}

body.incallx .whitoo-explore-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

body.incallx .whitoo-explore-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(3, 7, 18, .38);
    color: rgba(248, 251, 255, .86);
    font-size: 11px;
    font-weight: 900;
    text-transform: none;
}

body.incallx .whitoo-explore-command-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
        rgba(3, 7, 18, .44);
    backdrop-filter: blur(18px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 24px 60px rgba(0, 0, 0, .22);
}

body.incallx .whitoo-explore-command-actions button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(32, 224, 196, .13), rgba(15, 23, 42, .70)),
        rgba(8, 14, 28, .82);
    color: #eaffff;
    text-align: left;
    font-size: 13px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.incallx .whitoo-explore-command-actions button > i,
body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 15px;
    background: rgba(32, 224, 196, .14);
    color: #7df9eb;
    font-size: 18px;
}

body.incallx .whitoo-explore-command-actions button span,
body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link span {
    display: block;
    min-width: 0;
}

body.incallx .whitoo-explore-command-actions button span strong,
body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link span strong {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.12;
    text-shadow: none;
}

body.incallx .whitoo-explore-command-actions button span small,
body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link span small {
    display: block;
    margin-top: 5px;
    color: rgba(203, 213, 225, .70);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

body.incallx .whitoo-explore-command-actions button:hover {
    border-color: rgba(32, 224, 196, .42);
    background:
        linear-gradient(135deg, rgba(32, 224, 196, .20), rgba(15, 23, 42, .82)),
        rgba(8, 14, 28, .90);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
    transform: translateY(-2px);
}

body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(168, 85, 247, .28);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(168, 85, 247, .20), rgba(32, 224, 196, .12)),
        rgba(15, 23, 42, .72);
    color: #f8fbff;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link:hover {
    border-color: rgba(168, 85, 247, .52);
    background:
        linear-gradient(135deg, rgba(168, 85, 247, .30), rgba(32, 224, 196, .18)),
        rgba(15, 23, 42, .88);
    color: #ffffff;
    transform: translateY(-2px);
}

body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link i {
    color: #c4b5fd;
}

body.incallx .whitoo-explore-command-actions button:first-child {
    border-color: rgba(255, 51, 71, .28);
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .95), rgba(255, 94, 126, .88)),
        rgba(255, 51, 71, .70);
    color: #ffffff;
    box-shadow: 0 20px 46px rgba(255, 51, 71, .22);
}

body.incallx .whitoo-explore-command-actions button:first-child > i {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

body.incallx .whitoo-explore-command-actions button:first-child span small {
    color: rgba(255, 255, 255, .78);
}

body.incallx .whitoo-explore-command-actions button i:last-child {
    margin-left: auto;
}

body.incallx .whitoo-explore-v2 .lt-join-link-card {
    display: grid;
    grid-template-columns: minmax(250px, .62fr) minmax(360px, 1.38fr);
    align-items: center;
    gap: 22px;
    min-height: 118px;
    margin: 0 0 18px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 51, 71, .22);
    border-radius: 26px;
    background:
        radial-gradient(circle at 76% 40%, rgba(255, 255, 255, .16), transparent 20%),
        radial-gradient(circle at 95% 90%, rgba(32, 224, 196, .16), transparent 30%),
        linear-gradient(135deg, rgba(255, 51, 71, .16), rgba(32, 224, 196, .08)),
        rgba(8, 14, 28, .84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 56px rgba(0, 0, 0, .22);
}

body.incallx .whitoo-explore-v2 .lt-join-link-copy strong {
    color: #ffffff;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.08;
}

body.incallx .whitoo-explore-category-deck {
    display: grid;
    grid-template-columns: minmax(210px, .24fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid rgba(32, 224, 196, .17);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 50%, rgba(32, 224, 196, .12), transparent 24%),
        linear-gradient(135deg, rgba(255, 51, 71, .075), rgba(32, 224, 196, .085)),
        rgba(8, 14, 28, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.incallx .whitoo-explore-section-copy span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7df9eb;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .whitoo-explore-section-copy strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
}

body.incallx .whitoo-explore-category-chips {
    display: flex;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 224, 196, .36) transparent;
    overscroll-behavior-x: contain;
}

body.incallx .whitoo-explore-category-chip {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

body.incallx .whitoo-explore-category-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

body.incallx .whitoo-explore-category-chip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 15px 0 10px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(15, 23, 42, .72);
    color: rgba(226, 232, 240, .86);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

body.incallx .whitoo-explore-category-chip span i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: rgba(32, 224, 196, .10);
    color: #7df9eb;
    font-size: 15px;
}

body.incallx .whitoo-explore-category-chip:hover span,
body.incallx .whitoo-explore-category-chip input:checked + span {
    border-color: rgba(255, 51, 71, .36);
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .96), rgba(255, 113, 134, .88)),
        rgba(255, 51, 71, .88);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(255, 51, 71, .18);
    transform: translateY(-1px);
}

body.incallx .whitoo-explore-category-chip input:checked + span i {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

body.incallx .whitoo-explore-v2 .lt-join-link-copy span,
body.incallx .whitoo-explore-v2 .lt-join-link-copy small {
    color: rgba(226, 232, 240, .75);
}

body.incallx .whitoo-explore-v2 .lt-join-link-copy span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #ffb4c0;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .whitoo-explore-v2 .lt-join-link-copy small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
}

body.incallx .whitoo-explore-v2 .lt-join-link-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
}

body.incallx .whitoo-explore-v2 .lt-join-link-input {
    min-height: 54px;
    border: 1px solid rgba(226, 232, 240, .20);
    border-radius: 18px;
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

body.incallx .whitoo-explore-v2 .lt-join-link-input i {
    width: 48px;
    color: #eaffff;
    font-size: 22px;
}

body.incallx .whitoo-explore-v2 .lt-join-link-input input {
    color: #ffffff;
    font-size: 15px;
    font-weight: 850;
}

body.incallx .whitoo-explore-v2 .lt-join-link-form button {
    min-height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff3347, #ff7186);
    box-shadow: 0 18px 38px rgba(255, 51, 71, .34);
    font-size: 14px;
    font-weight: 950;
}

body.incallx .whitoo-explore-profile-panel {
    display: grid;
    grid-template-columns: minmax(240px, .44fr) minmax(190px, .22fr) minmax(360px, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid rgba(32, 224, 196, .17);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 51, 71, .13), transparent 25%),
        linear-gradient(135deg, rgba(32, 224, 196, .09), rgba(255, 51, 71, .07)),
        rgba(8, 14, 28, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.incallx .whitoo-explore-profile-id {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

body.incallx .whitoo-explore-profile-id img {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 2px solid rgba(32, 224, 196, .28);
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

body.incallx .whitoo-explore-profile-id span,
body.incallx .whitoo-explore-profile-id strong,
body.incallx .whitoo-explore-profile-id small,
body.incallx .whitoo-explore-profile-status strong,
body.incallx .whitoo-explore-profile-status small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .whitoo-explore-profile-id span {
    color: #7df9eb;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

body.incallx .whitoo-explore-profile-id strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
}

body.incallx .whitoo-explore-profile-id small {
    margin-top: 2px;
    color: rgba(203, 213, 225, .70);
    font-size: 12px;
    font-weight: 750;
}

body.incallx .whitoo-explore-profile-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 51, 71, .20);
    border-radius: 18px;
    background: rgba(255, 51, 71, .08);
}

body.incallx .whitoo-explore-profile-status.is-active {
    border-color: rgba(32, 224, 196, .28);
    background: rgba(32, 224, 196, .10);
}

body.incallx .whitoo-explore-profile-status i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff3347, #7df9eb);
    color: #ffffff;
    font-size: 18px;
}

body.incallx .whitoo-explore-profile-status strong {
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
}

body.incallx .whitoo-explore-profile-status small {
    margin-top: 3px;
    color: rgba(203, 213, 225, .70);
    font-size: 11px;
    font-weight: 750;
}

body.incallx .whitoo-explore-profile-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

body.incallx .whitoo-explore-profile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 15px;
    background: rgba(15, 23, 42, .70);
    color: rgba(248, 251, 255, .86);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

body.incallx .whitoo-explore-profile-actions a:hover {
    border-color: rgba(32, 224, 196, .36);
    background: linear-gradient(135deg, rgba(32, 224, 196, .15), rgba(255, 51, 71, .10));
    color: #ffffff;
    transform: translateY(-1px);
}

body.incallx .whitoo-explore-profile-actions a i {
    color: #7df9eb;
    font-size: 16px;
}

body.incallx .whitoo-explore-profile-actions a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .whitoo-explore-v2 .whitoo-explore-search-hero {
    position: relative;
    top: auto;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(220px, .28fr) minmax(360px, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
    padding: 16px;
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .07), rgba(32, 224, 196, .09)),
        rgba(8, 14, 28, .78);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

body.incallx .whitoo-explore-v2 .whitoo-home-search-copy strong {
    font-size: 16px;
}

body.incallx .whitoo-explore-v2 .whitoo-room-search {
    min-height: 54px;
    border-color: rgba(125, 249, 235, .18);
    border-radius: 18px;
    background: rgba(3, 7, 18, .66) !important;
}

body.incallx .whitoo-explore-v2 .whitoo-room-search .search_chatroom {
    font-size: 14px;
    font-weight: 800;
}

body.incallx .whitoo-explore-v2 #chat-room-loop.room-list-row,
body.incallx .whitoo-explore-v2 #chat-room-loop {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    width: 100%;
    margin: 0 !important;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-loop-link {
    display: block;
    min-width: 0;
    text-decoration: none;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-loop-link > .col {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-card {
    position: relative;
    height: 100%;
    min-height: 342px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, .16);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 51, 71, .10), transparent 32%),
        linear-gradient(180deg, rgba(17, 24, 39, .88), rgba(7, 11, 22, .98)),
        rgba(7, 11, 22, .96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 20px 48px rgba(0, 0, 0, .24);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-card:hover {
    border-color: rgba(32, 224, 196, .36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 30px 70px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(32, 224, 196, .08);
    transform: translateY(-4px);
}

body.incallx .whitoo-explore-v2 #chat-room-loop .card-img-top {
    min-height: 150px;
    border-radius: 23px 23px 0 0;
    background-position: center;
    background-size: cover;
    filter: saturate(1.10) contrast(1.04);
}

body.incallx .whitoo-explore-v2 #chat-room-loop .card-img-top::after {
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .02), rgba(5, 8, 17, .74)),
        linear-gradient(90deg, rgba(255, 51, 71, .12), transparent 46%),
        radial-gradient(circle at 78% 20%, rgba(32, 224, 196, .18), transparent 38%);
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 192px;
    padding: 34px 16px 15px;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-image {
    width: 58px;
    height: 58px;
    margin-top: -66px;
    border: 3px solid rgba(7, 11, 22, .96);
    border-radius: 18px;
    background: rgba(7, 11, 22, .86);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .36),
        0 0 0 1px rgba(32, 224, 196, .16);
}

body.incallx .whitoo-explore-v2 #chat-room-loop .lt-room-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 8px;
    font-size: 16px;
    line-height: 1.2;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .lt-room-title span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .text-muted {
    display: -webkit-box;
    min-height: 56px;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: rgba(203, 213, 225, .72) !important;
    font-size: 12px;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-stats {
    align-items: center;
    gap: 8px;
    margin-top: auto !important;
    padding-top: 13px;
    border-top: 1px solid rgba(148, 163, 184, .12);
    color: rgba(226, 232, 240, .72);
    font-size: 11px;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-stats > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-stats i {
    color: #7df9eb;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .lt-room-owner-plus {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(59, 130, 246, .28);
    border-radius: 999px;
    background: rgba(59, 130, 246, .12);
    color: #bfdbfe;
    font-size: 10px;
    font-weight: 900;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .lt-room-verified {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff3347, #7df9eb);
    color: #ffffff;
    font-size: 11px;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .whitoo-room-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-top: 12px;
    padding: 0 12px;
    border: 1px solid rgba(32, 224, 196, .16);
    border-radius: 14px;
    background: rgba(32, 224, 196, .08);
    color: rgba(248, 251, 255, .88);
    font-size: 12px;
    font-weight: 950;
    opacity: .92;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .whitoo-room-card-action i {
    color: #7df9eb;
}

body.incallx .whitoo-explore-v2 #chat-room-loop .room-card:hover .whitoo-room-card-action {
    border-color: rgba(32, 224, 196, .36);
    background: linear-gradient(135deg, rgba(32, 224, 196, .18), rgba(255, 51, 71, .10));
    color: #ffffff;
}

body.incallx .whitoo-explore-v2 #load-more-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 22px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 999px;
    background: rgba(8, 14, 28, .76);
    color: rgba(226, 232, 240, .76);
    font-size: 12px;
    font-weight: 850;
}

@media (max-width: 1199.98px) {
    body.incallx .whitoo-explore-v2 .whitoo-explore-board {
        padding: 14px !important;
    }

    body.incallx .whitoo-explore-v2 .lt-join-link-card,
    body.incallx .whitoo-explore-v2 .whitoo-explore-search-hero,
    body.incallx .whitoo-explore-profile-panel,
    body.incallx .whitoo-explore-command,
    body.incallx .whitoo-explore-category-deck {
        grid-template-columns: 1fr;
    }

    body.incallx .whitoo-explore-profile-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.incallx .whitoo-explore-command {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    body.incallx .whitoo-explore-command,
    body.incallx .whitoo-explore-command-actions,
    body.incallx .whitoo-explore-v2 .lt-join-link-form {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    body.incallx .whitoo-explore-v2 #chat-room-loop.room-list-row,
    body.incallx .whitoo-explore-v2 #chat-room-loop {
        grid-template-columns: 1fr;
    }

    body.incallx .whitoo-explore-command {
        border-radius: 22px;
        padding: 20px;
    }

    body.incallx .whitoo-explore-command strong {
        font-size: clamp(29px, 11vw, 42px);
    }

    body.incallx .whitoo-explore-command-actions {
        grid-template-columns: 1fr;
    }

    body.incallx .whitoo-explore-command-actions button,
    body.incallx .whitoo-explore-command-actions .whitoo-explore-studio-link {
        min-height: 78px;
    }

    body.incallx .whitoo-explore-profile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Account dock polish 20260611 */
body.incallx .lt-account-dock.channel-list-bottom {
    gap: 8px;
    min-height: 62px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-top: 1px solid rgba(32, 224, 196, .18) !important;
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 51, 71, .22), transparent 28%),
        radial-gradient(circle at 84% 80%, rgba(32, 224, 196, .18), transparent 32%),
        linear-gradient(135deg, rgba(9, 13, 25, .94), rgba(7, 19, 28, .96)) !important;
    box-shadow: 0 -18px 38px rgba(0, 0, 0, .28);
}

body.incallx .lt-account-dock .user-bottom-menu {
    min-width: 0;
    flex: 1 1 auto;
}

body.incallx .lt-account-dock .user-bottom-trigger {
    min-height: 44px;
    width: 100%;
    gap: 9px;
    padding: 6px 9px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(32, 224, 196, .045)),
        rgba(10, 16, 30, .72) !important;
    color: #eef7ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.incallx .lt-account-dock .user-bottom-trigger:hover,
body.incallx .lt-account-dock .user-bottom-trigger[aria-expanded="true"] {
    border-color: rgba(32, 224, 196, .34) !important;
    background:
        linear-gradient(135deg, rgba(32, 224, 196, .13), rgba(255, 51, 71, .09)),
        rgba(12, 21, 36, .88) !important;
    transform: translateY(-1px);
}

body.incallx .lt-account-dock .user-bottom-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(32, 224, 196, .18), rgba(255, 51, 71, .16));
    box-shadow: 0 0 0 1px rgba(32, 224, 196, .18), 0 10px 22px rgba(0, 0, 0, .22);
    overflow: visible;
}

body.incallx .lt-account-dock .user-bottom-avatar img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
    object-fit: cover;
}

body.incallx .lt-account-dock .current-status {
    right: -2px !important;
    bottom: -2px !important;
    width: 12px !important;
    height: 12px !important;
    display: grid;
    place-items: center;
    border: 2px solid #08111f;
    border-radius: 999px;
    background: #15d18f;
    box-shadow: 0 0 0 3px rgba(21, 209, 143, .13);
}

body.incallx .lt-account-dock .current-status i {
    display: none;
}

body.incallx .lt-account-dock .username-bottom {
    min-width: 0;
    max-width: 126px;
    margin-left: 0 !important;
    color: rgba(237, 246, 255, .92);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.incallx .lt-account-dock .woo-name-effect-compact {
    max-width: 104px;
    vertical-align: bottom;
}

body.incallx .lt-account-dock-actions {
    gap: 6px;
    flex: 0 0 auto;
}

body.incallx .lt-account-dock-actions .dropup {
    margin-right: 0 !important;
}

body.incallx .lt-account-dock-actions .dropdown-toggle {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    background: rgba(9, 16, 31, .78) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.incallx .lt-account-dock-actions .dropdown-toggle:hover {
    border-color: rgba(32, 224, 196, .34) !important;
    background: rgba(32, 224, 196, .12) !important;
}

body.incallx .lt-account-dock #selected-lang-toggle,
body.incallx .lt-account-dock #selected-lang-toggle .flag {
    display: inline-flex;
    width: 22px;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
}

body.incallx .lt-account-dock .dropdown-menu {
    border: 1px solid rgba(32, 224, 196, .18);
    border-radius: 14px;
    background: rgba(8, 13, 25, .96);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .42);
    backdrop-filter: blur(16px);
}

body.incallx .lt-account-menu {
    width: 258px;
    padding: 10px !important;
    border: 1px solid rgba(32, 224, 196, .18) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(32, 224, 196, .14), transparent 28%),
        radial-gradient(circle at 92% 90%, rgba(255, 51, 71, .14), transparent 32%),
        rgba(10, 15, 28, .97) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    overflow: hidden;
}

body.incallx .lt-account-menu::before {
    content: "";
    display: block;
    height: 3px;
    margin: -10px -10px 9px;
    background: linear-gradient(90deg, #ff3347, #20e0c4);
    opacity: .9;
}

body.incallx .lt-account-menu .dropdown-divider,
body.incallx .lt-account-menu hr.dropdown-divider {
    height: 1px;
    margin: 9px 2px !important;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .28), transparent);
    opacity: 1;
}

body.incallx .lt-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    gap: 9px;
    margin: 2px 0;
    padding: 8px 10px !important;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(239, 246, 255, .92) !important;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.08px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}

body.incallx .lt-account-menu .dropdown-item:hover,
body.incallx .lt-account-menu .dropdown-item:focus {
    border-color: rgba(32, 224, 196, .24);
    background: linear-gradient(135deg, rgba(32, 224, 196, .12), rgba(255, 51, 71, .08)) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

body.incallx .lt-account-menu .change-status {
    position: relative;
    min-height: 34px;
    padding-left: 11px !important;
    background: rgba(255, 255, 255, .025);
}

body.incallx .lt-account-menu .change-status .ti-circle-filled {
    width: 14px;
    height: 14px;
    margin-right: 2px !important;
    border-radius: 999px;
    font-size: 13px;
    filter: drop-shadow(0 0 8px currentColor);
}

body.incallx .lt-account-menu #switch-profile-tab i,
body.incallx .lt-account-menu a[href*="bots"] i,
body.incallx .lt-account-menu .lt-contact-fixed i,
body.incallx .lt-account-menu .lt-account-logout i,
body.incallx .lt-account-menu a[href*="dashboard"] i {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    border-radius: 10px;
    background: rgba(255, 51, 71, .16);
    color: #ff5c71;
}

body.incallx .lt-account-menu a[href*="bots"] i {
    background: rgba(32, 224, 196, .13);
    color: #28e6d2;
}

body.incallx .lt-account-menu a[href*="dashboard"] i {
    background: rgba(96, 165, 250, .14);
    color: #60a5fa;
}

body.incallx .lt-account-menu .lt-info-tabs {
    margin: 8px 0;
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 15px;
    background: rgba(15, 23, 42, .60);
}

body.incallx .lt-account-menu .lt-info-tabs-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: rgba(226, 232, 240, .82);
    font-size: 12px;
    font-weight: 900;
}

body.incallx .lt-account-menu .lt-info-tabs-title i {
    color: #20e0c4;
}

body.incallx .lt-account-menu .lt-info-tabs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

body.incallx .lt-account-menu .lt-info-tabs-grid a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(5, 9, 18, .62);
    color: rgba(241, 245, 249, .88);
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

body.incallx .lt-account-menu .lt-info-tabs-grid a:hover {
    border-color: rgba(32, 224, 196, .30);
    background: rgba(32, 224, 196, .11);
    color: #ffffff;
}

body.incallx .lt-account-menu .lt-contact-fixed {
    color: #ffffff !important;
}

body.incallx .lt-account-menu .lt-account-logout {
    margin-top: 8px;
    border-color: rgba(255, 51, 71, .24) !important;
    background: linear-gradient(135deg, rgba(255, 51, 71, .28), rgba(255, 51, 71, .10)) !important;
    color: #fff !important;
}

body.incallx .lt-account-menu .lt-account-logout:hover {
    border-color: rgba(255, 95, 113, .48) !important;
    background: linear-gradient(135deg, rgba(255, 51, 71, .44), rgba(255, 124, 70, .18)) !important;
}

/* Readable typography pass 20260611 */
html,
body,
body.incallx,
body.incallx input,
body.incallx button,
body.incallx textarea,
body.incallx select {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

body.incallx,
body.incallx .dropdown-menu,
body.incallx .form-control,
body.incallx .form-select,
body.incallx .btn {
    font-weight: 650;
    letter-spacing: 0 !important;
}

body.incallx h1,
body.incallx h2,
body.incallx h3,
body.incallx h4,
body.incallx .disc-header,
body.incallx .room-title,
body.incallx .woo-room-hero-title,
body.incallx .channel-user-name,
body.incallx .username-bottom,
body.incallx .lt-account-menu .dropdown-item {
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.incallx p,
body.incallx small,
body.incallx label,
body.incallx .text-muted,
body.incallx .message-content,
body.incallx .chat-message {
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.incallx .woo-name-effect,
body.incallx .woo-name-effect-rgb,
body.incallx .woo-name-effect-neon,
body.incallx .woo-name-effect-fire,
body.incallx .woo-name-effect-ice,
body.incallx .woo-name-effect-gold,
body.incallx .woo-name-effect-aurora,
body.incallx .woo-name-effect-glitch,
body.incallx .woo-name-effect-cyber,
body.incallx .woo-name-effect-pulse,
body.incallx .woo-name-effect-emerald,
body.incallx .woo-name-effect-royal,
body.incallx .woo-name-effect-pearl,
body.incallx .woo-name-effect-ai {
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 5px rgba(32, 224, 196, .16) !important;
    filter: none !important;
}

body.incallx .woo-name-effect-ai {
    margin-inline: .16em !important;
}

body.incallx .woo-name-effect-ai::before,
body.incallx .woo-name-effect-ai::after {
    opacity: .70;
    filter: none !important;
}

body.incallx .lt-account-menu .change-status .ti-circle-filled {
    filter: none !important;
}

/* Room hero duplicate active badge fix 20260611 */
body.incallx .woo-room-hero-badge {
    display: none !important;
}

body.incallx .woo-room-hero-body {
    padding-top: 14px !important;
}

/* Private DM empty state composer lock 20260612 */
body.incallx #main-private .private-editor.is-private-user-empty .editor-container,
body.incallx #main-private .private-editor.is-private-user-empty .editor-container.editor-controller,
body.incallx #main-private .private-editor.is-private-user-empty .woo-composer-head,
body.incallx #main-private .private-editor.is-private-user-empty .attachment-col,
body.incallx #main-private .private-editor.is-private-user-empty .editor-col,
body.incallx #main-private .private-editor.is-private-user-empty .emoji-col,
body.incallx #main-private .private-editor.is-private-user-empty .send-col {
    display: none !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

/* Whitoo chat account menu compact repair 20260614 */
body.incallx .user-bottom-menu .lt-account-menu {
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
    padding: 8px !important;
    border-radius: 17px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    body.incallx .user-bottom-menu .lt-account-menu.show {
        position: fixed !important;
        inset: auto auto 82px 92px !important;
        transform: none !important;
        z-index: 1090 !important;
    }
}

body.incallx .user-bottom-menu .lt-account-menu::before {
    grid-column: 1 / -1 !important;
    margin: -8px -8px 2px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .change-status {
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    grid-column: span 1 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .change-status .ti-circle-filled {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 13px !important;
}

body.incallx .user-bottom-menu .lt-account-menu > li {
    list-style: none !important;
}

body.incallx .user-bottom-menu .lt-account-menu > li:not(.lt-account-icon-cell):not(.lt-info-tabs) {
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-cell {
    display: inline-flex !important;
    margin: 0 !important;
    vertical-align: top !important;
    grid-column: span 1 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-only {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 13px !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-only i {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 18px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .dropdown-divider,
body.incallx .user-bottom-menu .lt-account-menu hr.dropdown-divider {
    display: none !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 13px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-title {
    height: 18px !important;
    margin: 0 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-title span {
    display: none !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-title i {
    margin: 0 !important;
    font-size: 15px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid a {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-logout {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 0 !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-logout i {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 17px !important;
}

/* Whitoo account menu final concept 20260614 */
body.incallx .user-bottom-menu .lt-account-menu {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

@media (max-width: 768px) {
    body.incallx .user-bottom-menu .lt-account-menu.show {
        position: fixed !important;
        inset: auto auto 82px 76px !important;
        transform: none !important;
        z-index: 1090 !important;
    }
}

body.incallx .user-bottom-menu .lt-account-head {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .045) !important;
}

body.incallx .user-bottom-menu .lt-account-head img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

body.incallx .user-bottom-menu .lt-account-head-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

body.incallx .user-bottom-menu .lt-account-head-name {
    display: block !important;
    max-width: 180px !important;
    overflow: hidden !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.incallx .user-bottom-menu .lt-account-head-meta {
    color: rgba(148, 163, 184, .9) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .change-status {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .035) !important;
    font-size: 0 !important;
    grid-column: span 3 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .change-status .ti-circle-filled {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    line-height: 14px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-only {
    height: 52px !important;
    min-height: 52px !important;
    flex-direction: column !important;
    gap: 5px !important;
    border-radius: 15px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-cell {
    grid-column: span 4 !important;
}

body.incallx .user-bottom-menu .lt-account-menu > li:has(> .dropdown-divider) {
    display: none !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-icon-only .lt-action-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs {
    padding: 7px !important;
    border-radius: 15px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid a {
    min-height: 26px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-logout {
    min-height: 40px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
}

/* Whitoo account menu row grouping fix 20260614 */
body.incallx .user-bottom-menu .lt-status-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status {
    grid-column: auto !important;
    width: 100% !important;
}

body.incallx .user-bottom-menu .lt-action-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.incallx .user-bottom-menu .lt-action-row .lt-account-icon-only {
    min-width: 0 !important;
    width: 100% !important;
}

/* Whitoo account menu profile-head cleanup 20260614 */
body.incallx .user-bottom-menu .lt-account-menu {
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
}

@media (max-width: 768px) {
    body.incallx .user-bottom-menu .lt-account-menu.show {
        inset: auto auto 82px 88px !important;
    }
}

body.incallx .user-bottom-menu .lt-account-head-item {
    grid-column: 1 / -1 !important;
    list-style: none !important;
}

body.incallx .user-bottom-menu .lt-account-head {
    color: inherit !important;
    text-decoration: none !important;
}

body.incallx .user-bottom-menu .lt-account-head-arrow {
    margin-left: auto !important;
    color: rgba(148, 163, 184, .7) !important;
    font-size: 16px !important;
}

body.incallx .user-bottom-menu .lt-status-row {
    gap: 4px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .032) !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status {
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 999px !important;
    background: transparent !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status .ti-circle-filled {
    width: 11px !important;
    height: 11px !important;
    font-size: 11px !important;
    line-height: 11px !important;
}

body.incallx .user-bottom-menu .lt-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.incallx .user-bottom-menu .lt-action-row .lt-account-icon-only {
    height: 50px !important;
    min-height: 50px !important;
}

/* Whitoo status dots final fix 20260614 */
body.incallx .user-bottom-menu .lt-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 4px 10px !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status i {
    display: none !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px currentColor !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status[data-status="1"]::before {
    background: #22c55e !important;
    color: #22c55e !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status[data-status="2"]::before {
    background: #94a3b8 !important;
    color: #94a3b8 !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status[data-status="3"]::before {
    background: #ef4444 !important;
    color: #ef4444 !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status[data-status="4"]::before {
    background: #f59e0b !important;
    color: #f59e0b !important;
}

/* Whitoo status click restore 20260614 */
body.incallx .user-bottom-menu .lt-status-row .change-status {
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status::before {
    content: none !important;
    display: none !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status i {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 11px !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 8px currentColor) !important;
}

body.incallx .user-bottom-menu .lt-status-row .change-status.is-active,
body.incallx .user-bottom-menu .lt-status-row .change-status:active {
    background: rgba(255, 255, 255, .075) !important;
}

/* Whitoo bottom self status color sync 20260614 */
body.incallx .lt-account-dock .current-status.online {
    background: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14), 0 0 14px rgba(34, 197, 94, .48) !important;
}

body.incallx .lt-account-dock .current-status.offline {
    background: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .13), 0 0 12px rgba(148, 163, 184, .32) !important;
}

body.incallx .lt-account-dock .current-status.busy {
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .14), 0 0 14px rgba(239, 68, 68, .46) !important;
}

body.incallx .lt-account-dock .current-status.away {
    background: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .14), 0 0 14px rgba(245, 158, 11, .46) !important;
}

/* Whitoo info links compact row fix 20260614 */
body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs {
    padding: 7px 8px !important;
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    align-items: center !important;
    gap: 7px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-title {
    height: 100% !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid {
    min-width: 0 !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid a {
    min-height: 28px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
}

/* Mobile-only account dropdown alignment 20260614 */
@media (max-width: 768px) {
    body.incallx .user-bottom-menu .lt-account-menu,
    body.incallx .user-bottom-menu .lt-account-menu.show {
        position: fixed !important;
        left: 108px !important;
        right: auto !important;
        bottom: 128px !important;
        top: auto !important;
        width: 224px !important;
        min-width: 224px !important;
        max-width: 224px !important;
        padding: 9px !important;
        transform: none !important;
        z-index: 1090 !important;
    }

    body.incallx .user-bottom-menu .lt-account-head {
        min-height: 50px !important;
        padding: 7px 9px !important;
        border-radius: 16px !important;
    }

    body.incallx .user-bottom-menu .lt-account-head img {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
    }

    body.incallx .user-bottom-menu .lt-account-head-name {
        max-width: 132px !important;
        font-size: 13px !important;
    }

    body.incallx .user-bottom-menu .lt-status-row {
        padding: 3px 8px !important;
    }

    body.incallx .user-bottom-menu .lt-action-row .lt-account-icon-only {
        height: 46px !important;
        min-height: 46px !important;
    }

    body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs {
        grid-template-columns: 18px 1fr !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid {
        gap: 3px !important;
    }

body.incallx .user-bottom-menu .lt-account-menu .lt-info-tabs-grid a {
    min-height: 24px !important;
    padding: 0 2px !important;
    font-size: 8px !important;
}

body.incallx .user-bottom-menu .lt-account-menu .lt-account-logout {
    min-height: 38px !important;
    font-size: 12px !important;
    border-radius: 14px !important;
}
}

/* Account dropdown visibility restore 20260614 */
body.incallx .user-bottom-menu .lt-account-menu:not(.show) {
    display: none !important;
}

body.incallx .user-bottom-menu .lt-account-menu.show {
    display: grid !important;
}

/* Profile bot permissions click stability 20260614 */
body.incallx #v-profile-bots,
body.incallx #v-profile-bots .profile-bots-panel,
body.incallx #v-profile-bots .profile-bot-install-form,
body.incallx #v-profile-bots .profile-bot-permission-grid {
    overflow-anchor: none !important;
}

body.incallx #main-profile,
body.incallx .sidebar-profile,
body.incallx #v-profile-bots {
    overflow-x: hidden !important;
}

body.incallx #v-profile-bots .profile-bot-permission-grid label {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

body.incallx #v-profile-bots .profile-bot-permission-grid input {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    outline: 0 !important;
}

body.incallx #v-profile-bots .profile-bot-permission-grid span {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    user-select: none !important;
}

body.incallx #v-profile-bots .profile-bot-permission-grid input:focus,
body.incallx #v-profile-bots .profile-bot-permission-grid input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Mobile account dropdown final anchor 20260614 */
@media (max-width: 768px) {
    body.incallx .user-bottom-menu {
        overflow: visible !important;
    }

    body.incallx .user-bottom-menu .lt-account-menu,
    body.incallx .user-bottom-menu .lt-account-menu.show {
        position: fixed !important;
        left: clamp(96px, 18vw, 112px) !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
        width: min(252px, calc(100vw - 126px)) !important;
        min-width: 0 !important;
        max-width: min(252px, calc(100vw - 126px)) !important;
        max-height: min(430px, calc(100dvh - 154px)) !important;
        overflow: hidden !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 2147483000 !important;
    }

    body.incallx .user-bottom-menu .lt-account-menu:not(.show) {
        display: none !important;
    }

    body.incallx .user-bottom-menu .lt-account-menu.show {
        display: grid !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal {
        position: fixed !important;
        display: none !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 10px !important;
        border: 1px solid rgba(32, 224, 196, .24) !important;
        border-radius: 22px !important;
        background: linear-gradient(145deg, rgba(7, 18, 29, .98), rgba(15, 18, 33, .98) 58%, rgba(45, 12, 28, .97)) !important;
        box-shadow: 0 22px 50px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
        overflow: hidden !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 2147483000 !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        display: grid !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal > li {
        list-style: none !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-item,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal > li:not(.lt-account-icon-cell):not(.lt-info-tabs) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 48px !important;
        display: grid !important;
        grid-template-columns: 38px 1fr 34px !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 7px 8px !important;
        border-radius: 16px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head img {
        width: 36px !important;
        height: 36px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-name,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-meta {
        display: block !important;
        min-width: 0 !important;
        max-width: 134px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .035) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0 !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status i {
        width: 13px !important;
        height: 13px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        min-height: 48px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 15px !important;
        font-size: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .dropdown-divider,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal hr.dropdown-divider,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal > li:has(> .dropdown-divider) {
        display: none !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        display: grid !important;
        grid-template-columns: 22px 1fr !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 15px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-title span {
        display: none !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid a {
        min-height: 26px !important;
        padding: 0 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 11px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }
}

/* Mobile account popover compact final override 20260614 */
@media (max-width: 768px) {
    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        left: 104px !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
        width: min(238px, calc(100vw - 150px)) !important;
        min-width: 0 !important;
        max-width: min(238px, calc(100vw - 150px)) !important;
        max-height: min(348px, calc(100dvh - 170px)) !important;
        padding: 8px !important;
        gap: 6px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: linear-gradient(145deg, rgba(7, 18, 29, .99), rgba(14, 17, 30, .98) 62%, rgba(42, 10, 25, .98)) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 42px !important;
        grid-template-columns: 32px 1fr 28px !important;
        gap: 7px !important;
        padding: 6px 7px !important;
        border-radius: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head img {
        width: 30px !important;
        height: 30px !important;
        border-radius: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-name {
        max-width: 118px !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-meta {
        max-width: 118px !important;
        font-size: 11px !important;
        line-height: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-arrow {
        width: 28px !important;
        height: 28px !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        min-height: 30px !important;
        padding: 3px !important;
        gap: 3px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status {
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status i {
        width: 11px !important;
        height: 11px !important;
        font-size: 11px !important;
        line-height: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        gap: 6px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        min-height: 42px !important;
        gap: 3px !important;
        padding: 5px !important;
        border-radius: 13px !important;
        font-size: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only i {
        font-size: 17px !important;
        line-height: 17px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal a[href*="dashboard"] {
        min-height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        grid-template-columns: 18px 1fr !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-title i {
        font-size: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        gap: 3px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid a {
        min-height: 23px !important;
        padding: 0 2px !important;
        border-radius: 10px !important;
        font-size: 8px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        min-height: 36px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }
}

/* Mobile account popover small final override 2026061431 */
@media (max-width: 768px) {
    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        left: 72px !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
        width: 188px !important;
        min-width: 0 !important;
        max-width: 188px !important;
        max-height: min(318px, calc(100dvh - 170px)) !important;
        padding: 7px !important;
        gap: 5px !important;
        border-radius: 17px !important;
        overflow: hidden !important;
        background: linear-gradient(145deg, rgba(7, 18, 29, .99), rgba(14, 17, 30, .98) 62%, rgba(42, 10, 25, .98)) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 38px !important;
        grid-template-columns: 28px 1fr 26px !important;
        gap: 6px !important;
        padding: 5px 6px !important;
        border-radius: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head img {
        width: 26px !important;
        height: 26px !important;
        border-radius: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-name {
        max-width: 82px !important;
        font-size: 12px !important;
        line-height: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-meta {
        max-width: 82px !important;
        font-size: 10px !important;
        line-height: 12px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-arrow {
        width: 26px !important;
        height: 26px !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        min-height: 28px !important;
        padding: 3px !important;
        gap: 3px !important;
        border-radius: 12px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status {
        height: 22px !important;
        min-height: 22px !important;
        border-radius: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status i {
        width: 10px !important;
        height: 10px !important;
        font-size: 10px !important;
        line-height: 10px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        gap: 6px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        min-height: 38px !important;
        gap: 3px !important;
        padding: 4px !important;
        border-radius: 12px !important;
        font-size: 9px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only i {
        font-size: 16px !important;
        line-height: 16px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal a[href*="dashboard"] {
        min-height: 30px !important;
        padding: 5px 7px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        grid-template-columns: 18px 1fr !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-title i {
        font-size: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        gap: 3px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid a {
        min-height: 21px !important;
        padding: 0 2px !important;
        border-radius: 9px !important;
        font-size: 8px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        min-height: 34px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal *,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal *::before,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal *::after {
        box-sizing: border-box !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal > li,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-item,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row .change-status {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row .lt-account-icon-only {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row .lt-action-label {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Mobile account menu desktop-shape final 2026061433 */
@media (max-width: 768px) {
    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        left: 92px !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
        width: 252px !important;
        min-width: 252px !important;
        max-width: 252px !important;
        max-height: none !important;
        padding: 10px !important;
        gap: 7px !important;
        border-radius: 24px !important;
        overflow: visible !important;
        transform: scale(.86) !important;
        transform-origin: left bottom !important;
        background: linear-gradient(145deg, rgba(7, 18, 29, .98), rgba(15, 18, 33, .98) 58%, rgba(45, 12, 28, .97)) !important;
        box-shadow: 0 22px 50px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal * {
        box-sizing: border-box !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 54px !important;
        grid-template-columns: 38px 1fr 34px !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 18px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head img {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-name {
        max-width: 150px !important;
        font-size: 14px !important;
        line-height: 16px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-meta {
        max-width: 150px !important;
        font-size: 11px !important;
        line-height: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head-arrow {
        width: 34px !important;
        height: 34px !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-status-row {
        width: 100% !important;
        min-height: 34px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status {
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 0 !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .change-status i {
        width: 11px !important;
        height: 11px !important;
        font-size: 11px !important;
        line-height: 11px !important;
        margin: 0 !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-action-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        overflow: hidden !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 !important;
        border-radius: 15px !important;
        font-size: 10px !important;
        gap: 5px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only i {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal a[href*="dashboard"] {
        min-height: 40px !important;
        padding: 8px 10px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 22px 1fr !important;
        gap: 7px !important;
        padding: 7px 8px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-title span {
        display: none !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-info-tabs-grid a {
        min-height: 28px !important;
        padding: 0 3px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        width: 100% !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }
}

/* Mobile account menu final nudge 2026061434 */
@media (max-width: 768px) {
    body.incallx .lt-account-menu.whitoo-mobile-account-portal,
    body.incallx .lt-account-menu.whitoo-mobile-account-portal.show {
        left: 82px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
        transform: scale(.84) !important;
        transform-origin: left bottom !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-head {
        min-height: 50px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-icon-only {
        min-height: 46px !important;
    }

    body.incallx .lt-account-menu.whitoo-mobile-account-portal .lt-account-logout {
        min-height: 38px !important;
    }
}

/* Server channel stage follows DM layout on empty/new rooms 2026061435 */
body.incallx #main-room .group-chat,
body.incallx #main-room .group-chat > .wrapper {
    min-height: 0 !important;
    height: 100% !important;
}

body.incallx #main-room .group-chat > .wrapper {
    align-items: stretch !important;
}

body.incallx #main-room .group-chat .main-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    align-self: stretch !important;
    min-height: calc(100vh - 74px) !important;
    height: calc(100vh - 74px) !important;
    padding: 12px 12px 0 !important;
    overflow: hidden !important;
}

body.incallx #main-room .group-chat .chat-scroll {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, rgba(255, 51, 71, .08), transparent 30%),
        linear-gradient(315deg, rgba(32, 224, 196, .10), transparent 34%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        #070b16 !important;
    background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

body.incallx #main-room .group-chat .messages.chats {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
}

body.incallx #main-room .group-chat .room-editor {
    position: relative !important;
    z-index: 5 !important;
    min-height: 0 !important;
    padding: 8px 0 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap {
    overflow: hidden !important;
    border: 1px solid rgba(32, 224, 196, .22) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(90deg, rgba(255, 51, 71, .08), rgba(32, 224, 196, .07)),
        #070b16 !important;
}

body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller.woo-composer-active {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    body.incallx #main-room .group-chat .main-panel {
        min-height: calc(100vh - 62px) !important;
        height: calc(100vh - 62px) !important;
        padding: 8px 8px 0 !important;
    }

    body.incallx #main-room .group-chat .room-editor {
        padding-bottom: 8px !important;
    }
}



/* Profile sidebar premium navigation final 2026061444 */
body.incallx .sidebar-profile {
    background:
        radial-gradient(circle at 20% 0%, rgba(45, 212, 191, .10), transparent 32%),
        linear-gradient(180deg, rgba(10, 17, 31, .98), rgba(6, 10, 20, .98)) !important;
    border-right: 1px solid rgba(45, 212, 191, .18) !important;
}

body.incallx .sidebar-profile .disc-header {
    margin: 0 14px 14px !important;
    padding: 16px 0 10px !important;
    color: #f8fafc !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
}

body.incallx .sidebar-profile .disc-cat-list {
    padding: 0 10px 14px !important;
}

body.incallx .sidebar-profile #v-profile-tab {
    gap: 7px !important;
    margin: 0 !important;
}

body.incallx .sidebar-profile .v-profile-tab-item {
    position: relative !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    color: rgba(226, 232, 240, .86) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body.incallx .sidebar-profile .v-profile-tab-item::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(135deg, rgba(239, 51, 87, .18), rgba(45, 212, 191, .15)) !important;
    transition: opacity .16s ease;
}

body.incallx .sidebar-profile .v-profile-tab-item > i,
body.incallx .sidebar-profile .v-profile-tab-item > span {
    position: relative;
    z-index: 1;
}

body.incallx .sidebar-profile .v-profile-tab-item i {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    border-radius: 8px !important;
    color: #2dd4bf !important;
    font-size: 18px !important;
    background: rgba(45, 212, 191, .08) !important;
}

body.incallx .sidebar-profile .v-profile-tab-item:hover {
    transform: translateX(2px) !important;
    color: #fff !important;
    border-color: rgba(45, 212, 191, .18) !important;
    background: rgba(15, 23, 42, .70) !important;
}

body.incallx .sidebar-profile .v-profile-tab-item:hover::before,
body.incallx .sidebar-profile .v-profile-tab-item.active::before {
    opacity: 1;
}

body.incallx .sidebar-profile .v-profile-tab-item.active {
    color: #fff !important;
    border-color: rgba(99, 102, 241, .40) !important;
    background: rgba(79, 70, 229, .42) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .26), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
}

body.incallx .sidebar-profile .v-profile-tab-item.active i {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
}

@media (max-width: 767.98px) {
    body.incallx .sidebar-profile .disc-header {
        margin: 0 10px 10px !important;
        font-size: 18px !important;
    }

    body.incallx .sidebar-profile #v-profile-tab {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.incallx .sidebar-profile .v-profile-tab-item {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 13px !important;
    }

    body.incallx .sidebar-profile .v-profile-tab-item i {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
        font-size: 16px !important;
    }
}

/* Profile header centered identity final 2026061445 */
body.incallx #main-profile #v-profile-home .profile-header-desc > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

body.incallx #main-profile #v-profile-home .profile-header-desc > .row > .col-md-4 {
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.incallx #main-profile #v-profile-home .profile-header-desc > .row > .col-md-4:nth-child(2) {
    min-width: min(320px, 100%) !important;
    justify-self: center !important;
    text-align: center !important;
}

body.incallx #main-profile #v-profile-home .profile-header-user-title,
body.incallx #main-profile #v-profile-home .profile-header-user-sub-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body.incallx #main-profile #v-profile-home .profile-header-user-title {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

body.incallx #main-profile #v-profile-home .profile-header-user-sub-title {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    body.incallx #main-profile #v-profile-home .profile-header-desc > .row {
        grid-template-columns: 1fr !important;
        row-gap: 8px !important;
    }

    body.incallx #main-profile #v-profile-home .profile-header-desc > .row > .col-md-4:nth-child(1),
    body.incallx #main-profile #v-profile-home .profile-header-desc > .row > .col-md-4:nth-child(3) {
        display: none !important;
    }

    body.incallx #main-profile #v-profile-home .profile-header-desc > .row > .col-md-4:nth-child(2) {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Woo room background image display final 2026061446 */
body.incallx #main-room .group-chat.has-room-bg .chat-scroll {
    background:
        linear-gradient(135deg, rgba(5, 8, 17, .68), rgba(5, 8, 17, .34) 44%, rgba(5, 8, 17, .72)),
        linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
        var(--whitoo-room-bg-image) center center / cover no-repeat !important;
    background-size: auto, 36px 36px, 36px 36px, cover !important;
    background-blend-mode: normal, normal, normal, normal !important;
}

body.incallx #main-room .group-chat.has-room-bg .messages.chats {
    background: transparent !important;
    background-image: none !important;
}

/* Profile center compact action icons 2026061601 */
body.incallx .whitoo-explore-profile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.incallx .whitoo-explore-profile-actions a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 35% 18%, rgba(255, 255, 255, .10), transparent 42%),
        linear-gradient(135deg, rgba(255, 51, 71, .13), rgba(32, 224, 196, .08)),
        rgba(15, 23, 42, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body.incallx .whitoo-explore-profile-actions a i {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

body.incallx .whitoo-explore-profile-actions a span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

body.incallx .whitoo-explore-profile-actions a:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(32, 224, 196, .42) !important;
    background:
        radial-gradient(circle at 35% 18%, rgba(255, 255, 255, .14), transparent 42%),
        linear-gradient(135deg, rgba(32, 224, 196, .18), rgba(255, 51, 71, .15)),
        rgba(15, 23, 42, .86) !important;
}

@media (min-width: 1200px) {
    body.incallx .whitoo-explore-profile-actions a {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex-basis: 44px !important;
    }
}

@media (max-width: 767.98px) {
    body.incallx .whitoo-explore-profile-actions {
        gap: 7px !important;
    }

    body.incallx .whitoo-explore-profile-actions a {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 13px !important;
    }
}

/* Profile center denser action rail 2026061602 */
body.incallx .whitoo-explore-profile-actions {
    gap: 6px !important;
    padding: 4px !important;
    align-content: flex-start !important;
}

body.incallx .whitoo-explore-profile-actions a,
body.incallx .whitoo-explore-profile-actions a:hover {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 11px !important;
}

body.incallx .whitoo-explore-profile-actions a i {
    font-size: 15px !important;
}

@media (min-width: 1200px) {
    body.incallx .whitoo-explore-profile-actions a,
    body.incallx .whitoo-explore-profile-actions a:hover {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body.incallx .whitoo-explore-profile-actions {
        gap: 5px !important;
        padding: 3px !important;
    }

    body.incallx .whitoo-explore-profile-actions a,
    body.incallx .whitoo-explore-profile-actions a:hover {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex-basis: 32px !important;
        border-radius: 10px !important;
    }

    body.incallx .whitoo-explore-profile-actions a i {
        font-size: 14px !important;
    }
}

/* Final chat attachment dropdown layer fix 202606170003 */
body.incallx #main-room .group-chat .room-editor,
body.incallx #main-private .private-editor {
    position: relative !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-private .private-editor .editor-wrap,
body.incallx #main-private .private-editor .editor-container.editor-controller {
    position: relative !important;
    z-index: 2147482001 !important;
    overflow: visible !important;
}

body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-editor .attachment-col {
    position: relative !important;
    z-index: 2147482002 !important;
    overflow: visible !important;
}

body.incallx #main-room .group-chat .room-editor .attachment-col .dropdown-menu,
body.incallx #main-private .private-editor .attachment-col .dropdown-menu {
    position: absolute !important;
    inset: auto auto calc(100% + 12px) 0 !important;
    transform: none !important;
    z-index: 2147482003 !important;
    min-width: 230px;
    max-width: min(320px, calc(100vw - 28px));
}

body.incallx .whitoo-attach-trigger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #20e0c4 !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
}

body.incallx .whitoo-attach-trigger svg {
    pointer-events: none !important;
}

body.incallx .attachment-col {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

body.incallx .attachment-col .whitoo-attach-menu.show {
    display: block !important;
}

body.incallx .whitoo-attach-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482998;
    background: transparent;
}

body.incallx .whitoo-attach-portal {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 2147482999;
    width: min(360px, calc(100vw - 28px));
    padding: 12px;
    border: 1px solid rgba(32, 224, 196, .26);
    border-radius: 20px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 51, 102, .18), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(32, 224, 196, .18), transparent 34%),
        rgba(7, 11, 22, .97);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .58);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@media (min-width: 768px) {
    body.incallx .whitoo-attach-portal {
        bottom: auto;
    }
}

body.incallx .whitoo-attach-portal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(248, 250, 252, .94);
    font-size: 13px;
    font-weight: 900;
}

body.incallx .whitoo-attach-close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 10px;
    color: #f8fbff;
    background: rgba(15, 23, 42, .72);
    cursor: pointer;
}

body.incallx .whitoo-attach-portal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.incallx .whitoo-attach-action {
    min-height: 76px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 16px;
    color: #f8fbff;
    background: rgba(15, 23, 42, .72);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
    cursor: pointer;
}

body.incallx .whitoo-attach-action i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #20e0c4;
    background: rgba(32, 224, 196, .12);
    font-size: 18px;
}

body.incallx .whitoo-attach-action:hover,
body.incallx .whitoo-attach-action:active {
    border-color: rgba(32, 224, 196, .36);
    background: rgba(32, 224, 196, .13);
}

/* Mobile composer safe area and modern attachment picker 202606170005 */
@media (max-width: 767.98px) {
    body.incallx #main-room .group-chat .main-panel,
    body.incallx #main-private .main-panel,
    body.incallx #main-private .private-chat .main-panel {
        height: calc(100dvh - 62px) !important;
        min-height: calc(100dvh - 62px) !important;
        padding-bottom: 8px !important;
    }

    body.incallx #main-room .group-chat .room-editor,
    body.incallx #main-private .private-editor,
    body.incallx #main-private .private-chat .private-editor {
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }

    body.incallx #main-room .group-chat .room-editor .editor-wrap,
    body.incallx #main-private .private-editor .editor-wrap,
    body.incallx #main-private .private-chat .private-editor .editor-wrap {
        border-radius: 18px !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .34) !important;
    }

    body.incallx .whitoo-attach-trigger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #20e0c4 !important;
        background: transparent !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        touch-action: manipulation !important;
    }

    body.incallx .whitoo-attach-trigger svg {
        pointer-events: none !important;
    }

    body.incallx .attachment-col {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    body.incallx .attachment-col .whitoo-attach-menu,
    body.incallx #main-room .group-chat .room-editor .attachment-col .whitoo-attach-menu,
    body.incallx #main-private .private-editor .attachment-col .whitoo-attach-menu {
        position: fixed !important;
        inset: auto 12px calc(84px + env(safe-area-inset-bottom)) 12px !important;
        display: none;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 12px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        border: 1px solid rgba(32, 224, 196, .24) !important;
        border-radius: 20px !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(255, 51, 102, .18), transparent 30%),
            radial-gradient(circle at 90% 20%, rgba(32, 224, 196, .18), transparent 34%),
            rgba(7, 11, 22, .96) !important;
        box-shadow: 0 26px 70px rgba(0, 0, 0, .56) !important;
        transform: none !important;
        z-index: 2147483000 !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    body.incallx .attachment-col .whitoo-attach-menu.show {
        display: grid !important;
    }

    body.incallx .attachment-col .whitoo-attach-menu::before {
        content: "Paylas";
        grid-column: 1 / -1;
        color: rgba(226, 232, 240, .92);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0;
    }

    html[lang="en"] body.incallx .attachment-col .whitoo-attach-menu::before {
        content: "Share";
    }

    body.incallx .attachment-col .whitoo-attach-menu .dropdown-header {
        display: none !important;
    }

    body.incallx .attachment-col .whitoo-attach-menu .dropdown-item {
        display: flex !important;
        min-height: 76px;
        padding: 10px 6px !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid rgba(148, 163, 184, .14);
        border-radius: 16px;
        color: #f8fbff !important;
        background: rgba(15, 23, 42, .72);
        font-size: 12px;
        font-weight: 850;
        text-align: center;
        white-space: normal;
    }

    body.incallx .attachment-col .whitoo-attach-menu .dropdown-item i {
        width: 34px;
        height: 34px;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #20e0c4;
        background: rgba(32, 224, 196, .12);
        font-size: 18px;
    }

    body.incallx .attachment-col .whitoo-attach-menu .dropdown-item:active,
    body.incallx .attachment-col .whitoo-attach-menu .dropdown-item:hover {
        border-color: rgba(32, 224, 196, .36);
        background: rgba(32, 224, 196, .13);
    }

    body.incallx .whitoo-attach-portal {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(96px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
    }

    body.incallx .lt-voice-recorder.is-locked .lt-voice-cancel {
        display: inline-flex !important;
        order: 1;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        background: rgba(255, 51, 71, .22) !important;
        color: #ff6d85 !important;
        box-shadow: inset 0 0 0 1px rgba(255, 51, 71, .28);
    }

    body.incallx .lt-voice-recorder.is-locked .lt-voice-pulse {
        display: none !important;
    }

    body.incallx .lt-voice-recorder.is-locked .lt-voice-lock {
        cursor: pointer;
        border-color: rgba(255, 51, 71, .48) !important;
        color: #fff !important;
        background: rgba(255, 51, 71, .20) !important;
    }
}

/* Mobile composer fixed rail and attachment event stabilization 202606170013 */
@media (max-width: 767.98px) {
    body.incallx #main-room .group-chat .messages.chats,
    body.incallx #main-private .messages.chats,
    body.incallx #main-private .private-chat .messages.chats {
        padding-bottom: 104px !important;
    }

    body.incallx #main-room .group-chat .room-editor,
    body.incallx #main-private .private-editor,
    body.incallx #main-private .private-chat .private-editor {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        z-index: 2147482500 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        pointer-events: auto !important;
        transform: translateZ(0);
    }

    body.incallx #main-room .group-chat .room-editor .editor-wrap,
    body.incallx #main-private .private-editor .editor-wrap,
    body.incallx #main-private .private-chat .private-editor .editor-wrap {
        overflow: visible !important;
    }

    body.incallx .whitoo-attach-portal {
        bottom: calc(154px + env(safe-area-inset-bottom)) !important;
    }
}

/* Mobile composer rollback to in-panel flow 202606170014 */
@media (max-width: 767.98px) {
    body.incallx #main-room .group-chat .main-panel,
    body.incallx #main-private .main-panel,
    body.incallx #main-private .private-chat .main-panel {
        padding-bottom: 0 !important;
    }

    body.incallx #main-room .group-chat .messages.chats,
    body.incallx #main-private .messages.chats,
    body.incallx #main-private .private-chat .messages.chats {
        padding-bottom: 22px !important;
    }

    body.incallx #main-room .group-chat .room-editor,
    body.incallx #main-private .private-editor,
    body.incallx #main-private .private-chat .private-editor {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2147482000 !important;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.incallx .whitoo-attach-portal,
    body.incallx .whitoo-attach-backdrop {
        display: none !important;
    }
}

/* Restore mobile private composer bottom position 202606170015 */
@media (max-width: 767.98px) {
    body.incallx #main-private .private-chat .chat-scroll {
        top: 8px !important;
        right: 8px !important;
        bottom: 86px !important;
        left: 8px !important;
    }

    body.incallx #main-private .private-chat .private-editor {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        z-index: 2147482000 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Official Whitoo badges: large cards only in the full profile 202606180001 */
body.incallx .whitoo-official-badges {
    padding: 18px;
    border: 1px solid rgba(45, 212, 191, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(12, 18, 32, .96), rgba(20, 27, 46, .92));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

body.incallx .whitoo-official-badges-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 800;
}

body.incallx .whitoo-official-badges-title i { color: #2dd4bf; font-size: 21px; }

body.incallx .whitoo-official-badges-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.incallx .whitoo-official-badge {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 15px;
    background: rgba(255, 255, 255, .035);
}

body.incallx .whitoo-official-badge img {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}

body.incallx .whitoo-official-badge strong { display: block; color: #f8fafc; font-size: 14px; }
body.incallx .whitoo-official-badge p { margin: 4px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.4; }

@media (max-width: 767.98px) {
    body.incallx .whitoo-official-badges { padding: 13px; border-radius: 15px; }
    body.incallx .whitoo-official-badges-grid { grid-template-columns: 1fr; gap: 9px; }
    body.incallx .whitoo-official-badge { padding: 10px; }
    body.incallx .whitoo-official-badge img { width: 58px; height: 58px; flex-basis: 58px; }
}

/* Public full profile from member cards and DM options 202606180002 */
.popover.woo-profile-popover-v2 .woo-profile-v2-view-wrap { position: relative; z-index: 5; padding: 0 14px 14px; pointer-events: auto; }
.popover.woo-profile-popover-v2 .woo-profile-v2-btn-view { position: relative; z-index: 6; width: 100%; justify-content: center; border: 1px solid rgba(45,212,191,.25); background: rgba(45,212,191,.1); color: #99f6e4; pointer-events: auto; cursor: pointer; }
.dm-profile-options { display: none; }
body.incallx .private-list .user-row { position: relative; padding-right: 36px; }
body.incallx .private-list .dm-profile-options { display: block; position: absolute; top: 50%; right: 7px; z-index: 8; transform: translateY(-50%); }
body.incallx .private-list .dm-profile-options-toggle { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: #94a3b8; background: transparent; }
body.incallx .private-list .dm-profile-options-toggle:hover,
body.incallx .private-list .dm-profile-options-toggle[aria-expanded="true"] { color: #e2e8f0; background: rgba(148,163,184,.13); }
body.incallx .private-list .dm-profile-options .dropdown-menu { min-width: 150px; padding: 6px; border: 1px solid rgba(45,212,191,.16); border-radius: 12px; background: #111827; box-shadow: 0 15px 34px rgba(0,0,0,.4); }
body.incallx .private-list .dm-profile-options .dropdown-item { display: flex; align-items: center; border-radius: 8px; color: #e2e8f0; font-size: 12px; }
body.incallx .private-list .dm-profile-options .dropdown-item:hover { color: #99f6e4; background: rgba(45,212,191,.1); }

body.incallx .whitoo-public-profile-modal { z-index: 2147483000; }
body.incallx .whitoo-public-profile-modal + .modal-backdrop { z-index: 2147482990; }
body.incallx .whitoo-public-profile-modal .modal-dialog { width: min(680px, calc(100vw - 24px)); max-width: 680px; }
body.incallx .whitoo-public-profile-modal .modal-content { position: relative; overflow: hidden; border: 1px solid rgba(45,212,191,.2); border-radius: 22px; color: #e2e8f0; background: linear-gradient(155deg,#0c1220,#151d31); box-shadow: 0 28px 80px rgba(0,0,0,.55); }
body.incallx .whitoo-public-profile-close { position: absolute; top: 13px; right: 13px; z-index: 4; padding: 9px; border-radius: 50%; background-color: rgba(255,255,255,.82); }
body.incallx .whitoo-public-profile-cover { height: 170px; background: #111827; }
body.incallx .whitoo-public-profile-cover img { width: 100%; height: 100%; object-fit: cover; }
body.incallx .whitoo-public-profile-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 22px; margin-top: -42px; position: relative; z-index: 2; }
body.incallx .whitoo-public-profile-avatar { width: 94px; height: 94px; flex: 0 0 94px; object-fit: cover; border: 5px solid #11192a; border-radius: 26px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
body.incallx .whitoo-public-profile-head h2 { margin: 0 0 2px; color: #fff; font-size: 24px; font-weight: 900; }
body.incallx .whitoo-public-profile-head span { color: #94a3b8; font-size: 13px; }
body.incallx .whitoo-public-profile-small-badges { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 22px 0; }
body.incallx .whitoo-public-profile-about { display: flex; gap: 10px; margin: 15px 22px 0; padding: 13px; border: 1px solid rgba(148,163,184,.13); border-radius: 14px; background: rgba(255,255,255,.035); }
body.incallx .whitoo-public-profile-about i { color: #2dd4bf; font-size: 19px; }
body.incallx .whitoo-public-profile-about p { margin: 0; color: #cbd5e1; font-size: 13px; line-height: 1.55; }
body.incallx .whitoo-public-profile-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 14px 22px 0; }
body.incallx .whitoo-public-profile-meta span { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; padding: 11px; border-radius: 13px; background: rgba(15,23,42,.68); color: #cbd5e1; font-size: 12px; }
body.incallx .whitoo-public-profile-meta i { grid-row: 1/3; color: #38bdf8; font-size: 18px; }
body.incallx .whitoo-public-profile-meta b { color: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
body.incallx .whitoo-public-profile-badges { padding: 18px 22px 0; }
body.incallx .whitoo-public-profile-badges h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #f8fafc; font-size: 15px; font-weight: 850; }
body.incallx .whitoo-public-profile-badges h3 i { color: #2dd4bf; font-size: 20px; }
body.incallx .whitoo-public-profile-badge-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
body.incallx .whitoo-public-profile-badge { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px; border: 1px solid rgba(148,163,184,.13); border-radius: 14px; background: rgba(255,255,255,.035); }
body.incallx .whitoo-public-profile-badge img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; }
body.incallx .whitoo-public-profile-badge strong { display: block; color: #f8fafc; font-size: 13px; }
body.incallx .whitoo-public-profile-badge p { margin: 3px 0 0; color: #94a3b8; font-size: 11px; line-height: 1.35; }
body.incallx .whitoo-public-profile-empty { grid-column: 1/-1; padding: 16px; border: 1px dashed rgba(148,163,184,.2); border-radius: 13px; color: #94a3b8; text-align: center; font-size: 12px; }
body.incallx .whitoo-public-profile-actions { padding: 18px 22px 22px; }
body.incallx .whitoo-public-profile-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border: 0; border-radius: 13px; font-weight: 800; background: linear-gradient(135deg,#14b8a6,#0891b2); }

@media (max-width: 575.98px) {
    body.incallx .whitoo-public-profile-cover { height: 135px; }
    body.incallx .whitoo-public-profile-head { padding: 0 15px; margin-top: -34px; }
    body.incallx .whitoo-public-profile-avatar { width: 76px; height: 76px; flex-basis: 76px; border-radius: 21px; }
    body.incallx .whitoo-public-profile-head h2 { font-size: 19px; }
    body.incallx .whitoo-public-profile-small-badges { padding: 12px 15px 0; }
    body.incallx .whitoo-public-profile-about { margin: 12px 15px 0; }
    body.incallx .whitoo-public-profile-meta { grid-template-columns: 1fr; padding: 12px 15px 0; }
    body.incallx .whitoo-public-profile-badges { padding: 15px 15px 0; }
    body.incallx .whitoo-public-profile-badge-grid { grid-template-columns: 1fr; }
    body.incallx .whitoo-public-profile-actions { padding: 15px; }
}

/* Profile overlay stacking and click-safe portal 202606180003 */
body.incallx .popover.woo-profile-popover-v2,
.popover.woo-profile-popover-v2 {
    z-index: 2147483630 !important;
}

body.whitoo-public-profile-open { overflow: hidden !important; }
body.incallx .whitoo-public-profile-portal {
    position: fixed;
    inset: 0;
    z-index: 2147483640;
    display: grid;
    place-items: center;
    padding: 12px;
}

body.incallx .whitoo-public-profile-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(2, 6, 23, .78);
    backdrop-filter: blur(8px);
}

body.incallx .whitoo-public-profile-panel {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
    border: 1px solid rgba(45,212,191,.2);
    border-radius: 22px;
    color: #e2e8f0;
    background: linear-gradient(155deg,#0c1220,#151d31);
    box-shadow: 0 28px 80px rgba(0,0,0,.65);
    overscroll-behavior: contain;
}

body.incallx .whitoo-public-profile-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    color: #cbd5e1;
    font-weight: 750;
}

body.incallx .whitoo-public-profile-loading > i {
    color: #2dd4bf;
    font-size: 25px;
    animation: whitoo-profile-spin .8s linear infinite;
}

body.incallx .whitoo-public-profile-loading > .ti-alert-circle {
    color: #fb7185;
    animation: none;
}

@keyframes whitoo-profile-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
    body.incallx .whitoo-public-profile-portal { padding: 7px; align-items: end; }
    body.incallx .whitoo-public-profile-panel { width: 100%; max-height: calc(100dvh - 14px); border-radius: 20px 20px 14px 14px; }
}
/* Compact modern radio station list 202606180010 */
body.incallx .radio-panel {
    bottom: 58px;
    left: 8px;
    width: calc(100% - 16px);
    max-height: min(66vh, 520px);
    overflow: hidden;
    border: 1px solid rgba(45,212,191,.18);
    border-radius: 16px;
    color: #dbe7f3;
    background: linear-gradient(160deg,rgba(10,18,31,.98),rgba(17,25,43,.98));
    box-shadow: 0 20px 55px rgba(0,0,0,.55);
    backdrop-filter: blur(16px);
}
body.incallx .radio-panel .radio-stations {
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 8px 10px 8px 13px;
    border: 0;
    border-bottom: 1px solid rgba(148,163,184,.11);
    background: rgba(255,255,255,.025);
}
body.incallx .radio-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: #f8fafc; font-size: 12.5px; font-weight: 850; }
body.incallx .radio-panel-title > i { color: #2dd4bf; font-size: 17px; }
body.incallx .radio-list-close { display: grid; width: 28px; height: 28px; margin-left: auto; padding: 0; flex: 0 0 28px; place-items: center; border: 0; border-radius: 9px; color: #94a3b8; background: rgba(148,163,184,.08); cursor: pointer; }
body.incallx .radio-list-close:hover { color: #fff; background: rgba(251,113,133,.18); }
body.incallx .radio-station-list { display: grid; gap: 3px; max-height: min(52vh, 410px); padding: 7px !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(45,212,191,.42) transparent; }
body.incallx .radio-station { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 6px 9px; border: 1px solid transparent; border-radius: 9px; color: #b8c5d5; font-size: 12px; font-weight: 650; line-height: 1.25; transition: background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
body.incallx .radio-station > i { flex: 0 0 16px; color: #64748b; font-size: 15px; }
body.incallx .radio-station-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.incallx .radio-station:hover { color: #edfdfb; font-weight: 700; border-color: rgba(45,212,191,.13); background: rgba(45,212,191,.075); transform: translateX(2px); }
body.incallx .radio-station.is-active { color: #ccfbf1; border-color: rgba(45,212,191,.22); background: linear-gradient(90deg,rgba(20,184,166,.16),rgba(14,165,233,.07)); }
body.incallx .radio-station.is-active > i { color: #2dd4bf; }
body.incallx .radio-panel .radio-volume { gap: 8px; padding: 8px 12px 10px; border-top: 1px solid rgba(148,163,184,.1); background: rgba(2,6,23,.24); }
body.incallx .radio-panel .radio-volume-control { margin-left: 0; }
body.incallx .radio-panel .radio-volume-display { color: #2dd4bf; }
@media (max-width: 575.98px) {
    body.incallx .radio-panel { bottom: 54px; left: 6px; width: calc(100% - 12px); border-radius: 15px; }
    body.incallx .radio-station-list { max-height: 48vh; }
}
/* Balanced single-row sidebar shortcuts 202606180012 */
body.incallx .lt-sidebar-shortcuts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 7px;
    justify-items: center;
}
body.incallx .lt-sidebar-shortcut {
    width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    border-radius: 10px;
}
body.incallx .lt-sidebar-shortcut i,
body.incallx .lt-sidebar-shortcut .ti {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 7px;
    font-size: 11px;
}
/* User server folders 202606180013 */
body.incallx .room-folder { position: relative; display: grid; justify-items: center; margin: 0 0 8px; }
body.incallx .room-folder-toggle { position: relative; display: grid; width: 50px; height: 50px; padding: 6px; place-items: center; border: 1px solid color-mix(in srgb,var(--folder-color) 38%,transparent); border-radius: 17px; background: color-mix(in srgb,var(--folder-color) 13%,#0b1220); box-shadow: 0 12px 25px rgba(0,0,0,.3); cursor: pointer; transition: border-radius .18s ease,transform .18s ease,box-shadow .18s ease; }
body.incallx .room-folder-toggle:hover { transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb,var(--folder-color) 18%,rgba(0,0,0,.4)); }
body.incallx .room-folder.is-open .room-folder-toggle { border-radius: 14px; box-shadow: 0 0 0 3px color-mix(in srgb,var(--folder-color) 12%,transparent),0 14px 28px rgba(0,0,0,.34); }
body.incallx .room-folder-preview { display: grid; width: 36px; height: 36px; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 2px; overflow: hidden; border-radius: 10px; }
body.incallx .room-folder-preview img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border-radius: 4px; }
body.incallx .room-folder-preview img:only-child { grid-column: 1/-1; grid-row: 1/-1; border-radius: 9px; }
body.incallx .room-folder-count { position: absolute; right: -3px; bottom: -3px; display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border: 2px solid #080d18; border-radius: 999px; color: #fff; background: var(--folder-color); font-size: 9px; font-weight: 900; }
body.incallx .room-folder-unread { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border: 2px solid #080d18; border-radius: 50%; background: #fb3958; box-shadow: 0 0 12px rgba(251,57,88,.7); }
body.incallx .room-folder-items { display: none; width: 100%; padding-top: 8px; }
body.incallx .room-folder.is-open .room-folder-items { display: grid; justify-items: center; gap: 8px; animation: whitoo-folder-open .18s ease; }
body.incallx .room-folder.is-open .room-folder-items .room-list-item { margin: 0; }
@keyframes whitoo-folder-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
body.incallx .room-folder-manager > i { color: #99f6e4 !important; }
body.room-folder-modal-open { overflow: hidden !important; }
body.incallx .room-folder-portal { position: fixed; inset: 0; z-index: 2147483642; display: none; padding: 18px; place-items: center; }
body.incallx .room-folder-portal.is-open { display: grid; }
body.incallx .room-folder-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2,6,23,.82); backdrop-filter: blur(10px); }
body.incallx .room-folder-panel { position: relative; z-index: 1; width: min(650px,calc(100vw - 24px)); max-height: calc(100dvh - 28px); overflow: auto; border: 1px solid rgba(45,212,191,.22); border-radius: 24px; color: #e5eef8; background: radial-gradient(circle at 0 0,rgba(20,184,166,.12),transparent 30%),linear-gradient(155deg,#0b1220,#141d30); box-shadow: 0 32px 100px rgba(0,0,0,.68); }
body.incallx .room-folder-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(148,163,184,.11); }
body.incallx .room-folder-kicker { color: #5eead4; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
body.incallx .room-folder-panel h2 { display: flex; align-items: center; gap: 9px; margin: 5px 0 0; color: #fff; font-size: 21px; font-weight: 900; }
body.incallx .room-folder-panel h2 i { color: #2dd4bf; }
body.incallx .room-folder-panel-close { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(148,163,184,.13); border-radius: 11px; color: #94a3b8; background: rgba(255,255,255,.04); }
body.incallx .room-folder-overview,body.incallx .room-folder-editor { padding: 18px 22px 22px; }
body.incallx .room-folder-overview > p { margin: 0 0 15px; color: #94a3b8; font-size: 12px; line-height: 1.55; }
body.incallx .room-folder-manager-list { display: grid; gap: 8px; }
body.incallx .room-folder-manager-row { display: grid; grid-template-columns: 42px 1fr 32px 32px; gap: 9px; align-items: center; padding: 10px; border: 1px solid rgba(148,163,184,.12); border-radius: 14px; background: rgba(255,255,255,.03); }
body.incallx .room-folder-manager-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--folder-color); background: color-mix(in srgb,var(--folder-color) 14%,transparent); font-size: 22px; }
body.incallx .room-folder-manager-row strong,body.incallx .room-folder-manager-row small { display: block; }
body.incallx .room-folder-manager-row strong { color: #f8fafc; font-size: 13px; }
body.incallx .room-folder-manager-row small { margin-top: 2px; color: #64748b; font-size: 10px; }
body.incallx .room-folder-manager-row button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: #94a3b8; background: rgba(148,163,184,.08); }
body.incallx .room-folder-manager-row button:last-child:hover { color: #fecdd3; background: rgba(244,63,94,.12); }
body.incallx .room-folder-new { display: flex; width: 100%; min-height: 43px; margin-top: 12px; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(45,212,191,.3); border-radius: 13px; color: #99f6e4; background: rgba(45,212,191,.06); font-weight: 800; }
body.incallx .room-folder-empty { display: flex; min-height: 90px; align-items: center; justify-content: center; gap: 9px; border: 1px dashed rgba(148,163,184,.18); border-radius: 14px; color: #64748b; font-size: 12px; }
body.incallx .room-folder-field { margin-bottom: 15px; }
body.incallx .room-folder-field > label { display: block; margin-bottom: 7px; color: #cbd5e1; font-size: 11px; font-weight: 800; }
body.incallx .room-folder-editor input.form-control { border-color: rgba(148,163,184,.14); color: #fff; background: rgba(2,6,23,.45); }
body.incallx .room-folder-editor input[type=color] { width: 100%; height: 42px; padding: 4px; border: 1px solid rgba(148,163,184,.14); border-radius: 11px; background: rgba(2,6,23,.45); }
body.incallx .room-folder-room-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 260px; overflow: auto; }
body.incallx .room-folder-room-choice { display: grid; grid-template-columns: 34px 1fr 20px; gap: 9px; align-items: center; padding: 8px; border: 1px solid rgba(148,163,184,.11); border-radius: 12px; color: #cbd5e1; background: rgba(255,255,255,.025); cursor: pointer; }
body.incallx .room-folder-room-choice:has(input:checked) { border-color: rgba(45,212,191,.35); color: #ecfeff; background: rgba(45,212,191,.1); }
body.incallx .room-folder-room-choice input { position: absolute; opacity: 0; pointer-events: none; }
body.incallx .room-folder-room-choice img { width: 34px; height: 34px; object-fit: cover; border-radius: 10px; }
body.incallx .room-folder-room-choice span { overflow: hidden; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
body.incallx .room-folder-room-choice > i { color: #334155; }
body.incallx .room-folder-room-choice:has(input:checked) > i { color: #2dd4bf; }
body.incallx .room-folder-editor footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
body.incallx .room-folder-editor footer .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border-radius: 11px; font-weight: 800; }
@media (max-width:575.98px){body.incallx .room-folder-portal{padding:7px;align-items:end}body.incallx .room-folder-panel{width:100%;max-height:calc(100dvh - 14px);border-radius:22px 22px 14px 14px}body.incallx .room-folder-room-choices{grid-template-columns:1fr}body.incallx .room-folder-overview,body.incallx .room-folder-editor{padding:15px}}
/* Hold-and-drop server grouping 202606180014 */
body.incallx .room-list-item { -webkit-touch-callout: none; user-select: none; touch-action: pan-y; }
body.incallx .room-folder-menu { position: absolute; z-index: 4; top: -5px; left: 44px; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid rgba(148,163,184,.18); border-radius: 7px; color: #94a3b8; background: #111827; box-shadow: 0 6px 15px rgba(0,0,0,.35); font-size: 11px; opacity: 0; transform: scale(.85); transition: opacity .15s ease,transform .15s ease; }
body.incallx .room-folder:hover .room-folder-menu,body.incallx .room-folder.is-open .room-folder-menu { opacity: 1; transform: scale(1); }
body.incallx .room-folder-menu:hover { color: #fff; border-color: color-mix(in srgb,var(--folder-color) 45%,transparent); background: color-mix(in srgb,var(--folder-color) 18%,#111827); }
body.incallx .room-group-drag-ghost { position: fixed !important; z-index: 2147483646 !important; width: 52px !important; height: 52px !important; margin: 0 !important; border-radius: 17px !important; pointer-events: none !important; transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 20px 45px rgba(0,0,0,.55),0 0 0 4px rgba(45,212,191,.22) !important; opacity: .94; }
body.incallx .room-list-item.is-group-drag-source { opacity: .28; transform: scale(.88); }
body.incallx .room-list-item.is-group-drop-target .chatroom-item,body.incallx .room-folder-toggle.is-group-drop-target { border-color: #5eead4 !important; box-shadow: 0 0 0 4px rgba(45,212,191,.2),0 16px 34px rgba(0,0,0,.42) !important; transform: scale(1.08); }
body.room-grouping-active,body.room-grouping-active * { cursor: grabbing !important; }
body.room-grouping-active .room-list { overflow: visible; }
body.incallx .room-folder-footer-spacer { flex: 1; }
body.incallx .room-folder-delete-current { color: #fecdd3; border: 1px solid rgba(244,63,94,.2); background: rgba(244,63,94,.1); }
body.incallx .room-folder-delete-current:hover { color: #fff; background: rgba(244,63,94,.2); }
@media (hover:none){body.incallx .room-folder-menu{opacity:1;transform:scale(1)}}
/* Collapsible game activity panel 202606190002 */
body.incallx.lt-game-active .lt-game-hub:not(.is-open) { padding: 10px 12px; }
body.incallx.lt-game-active .lt-game-hub-body { display: none; }
body.incallx.lt-game-active .lt-game-hub.is-open .lt-game-hub-body { display: block; animation: whitoo-game-activity-open .2s ease; }
body.incallx.lt-game-active .lt-game-hub-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
body.incallx.lt-game-active .lt-game-hub-toggle { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(148,163,184,.18); border-radius: 999px; color: #dbeafe; background: rgba(15,23,42,.72); font-size: 11px; font-weight: 850; white-space: nowrap; cursor: pointer; transition: border-color .16s ease,background .16s ease,color .16s ease; }
body.incallx.lt-game-active .lt-game-hub-toggle:hover { border-color: rgba(45,212,191,.34); color: #99f6e4; background: rgba(45,212,191,.1); }
body.incallx.lt-game-active .lt-game-hub-toggle > i { font-size: 15px; }
body.incallx.lt-game-active .lt-game-hub:not(.is-open) .lt-game-hub-head h3 { font-size: clamp(16px,1.5vw,20px); }
@keyframes whitoo-game-activity-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (max-width:767.98px){
    body.incallx.lt-game-active .lt-game-hub-head { align-items: flex-start; }
    body.incallx.lt-game-active .lt-game-hub-head-actions { flex-direction: column; align-items: flex-end; gap: 5px; }
    body.incallx.lt-game-active .lt-game-hub-head b { min-height: 28px; font-size: 9px; }
    body.incallx.lt-game-active .lt-game-hub-toggle { min-height: 30px; padding: 0 9px; font-size: 10px; }
}
/* Game Room leave action 202606190003 */
body.incallx.lt-game-active .lt-game-leave {
    min-width: 128px;
    border: 1px solid rgba(251,113,133,.3);
    border-radius: 999px;
    color: #fecdd3;
    background: rgba(190,24,93,.14);
    box-shadow: none;
}
body.incallx.lt-game-active .lt-game-leave:hover {
    border-color: rgba(251,113,133,.52);
    color: #fff;
    background: rgba(225,29,72,.24);
}
@media (max-width:575.98px){
    body.incallx.lt-game-active .lt-game-leave { flex: 1; min-width: 0; }
}
/* Game Room membership-gated chat 202606190004 */
body.incallx.lt-game-active .lt-game-chat-locked {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(148,163,184,.14);
    color: #94a3b8;
    background: rgba(15,23,42,.62);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
}
body.incallx.lt-game-active .lt-game-chat-locked > i {
    flex: 0 0 auto;
    color: #fb7185;
    font-size: 17px;
}
/* Foreground overlays and direct server grouping 202606190005 */
body.incallx .toast-container {
    z-index: 2147483647 !important;
    pointer-events: none;
}
body.incallx .toast-container .toast { pointer-events: auto; }
body.incallx > .whitoo-toast-portal {
    position: fixed !important;
    z-index: 2147483647 !important;
    isolation: isolate;
    transform: none !important;
}
body.incallx .topbar:has(.lt-notification-dropdown .dropdown-menu.show) {
    position: relative !important;
    z-index: 2147483600 !important;
    overflow: visible !important;
}
body.incallx .lt-notification-dropdown,
body.incallx .lt-notification-dropdown .notifications-panel-card.show {
    z-index: 2147483601 !important;
}
body.incallx .dropdown-menu.show,
body.incallx .popover.show,
body.incallx .tooltip.show { z-index: 2147483500 !important; }
body.incallx .room-folder-menu { display: none !important; }
body.incallx .room-list-item[draggable="true"] { cursor: grab; }
body.incallx .room-list-item[draggable="true"]:active { cursor: grabbing; }
body.incallx .room-list-item[draggable="true"] .chatroom-item img { pointer-events: none; }

/* Whitoo Pulse 202606190010 */
body.incallx .whitoo-pulse-card {
    position: relative;
    display: grid;
    width: calc(100% - 20px);
    min-height: 72px;
    grid-template-columns: 42px minmax(0,1fr) auto 18px;
    gap: 9px;
    align-items: center;
    margin: 10px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(45,212,191,.18);
    border-radius: 16px;
    color: #e8f7ff;
    background: radial-gradient(circle at 0 0,rgba(45,212,191,.16),transparent 42%),linear-gradient(145deg,rgba(15,23,42,.96),rgba(8,14,28,.98));
    box-shadow: 0 14px 32px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.incallx .whitoo-pulse-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.045),transparent 70%); transform:translateX(-100%); transition:transform .55s ease; }
body.incallx .whitoo-pulse-card:hover { transform:translateY(-1px); border-color:rgba(45,212,191,.36); box-shadow:0 18px 38px rgba(0,0,0,.32),0 0 0 3px rgba(45,212,191,.06); }
body.incallx .whitoo-pulse-card:hover::before { transform:translateX(100%); }
body.incallx .whitoo-pulse-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(94,234,212,.26); border-radius:13px; color:#99f6e4; background:linear-gradient(145deg,rgba(20,184,166,.24),rgba(14,116,144,.14)); box-shadow:0 10px 22px rgba(13,148,136,.16); font-size:20px; }
body.incallx .whitoo-pulse-card-copy { min-width:0; }
body.incallx .whitoo-pulse-card-copy small,body.incallx .whitoo-pulse-card-copy strong,body.incallx .whitoo-pulse-card-copy em { display:block; }
body.incallx .whitoo-pulse-card-copy small { color:#5eead4; font-size:8px; font-weight:950; letter-spacing:.14em; }
body.incallx .whitoo-pulse-card-copy strong { margin-top:2px; color:#fff; font-size:13px; font-weight:950; }
body.incallx .whitoo-pulse-card-copy em { margin-top:2px; overflow:hidden; color:#8092aa; font-size:9px; font-style:normal; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
body.incallx .whitoo-pulse-card-count { display:grid; min-width:24px; height:24px; padding:0 6px; place-items:center; border:1px solid rgba(148,163,184,.14); border-radius:999px; color:#718096; background:rgba(15,23,42,.7); font-size:9px; font-weight:950; }
body.incallx .whitoo-pulse-card.has-news .whitoo-pulse-card-count { border-color:rgba(251,113,133,.28); color:#fff; background:linear-gradient(135deg,#f43f5e,#e11d48); box-shadow:0 7px 18px rgba(225,29,72,.28); }
body.incallx .whitoo-pulse-card-arrow { color:#526176; font-size:15px; transition:transform .18s ease,color .18s ease; }
body.incallx .whitoo-pulse-card:hover .whitoo-pulse-card-arrow { color:#5eead4; transform:translateX(2px); }

body.whitoo-pulse-open { overflow:hidden !important; }
body.incallx .whitoo-pulse-portal { position:fixed; inset:0; z-index:2147483400; visibility:hidden; pointer-events:none; }
body.incallx .whitoo-pulse-portal.is-open { visibility:visible; pointer-events:auto; }
body.incallx .whitoo-pulse-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; background:rgba(2,6,23,.7); backdrop-filter:blur(8px); transition:opacity .22s ease; }
body.incallx .whitoo-pulse-portal.is-open .whitoo-pulse-backdrop { opacity:1; }
body.incallx .whitoo-pulse-panel { position:absolute; top:10px; right:10px; bottom:10px; display:grid; width:min(560px,calc(100vw - 20px)); grid-template-rows:auto auto minmax(0,1fr); overflow:hidden; border:1px solid rgba(45,212,191,.2); border-radius:25px; color:#e5edf7; background:radial-gradient(circle at 100% 0,rgba(14,165,233,.12),transparent 28%),radial-gradient(circle at 0 0,rgba(20,184,166,.12),transparent 34%),#07101f; box-shadow:-28px 0 90px rgba(0,0,0,.52); opacity:0; transform:translateX(34px) scale(.985); transition:opacity .22s ease,transform .25s cubic-bezier(.2,.8,.2,1); }
body.incallx .whitoo-pulse-portal.is-open .whitoo-pulse-panel { opacity:1; transform:none; }
body.incallx .whitoo-pulse-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:19px 20px 15px; border-bottom:1px solid rgba(148,163,184,.1); }
body.incallx .whitoo-pulse-brand { display:flex; min-width:0; align-items:center; gap:12px; }
body.incallx .whitoo-pulse-brand>span { display:grid; width:43px; height:43px; flex:0 0 auto; place-items:center; border:1px solid rgba(94,234,212,.28); border-radius:14px; color:#99f6e4; background:linear-gradient(145deg,rgba(20,184,166,.24),rgba(14,116,144,.14)); font-size:21px; }
body.incallx .whitoo-pulse-brand small { display:block; color:#5eead4; font-size:8px; font-weight:950; letter-spacing:.17em; }
body.incallx .whitoo-pulse-brand h2 { margin:2px 0 0; color:#fff; font-size:20px; font-weight:950; letter-spacing:-.02em; }
body.incallx .whitoo-pulse-head-actions { display:flex; align-items:center; gap:8px; }
body.incallx .whitoo-pulse-mark-read { display:inline-flex; min-height:36px; align-items:center; gap:7px; padding:0 11px; border:1px solid rgba(45,212,191,.18); border-radius:11px; color:#99f6e4; background:rgba(20,184,166,.08); font-size:10px; font-weight:850; }
body.incallx .whitoo-pulse-mark-read:hover { border-color:rgba(45,212,191,.38); background:rgba(20,184,166,.15); }
body.incallx .whitoo-pulse-close { display:grid; width:36px; height:36px; padding:0; place-items:center; border:1px solid rgba(148,163,184,.13); border-radius:11px; color:#94a3b8; background:rgba(255,255,255,.035); font-size:18px; }
body.incallx .whitoo-pulse-close:hover { color:#fff; background:rgba(244,63,94,.13); }
body.incallx .whitoo-pulse-tabs { display:flex; gap:5px; padding:9px 13px; border-bottom:1px solid rgba(148,163,184,.09); background:rgba(2,6,23,.22); }
body.incallx .whitoo-pulse-tabs button { position:relative; display:inline-flex; min-height:36px; align-items:center; gap:7px; padding:0 12px; border:0; border-radius:10px; color:#718096; background:transparent; font-size:11px; font-weight:850; }
body.incallx .whitoo-pulse-tabs button:hover { color:#cbd5e1; background:rgba(148,163,184,.07); }
body.incallx .whitoo-pulse-tabs button.active { color:#ecfeff; background:rgba(20,184,166,.13); box-shadow:inset 0 0 0 1px rgba(45,212,191,.14); }
body.incallx .whitoo-pulse-tabs button b { display:grid; min-width:18px; height:18px; padding:0 5px; place-items:center; border-radius:999px; color:#fecdd3; background:rgba(244,63,94,.14); font-size:8px; }
body.incallx .whitoo-pulse-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:15px; transition:opacity .15s ease; }
body.incallx .whitoo-pulse-body.is-refreshing { opacity:.55; pointer-events:none; }
body.incallx .whitoo-pulse-view { display:none; }
body.incallx .whitoo-pulse-view.active { display:block; animation:whitoo-pulse-view-in .2s ease; }
@keyframes whitoo-pulse-view-in { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }
body.incallx .whitoo-pulse-loading { display:flex; min-height:360px; flex-direction:column; align-items:center; justify-content:center; color:#64748b; text-align:center; }
body.incallx .whitoo-pulse-loading i { color:#2dd4bf; font-size:29px; }
body.incallx .whitoo-pulse-loading strong { margin-top:14px; color:#dbeafe; font-size:14px; }
body.incallx .whitoo-pulse-loading span { margin-top:4px; font-size:11px; }
body.incallx .whitoo-pulse-hero { position:relative; display:flex; min-height:158px; align-items:center; justify-content:space-between; gap:20px; overflow:hidden; padding:22px; border:1px solid rgba(56,189,248,.17); border-radius:20px; background:radial-gradient(circle at 85% 20%,rgba(56,189,248,.22),transparent 30%),radial-gradient(circle at 0 100%,rgba(20,184,166,.17),transparent 38%),linear-gradient(145deg,#0f1b31,#0b1426); box-shadow:0 18px 38px rgba(0,0,0,.2); }
body.incallx .whitoo-pulse-hero>div { position:relative; z-index:1; max-width:360px; }
body.incallx .whitoo-pulse-hero span:not(.whitoo-pulse-orb) { color:#67e8f9; font-size:8px; font-weight:950; letter-spacing:.16em; }
body.incallx .whitoo-pulse-hero h3 { margin:6px 0 0; color:#fff; font-size:22px; font-weight:950; line-height:1.12; letter-spacing:-.025em; }
body.incallx .whitoo-pulse-hero p { margin:9px 0 0; color:#9fb0c6; font-size:11px; font-weight:650; line-height:1.55; }
body.incallx .whitoo-pulse-orb { display:grid; width:76px; height:76px; flex:0 0 auto; place-items:center; border:1px solid rgba(103,232,249,.25); border-radius:25px; color:#a5f3fc; background:linear-gradient(145deg,rgba(6,182,212,.28),rgba(20,184,166,.14)); box-shadow:0 20px 45px rgba(6,182,212,.16),inset 0 1px rgba(255,255,255,.12); font-size:34px; transform:rotate(5deg); }
body.incallx .whitoo-pulse-section { margin-top:15px; padding:15px; border:1px solid rgba(148,163,184,.1); border-radius:18px; background:rgba(15,23,42,.53); box-shadow:inset 0 1px rgba(255,255,255,.025); }
body.incallx .whitoo-pulse-section.is-first { margin-top:0; }
body.incallx .whitoo-pulse-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:11px; }
body.incallx .whitoo-pulse-section-title small { display:block; color:#2dd4bf; font-size:7px; font-weight:950; letter-spacing:.15em; }
body.incallx .whitoo-pulse-section-title h3 { margin:3px 0 0; color:#f8fafc; font-size:14px; font-weight:950; }
body.incallx .whitoo-pulse-section-title>span,body.incallx .whitoo-pulse-section-title>a,body.incallx .whitoo-pulse-section-title>button { padding:0; border:0; color:#718096; background:transparent; font-size:9px; font-weight:800; }
body.incallx .whitoo-pulse-section-title>a:hover,body.incallx .whitoo-pulse-section-title>button:hover { color:#5eead4; }
body.incallx .whitoo-pulse-topic-list,body.incallx .whitoo-pulse-message-list,body.incallx .whitoo-pulse-event-list { display:grid; gap:7px; }
body.incallx .whitoo-pulse-topic { display:grid; width:100%; grid-template-columns:38px minmax(0,1fr) auto 15px; gap:10px; align-items:center; padding:9px; border:1px solid rgba(148,163,184,.09); border-radius:13px; color:#e2e8f0; background:rgba(2,6,23,.28); text-align:left; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
body.incallx .whitoo-pulse-topic:hover { transform:translateX(2px); border-color:rgba(45,212,191,.24); background:rgba(20,184,166,.07); }
body.incallx .whitoo-pulse-topic-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#67e8f9; background:rgba(14,165,233,.11); font-size:17px; }
body.incallx .whitoo-pulse-topic strong,body.incallx .whitoo-pulse-topic small { display:block; }
body.incallx .whitoo-pulse-topic strong { overflow:hidden; color:#f8fafc; font-size:11px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
body.incallx .whitoo-pulse-topic small { margin-top:3px; color:#64748b; font-size:8px; font-weight:700; }
body.incallx .whitoo-pulse-topic>b { display:grid; min-width:23px; height:23px; padding:0 6px; place-items:center; border-radius:999px; color:#fecdd3; background:rgba(244,63,94,.13); font-size:8px; }
body.incallx .whitoo-pulse-topic>i { color:#475569; }
body.incallx .whitoo-pulse-message { display:grid; width:100%; grid-template-columns:36px minmax(0,1fr) 15px; gap:10px; align-items:start; padding:10px; border:1px solid rgba(148,163,184,.085); border-radius:13px; color:#dbeafe; background:rgba(2,6,23,.26); text-align:left; transition:border-color .15s ease,background .15s ease; }
body.incallx .whitoo-pulse-message:hover { border-color:rgba(56,189,248,.22); background:rgba(14,165,233,.055); }
body.incallx .whitoo-pulse-message>img { width:36px; height:36px; object-fit:cover; border:2px solid rgba(94,234,212,.18); border-radius:11px; background:#111827; }
body.incallx .whitoo-pulse-message-meta { display:flex; min-width:0; align-items:center; gap:6px; }
body.incallx .whitoo-pulse-message-meta strong { overflow:hidden; max-width:145px; color:#f8fafc; font-size:10px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
body.incallx .whitoo-pulse-message-meta em { color:#2dd4bf; font-size:8px; font-style:normal; font-weight:800; }
body.incallx .whitoo-pulse-message-meta time { margin-left:auto; color:#526176; font-size:8px; white-space:nowrap; }
body.incallx .whitoo-pulse-message p { display:-webkit-box; margin:4px 0 0; overflow:hidden; color:#9fb0c6; font-size:10px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
body.incallx .whitoo-pulse-message>i { margin-top:10px; color:#475569; }
body.incallx .whitoo-pulse-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
body.incallx .whitoo-pulse-stat-grid article { display:flex; min-height:112px; flex-direction:column; align-items:flex-start; justify-content:center; padding:14px; border:1px solid rgba(148,163,184,.1); border-radius:16px; background:linear-gradient(145deg,rgba(15,23,42,.78),rgba(2,6,23,.42)); }
body.incallx .whitoo-pulse-stat-grid i { color:#2dd4bf; font-size:20px; }
body.incallx .whitoo-pulse-stat-grid strong { margin-top:8px; color:#fff; font-size:22px; font-weight:950; }
body.incallx .whitoo-pulse-stat-grid span { margin-top:2px; color:#718096; font-size:8px; font-weight:750; }
body.incallx .whitoo-pulse-event { display:grid; grid-template-columns:38px minmax(0,1fr) 16px; gap:10px; align-items:center; padding:10px; border:1px solid rgba(148,163,184,.09); border-radius:13px; color:#e2e8f0; background:rgba(2,6,23,.25); }
body.incallx .whitoo-pulse-event>span { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#fbbf24; background:rgba(245,158,11,.1); font-size:17px; }
body.incallx .whitoo-pulse-event strong,body.incallx .whitoo-pulse-event small { display:block; }
body.incallx .whitoo-pulse-event strong { color:#f8fafc; font-size:10px; font-weight:900; }
body.incallx .whitoo-pulse-event small { margin-top:3px; color:#64748b; font-size:8px; }
body.incallx .whitoo-pulse-event>i { color:#526176; }
body.incallx .whitoo-pulse-empty { display:flex; min-height:120px; flex-direction:column; align-items:center; justify-content:center; padding:16px; border:1px dashed rgba(148,163,184,.13); border-radius:14px; color:#64748b; text-align:center; }
body.incallx .whitoo-pulse-empty.is-compact { min-height:85px; }
body.incallx .whitoo-pulse-empty>i { color:#2dd4bf; font-size:26px; }
body.incallx .whitoo-pulse-empty strong { margin-top:8px; color:#cbd5e1; font-size:11px; }
body.incallx .whitoo-pulse-empty span { margin-top:3px; font-size:9px; }
body.incallx .whitoo-pulse-error { display:flex; min-height:390px; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
body.incallx .whitoo-pulse-error>span { display:grid; width:58px; height:58px; place-items:center; border:1px solid rgba(251,113,133,.22); border-radius:18px; color:#fb7185; background:rgba(190,24,93,.11); font-size:25px; }
body.incallx .whitoo-pulse-error>strong { margin-top:14px; color:#f8fafc; font-size:15px; font-weight:950; }
body.incallx .whitoo-pulse-error>p { max-width:320px; margin:6px 0 0; color:#718096; font-size:10px; line-height:1.5; }
body.incallx .whitoo-pulse-error>button { display:inline-flex; min-height:38px; margin-top:15px; align-items:center; gap:7px; padding:0 14px; border:1px solid rgba(45,212,191,.24); border-radius:11px; color:#99f6e4; background:rgba(20,184,166,.1); font-size:10px; font-weight:850; }
body.incallx .whitoo-pulse-ai { margin-top:12px; padding:16px; border:1px solid rgba(167,139,250,.2); border-radius:18px; background:radial-gradient(circle at 100% 0,rgba(139,92,246,.16),transparent 35%),linear-gradient(145deg,rgba(30,27,75,.58),rgba(15,23,42,.72)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
body.incallx .whitoo-pulse-ai-head { display:flex; align-items:center; gap:10px; }
body.incallx .whitoo-pulse-ai-head>span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:12px; color:#ddd6fe; background:rgba(139,92,246,.18); font-size:18px; }
body.incallx .whitoo-pulse-ai-head>div { min-width:0; flex:1; }
body.incallx .whitoo-pulse-ai-head small,body.incallx .whitoo-pulse-ai-head strong { display:block; }
body.incallx .whitoo-pulse-ai-head small { color:#a78bfa; font-size:7px; font-weight:950; letter-spacing:.15em; }
body.incallx .whitoo-pulse-ai-head strong { margin-top:3px; color:#f5f3ff; font-size:13px; font-weight:950; }
body.incallx .whitoo-pulse-ai-head>i { color:#a78bfa; font-size:17px; }
body.incallx .whitoo-pulse-ai>p { margin:11px 0 0; color:#b8b9d2; font-size:10px; line-height:1.55; }
body.incallx .whitoo-pulse-ai-topics { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
body.incallx .whitoo-pulse-ai-topics b { padding:5px 8px; border:1px solid rgba(167,139,250,.16); border-radius:999px; color:#c4b5fd; background:rgba(139,92,246,.09); font-size:8px; }
body.incallx .whitoo-pulse-ai-columns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
body.incallx .whitoo-pulse-ai-columns>div { padding:10px; border:1px solid rgba(167,139,250,.1); border-radius:12px; background:rgba(2,6,23,.2); }
body.incallx .whitoo-pulse-ai-columns h4 { margin:0 0 7px; color:#ddd6fe; font-size:9px; font-weight:900; }
body.incallx .whitoo-pulse-ai-columns ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
body.incallx .whitoo-pulse-ai-columns li { display:flex; gap:6px; color:#9fa4bc; font-size:8px; line-height:1.45; }
body.incallx .whitoo-pulse-ai-columns li i { flex:0 0 auto; margin-top:1px; color:#a78bfa; }
body.incallx .whitoo-pulse-action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
body.incallx .whitoo-pulse-action-grid article { display:grid; min-height:78px; padding:10px; align-content:center; border:1px solid rgba(148,163,184,.09); border-radius:14px; background:rgba(15,23,42,.48); }
body.incallx .whitoo-pulse-action-grid i { color:#2dd4bf; font-size:15px; }
body.incallx .whitoo-pulse-action-grid strong { margin-top:5px; color:#f8fafc; font-size:16px; font-weight:950; }
body.incallx .whitoo-pulse-action-grid span { color:#64748b; font-size:7px; font-weight:750; }
body.incallx .whitoo-pulse-message { grid-template-columns:36px minmax(0,1fr) 31px; }
body.incallx .whitoo-pulse-message-main { display:block; min-width:0; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
body.incallx .whitoo-pulse-message-main p { display:-webkit-box; margin:4px 0 0; overflow:hidden; color:#9fb0c6; font-size:10px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
body.incallx .whitoo-pulse-save { display:grid; width:30px; height:30px; padding:0; place-items:center; border:1px solid rgba(148,163,184,.1); border-radius:9px; color:#526176; background:rgba(15,23,42,.52); }
body.incallx .whitoo-pulse-save:hover,body.incallx .whitoo-pulse-save.active { border-color:rgba(251,191,36,.25); color:#fbbf24; background:rgba(245,158,11,.1); }
body.incallx .whitoo-pulse-message-signals { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
body.incallx .whitoo-pulse-message-signals b { display:inline-flex; align-items:center; gap:3px; padding:3px 5px; border-radius:6px; color:#718096; background:rgba(148,163,184,.07); font-size:7px; font-weight:800; }
body.incallx .whitoo-pulse-message-signals b:first-child { color:#67e8f9; background:rgba(6,182,212,.09); }
body.incallx .whitoo-pulse-message-signals .is-decision { color:#c4b5fd; background:rgba(139,92,246,.1); }
body.incallx .whitoo-pulse-message-signals .is-announcement { color:#fbbf24; background:rgba(245,158,11,.1); }
body.incallx .whitoo-pulse-message-signals .is-action { color:#86efac; background:rgba(34,197,94,.09); }
body.incallx .whitoo-pulse-message-signals .is-question { color:#93c5fd; background:rgba(59,130,246,.09); }
body.incallx .whitoo-pulse-settings { display:grid; gap:9px; }
body.incallx .whitoo-pulse-settings>label { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:14px; align-items:center; padding:14px; border:1px solid rgba(148,163,184,.1); border-radius:15px; background:rgba(15,23,42,.5); }
body.incallx .whitoo-pulse-settings strong,body.incallx .whitoo-pulse-settings small { display:block; }
body.incallx .whitoo-pulse-settings strong { color:#f8fafc; font-size:11px; font-weight:900; }
body.incallx .whitoo-pulse-settings small { margin-top:3px; color:#64748b; font-size:8px; }
body.incallx .whitoo-pulse-settings select { height:38px; border:1px solid rgba(148,163,184,.14); border-radius:10px; color:#dbeafe; background:#0b1425; font-size:9px; font-weight:750; }
body.incallx .whitoo-pulse-settings .is-switch input { justify-self:end; width:42px; height:22px; accent-color:#14b8a6; }
body.incallx .whitoo-pulse-settings>button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(45,212,191,.28); border-radius:13px; color:#ecfeff; background:linear-gradient(135deg,rgba(20,184,166,.28),rgba(8,145,178,.2)); font-size:10px; font-weight:900; }
body.incallx .whitoo-pulse-topic { display:grid; grid-template-columns:minmax(0,1fr) 31px; gap:6px; }
body.incallx .whitoo-pulse-topic-main { display:grid; min-width:0; grid-template-columns:38px minmax(0,1fr) auto 15px; gap:10px; align-items:center; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
body.incallx .whitoo-pulse-follow { display:grid; width:30px; height:30px; padding:0; place-items:center; border:1px solid rgba(148,163,184,.1); border-radius:9px; color:#526176; background:rgba(15,23,42,.52); }
body.incallx .whitoo-pulse-follow:hover,body.incallx .whitoo-pulse-follow.active { border-color:rgba(45,212,191,.25); color:#5eead4; background:rgba(20,184,166,.1); }
body.incallx .whitoo-pulse-topic-main>b { display:grid; min-width:23px; height:23px; padding:0 6px; place-items:center; border-radius:999px; color:#fecdd3; background:rgba(244,63,94,.13); font-size:8px; }
body.incallx .whitoo-pulse-topic-main>i { color:#475569; }
body.incallx .whitoo-pulse-ask { display:grid; grid-template-columns:17px minmax(0,1fr) 32px; gap:7px; align-items:center; margin-top:12px; padding:6px 6px 6px 10px; border:1px solid rgba(167,139,250,.18); border-radius:12px; background:rgba(2,6,23,.32); }
body.incallx .whitoo-pulse-ask>i { color:#a78bfa; }
body.incallx .whitoo-pulse-ask input { min-width:0; border:0; outline:0; color:#f5f3ff; background:transparent; font-size:9px; }
body.incallx .whitoo-pulse-ask button { display:grid; width:32px; height:32px; padding:0; place-items:center; border:0; border-radius:9px; color:#fff; background:linear-gradient(135deg,#8b5cf6,#6366f1); }
body.incallx .whitoo-pulse-answer { display:none; margin-top:9px; padding:10px; border-left:2px solid #8b5cf6; border-radius:0 10px 10px 0; color:#c4c7db; background:rgba(2,6,23,.26); font-size:9px; line-height:1.55; white-space:pre-wrap; }
body.incallx .whitoo-pulse-answer:not(:empty) { display:block; }
body.incallx .whitoo-pulse-answer.is-loading { color:#a78bfa; }
body.incallx .whitoo-pulse-manager { display:flex; gap:11px; align-items:center; margin-bottom:10px; padding:13px; border:1px solid rgba(251,191,36,.18); border-radius:15px; background:linear-gradient(145deg,rgba(120,53,15,.16),rgba(15,23,42,.55)); }
body.incallx .whitoo-pulse-manager>span { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border-radius:12px; color:#fbbf24; background:rgba(245,158,11,.11); font-size:19px; }
body.incallx .whitoo-pulse-manager small,body.incallx .whitoo-pulse-manager strong { display:block; }
body.incallx .whitoo-pulse-manager small { color:#f59e0b; font-size:7px; font-weight:950; letter-spacing:.14em; }
body.incallx .whitoo-pulse-manager strong { margin-top:2px; color:#fef3c7; font-size:11px; }
body.incallx .whitoo-pulse-manager p { margin:3px 0 0; color:#927f65; font-size:8px; }

/* Stable chat layout when notices close 202606190013 */
body.incallx:not(.lt-game-active) #main-room .group-chat .main-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
body.incallx:not(.lt-game-active) #main-room .group-chat .main-panel > .alert,
body.incallx:not(.lt-game-active) #main-room .group-chat .main-panel > .room-notice,
body.incallx:not(.lt-game-active) #main-room .group-chat .main-panel > .ad-space,
body.incallx:not(.lt-game-active) #main-room .group-chat .room-editor {
    flex: 0 0 auto !important;
}
body.incallx:not(.lt-game-active) #main-room .group-chat .chat-scroll {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}
body.incallx #main-room .group-chat .room-notice:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Workspace must fully cover chat controls 202606190014 */
body.incallx .woo-chat-workspace {
    z-index: 2147483550 !important;
}
body.incallx.woo-chat-workspace-open #main-room .room-editor,
body.incallx.woo-chat-workspace-open #main-private .private-editor,
body.incallx.woo-chat-workspace-open .whitoo-attach-portal,
body.incallx.woo-chat-workspace-open .whitoo-attach-backdrop,
body.incallx.woo-chat-workspace-open .attachments-container,
body.incallx.woo-chat-workspace-open .gse-container {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.incallx.woo-chat-workspace-open .woo-chat-workspace,
body.incallx.woo-chat-workspace-open .woo-chat-workspace * {
    visibility: visible;
    pointer-events: auto;
}
@media (max-width:575.98px){body.incallx .whitoo-pulse-ai-columns{grid-template-columns:1fr}body.incallx .whitoo-pulse-action-grid{grid-template-columns:1fr 1fr}body.incallx .whitoo-pulse-settings>label{grid-template-columns:1fr}body.incallx .whitoo-pulse-settings .is-switch input{justify-self:start}}
@media (max-width:767.98px){
    body.incallx .whitoo-pulse-panel { inset:0; width:100%; border:0; border-radius:0; }
    body.incallx .whitoo-pulse-head { padding:14px; }
    body.incallx .whitoo-pulse-brand h2 { font-size:18px; }
    body.incallx .whitoo-pulse-mark-read span { display:none; }
    body.incallx .whitoo-pulse-tabs { overflow-x:auto; padding:8px; }
    body.incallx .whitoo-pulse-tabs button { flex:1; justify-content:center; padding:0 8px; }
    body.incallx .whitoo-pulse-body { padding:10px; }
    body.incallx .whitoo-pulse-hero { min-height:145px; padding:18px; }
    body.incallx .whitoo-pulse-hero h3 { font-size:19px; }
    body.incallx .whitoo-pulse-orb { width:60px; height:60px; border-radius:20px; font-size:27px; }
    body.incallx .whitoo-pulse-stat-grid { grid-template-columns:1fr 1fr; }
    body.incallx .whitoo-pulse-stat-grid article:last-child { grid-column:1/-1; min-height:86px; }
}

/* Modern complete category panel 2026062002 */
body.incallx .whitoo-explore-v2 .whitoo-explore-category-deck{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin:0 0 18px!important;padding:18px!important;overflow:visible!important;border:1px solid rgba(103,232,218,.18)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(13,25,43,.98),rgba(8,16,29,.98))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 38px rgba(0,0,0,.18)!important
}
body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 14px!important;padding:0 2px 13px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy span{font-size:11px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy strong{margin:0!important;color:#afbdd0!important;font-size:12px!important;font-weight:500!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chips{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;gap:9px!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;min-height:0!important;padding:0!important;overflow:visible!important;scrollbar-width:none!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip{display:block!important;width:100%!important;min-width:0!important;margin:0!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span{width:100%!important;min-width:0!important;min-height:48px!important;height:auto!important;justify-content:flex-start!important;gap:10px!important;padding:7px 11px!important;overflow:hidden!important;border:1px solid rgba(143,163,190,.13)!important;border-radius:13px!important;background:linear-gradient(145deg,rgba(18,31,51,.96),rgba(13,23,39,.96))!important;color:#c6d2e3!important;font-size:11px!important;font-weight:600!important;line-height:1.25!important;white-space:normal!important;text-overflow:ellipsis!important;box-shadow:none!important;transform:none!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span i{width:32px!important;height:32px!important;min-width:32px!important;border:1px solid rgba(103,232,218,.13)!important;border-radius:10px!important;background:rgba(36,210,193,.08)!important;color:#65e8dd!important;font-size:15px!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip:hover span{border-color:rgba(103,232,218,.34)!important;background:linear-gradient(145deg,rgba(20,42,60,.98),rgba(13,28,44,.98))!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 9px 20px rgba(0,0,0,.18)!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip input:checked+span{border-color:rgba(255,76,109,.55)!important;background:linear-gradient(135deg,#f04467,#ff6b77)!important;color:#fff!important;box-shadow:0 9px 24px rgba(240,68,103,.22)!important;transform:none!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip input:checked+span i{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.15)!important;color:#fff!important}
@media(max-width:767.98px){body.incallx .whitoo-explore-v2 .whitoo-explore-category-deck{padding:13px!important;border-radius:16px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy{align-items:flex-start!important;flex-direction:column!important;gap:4px!important;margin-bottom:10px!important;padding-bottom:10px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-category-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span{min-height:44px!important;padding:6px 8px!important;font-size:10px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span i{width:28px!important;height:28px!important;min-width:28px!important}}
@media(max-width:380px){body.incallx .whitoo-explore-v2 .whitoo-explore-category-chips{grid-template-columns:1fr!important}}

/* Explore category strip: compact, single-row and scrollable like the homepage. */
body.incallx .whitoo-explore-v2 .whitoo-explore-category-deck{display:grid!important;grid-template-columns:145px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;min-height:66px!important;margin:0 0 14px!important;padding:8px!important;border-radius:17px!important;overflow:hidden!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy{min-width:0!important;padding:0 10px!important;border-right:1px solid rgba(255,255,255,.07)!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy strong{display:none!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) 34px!important;align-items:center!important;gap:6px!important;min-width:0!important;width:100%!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chips{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;align-items:center!important;gap:7px!important;width:100%!important;height:44px!important;max-height:44px!important;padding:1px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-behavior:smooth!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chips::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip{display:block!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;scroll-snap-align:start!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span{display:flex!important;width:auto!important;min-width:max-content!important;max-width:230px!important;height:40px!important;min-height:40px!important;padding:0 11px 0 7px!important;border-radius:11px!important;gap:7px!important;font-size:10px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-chip span i{width:27px!important;height:27px!important;min-width:27px!important;border-radius:8px!important;font-size:13px!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-arrow{display:grid!important;place-items:center!important;width:34px!important;height:40px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,83,115,.2)!important;border-radius:10px!important;background:#101a2c!important;color:#aebed2!important;cursor:pointer!important}
body.incallx .whitoo-explore-v2 .whitoo-explore-category-arrow:hover{border-color:rgba(103,232,218,.4)!important;background:#15243a!important;color:#69e9df!important}
@media(max-width:767.98px){body.incallx .whitoo-explore-v2 .whitoo-explore-category-deck{grid-template-columns:1fr!important;min-height:56px!important;padding:7px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-section-copy{display:none!important}body.incallx .whitoo-explore-v2 .whitoo-explore-category-row{grid-template-columns:32px minmax(0,1fr) 32px!important;gap:4px!important}body.incallx .whitoo-explore-v2 .whitoo-explore-category-arrow{width:32px!important;height:38px!important}}
.whitoo-room-invite-toggle .whitoo-invite-kind-icon,.whitoo-channel-invite-toggle .whitoo-invite-kind-icon{width:28px!important;height:28px!important;min-width:28px;display:inline-grid!important;place-items:center;border:1px solid rgba(45,212,191,.22);border-radius:9px;background:rgba(45,212,191,.1);color:#5eead4!important;font-size:16px}.whitoo-channel-invite-toggle .whitoo-invite-kind-icon{border-color:rgba(96,165,250,.24);background:rgba(59,130,246,.11);color:#93c5fd!important}.whitoo-room-invite-toggle span,.whitoo-channel-invite-toggle span{display:inline-block;vertical-align:middle}
.whitoo-room-invite-toggle .whitoo-invite-kind-icon,.whitoo-channel-invite-toggle .whitoo-invite-kind-icon{width:20px!important;height:20px!important;min-width:20px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fb526b!important;font-size:17px!important}.whitoo-channel-invite-toggle{display:flex!important;align-items:center!important;gap:8px!important}.whitoo-channel-invite-toggle .whitoo-channel-invite-label{margin:0!important;line-height:20px!important}.whitoo-room-invite-toggle{gap:10px!important}

/* Composer must never bleed through dialogs or inactive workspaces */
body.incallx.modal-open .room-editor,body.incallx.modal-open .private-editor,body.incallx:has(.modal.show) .room-editor,body.incallx:has(.modal.show) .private-editor{visibility:hidden!important;opacity:0!important;pointer-events:none!important}.tab-pane:not(.active) .room-editor,.tab-pane:not(.active) .private-editor{display:none!important}

/* Professional server-setting controls */
body.incallx .lt-next-room-form .divide-y{gap:10px!important}body.incallx .lt-next-room-form .divide-y>div{padding:0!important;overflow:hidden;border-color:rgba(148,163,184,.13)!important;background:linear-gradient(145deg,rgba(10,18,32,.82),rgba(5,10,20,.72))!important;transition:border-color .18s ease,background .18s ease,transform .18s ease}body.incallx .lt-next-room-form .divide-y>div:hover{border-color:rgba(32,224,196,.28)!important;background:linear-gradient(145deg,rgba(12,24,38,.9),rgba(6,12,23,.82))!important}body.incallx .lt-next-room-form .divide-y>div>label.row,body.incallx .lt-next-room-form #room-manage-adv>.row>label.row{display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;align-items:center!important;gap:14px!important;min-height:72px!important;width:100%!important;margin:0!important;padding:13px 14px!important;cursor:pointer}body.incallx .lt-next-room-form .divide-y label.row>[class*="col-"],body.incallx .lt-next-room-form #room-manage-adv>.row>label.row>[class*="col-"]{width:auto!important;max-width:none!important;min-width:0!important;padding:0!important;margin:0!important;flex:none!important}body.incallx .lt-next-room-form .divide-y label.row>.col-4,body.incallx .lt-next-room-form #room-manage-adv>.row>label.row>.col-4{grid-column:1}body.incallx .lt-next-room-form .divide-y label.row>.col-auto,body.incallx .lt-next-room-form #room-manage-adv>.row>label.row>.col-auto{grid-column:2;justify-self:end}body.incallx .lt-next-room-form .divide-y .form-label,body.incallx .lt-next-room-form #room-manage-adv>.row>label.row .form-label{margin:0 0 4px!important;color:#f5f9ff!important;font-size:12px!important;font-weight:900!important}body.incallx .lt-next-room-form .divide-y .lt-form-note{display:block!important;margin:0!important;color:rgba(203,213,225,.6)!important;font-size:10px!important;line-height:1.4!important}body.incallx .lt-next-room-form .form-switch{display:block!important;width:44px!important;height:24px!important;min-height:24px!important;margin:0!important;padding:0!important}body.incallx .lt-next-room-form .form-switch .form-check-input{position:relative!important;width:44px!important;height:24px!important;margin:0!important;float:none!important;cursor:pointer!important;border:1px solid rgba(148,163,184,.3)!important;border-radius:999px!important;background-color:#111c2e!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;transition:.2s ease!important}body.incallx .lt-next-room-form .form-switch .form-check-input:checked{border-color:#20e0c4!important;background-color:#20e0c4!important;box-shadow:0 0 0 3px rgba(32,224,196,.1),0 7px 18px rgba(32,224,196,.18)!important}body.incallx .lt-next-room-form .form-switch .form-check-input:disabled{cursor:not-allowed!important;opacity:.42!important;filter:saturate(.25)}body.incallx .lt-next-room-form .form-switch .slider{display:none!important}body.incallx .lt-next-room-form .lt-setting-warning{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:5px 7px;border:1px solid rgba(251,191,36,.18);border-radius:8px;background:rgba(251,191,36,.07);color:#fcd98d;font-size:9px;font-weight:750}body.incallx .lt-next-room-form .user-list-auth-roles>.col-md>.row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}body.incallx .lt-next-room-form .user-list-auth-roles .col-6{display:grid!important;width:auto!important;gap:8px!important;padding:0!important}body.incallx .lt-next-room-form .user-list-auth-roles label.form-switch{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:100%!important;height:auto!important;min-height:48px!important;padding:10px!important;border:1px solid rgba(148,163,184,.12);border-radius:11px;background:rgba(3,8,18,.42)}body.incallx .lt-next-room-form .user-list-auth-roles .form-check-label{color:rgba(236,242,250,.8)!important;font-size:11px!important;font-weight:800!important}body.incallx .lt-next-room-form .pin-area.text-end{grid-column:1!important;justify-self:start!important;width:auto!important;max-width:none!important}body.incallx .lt-next-room-form .pin-area:not(.text-end){grid-column:1/-1!important;width:100%!important;max-width:none!important}body.incallx .lt-next-room-form .pin-area #pin{width:100%!important}body.incallx .lt-next-room-form .card-footer .btn,body.incallx .chat-room-update-area .card-footer .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:38px!important;padding:0 14px!important;border-radius:11px!important}
@media(max-width:575.98px){body.incallx .lt-next-room-form .divide-y>div>label.row,body.incallx .lt-next-room-form #room-manage-adv>.row>label.row{min-height:66px!important;padding:11px 12px!important;gap:10px!important}body.incallx .lt-next-room-form .user-list-auth-roles>.col-md>.row{grid-template-columns:1fr!important}body.incallx .lt-next-room-form .card-footer,body.incallx .chat-room-update-area .card-footer{display:grid!important;grid-template-columns:1fr!important}body.incallx .lt-next-room-form .card-footer .btn,body.incallx .chat-room-update-area .card-footer .btn{width:100%!important}}

/* Official server verification */
body.incallx .room-verification-panel{padding:20px;border:1px solid rgba(255,52,76,.24);border-radius:18px;background:radial-gradient(circle at 92% 0,rgba(255,35,67,.13),transparent 34%),linear-gradient(145deg,rgba(13,19,30,.98),rgba(7,12,21,.96));box-shadow:0 18px 48px rgba(0,0,0,.2)}
body.incallx .room-verification-head{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center}
body.incallx .room-verification-mark{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,68,88,.6);border-radius:16px;background:linear-gradient(145deg,#ef233c,#8d1021);color:#fff;box-shadow:0 10px 26px rgba(239,35,60,.22)}
body.incallx .room-verification-mark i{font-size:26px}body.incallx .room-verification-kicker{color:#ff465d;font-size:9px;font-weight:900;letter-spacing:.14em}
body.incallx .room-verification-head h2{margin:2px 0 3px!important;color:#fff!important;font-size:18px!important}body.incallx .room-verification-head p{margin:0;color:rgba(213,222,234,.68);font-size:11px;line-height:1.5}
body.incallx .room-verification-status{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid rgba(148,163,184,.18);border-radius:999px;color:#aeb8c7;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
body.incallx .room-verification-status.is-approved{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.1);color:#74e99a}body.incallx .room-verification-status.is-pending{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.1);color:#ffd879}body.incallx .room-verification-status.is-rejected{border-color:rgba(255,58,82,.35);background:rgba(255,58,82,.1);color:#ff8293}
body.incallx .room-verification-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}body.incallx .room-verification-rules span{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid rgba(148,163,184,.12);border-radius:11px;background:rgba(3,8,18,.38);color:#cbd5e1;font-size:10px;font-weight:750}body.incallx .room-verification-rules i{color:#ff3c55;font-size:16px}
body.incallx .room-verification-form{display:grid;gap:12px}body.incallx .room-verification-form label{display:grid;gap:6px}body.incallx .room-verification-form label>span{color:#eff4fb;font-size:11px;font-weight:850}body.incallx .room-verification-form .form-control{border-color:rgba(148,163,184,.18)!important;border-radius:11px!important;background:#080e19!important;color:#edf3fa!important;font-size:11px!important}
body.incallx .room-verification-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}body.incallx .room-verification-consent{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:9px!important;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:11px;background:rgba(255,255,255,.025);cursor:pointer}body.incallx .room-verification-consent input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:#ef233c}body.incallx .room-verification-consent span{color:rgba(213,222,234,.76)!important;font-size:10px!important;line-height:1.5}
body.incallx .room-verification-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:6px;border-bottom:1px solid rgba(148,163,184,.14)}body.incallx .room-verification-steps button{display:flex;align-items:center;gap:8px;padding:11px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:rgba(203,213,225,.52);font-size:10px;font-weight:850;text-align:left}body.incallx .room-verification-steps b{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#101a2a;color:#7f8b9b}body.incallx .room-verification-steps button.is-active{border-color:#ff304b;color:#fff}body.incallx .room-verification-steps button.is-active b{background:linear-gradient(145deg,#f12642,#a30f23);color:#fff;box-shadow:0 7px 16px rgba(239,35,60,.24)}body.incallx .room-verification-steps button.is-complete{color:#9ff5e9}body.incallx .room-verification-steps button.is-complete b{background:#0e524b;color:#b9fff7}
body.incallx .room-verification-step-page{display:none;gap:13px}body.incallx .room-verification-step-page.is-active{display:grid}body.incallx .room-verification-section-title{display:flex;align-items:center;gap:11px;margin:2px 0 4px}body.incallx .room-verification-section-title>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,55,80,.35);border-radius:12px;background:rgba(239,35,60,.1);color:#ff4a62}body.incallx .room-verification-section-title>span i{font-size:20px}body.incallx .room-verification-section-title>div{display:grid;gap:1px}body.incallx .room-verification-section-title small{color:#ff5268;font-size:8px;font-weight:900;letter-spacing:.12em}body.incallx .room-verification-section-title strong{color:#fff;font-size:14px;font-weight:900}
body.incallx .room-verification-proof-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}body.incallx .room-verification-proof-types button{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px;border:1px solid rgba(148,163,184,.15);border-radius:11px;background:rgba(3,8,18,.42);color:#cbd5e1;font-size:10px}body.incallx .room-verification-proof-types button i{color:#ff4259;font-size:17px}body.incallx .room-verification-proof-types button.is-active{border-color:rgba(255,57,81,.55);background:rgba(239,35,60,.1);color:#fff}
body.incallx .room-verification-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}body.incallx .room-verification-review span{display:flex;align-items:center;gap:7px;padding:11px;border:1px solid rgba(42,210,184,.18);border-radius:10px;background:rgba(42,210,184,.06);color:#c8fff7;font-size:10px;font-weight:800}body.incallx .room-verification-review i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#159584;color:#fff}
body.incallx .room-verification-wizard-actions{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid rgba(148,163,184,.12)}body.incallx .room-verification-wizard-actions>span{flex:1}body.incallx .room-verification-draft,body.incallx .room-verification-prev,body.incallx .room-verification-next{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid rgba(148,163,184,.18);border-radius:10px;background:#0a1220;color:#dce5ef;font-size:10px;font-weight:850}body.incallx .room-verification-next{border-color:#ff3f56;background:linear-gradient(135deg,#e7203a,#991022);color:#fff}body.incallx .room-verification-wizard-actions button:disabled{opacity:.38}
body.incallx .room-verification-note,body.incallx .room-verification-approved{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:12px;background:rgba(255,255,255,.025);color:#cbd5e1;font-size:11px}body.incallx .room-verification-approved i{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e9213b;color:#fff}body.incallx .room-verification-approved div{display:grid;gap:3px}body.incallx .room-verification-approved strong{color:#fff}body.incallx .room-verification-approved span{color:#9eabba}
body.incallx .room-verification-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:end;min-height:40px;padding:0 16px;border:1px solid #ff4058;border-radius:11px;background:linear-gradient(135deg,#ec1f38,#a91025);color:#fff;font-size:11px;font-weight:900;box-shadow:0 10px 26px rgba(239,35,60,.18)}body.incallx .room-verification-submit:disabled{opacity:.65}
@media(max-width:700px){body.incallx .room-verification-panel{padding:14px}body.incallx .room-verification-head{grid-template-columns:46px minmax(0,1fr)}body.incallx .room-verification-mark{width:46px;height:46px}body.incallx .room-verification-status{grid-column:1/-1;justify-self:start}body.incallx .room-verification-rules,body.incallx .room-verification-field-grid,body.incallx .room-verification-proof-types,body.incallx .room-verification-review{grid-template-columns:1fr}body.incallx .room-verification-steps{grid-template-columns:repeat(2,minmax(0,1fr))}body.incallx .room-verification-wizard-actions{flex-wrap:wrap}body.incallx .room-verification-wizard-actions>span{display:none}body.incallx .room-verification-submit,body.incallx .room-verification-draft{width:100%}}

/* Woo room badge - rendered after dynamic room cards load */
body.incallx #chat-room-loop .room-owner-meta{position:relative!important;display:flex!important;align-items:center!important;padding-right:70px!important;overflow:visible!important}
body.incallx #chat-room-loop .woo-server-member-badge{position:absolute!important;right:4px!important;top:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;width:60px!important;height:21px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;transform:translateY(-50%)!important;z-index:20!important}
body.incallx #chat-room-loop .woo-server-member-badge img{display:block!important;width:60px!important;height:21px!important;max-width:none!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}
/* Professional channel category management */
.whitoo-room-menu .whitoo-room-menu-divider{padding:0 10px}.whitoo-room-menu .whitoo-room-menu-divider hr{margin:5px 0;border-color:rgba(148,163,184,.14)}
.whitoo-category-modal .modal-content{overflow:hidden;border:1px solid rgba(45,212,191,.2);border-radius:20px;background:linear-gradient(155deg,#0b1220 0%,#111a2d 100%);box-shadow:0 28px 90px rgba(0,0,0,.58)}
.whitoo-category-modal .modal-header{padding:20px 22px;border-bottom:1px solid rgba(148,163,184,.12);background:linear-gradient(100deg,rgba(244,63,94,.09),rgba(34,211,238,.08))}
.whitoo-category-modal-heading{display:flex;align-items:center;gap:13px}.whitoo-category-modal-heading h5{margin:0;color:#f8fafc;font-size:17px}.whitoo-category-modal-heading small{display:block;margin-top:3px;color:#94a3b8;font-size:12px}
.whitoo-category-modal-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(45,212,191,.3);border-radius:13px;color:#2dd4bf;background:rgba(13,148,136,.13);font-size:21px}
.whitoo-category-modal .modal-body{padding:22px}.whitoo-category-modal .form-label{color:#e2e8f0;font-weight:750}.whitoo-category-modal .form-control{min-height:46px;border-color:rgba(148,163,184,.18);border-radius:12px;color:#f8fafc;background:#090f1d}.whitoo-category-modal .form-control:focus{border-color:#2dd4bf;box-shadow:0 0 0 3px rgba(45,212,191,.1)}
.whitoo-category-modal .modal-footer{gap:8px;padding:15px 22px;border-top:1px solid rgba(148,163,184,.12)}
.channel-cat-actions>span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;transition:.18s ease}.channel-cat-actions>span:hover{color:#2dd4bf;background:rgba(45,212,191,.12);transform:translateY(-1px)}
@media(max-width:575.98px){.whitoo-category-modal .modal-dialog{margin:12px}.whitoo-category-modal .modal-footer{display:grid;grid-template-columns:1fr 1fr}.whitoo-category-modal .delete-channel-category{grid-column:1/-1;order:3}.whitoo-category-modal .modal-footer .btn{margin:0!important}}

/* Game room + voice sidebar hard layout fix 20260623 */
body.incallx .sidebar-room{display:flex!important;flex-direction:column!important;height:calc((var(--vh,1vh)*100) - 48px)!important;max-height:calc((var(--vh,1vh)*100) - 48px)!important;overflow:hidden!important}
body.incallx .sidebar-room .topbar-channels,body.incallx .sidebar-room .voice-channel-container,body.incallx .sidebar-room .lt-account-dock{flex:0 0 auto!important}
body.incallx .sidebar-room .channel-container{flex:1 1 0!important;height:auto!important;max-height:none!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:12px!important}
body.incallx .sidebar-room .voice-channel-container{width:100%!important;min-height:70px!important;height:auto!important;padding:9px 10px!important;border-top:1px solid rgba(32,224,196,.18)!important;border-bottom:1px solid rgba(255,255,255,.06)!important;background:radial-gradient(circle at 12% 20%,rgba(32,224,196,.18),transparent 34%),linear-gradient(135deg,rgba(8,14,28,.96),rgba(10,19,34,.98))!important}
body.incallx .sidebar-room .voice-channel-info{min-width:0!important}
body.incallx .sidebar-room .voice-name{width:auto!important;max-width:124px!important}
body.incallx .sidebar-room{position:relative!important;padding-bottom:62px!important}
body.incallx .sidebar-room .topbar-channels{position:absolute!important;inset:0 0 auto 0!important;height:58px!important}
body.incallx .sidebar-room .channel-container{position:absolute!important;inset:58px 0 62px 0!important;margin-top:0!important;width:100%!important}
body.incallx.in-voice .sidebar-room .channel-container,body.voice-active.incallx .sidebar-room .channel-container{bottom:132px!important}
body.incallx .sidebar-room .voice-channel-container{position:absolute!important;left:0!important;right:0!important;bottom:62px!important;z-index:45!important}
body.incallx .sidebar-room .lt-account-dock.channel-list-bottom{position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:50!important}
body.incallx.voice-active .sidebar-height-fix,body.incallx.voice-active .sidebar-height-fix-mt48{height:auto!important}
body.incallx.lt-game-active .chat-scroll,body.incallx.lt-game-active .group-chat,body.incallx.lt-game-active .chat-content{overflow:hidden!important}
body.incallx.lt-game-active .chats{height:100%!important;min-height:0!important;overflow:hidden!important}
body.incallx.lt-game-active .lt-game-room-shell{width:min(100% - 18px,1360px)!important;height:calc((var(--vh,1vh)*100) - 132px)!important;min-height:520px!important;margin:8px auto!important;padding:16px 18px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;border:1px solid rgba(32,224,196,.22)!important;border-radius:18px!important;background:radial-gradient(circle at 12% 4%,rgba(255,51,71,.16),transparent 34%),radial-gradient(circle at 88% 12%,rgba(32,224,196,.14),transparent 34%),rgba(6,10,20,.94)!important;box-shadow:0 24px 74px rgba(0,0,0,.34)!important}
body.incallx.lt-game-active .lt-game-layout{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
body.incallx.lt-game-active .lt-game-main{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:8px!important}
body.incallx.lt-game-active .lt-game-chat-panel{min-height:0!important;height:100%!important;max-height:none!important;overflow:hidden!important}
body.incallx.lt-game-active .lt-game-chat-list{min-height:0!important;overflow-y:auto!important}
body.incallx.lt-game-active .lt-game-actions{margin-top:auto!important;padding-top:14px!important}
body.incallx.lt-game-active .lt-game-room-shell::-webkit-scrollbar,body.incallx.lt-game-active .chats::-webkit-scrollbar{width:0!important;height:0!important}
@media(max-width:991.98px){body.incallx.lt-game-active .lt-game-room-shell{height:auto!important;min-height:calc((var(--vh,1vh)*100) - 112px)!important;overflow-y:auto!important}body.incallx.lt-game-active .lt-game-layout{overflow:visible!important}body.incallx.lt-game-active .lt-game-chat-panel{min-height:280px!important}}

/* Channel options dropdown (mute/invite/edit) must paint above sibling channel rows below it, not behind them.
   Scoped with :has() to ONLY the row whose menu is open, so we don't force position/stacking-context on every
   channel row (that blanket change fought the theme's backdrop-filter blur and hazed the whole list) (2026070102) */
.channel-item:has(> .channel-actions .dropdown-menu.show){position:relative!important;z-index:2147483000!important}
.channel-actions .dropdown-menu.show{position:absolute!important;opacity:1!important}

/* Theme motion: spark/aurora/wave had no real visual effect before (enum existed, CSS didn't) -
   add a real flowing accent-color gradient on server/channel/category names, mirrored 1:1 on mobile (2026070105) */
body.woo-room-themed[data-wts-motion=spark] .room-name .btn,
body.woo-room-themed[data-wts-motion=aurora] .room-name .btn,
body.woo-room-themed[data-wts-motion=wave] .room-name .btn,
body.woo-room-themed[data-wts-motion=spark] .channel-name,
body.woo-room-themed[data-wts-motion=aurora] .channel-name,
body.woo-room-themed[data-wts-motion=wave] .channel-name,
body.woo-room-themed[data-wts-motion=spark] .cat-name,
body.woo-room-themed[data-wts-motion=aurora] .cat-name,
body.woo-room-themed[data-wts-motion=wave] .cat-name{background-image:linear-gradient(90deg,var(--wts-accent),var(--wts-accent2),var(--wts-accent))!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;animation:wtsFlow 2.6s linear infinite!important}
@keyframes wtsFlow{to{background-position:-200% center}}
body.woo-room-themed[data-wts-motion=calm] .room-name .btn,
body.woo-room-themed[data-wts-motion=calm] .channel-name,
body.woo-room-themed[data-wts-motion=calm] .cat-name{background-image:linear-gradient(90deg,var(--wts-accent),var(--wts-accent2),var(--wts-accent))!important;background-size:200% auto!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;animation:wtsFlow 5.5s linear infinite!important}

/* Premium video/voice call panel redesign (2026070302) */
.video-call-container{border:1px solid rgba(230,18,43,.28)!important;border-radius:24px!important;background:linear-gradient(160deg,rgba(28,10,16,.97),rgba(10,10,14,.97))!important;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03),0 0 60px rgba(230,18,43,.12)!important;backdrop-filter:blur(18px)!important;padding:14px!important;overflow:hidden!important}
.video-call-container .call-msg{color:#fff!important;font-weight:800!important;font-size:13px!important;letter-spacing:.2px;padding:2px 6px 10px!important}
.video-call-container #media-div{gap:10px!important;border-radius:16px!important;overflow:hidden}
.video-call-container .local-video,.video-call-container [id^="remote-player"],.video-call-container .remote-video{border-radius:16px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;background:#0a0a10!important;box-shadow:0 10px 26px rgba(0,0,0,.45)!important}
.video-call-container .video-caller-name{top:8px!important;left:8px!important;padding:3px 10px!important;border-radius:999px!important;background:rgba(0,0,0,.55)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;font-size:10.5px!important;font-weight:700!important;backdrop-filter:blur(8px)}
.video-call-container .call-controllers{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin-top:12px!important;padding:8px!important;border-radius:999px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.07)!important;width:max-content;margin-left:auto;margin-right:auto}
.video-call-container .call-controll{width:44px!important;height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.08)!important;color:#e8ecf3!important;transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important}
.video-call-container .call-controll:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.16)!important}
.video-call-container .call-controll.hangup{background:linear-gradient(135deg,#ff3b52,#b10e22)!important;border-color:rgba(255,59,82,.55)!important;color:#fff!important;box-shadow:0 8px 22px rgba(230,18,43,.45)!important}
.video-call-container .call-controll.hangup:hover{box-shadow:0 12px 28px rgba(230,18,43,.6)!important}
.video-call-container .call-controll.call-toggle-cam,.video-call-container .call-controll.call-toggle-mic,.video-call-container .call-controll.call-toggle-screen{background:rgba(230,18,43,.16)!important;border-color:rgba(230,18,43,.35)!important;color:#ff98a5!important}
.video-call-container .call-controll.call-toggle-screen{background:rgba(32,224,196,.14)!important;border-color:rgba(32,224,196,.4)!important;color:#5df0dd!important}
.video-call-container .call-controll.call-size-preset,.video-call-container .call-controll.call-toggle-fc{background:rgba(255,255,255,.06)!important;color:#aeb6c4!important}
.video-call-container .call-controll.call-toggle-fc{background:rgba(46,213,115,.15)!important;border-color:rgba(46,213,115,.4)!important;color:#7bf0a8!important}
.video-call-container .call-controll i{font-size:19px!important}

/* ==== Manage Rooms paneli: "Baglanti ile katil" karti (acilir/kapanir) ==== */
.sidebar-manage .wjoin{margin-top:10px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(8,14,28,.52);overflow:hidden}
.sidebar-manage .wjoin.is-open{border-color:rgba(56,189,248,.34);background:rgba(8,16,32,.72)}
.sidebar-manage .wjoin-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;background:transparent;color:#f8fbff;text-align:left;cursor:pointer;transition:background .18s ease}
.sidebar-manage .wjoin-toggle:hover{background:rgba(56,189,248,.06)}
.sidebar-manage .wjoin-ico{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(56,189,248,.22);border-radius:11px;background:rgba(56,189,248,.10);color:#7dd3fc;font-size:17px}
.sidebar-manage .wjoin.is-open .wjoin-ico{border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.18);color:#bae6fd}
.sidebar-manage .wjoin-txt{min-width:0;flex:1 1 auto}
.sidebar-manage .wjoin-txt span{display:block;color:rgba(125,211,252,.85);font-size:9px;font-weight:950;letter-spacing:.4px;text-transform:uppercase}
.sidebar-manage .wjoin-txt strong{display:block;margin-top:2px;color:#fff;font-size:13px;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-manage .wjoin-caret{flex:0 0 auto;color:rgba(203,213,225,.55);font-size:16px;transition:transform .2s ease,color .2s ease}
.sidebar-manage .wjoin.is-open .wjoin-caret{transform:rotate(180deg);color:#7dd3fc}
/* Govde: kapaliyken yukseklik 0, acilinca yumusak acilir */
.sidebar-manage .wjoin-body{display:grid;grid-template-rows:0fr;opacity:0;padding:0 12px;transition:grid-template-rows .22s ease,opacity .18s ease,padding .22s ease}
.sidebar-manage .wjoin-body>*{min-height:0;overflow:hidden}
.sidebar-manage .wjoin.is-open .wjoin-body{grid-template-rows:1fr;opacity:1;padding:0 12px 12px}
.sidebar-manage .wjoin-hint{display:block;margin-bottom:8px;color:rgba(203,213,225,.6);font-size:10.5px;font-weight:700;line-height:1.35}
/* Dar kolonda alt alta: input tam genislik, buton altinda */
.sidebar-manage .wjoin-form{display:grid;grid-template-columns:1fr;gap:8px}
.sidebar-manage .wjoin-form .lt-join-link-input{min-height:42px;border-radius:12px}
.sidebar-manage .wjoin-form .lt-join-link-input i{font-size:16px}
.sidebar-manage .wjoin-form .lt-join-link-input input{font-size:13px}
.sidebar-manage .wjoin-form button{min-height:42px;border-radius:12px;font-size:13px;box-shadow:0 10px 22px rgba(37,99,235,.2)}
.sidebar-manage .wjoin-form button.is-loading{opacity:.65;pointer-events:none}
.sidebar-manage .wjoin-error{grid-column:auto;margin-top:8px;font-size:11px;line-height:1.35}

/* ==== Rail: "Baglanti ile katil" (sunucu kur/yonet ikonunun hemen altinda) ==== */
html body.incallx .room-bar .wjoin-rail{position:relative;cursor:pointer;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(37,99,235,.20))!important;border:1px solid rgba(56,189,248,.28)!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html body.incallx .room-bar .wjoin-rail i{color:#7dd3fc!important}
html body.incallx .room-bar .wjoin-rail:hover{border-color:rgba(56,189,248,.62)!important;box-shadow:0 0 0 3px rgba(56,189,248,.12);transform:translateY(-1px)}
html body.incallx .room-bar .wjoin-rail:hover i{color:#bae6fd!important}

/* Explore ic sayfalari: sabit sol ray gorunur kalir, icerik yumusakca yukari yerlesir. */
body.incallx .woo-chat-workspace{
    inset:0 0 0 72px!important;
    display:flex!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .24s ease,visibility 0s linear .3s!important;
}
body.incallx .woo-chat-workspace.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s!important;
}
body.incallx .woo-chat-workspace .woo-chat-workspace-backdrop{
    opacity:0;
    transition:opacity .28s ease!important;
}
body.incallx .woo-chat-workspace.is-open .woo-chat-workspace-backdrop{opacity:1}
body.incallx .woo-chat-workspace .woo-chat-workspace-card{
    width:min(1320px,calc(100vw - 112px))!important;
    height:min(920px,calc(100vh - 34px))!important;
    transform:translateY(42px) scale(.986);
    opacity:0;
    transition:transform .44s cubic-bezier(.22,1,.36,1),opacity .25s ease!important;
    will-change:transform,opacity;
}
body.incallx .woo-chat-workspace.is-open .woo-chat-workspace-card{
    transform:translateY(0) scale(1);
    opacity:1;
}
@media(max-width:650px){
    body.incallx .woo-chat-workspace{inset:0 0 0 64px!important;padding:0!important}
    body.incallx .woo-chat-workspace .woo-chat-workspace-card{width:calc(100vw - 64px)!important;height:100vh!important;max-height:none!important;border-radius:0!important}
}
@media(prefers-reduced-motion:reduce){
    body.incallx .woo-chat-workspace,
    body.incallx .woo-chat-workspace .woo-chat-workspace-backdrop,
    body.incallx .woo-chat-workspace .woo-chat-workspace-card{transition-duration:.01ms!important}
}
/* Compact server controls + reliable chat media viewer (2026-07-24) */
body.incallx .whitoo-room-menu{
    width:272px!important;min-width:272px!important;padding:8px!important;
    border:1px solid rgba(73,219,205,.22)!important;border-radius:16px!important;
    background:linear-gradient(155deg,#0b1322 0%,#080d18 100%)!important;
    box-shadow:0 24px 64px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head{
    display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;
    gap:10px!important;width:100%!important;margin:0 0 7px!important;padding:7px 8px 10px!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head>span:last-child{
    display:flex!important;min-width:0!important;max-width:100%!important;flex-direction:column!important;
    align-items:flex-start!important;gap:2px!important;overflow:hidden!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{
    display:block!important;width:100%!important;overflow:hidden!important;color:#f8fafc!important;
    font-size:12px!important;line-height:1.2!important;text-overflow:ellipsis!important;white-space:nowrap!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head small{
    display:block!important;width:100%!important;overflow:hidden!important;color:#718096!important;
    font-size:8.5px!important;font-weight:750!important;line-height:1.2!important;text-overflow:ellipsis!important;
    text-transform:uppercase!important;letter-spacing:.07em!important;white-space:nowrap!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-mark{
    display:grid!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;
    border:1px solid rgba(45,212,191,.24)!important;border-radius:9px!important;
    background:rgba(45,212,191,.1)!important;color:#5eead4!important;font-size:16px!important
}
body.incallx .whitoo-room-menu .dropdown-item{
    min-height:36px!important;margin:0!important;padding:8px 10px!important;
    border-radius:8px!important;gap:9px!important;font-size:12.5px!important;font-weight:700!important
}
body.incallx .whitoo-room-menu .dropdown-item .ti{width:18px!important;height:18px!important;font-size:16px!important}
body.incallx .whitoo-room-menu li+li{margin-top:2px!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-divider{margin:5px 2px!important;padding:0!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-divider hr{margin:0!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-danger{color:#fda4af!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-danger:hover{background:rgba(244,63,94,.11)!important;color:#fff!important}
body.incallx .whitoo-room-invite-modal .modal-dialog{max-width:520px!important}
body.incallx .whitoo-room-invite-modal .modal-content{
    border:1px solid rgba(45,212,191,.24)!important;border-radius:20px!important;
    background:radial-gradient(circle at 100% 0,rgba(45,212,191,.11),transparent 32%),linear-gradient(155deg,#091525,#070d18)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.04)!important
}
body.incallx .whitoo-room-invite-modal .modal-header{min-height:58px!important;padding:13px 18px!important}
body.incallx .whitoo-room-invite-modal .modal-title{font-size:16px!important}
body.incallx .whitoo-room-invite-modal .modal-body{padding:16px 18px 18px!important}
.whitoo-invite-modal-heading,.whitoo-channel-modal-heading{display:flex;align-items:center;gap:11px}
.whitoo-invite-modal-heading>span:last-child,.whitoo-channel-modal-heading>span:last-child{display:flex;flex-direction:column}
.whitoo-invite-modal-icon,.whitoo-channel-modal-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(45,212,191,.28);border-radius:12px;background:linear-gradient(145deg,rgba(244,63,94,.18),rgba(45,212,191,.13));color:#67e8f9;font-size:19px}
body.incallx .whitoo-invite-head{margin-bottom:8px!important}
body.incallx .whitoo-invite-head>.ti{width:34px!important;height:34px!important;border-radius:10px!important}
body.incallx .whitoo-invite-section{margin-top:9px!important}
body.incallx .whitoo-invite-person,body.incallx .whitoo-invite-stat{padding:7px 9px!important;border-radius:9px!important}
body.incallx .whitoo-compact-channel-modal .modal-dialog{width:min(760px,calc(100vw - 28px))!important;max-width:760px!important}
body.incallx .whitoo-compact-channel-modal .modal-content{max-height:calc(100vh - 30px)!important;border:1px solid rgba(45,212,191,.25)!important;border-radius:20px!important;background:radial-gradient(circle at 100% 0,rgba(45,212,191,.1),transparent 30%),linear-gradient(155deg,#0a1424,#070d18)!important;box-shadow:0 34px 100px rgba(0,0,0,.62)!important}
body.incallx .whitoo-compact-channel-modal .modal-header{min-height:54px!important;padding:12px 16px!important}
body.incallx .whitoo-compact-channel-modal .modal-title{font-size:16px!important}
.whitoo-channel-modal-heading small{margin-top:2px;color:#7f8da3;font-size:10px;font-weight:650}
body.incallx .whitoo-compact-channel-modal .modal-body{padding:14px 16px!important;overflow-y:auto!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder{margin-bottom:12px!important;padding:11px!important;border-radius:12px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-head{margin-bottom:8px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-head small{font-size:10px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-grid{grid-template-columns:minmax(0,1fr) 148px!important;gap:8px!important}
body.incallx .whitoo-compact-channel-modal #looai_builder_prompt{min-height:42px!important;height:42px!important;padding:9px 11px!important}
body.incallx .whitoo-compact-channel-modal .form-label{margin-bottom:4px!important;font-size:11px!important}
body.incallx .whitoo-compact-channel-modal .lt-form-note{display:none!important}
body.incallx .whitoo-compact-channel-modal .mb-3{margin-bottom:10px!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-boxes{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;margin:0 0 10px!important
}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-boxes>[class*="col-"]{
    width:auto!important;max-width:none!important;margin:0!important;padding:0!important
}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-label{
    justify-content:center!important;min-height:52px!important;padding:8px!important;border-radius:10px!important;text-align:center!important
}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-label>.me-3{display:none!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-title{margin:0!important;font-size:11px!important;white-space:nowrap!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-label-content>.text-muted{display:none!important}
body.incallx .whitoo-compact-channel-modal .form-control,body.incallx .whitoo-compact-channel-modal .form-select{min-height:36px!important;height:36px!important;border-radius:9px!important;font-size:12px!important}
body.incallx .whitoo-compact-channel-modal .modal-footer{padding:10px 16px!important}
.whitoo-media-open{overflow:hidden!important}
.whitoo-media-viewer{
    position:fixed;inset:0;z-index:2147483647;display:none;align-items:center;justify-content:center;
    padding:28px;background:rgba(1,4,10,.92);backdrop-filter:blur(12px)
}
.whitoo-media-viewer.is-open{display:flex}
.whitoo-media-viewer[aria-hidden="false"]{display:flex!important}
.cht .message-data img,.cht .message-html img,.cht video,.chat-img img,.chat-video-block,.chat-video-block *{
    pointer-events:auto!important;cursor:zoom-in!important
}
.whitoo-media-stage{
    display:flex;align-items:center;justify-content:center;width:min(1120px,100%);height:min(760px,calc(100vh - 56px));
    overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#02050a;
    box-shadow:0 30px 90px rgba(0,0,0,.65)
}
.whitoo-media-stage img,.whitoo-media-stage video{display:block;max-width:100%;max-height:100%;object-fit:contain}
.whitoo-media-stage video{width:100%;height:100%;background:#000}
.whitoo-media-close{
    position:fixed;top:18px;right:18px;z-index:2;display:grid;place-items:center;width:40px;height:40px;
    border:1px solid rgba(255,255,255,.14);border-radius:11px;background:#111827;color:#fff;font-size:20px;cursor:pointer
}
.chat-gallery,.chat-gallery figure,.chat-gallery a,.chat-gallery img,.chat-video-block,.chat-video-block .video-section,.chat-video-block .video-link,.chat-video-block img{position:relative!important;z-index:4!important;pointer-events:auto!important;cursor:zoom-in!important}
@media(max-width:767.98px){
    body.incallx .whitoo-compact-channel-modal .form-selectgroup-boxes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-grid{grid-template-columns:1fr!important}
    .whitoo-media-viewer{padding:0}.whitoo-media-stage{width:100%;height:100%;border:0;border-radius:0}
}

/* Reference-matched expanded server actions menu (2026-07-24) */
body.incallx .whitoo-room-menu{
    width:min(620px,calc(100vw - 24px))!important;min-width:min(620px,calc(100vw - 24px))!important;
    padding:18px!important;border:1px solid rgba(71,85,105,.62)!important;border-radius:24px!important;
    background:radial-gradient(circle at 90% 8%,rgba(30,41,59,.24),transparent 34%),linear-gradient(150deg,#0c121c,#080d14)!important;
    box-shadow:0 34px 90px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.035)!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head{
    grid-template-columns:66px minmax(0,1fr) 28px!important;gap:18px!important;min-height:110px!important;
    margin:0 0 14px!important;padding:16px 20px!important;border:1px solid rgba(255,43,72,.68)!important;border-radius:22px!important;
    background:radial-gradient(circle at 12% 50%,rgba(239,35,60,.2),transparent 32%),linear-gradient(100deg,rgba(239,35,60,.08),rgba(25,25,31,.82))!important;
    box-shadow:inset 0 0 40px rgba(239,35,60,.06),0 12px 28px rgba(0,0,0,.25)!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-mark{
    width:64px!important;height:64px!important;border-color:rgba(255,52,81,.7)!important;border-radius:18px!important;
    background:linear-gradient(145deg,rgba(239,35,60,.56),rgba(86,22,35,.58))!important;color:#fff!important;
    font-size:30px!important;box-shadow:0 12px 28px rgba(239,35,60,.18)!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{font-size:21px!important;font-weight:950!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-head small{
    margin-top:7px!important;color:#9ca3af!important;font-size:13px!important;font-weight:700!important;letter-spacing:.18em!important
}
body.incallx .whitoo-room-menu .dropdown-item{
    display:grid!important;grid-template-columns:64px minmax(0,1fr) 28px!important;align-items:center!important;
    gap:18px!important;min-height:88px!important;margin:0!important;padding:10px 20px!important;border-radius:17px!important;
    color:#f3f4f6!important;font-size:21px!important;font-weight:850!important
}
body.incallx .whitoo-room-menu .dropdown-item:hover{
    background:linear-gradient(90deg,rgba(239,35,60,.1),rgba(255,255,255,.025))!important
}
body.incallx .whitoo-room-menu .dropdown-item>i:first-child{
    display:grid!important;place-items:center!important;width:64px!important;height:64px!important;
    border:1px solid rgba(71,85,105,.42)!important;border-radius:17px!important;background:#0d1520!important;
    color:#ff3d59!important;font-size:29px!important
}
body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{
    width:64px!important;height:64px!important;min-width:64px!important;border:1px solid rgba(71,85,105,.42)!important;
    border-radius:17px!important;background:#0d1520!important;color:#ff3d59!important;font-size:29px!important
}
body.incallx .whitoo-room-menu .dropdown-item span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-arrow{
    display:block!important;width:auto!important;height:auto!important;margin-left:auto!important;border:0!important;
    background:transparent!important;color:#9ca3af!important;font-size:26px!important
}
body.incallx .whitoo-room-menu .whitoo-room-menu-head>.whitoo-room-menu-arrow{justify-self:end!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-divider{margin:6px 4px!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-divider hr{border-color:rgba(71,85,105,.4)!important}
body.incallx .whitoo-room-menu .whitoo-room-menu-danger{color:#f3f4f6!important}
@media(max-width:700px){
    body.incallx .whitoo-room-menu{width:calc(100vw - 20px)!important;min-width:0!important;padding:12px!important;border-radius:18px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head{grid-template-columns:48px minmax(0,1fr) 20px!important;min-height:78px!important;padding:12px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-mark,
    body.incallx .whitoo-room-menu .dropdown-item>i:first-child,
    body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{width:46px!important;height:46px!important;min-width:46px!important;border-radius:13px!important;font-size:22px!important}
    body.incallx .whitoo-room-menu .dropdown-item{grid-template-columns:48px minmax(0,1fr) 20px!important;min-height:62px!important;padding:8px 12px!important;font-size:15px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{font-size:16px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head small{font-size:9px!important}
}

/* Server actions menu final desktop proportions */
@media(min-width:701px){
    body.incallx .whitoo-room-menu{
        width:440px!important;min-width:440px!important;padding:12px!important;border-radius:20px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head{
        grid-template-columns:50px minmax(0,1fr) 20px!important;gap:13px!important;
        min-height:82px!important;margin-bottom:8px!important;padding:12px 14px!important;border-radius:17px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-mark{
        width:48px!important;height:48px!important;border-radius:14px!important;font-size:22px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{font-size:17px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head small{
        margin-top:4px!important;font-size:9px!important;letter-spacing:.15em!important
    }
    body.incallx .whitoo-room-menu .dropdown-item{
        grid-template-columns:50px minmax(0,1fr) 20px!important;gap:13px!important;
        min-height:66px!important;padding:7px 14px!important;border-radius:13px!important;
        font-size:16px!important
    }
    body.incallx .whitoo-room-menu .dropdown-item>i:first-child,
    body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{
        width:48px!important;height:48px!important;min-width:48px!important;border-radius:13px!important;font-size:22px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-arrow{font-size:19px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-divider{margin:4px 3px!important}
}

/* Final small server menu without the repeated server-name card */
@media(min-width:701px){
    body.incallx .whitoo-room-menu{
        width:244px!important;min-width:244px!important;padding:6px!important;border-radius:12px!important
    }
    body.incallx .whitoo-room-menu .dropdown-item{
        grid-template-columns:32px minmax(0,1fr) 13px!important;gap:8px!important;
        min-height:39px!important;padding:4px 8px!important;border-radius:8px!important;font-size:11px!important
    }
    body.incallx .whitoo-room-menu .dropdown-item>i:first-child,
    body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{
        width:30px!important;height:30px!important;min-width:30px!important;border-radius:8px!important;font-size:15px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-arrow{font-size:12px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-divider{margin:2px 3px!important}
}

/* Compact menu centered inside the channel sidebar */
@media(min-width:701px){
    body.incallx .whitoo-room-menu{
        width:268px!important;min-width:268px!important;padding:6px!important;border-radius:13px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head{
        grid-template-columns:34px minmax(0,1fr) 14px!important;gap:8px!important;
        min-height:52px!important;margin-bottom:4px!important;padding:7px 9px!important;border-radius:10px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-mark{
        width:32px!important;height:32px!important;border-radius:9px!important;font-size:15px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{font-size:12px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head small{font-size:6.5px!important}
    body.incallx .whitoo-room-menu .dropdown-item{
        grid-template-columns:34px minmax(0,1fr) 14px!important;gap:8px!important;
        min-height:42px!important;padding:4px 9px!important;border-radius:8px!important;font-size:11.5px!important
    }
    body.incallx .whitoo-room-menu .dropdown-item>i:first-child,
    body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{
        width:32px!important;height:32px!important;min-width:32px!important;border-radius:9px!important;font-size:16px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-arrow{font-size:13px!important}
}

/* Restore the original compact dropdown footprint */
@media(min-width:701px){
    body.incallx .whitoo-room-menu{
        width:286px!important;min-width:286px!important;padding:7px!important;border-radius:14px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head{
        grid-template-columns:36px minmax(0,1fr) 16px!important;gap:9px!important;
        min-height:56px!important;margin-bottom:5px!important;padding:8px 10px!important;border-radius:11px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-mark{
        width:34px!important;height:34px!important;border-radius:10px!important;font-size:16px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-head strong{font-size:13px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-head small{
        margin-top:2px!important;font-size:7px!important;letter-spacing:.12em!important
    }
    body.incallx .whitoo-room-menu .dropdown-item{
        grid-template-columns:36px minmax(0,1fr) 16px!important;gap:9px!important;
        min-height:46px!important;padding:5px 10px!important;border-radius:9px!important;
        font-size:12.5px!important
    }
    body.incallx .whitoo-room-menu .dropdown-item>i:first-child,
    body.incallx .whitoo-room-menu .dropdown-item .whitoo-invite-kind-icon{
        width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important;font-size:17px!important
    }
    body.incallx .whitoo-room-menu .whitoo-room-menu-arrow{font-size:14px!important}
    body.incallx .whitoo-room-menu .whitoo-room-menu-divider{margin:3px!important}
}

/* Reference-matched channel + invite dialogs (2026-07-24) */
body.incallx .whitoo-compact-channel-modal .modal-dialog{
    width:min(980px,calc(100vw - 36px))!important;max-width:980px!important
}
body.incallx .whitoo-compact-channel-modal .modal-content{
    border-color:rgba(244,63,94,.34)!important;border-radius:24px!important;
    background:radial-gradient(circle at 4% 0,rgba(225,29,72,.13),transparent 24%),linear-gradient(145deg,#10131a,#090d14)!important
}
body.incallx .whitoo-compact-channel-modal .modal-header{min-height:82px!important;padding:16px 22px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-modal-icon{
    width:48px!important;height:48px!important;border-color:rgba(251,45,73,.52)!important;border-radius:14px!important;
    background:linear-gradient(135deg,#ef233c,#7e1826)!important;color:#fff!important;box-shadow:0 10px 25px rgba(239,35,60,.24)!important
}
body.incallx .whitoo-compact-channel-modal .modal-title{font-size:20px!important;font-weight:900!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-modal-heading small{font-size:13px!important}
body.incallx .whitoo-compact-channel-modal .modal-body{padding:16px 20px 12px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder{
    margin-bottom:15px!important;padding:13px!important;border:1px solid rgba(244,63,94,.42)!important;border-radius:17px!important;
    background:radial-gradient(circle at 100% 50%,rgba(225,29,72,.11),transparent 30%),rgba(5,9,15,.48)!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-kicker{color:#ff3654!important;font-size:12px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-grid{grid-template-columns:minmax(0,1fr) 180px!important;gap:12px!important}
body.incallx .whitoo-compact-channel-modal #looai_builder_prompt{height:58px!important;min-height:58px!important;padding:11px 14px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-ai-builder-generate{
    min-height:58px!important;border:1px solid #ff304f!important;border-radius:13px!important;
    background:linear-gradient(135deg,#ef233c,#7b1d29)!important;color:#fff!important;box-shadow:0 9px 24px rgba(239,35,60,.25)!important
}
body.incallx .whitoo-compact-channel-modal #channel-form{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 16px!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-category-field,
body.incallx .whitoo-compact-channel-modal .whitoo-channel-type-label,
body.incallx .whitoo-compact-channel-modal .whitoo-channel-type-note,
body.incallx .whitoo-compact-channel-modal .form-selectgroup-boxes,
body.incallx .whitoo-compact-channel-modal .game-room-settings,
body.incallx .whitoo-compact-channel-modal .whitoo-channel-private-field,
body.incallx .whitoo-compact-channel-modal .channel-users{grid-column:1/-1!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-category-field{max-width:470px!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-boxes{gap:10px!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-label{
    min-height:82px!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:15px!important;background:rgba(8,12,20,.72)!important
}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-title{display:flex!important;align-items:center!important;flex-direction:column!important;gap:8px!important;font-size:13px!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-title i{margin:0!important;color:#e5e7eb!important;font-size:22px!important}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-input:checked+.form-selectgroup-label{
    border-color:#ff2948!important;background:radial-gradient(circle at 50% 100%,rgba(239,35,60,.15),transparent 58%),#0b1018!important;
    box-shadow:0 0 0 1px rgba(255,41,72,.16),0 10px 24px rgba(0,0,0,.24)!important
}
body.incallx .whitoo-compact-channel-modal .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-title i{color:#ff2948!important}
body.incallx .whitoo-compact-channel-modal .form-control,
body.incallx .whitoo-compact-channel-modal .form-select{height:44px!important;min-height:44px!important;border-color:rgba(148,163,184,.2)!important;border-radius:12px!important;background:#0b1018!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-private-field{margin:0!important;padding-top:2px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions{
    grid-column:1/-1!important;min-width:0!important;margin:4px 0 12px!important;padding:0!important;
    border:1px solid rgba(244,63,94,.24)!important;border-radius:17px!important;
    background:linear-gradient(135deg,rgba(239,35,60,.07),rgba(255,255,255,.018))!important;
    overflow:hidden!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions-body{padding:15px 17px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .avatar{
    width:38px!important;height:38px!important;min-width:38px!important;border-radius:11px!important;
    background:rgba(239,35,60,.12)!important;color:#ff3654!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions strong{color:#f5f7fb!important;font-size:13px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .text-muted{color:#8e99aa!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-staff-switch{
    display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;
    margin:13px 0!important;padding:11px 13px!important;border:1px solid rgba(148,163,184,.14)!important;border-radius:13px!important;background:rgba(4,8,14,.42)!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-staff-switch .form-check-input{margin:0!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .row{margin:0!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .row>[class*="col-"]{min-width:0!important;padding:0 6px!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .input-group{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;min-width:0!important}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .input-group-text{
    min-width:72px!important;justify-content:center!important;border-color:rgba(148,163,184,.2)!important;background:#151b25!important;color:#b8c0ce!important;font-size:12px!important
}
body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions input{min-width:0!important;width:100%!important}
/* Channel action popover: compact version of the server action menu. */
body.incallx .channel-actions .whitoo-channel-menu{
    width:244px!important;min-width:244px!important;margin-top:8px!important;padding:9px!important;
    border:1px solid rgba(244,63,94,.25)!important;border-radius:18px!important;
    background:radial-gradient(circle at 100% 0,rgba(225,29,72,.11),transparent 38%),linear-gradient(145deg,#0d131d,#080d14)!important;
    box-shadow:0 22px 52px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025) inset!important;
    overflow:hidden!important
}
body.incallx .channel-actions .whitoo-channel-menu li+li{margin-top:4px!important}
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item{
    display:grid!important;grid-template-columns:40px minmax(0,1fr) 18px!important;align-items:center!important;gap:11px!important;
    min-height:52px!important;padding:6px 10px!important;border:1px solid transparent!important;border-radius:13px!important;
    color:#eef2f7!important;background:transparent!important;font-size:13px!important;font-weight:750!important;line-height:1.2!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease!important
}
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item:hover,
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item:focus{
    border-color:rgba(244,63,94,.28)!important;background:linear-gradient(90deg,rgba(225,29,72,.13),rgba(255,255,255,.025))!important;
    color:#fff!important;transform:translateX(2px)!important
}
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item>i:first-child{
    display:grid!important;place-items:center!important;width:40px!important;height:40px!important;margin:0!important;
    border:1px solid rgba(244,63,94,.24)!important;border-radius:11px!important;background:rgba(225,29,72,.09)!important;
    color:#ff3654!important;font-size:19px!important
}
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item span{
    min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important
}
body.incallx .channel-actions .whitoo-channel-menu .whitoo-channel-menu-arrow{
    margin:0!important;color:#778397!important;font-size:15px!important;transition:color .18s ease,transform .18s ease!important
}
body.incallx .channel-actions .whitoo-channel-menu .dropdown-item:hover .whitoo-channel-menu-arrow{
    color:#ff5b70!important;transform:translateX(2px)!important
}
@media(max-width:420px){
    body.incallx .channel-actions .whitoo-channel-menu{width:220px!important;min-width:220px!important;padding:8px!important}
    body.incallx .channel-actions .whitoo-channel-menu .dropdown-item{grid-template-columns:36px minmax(0,1fr) 16px!important;min-height:48px!important;gap:9px!important;padding:5px 8px!important}
    body.incallx .channel-actions .whitoo-channel-menu .dropdown-item>i:first-child{width:36px!important;height:36px!important;font-size:17px!important}
}
body.incallx .whitoo-compact-channel-modal .modal-footer{min-height:72px!important;padding:13px 20px!important}
body.incallx .whitoo-compact-channel-modal .modal-footer .btn{min-height:44px!important;padding:0 18px!important;border-radius:13px!important}
body.incallx .whitoo-compact-channel-modal .submit-channel{
    border:1px solid #ff2948!important;background:linear-gradient(135deg,#ef233c,#841929)!important;color:#fff!important;
    box-shadow:0 10px 25px rgba(239,35,60,.22)!important
}
body.incallx .whitoo-room-invite-modal .modal-dialog{width:min(980px,calc(100vw - 36px))!important;max-width:980px!important}
body.incallx .whitoo-room-invite-modal .modal-content{
    border-color:rgba(244,63,94,.34)!important;border-radius:24px!important;
    background:radial-gradient(circle at 5% 0,rgba(225,29,72,.13),transparent 24%),linear-gradient(145deg,#0e1219,#090d13)!important
}
body.incallx .whitoo-room-invite-modal .modal-header{min-height:108px!important;padding:20px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-modal-icon{
    width:64px!important;height:64px!important;border-color:rgba(251,45,73,.5)!important;border-radius:16px!important;
    background:linear-gradient(135deg,#ef233c,#681824)!important;color:#fff!important;font-size:30px!important
}
body.incallx .whitoo-room-invite-modal .whitoo-invite-modal-kicker{color:#ff3654!important;font-size:12px!important}
body.incallx .whitoo-room-invite-modal .modal-title{font-size:25px!important;font-weight:950!important}
body.incallx .whitoo-room-invite-modal .modal-body{padding:20px 30px 32px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-head{
    padding:15px!important;border:1px solid rgba(244,63,94,.4)!important;border-bottom:0!important;border-radius:17px 17px 0 0!important;
    background:radial-gradient(circle at 100% 50%,rgba(225,29,72,.12),transparent 34%),rgba(7,11,17,.56)!important
}
body.incallx .whitoo-room-invite-modal .whitoo-invite-head>.ti{
    width:58px!important;height:58px!important;border-radius:15px!important;background:linear-gradient(135deg,#ef233c,#8e1d2d)!important;font-size:28px!important
}
body.incallx .whitoo-room-invite-modal .whitoo-invite-head strong{font-size:20px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-head small{font-size:13px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-copy-row{
    grid-template-columns:minmax(0,1fr) 58px!important;gap:14px!important;margin-top:-1px!important;padding:0 15px 15px!important;
    border:1px solid rgba(244,63,94,.4)!important;border-top:0!important;border-radius:0 0 17px 17px!important;background:rgba(7,11,17,.56)!important
}
body.incallx .whitoo-room-invite-modal .whitoo-invite-copy-row input{height:58px!important;padding:0 18px!important;border-radius:13px!important;font-size:17px!important}
body.incallx .whitoo-room-invite-modal .whitoo-copy-room-invite{border-radius:13px!important;background:linear-gradient(135deg,#ff2948,#bd1f36)!important;font-size:20px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-section{margin-top:18px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-title{margin-bottom:10px!important;color:#e5e7eb!important;font-size:15px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-title i{color:#ff2948!important;font-size:21px!important}
body.incallx .whitoo-room-invite-modal .whitoo-invite-empty{
    display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:8px!important;
    min-height:106px!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:15px!important;background:#0a0f17!important;font-size:14px!important
}
body.incallx .whitoo-room-invite-modal .whitoo-invite-empty i{color:#aeb6c4!important;font-size:34px!important}
@media(max-width:767.98px){
    body.incallx .whitoo-compact-channel-modal #channel-form{grid-template-columns:1fr!important}
    body.incallx .whitoo-compact-channel-modal .whitoo-channel-name-field,
    body.incallx .whitoo-compact-channel-modal .whitoo-channel-order-field{grid-column:1!important}
    body.incallx .whitoo-compact-channel-modal .whitoo-channel-message-permissions .row{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
    body.incallx .whitoo-room-invite-modal .modal-header{min-height:78px!important}
    body.incallx .whitoo-room-invite-modal .whitoo-invite-modal-icon{width:44px!important;height:44px!important;font-size:21px!important}
    body.incallx .whitoo-room-invite-modal .modal-title{font-size:19px!important}
    body.incallx .whitoo-room-invite-modal .modal-body{padding:14px!important}
}

/* ===== woo-support.css ===== */
.woo-support-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2500;
    font-family: inherit;
}

.woo-support-launcher {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    min-height: 58px;
    border: 1px solid rgba(24,199,184,.42);
    border-radius: 20px;
    background: linear-gradient(135deg, #0f172a, #12313c 58%, #18c7b8);
    color: #fff;
    padding: 5px;
    box-shadow: 0 16px 40px rgba(0,0,0,.34), 0 0 0 5px rgba(24,199,184,.08);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.woo-support-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(0,0,0,.42), 0 0 0 8px rgba(24,199,184,.11);
}

.woo-support-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #18c7b8, #6366f1 58%, #f43f5e);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 28px rgba(24,199,184,.28);
}

.woo-support-logo i {
    color: #fff;
    font-size: 25px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.28));
}

.woo-support-logo b {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 13px;
    height: 13px;
    border: 2px solid #07111c;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,.9);
}

.woo-support-launcher-text {
    display: none;
    text-align: left;
    line-height: 1.1;
}

.woo-support-launcher-text strong {
    font-weight: 950;
}

.woo-support-launcher-text small {
    color: #a7fff3;
    font-size: 12px;
}

.woo-support-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    display: none;
    width: min(344px, calc(100vw - 18px));
    overflow: hidden;
    border: 1px solid rgba(24,199,184,.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 0%, rgba(24,199,184,.12), transparent 30%),
        linear-gradient(180deg, rgba(12,20,36,.96), rgba(5,10,20,.96));
    color: #f8fafc;
    box-shadow: 0 18px 56px rgba(0,0,0,.32);
    backdrop-filter: blur(14px);
}

.woo-support-widget.is-open .woo-support-panel {
    display: block;
    animation: wooSupportIn .18s ease-out;
}

.woo-support-panel.is-open {
    display: block;
    animation: wooSupportIn .18s ease-out;
}

@keyframes wooSupportIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.woo-support-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    padding: 9px 10px;
}

.woo-support-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.woo-support-brand strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.woo-support-brand small {
    color: #9fb0c8;
    font-size: 10.5px;
}

.woo-support-logo.is-panel {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.woo-support-logo.is-panel i {
    font-size: 18px;
}

.woo-support-panel header button,
.woo-support-form button {
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
}

.woo-support-panel header button {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255,255,255,.07);
}

.woo-support-body {
    display: grid;
    gap: 7px;
    max-height: 280px;
    overflow: auto;
    padding: 10px;
}

.woo-support-msg {
    width: fit-content;
    max-width: 88%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(15,23,42,.56);
    padding: 8px 9px;
}

.woo-support-msg.is-user {
    justify-self: end;
    background: linear-gradient(135deg, rgba(24,199,184,.18), rgba(244,63,94,.18));
}

.woo-support-msg.is-admin {
    background: rgba(244,63,94,.14);
    border-color: rgba(244,63,94,.28);
}

.woo-support-msg.is-admin b {
    color: #ff8da1;
}

.woo-support-msg.is-system {
    justify-self: center;
    max-width: 94%;
    border-color: rgba(250,204,21,.28);
    background: rgba(250,204,21,.1);
}

.woo-support-msg.is-system b {
    color: #fde68a;
}

.woo-support-msg b {
    display: block;
    margin-bottom: 3px;
    color: #6ff7e8;
    font-size: 10.5px;
}

.woo-support-msg p {
    margin: 0;
    color: #dbeafe;
    font-size: 11.5px;
    line-height: 1.38;
}

.woo-support-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 8px;
}

.woo-support-widget.has-human-support .woo-support-quick {
    display: none;
}

.woo-support-widget.is-ticket-closed .woo-support-quick {
    display: grid;
}

.woo-support-widget.is-ticket-closed .woo-support-note::before {
    content: attr(data-closed-note);
    color: #fde68a;
}

.woo-support-quick button {
    min-height: 29px;
    border: 1px solid rgba(24,199,184,.18);
    border-radius: 9px;
    background: rgba(24,199,184,.06);
    color: #c8fff8;
    font-size: 10.5px;
    font-weight: 750;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.woo-support-quick button:hover {
    transform: translateY(-1px);
    border-color: rgba(24,199,184,.38);
    background: rgba(24,199,184,.1);
}

.woo-support-quick button.is-active {
    border-color: rgba(244,63,94,.55);
    background: rgba(244,63,94,.16);
    color: #fff;
}

.woo-support-form {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 8px 10px 7px;
}

.woo-support-upload {
    display: grid;
    place-items: center;
    width: 34px;
    min-height: 36px;
    margin: 0;
    border: 1px solid rgba(24,199,184,.18);
    border-radius: 10px;
    background: rgba(24,199,184,.06);
    color: #9ffff4;
    cursor: pointer;
}

.woo-support-upload:hover {
    border-color: rgba(24,199,184,.45);
    background: rgba(24,199,184,.14);
}

.woo-support-upload input {
    display: none;
}

.woo-support-form textarea {
    width: 100%;
    resize: none;
    min-height: 36px;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 10px;
    background: rgba(2,6,23,.44);
    color: #fff;
    outline: 0;
    padding: 8px 9px;
    font-size: 11.5px;
    line-height: 1.35;
}

.woo-support-form textarea:focus {
    border-color: rgba(24,199,184,.44);
    box-shadow: 0 0 0 3px rgba(24,199,184,.08);
}

.woo-support-form button {
    border-radius: 10px;
    background: linear-gradient(135deg, #18c7b8, #f43f5e);
    box-shadow: none;
}

.woo-support-image {
    display: block;
    margin-top: 8px;
}

.woo-support-image img {
    display: block;
    width: min(220px, 100%);
    max-height: 170px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
}

.woo-support-note {
    display: block;
    padding: 0 10px 8px;
    color: #7f91ad;
    font-size: 10px;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .woo-support-widget {
        right: 12px;
        bottom: 12px;
    }

    .woo-support-launcher-text {
        display: none;
    }

    .woo-support-panel {
        right: -2px;
        bottom: 66px;
    }

    .woo-support-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.incallx .woo-support-panel {
        width: min(342px, calc(100vw - 24px));
    }
}

body.incallx .lt-account-dock-actions .woo-support-widget {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 40;
    flex: 0 0 auto;
}

body.incallx .lt-account-dock-actions .woo-support-launcher {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: rgba(9, 16, 31, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.incallx .lt-account-dock-actions .woo-support-launcher:hover {
    transform: translateY(-1px);
    border-color: rgba(32, 224, 196, .34);
    background: rgba(32, 224, 196, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.incallx .lt-account-dock-actions .woo-support-logo {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: linear-gradient(135deg, #18c7b8, #6366f1 58%, #f43f5e);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

body.incallx .lt-account-dock-actions .woo-support-logo i {
    font-size: 15px;
}

body.incallx .lt-account-dock-actions .woo-support-logo b {
    right: -3px;
    top: -3px;
    width: 9px;
    height: 9px;
    border-width: 1px;
}

body.incallx .lt-account-dock-actions .woo-support-panel {
    position: fixed;
    left: max(62px, env(safe-area-inset-left));
    right: auto;
    bottom: 74px;
    width: min(344px, calc(100vw - 76px));
    max-height: min(520px, calc(100vh - 94px));
    z-index: 3200;
}

body.incallx .lt-account-dock-actions .woo-support-body {
    max-height: min(280px, calc(100vh - 270px));
}

body.incallx .woo-support-panel[data-support-portal] {
    position: fixed;
    left: max(62px, env(safe-area-inset-left));
    right: auto;
    bottom: 74px;
    width: min(344px, calc(100vw - 76px));
    max-height: min(520px, calc(100vh - 94px));
    z-index: 3200;
}

body.incallx .woo-support-panel[data-support-portal] .woo-support-body {
    max-height: min(280px, calc(100vh - 270px));
}

@media (max-width: 767.98px) {
    body.incallx.woo-support-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 3190;
        background:
            radial-gradient(circle at 22% 82%, rgba(32, 224, 196, .18), transparent 28%),
            radial-gradient(circle at 80% 12%, rgba(255, 51, 71, .16), transparent 32%),
            rgba(3, 7, 18, .58);
        backdrop-filter: blur(6px);
        pointer-events: none;
    }

    body.incallx .lt-account-dock-actions .woo-support-panel {
        position: fixed;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        bottom: 76px;
        width: auto;
        max-height: calc(100vh - 96px);
    }

    body.incallx .lt-account-dock-actions .woo-support-body {
        max-height: calc(100vh - 310px);
    }

    body.incallx .woo-support-panel[data-support-portal] {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px));
        width: auto;
        max-height: min(76dvh, 640px);
        border-radius: 20px;
        border-color: rgba(32, 224, 196, .28);
        background:
            linear-gradient(180deg, rgba(9, 16, 31, .97), rgba(4, 10, 22, .98)),
            radial-gradient(circle at 18% 0%, rgba(255, 51, 71, .16), transparent 34%),
            radial-gradient(circle at 96% 100%, rgba(32, 224, 196, .18), transparent 38%);
        box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .04);
    }

    body.incallx .woo-support-panel[data-support-portal] header {
        padding: 12px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-brand strong {
        font-size: 13px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-brand small {
        font-size: 10px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-body {
        max-height: calc(76vh - 250px);
        max-height: calc(76dvh - 250px);
        padding: 10px 12px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 0 12px 10px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-form {
        grid-template-columns: 38px minmax(0, 1fr) 42px;
        gap: 8px;
        padding: 10px 12px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-form textarea {
        min-height: 44px;
        font-size: 13px;
    }

    body.incallx .woo-support-panel[data-support-portal] .woo-support-note {
        padding: 0 12px 12px;
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    body.incallx .woo-support-panel[data-support-portal] {
        left: max(10px, env(safe-area-inset-left));
        right: 8px;
        bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px));
    }
}

/* ===== whitoo-crisp-type.css ===== */
/* Whitoo Crisp Typography — 2026062001 */
:root{
  --woo-ui-font:"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --woo-text-primary:#eef4fc;
  --woo-text-secondary:#b5c2d4;
  --woo-text-muted:#9cacc1;
}
html,body,input,button,textarea,select,option{
  font-family:var(--woo-ui-font)!important;
  -webkit-font-smoothing:auto!important;
  -moz-osx-font-smoothing:auto!important;
  text-rendering:optimizeLegibility!important;
  font-kerning:normal!important;
  font-feature-settings:"kern" 1,"liga" 1!important;
  font-synthesis:none!important;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body :where(h1,h2,h3,h4,h5,h6,p,a,label,small,strong,b,button,input,textarea,select,option,li,dt,dd,th,td){
  font-family:var(--woo-ui-font)!important;
  -webkit-font-smoothing:auto!important;
  -moz-osx-font-smoothing:auto!important;
  text-rendering:optimizeLegibility!important;
  font-kerning:normal!important;
  font-synthesis:none!important;
  text-shadow:none;
}
body{font-weight:400!important}
button,input,textarea,select,.btn,.form-control,.form-select,.dropdown-menu{font-weight:500!important}
h1,h2,h3,h4,h5,h6,strong,b,.fw-bold,.font-weight-bold{font-weight:700!important}
p,label,li,td,th,a,span{font-synthesis:none!important}
small,.small,.text-muted{font-weight:500!important;opacity:1!important}
h1,h2,h3,h4,h5,h6,p,label,button,input,textarea,select,.btn,.form-control,.form-select,.dropdown-item,.nav-link,.chat-message,.message-content{
  letter-spacing:0!important;
  text-shadow:none!important;
}
html.dark body,html.dark .woo-arena,body.incallx{color:var(--woo-text-primary)}
html.dark .text-muted,html.dark small,html.dark .small,body.incallx .text-muted,body.incallx small,body.incallx .small{color:var(--woo-text-muted)!important}
html.dark p,html.dark label,body.incallx p,body.incallx label{color:var(--woo-text-secondary)}
.woo-arena-nav>button,.woo-arena-control-nav>button,.woo-tournament-card,.woo-tournament-card button,.woo-tournament-card input,.woo-tournament-card select{
  -webkit-font-smoothing:auto!important;text-rendering:optimizeLegibility!important
}
.woo-arena-nav>button,.woo-arena-control-nav>button{font-weight:600!important}
.woo-tournament-card h2,.woo-tournament-card strong,.woo-tournament-card b{font-weight:700!important}
.chat-message,.message-content,.message-content p,.message-content span{font-weight:400!important;line-height:1.5!important}
.channel-user-name,.username-bottom,.disc-header,.room-title{font-weight:700!important}
/* Keep intentional profile-name effects while removing fuzzy filter rendering. */
.woo-name-effect,.woo-name-effect-rgb,.woo-name-effect-neon,.woo-name-effect-fire,.woo-name-effect-ice,.woo-name-effect-gold,.woo-name-effect-aurora,.woo-name-effect-glitch,.woo-name-effect-cyber,.woo-name-effect-pulse,.woo-name-effect-emerald,.woo-name-effect-royal,.woo-name-effect-pearl,.woo-name-effect-ai{
  font-weight:700!important;filter:none!important
}
@media(max-width:768px){body{font-size:14px}}

/* ===== WHITOO sol kenar cubugu kesin duzen (EN SON yuklenir -> kazanir) =====
   1) Wrapper tam viewport yuksekligi -> alttaki dock/ses bari her zoom'da sabit.
   2) Kanal listesi flex ile dock'a kadar DOLSUN -> alt bosluk kapanir.
   3) jQuery .hide() duzeltmesi: whitoo-refresh.css'deki display:flex!important
      jQuery'nin inline display:none'ini engelliyor. Daha yuksek ozgunluk
      (3 sinif + 1 etiket vs 2 sinif + 1 etiket) ile gecersiz kiliyoruz. */
#sidebar-wrapper {
    height: calc(var(--vh, 1vh) * 100) !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;
}
#sidebar-wrapper .sidebar-room .channel-container.sidebar-height-fix {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
}
body.voice-active #sidebar-wrapper .sidebar-room .channel-container.sidebar-height-fix {
    padding-bottom: 132px !important;
}
/* jQuery .hide() fix: whitoo-refresh.css'deki body.incallx .sidebar-room{display:flex!important}
   inline style'i eziyor. Attribute selector ile daha yuksek ozgunlukta gecersiz kiliyoruz. */
body.incallx [style*="display: none"].channel-bar,
body.incallx [style*="display:none"].channel-bar {
    display: none !important;
}
/* Ozel kanal kilit rozeti: eski tasarimda position:absolute ile tip ikonunun ustune
   biniyordu. Yeni tasarimda static yapip yanyana goster, arkaplan seffaf. */
body.incallx .channel-icon {
    display: flex !important;
    align-items: center !important;
}
body.incallx .channel-icon .pvt-cnl {
    position: static !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 2px !important;
    opacity: 0.65;
}
body.incallx .channel-icon .pvt-cnl .icon-lock {
    width: 10px !important;
    height: 11px !important;
}

/* Bosluk kapatma: whitoo-refresh.css dock'un sidebar-room ICINDE oldugunu varsayip
   padding-bottom:62px + channel-container bottom:62px koymus. Dock artik DISARIDA
   (#sidebar-wrapper'in alt kismi) oldugu icin o bosluk gereksiz. */
body.incallx #sidebar-wrapper .sidebar-room {
    padding-bottom: 0 !important;
}
body.incallx #sidebar-wrapper .sidebar-room .channel-container {
    bottom: 0 !important;
}
body.incallx.voice-active #sidebar-wrapper .sidebar-room .channel-container,
body.incallx.in-voice #sidebar-wrapper .sidebar-room .channel-container {
    bottom: 70px !important;
}

/* ===== whitoo-explore-2026.css ===== */
/* ==========================================================================
   Whitoo — Explore screen (inside chat_room.html) 2026 redesign
   Loaded LAST in chat_room.html.

   The legacy CSS-only classes (.whitoo-explore-profile-*, .whitoo-explore-category-*,
   .whitoo-explore-search-hero, .whitoo-home-search-hero) were removed from the markup,
   so whitoo-refresh.css's ~174 explore rules (31 of them !important) no longer match
   and everything below starts from a clean slate.

   Deliberately KEPT in the markup:
     - body.whitoo-explore-active          -> chatnet.js
     - .whitoo-quick-match-open / .whitoo-create-normal / .whitoo-create-ai -> chatnet.js
     - .whitoo-explore-v2 / .whitoo-explore-board (root) -> still feed #chat-room-loop
       room-card styling from whitoo-refresh.css
   ========================================================================== */

/* ==========================================================================
   INSTANT TAB SWITCHES (not scoped to explore — applies to the whole chat room)
   The main tabs (Messages / Server / Whitoo AI / Explore / Profile) use
   Bootstrap's .fade class = an opacity transition. On refresh or a quick switch
   the panel could get stuck half-faded (the "broken / half-rendered" state).
   Killing the transition makes every switch snap instantly and always render
   the active panel fully. JS still toggles .active/.show — only the animation
   is removed, so nothing functional changes.
   ========================================================================== */
.main-tab-pane.fade {
    transition: none !important;
}

.main-tab-pane.active.show {
    opacity: 1 !important;
}

/* Whitoo AI panel — overflow fix.
   The "Whitoo AI ready" status card sat in a fixed 210px second grid column and
   kept spilling past the right edge of the content area (clipped off-screen).
   Clamping it wasn't enough, so the card is removed and the header runs as a
   single full-width column. Nothing is lost: the card was decorative (the panel
   being open already says the assistant is ready). */
#main-looai,
#main-looai .looai-panel,
#main-looai .looai-header {
    max-width: 100% !important;
    overflow-x: hidden;
}

#main-looai .looai-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

#main-looai .looai-status-card {
    display: none !important;
}

#main-looai .looai-hero-copy {
    min-width: 0;
    max-width: 100%;
}

#main-looai .looai-header h2,
#main-looai .looai-header p {
    max-width: 100%;
}

.whitoo-explore-v2 {
    --wx-panel: #12161f;
    --wx-panel-2: #171c28;
    --wx-line: rgba(255, 255, 255, .07);
    --wx-line-soft: rgba(255, 255, 255, .04);
    --wx-text: #e9edf7;
    --wx-muted: #7d8699;
    --wx-red: #ef2b52;
    --wx-pink: #ec4899;
    --wx-purple: #a855f7;
    --wx-blue: #3b82f6;
    --wx-green: #10b981;
    --wx-radius: 14px;
    --wx-gap: clamp(12px, 1.1vw, 18px);
}

.whitoo-explore-v2 :is(h1, h2, h3, strong, b) {
    letter-spacing: -.015em;
}

.wx26-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wx26-eyebrow i {
    color: var(--wx-red);
    font-size: 12px;
}

/* ============================ DISCOVER ============================ */

.wx26-discover {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(18px, 2.4vw, 44px);
    align-items: center;
    margin-bottom: var(--wx-gap);
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--wx-line);
    border-radius: 18px;
    background:
        radial-gradient(520px 280px at 8% 30%, rgba(239, 43, 82, .1), transparent 62%),
        linear-gradient(140deg, #141926, #0e121b);
}

.wx26-discover-copy h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 900;
    line-height: 1.12;
}

.wx26-discover-copy h2 em {
    font-style: normal;
    color: #fff;
}

.wx26-discover-copy p {
    margin: 0 0 14px;
    color: var(--wx-muted);
    font-size: 13px;
    line-height: 1.6;
}

.wx26-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wx26-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 10.5px;
    font-weight: 600;
}

.wx26-chips i {
    color: var(--wx-red);
    font-size: 13px;
}

/* Feature cards */
.wx26-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wx26-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 17px 16px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-panel-2);
    color: var(--wx-text) !important;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.wx26-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .16);
    background: #1b2130;
}

.wx26-ci {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    color: #fff;
    font-size: 19px;
}

.wx26-c-red    { background: linear-gradient(150deg, #f43f5e, #be123c); box-shadow: 0 6px 16px rgba(239, 43, 82, .35); }
.wx26-c-green  { background: linear-gradient(150deg, #14b8a6, #0f766e); box-shadow: 0 6px 16px rgba(20, 184, 166, .32); }
.wx26-c-blue   { background: linear-gradient(150deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px rgba(59, 130, 246, .32); }
.wx26-c-purple { background: linear-gradient(150deg, #a855f7, #7c3aed); box-shadow: 0 6px 16px rgba(168, 85, 247, .32); }

.wx26-ct {
    min-width: 0;
    line-height: 1.35;
}

.wx26-ct strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
}

.wx26-ct small {
    display: block;
    color: var(--wx-muted);
    font-size: 11px;
    line-height: 1.5;
}

.wx26-go {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 14px;
    transition: transform .16s ease;
}

.wx26-g-red    { background: rgba(244, 63, 94, .16);  color: #fb7185; }
.wx26-g-green  { background: rgba(20, 184, 166, .16); color: #2dd4bf; }
.wx26-g-blue   { background: rgba(59, 130, 246, .16); color: #60a5fa; }
.wx26-g-purple { background: rgba(168, 85, 247, .16); color: #c084fc; }

.wx26-card:hover .wx26-go {
    transform: translateX(3px);
}

/* ============================ JOIN BAND ============================ */

/* Explicit placement: auto-flow was dropping BOTH the icon and the card into
   column 1 (stacked), leaving the 1fr column empty — that was the dead space on
   the right. Pinning each item fixes it deterministically. */
.wx26-join {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    /* Both real items are pinned to row 1; collapse any implicit row the
       include's trailing <script> would otherwise open (was ~38px dead space). */
    grid-auto-rows: 0;
    align-items: center;
    column-gap: 18px;
    row-gap: 0;
    margin-bottom: var(--wx-gap);
    padding: 16px 20px;
    border: 1px solid rgba(239, 43, 82, .26);
    border-radius: var(--wx-radius);
    background:
        radial-gradient(420px 200px at 4% 50%, rgba(239, 43, 82, .18), transparent 64%),
        var(--wx-panel);
}

.wx26-join > .wx26-join-ico {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.wx26-join > .lt-join-link-card {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none !important;
}

/* join_by_link.html brings its own panel (.lt-join-link-card) styled by
   index/whitoo-modern/refresh css. Flatten it so it sits INSIDE this band
   instead of rendering a second nested card. */
.wx26-join .lt-join-link-card {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible;
}

.wx26-join .lt-join-link-card::before,
.wx26-join .lt-join-link-card::after {
    content: none !important;
    display: none !important;
}

.wx26-join .lt-join-link-copy {
    min-width: 0;
    line-height: 1.35;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
}

.wx26-join .lt-join-link-copy span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wx-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wx26-join .lt-join-link-copy span i { color: var(--wx-red); font-size: 12px; }

.wx26-join .lt-join-link-copy strong {
    display: block;
    margin: 5px 0 3px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.wx26-join .lt-join-link-copy small {
    display: block;
    color: var(--wx-muted);
    font-size: 11px;
}

.wx26-join .lt-join-link-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.wx26-join .lt-join-link-input {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: rgba(8, 11, 18, .75) !important;
}

.wx26-join .lt-join-link-input i { color: var(--wx-muted); font-size: 15px; }

.wx26-join .lt-join-link-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    background: transparent !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    outline: 0;
    box-shadow: none !important;
}

.wx26-join .lt-join-link-input input::placeholder { color: var(--wx-muted); }

.wx26-join .lt-join-link-form button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(239, 43, 82, .35);
}

.wx26-join .lt-join-link-form button:hover { filter: brightness(1.08); }

.wx26-join .lt-join-link-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #fb7185;
    font-size: 11px;
    display: none;
}

.wx26-join .lt-join-link-error.is-visible { display: block; }

/* Woo AI Studio link (moved out of the card grid to keep it a clean 2x2) */
.wx26-studio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid rgba(168, 85, 247, .4);
    border-radius: 9px;
    background: rgba(168, 85, 247, .1);
    color: #c084fc !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

.wx26-studio:hover {
    background: rgba(168, 85, 247, .2);
    color: #fff !important;
}

.wx26-join-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(150deg, #f43f5e, #be123c);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 6px 18px rgba(239, 43, 82, .4);
}

.wx26-join-copy {
    min-width: 0;
    line-height: 1.35;
}

.wx26-join-copy strong {
    display: block;
    margin: 3px 0 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.wx26-join-copy small {
    color: var(--wx-muted);
    font-size: 10.8px;
}

.wx26-join-form {
    min-width: 0;
}

/* join_by_link.html lives inside — flatten it into the band */
.wx26-join-form form,
.wx26-join-form .join-link-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.whitoo-explore-v2 .wx26-join-form input[type="text"],
.whitoo-explore-v2 .wx26-join-form input:not([type="submit"]):not([type="button"]) {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: rgba(8, 11, 18, .7) !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

.whitoo-explore-v2 .wx26-join-form button,
.whitoo-explore-v2 .wx26-join-form input[type="submit"] {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

/* ============================ WELCOME BAR ============================ */

.wx26-welcome {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: var(--wx-gap);
    padding: 14px 18px;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: var(--wx-radius);
    background: var(--wx-panel);
}

.wx26-me {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.wx26-me img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(239, 43, 82, .5);
    /* whitoo-perf.css: img{content-visibility:auto} can collapse sized images */
    content-visibility: visible;
}

.wx26-me > div {
    min-width: 0;
    line-height: 1.3;
}

.wx26-me span {
    display: block;
    color: var(--wx-muted);
    font-size: 9.8px;
    font-weight: 600;
}

.wx26-me strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx26-me small {
    color: var(--wx-muted);
    font-size: 10px;
}

.wx26-woo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 16px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.wx26-woo.is-active {
    border-color: rgba(16, 185, 129, .45);
    background: linear-gradient(160deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .06));
    box-shadow: 0 6px 18px rgba(16, 185, 129, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.wx26-woo > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--wx-muted);
    font-size: 16px;
}

.wx26-woo.is-active > i {
    background: rgba(255, 207, 77, .16);
    color: #ffcf4d;
}

.wx26-woo > div {
    line-height: 1.3;
}

.wx26-woo strong {
    display: block;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}

.wx26-woo small {
    color: var(--wx-muted);
    font-size: 9.8px;
}

.wx26-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
}

.wx26-quick {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    transform-origin: right center;
    will-change: transform, opacity;
}

/* Explore kisa yolu secildiginde mobildeki gibi menu yukariya akar. */
.wx26-quick.is-launching {
    animation: wx26-menu-launch .68s cubic-bezier(.22, 1, .36, 1) both;
}

.whitoo-explore-v2 .wx26-quick a.is-launching-target {
    z-index: 2;
    color: #fff !important;
    border-color: rgba(255, 77, 105, .92);
    background: linear-gradient(145deg, #f22d50, #b60e2c);
    box-shadow: 0 12px 32px rgba(239, 43, 82, .46), 0 0 0 5px rgba(239, 43, 82, .12);
    animation: wx26-shortcut-launch .58s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes wx26-menu-launch {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    38% { transform: translateY(-18px) scale(.985); opacity: .82; }
    68% { transform: translateY(-8px) scale(.995); opacity: .96; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes wx26-shortcut-launch {
    0% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-7px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wx26-quick.is-launching,
    .whitoo-explore-v2 .wx26-quick a.is-launching-target {
        animation-duration: .01ms !important;
    }
}

.whitoo-explore-v2 .wx26-quick a {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    color: #aeb6c6 !important;
    font-size: 18px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.whitoo-explore-v2 .wx26-quick a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    border-color: rgba(239, 43, 82, .55);
    background: linear-gradient(160deg, rgba(239, 43, 82, .3), rgba(190, 18, 60, .2));
    box-shadow: 0 6px 16px rgba(239, 43, 82, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Icon-only rail: the labels stay for screen readers */
.wx26-quick a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 2026-07-29: grouped and labelled Explore shortcuts. */
/* 2026-08-09: dordunculu grup (Gelistirici) eklendi. Onceden 3 sutun ve
   760px sinir vardi; dorduncu grup alt satira dusuyordu. Artik dordu de
   YAN YANA durur ve sagdaki bos alan kullanilir. */
.whitoo-explore-v2 .wx26-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    width: min(1010px, 100%);
}
.whitoo-explore-v2 .wx26-quick-group {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 13px;
    background: rgba(7,12,22,.46);
}
.whitoo-explore-v2 .wx26-quick-title {
    display: block;
    margin: 0 2px 7px;
    color: rgba(190,199,216,.66);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.whitoo-explore-v2 .wx26-quick-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.whitoo-explore-v2 .wx26-quick .wx26-quick-items a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 13.5px;
}
.whitoo-explore-v2 .wx26-quick .wx26-quick-items a span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: rgba(222,227,237,.82);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
/* Dort sutun daralinca once ikiye, sonra teke duser. */
@media (max-width: 1180px) {
    .whitoo-explore-v2 .wx26-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .whitoo-explore-v2 .wx26-quick { grid-template-columns: 1fr; }
}

/* ============================ CATEGORY PILLS ============================ */

.wx26-cats {
    margin-bottom: var(--wx-gap);
}

.wx26-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: var(--wx-panel);
}

.wx26-cat-arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--wx-line);
    border-radius: 8px;
    background: var(--wx-panel-2);
    color: var(--wx-muted);
    cursor: pointer;
}

.wx26-cat-arrow:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.wx26-cat-chips {
    display: flex;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.wx26-cat-chips::-webkit-scrollbar {
    display: none;
}

/* SAYFA KAYMASI DUZELTMESI
   Cipin icindeki gizli radio 'position:absolute' idi ama .wx26-chip
   konumlandirilmamisti; bu yuzden girdinin konum referansi body oluyordu
   (body position:relative). Girdi boylece .wx26-cat-chips seridinin
   overflow kirpmasindan KACIYOR ve serit boyunca x=4031'e kadar uzaniyordu.
   Sonuc: belge genisligi 1920 yerine 4044. body{overflow-x:hidden} gorunur
   kaydirma cubugunu gizledigi icin fark edilmiyordu, ama gercek fare
   tiklamasi etiketin girdisini ODAKLIYOR ve tarayici onu gorunur kilmak
   icin sayfayi saga kaydiriyordu. Geri donecek cubuk olmadigindan sayfa
   kaymis halde kaliyordu.
   Cozum: konum referansini cipin kendisi yap; girdi seridin icinde kalir,
   kirpilir ve odaklandiginda sayfayi degil SERIDI kaydirir. */
.wx26-chip {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.wx26-chip input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wx26-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--wx-line);
    border-radius: 9px;
    background: var(--wx-panel-2);
    color: var(--wx-muted);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wx26-chip > span i {
    font-size: 14px;
}

.wx26-chip:hover > span {
    color: var(--wx-text);
    border-color: rgba(255, 255, 255, .18);
}

.wx26-chip input:checked + span {
    border-color: transparent;
    background: linear-gradient(135deg, #f43f5e, #be123c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(239, 43, 82, .32);
}

/* ============================ TOP COMMUNITIES ============================ */

.wx26-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: var(--wx-gap);
    padding: 12px 14px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: var(--wx-panel);
}

.wx26-top-copy {
    min-width: 0;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search {
    flex: 0 1 380px;
    min-height: 42px;
    padding: 0 5px 0 0;
    border: 1px solid var(--wx-line) !important;
    border-radius: 10px !important;
    background: var(--wx-panel-2) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.whitoo-explore-v2 .wx26-top .input-icon-addon {
    color: var(--wx-muted);
    background: transparent;
    border: 0;
}

.whitoo-explore-v2 .wx26-top .search_chatroom {
    border: 0 !important;
    background: transparent !important;
    color: var(--wx-text) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

.whitoo-explore-v2 .wx26-top .search_chatroom::placeholder {
    color: var(--wx-muted);
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-actions {
    border: 0 !important;
    background: transparent !important;
    gap: 4px;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-action {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--wx-muted) !important;
}

.whitoo-explore-v2 .wx26-top .whitoo-room-search-action:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1200px) {
    .wx26-discover {
        grid-template-columns: minmax(0, 1fr);
    }

    .wx26-welcome {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .wx26-quick {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .wx26-join {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wx26-join-form {
        grid-column: 1 / -1;
    }
}

/* ---------- MOBILE COMPACT: keep cards 2-up, tighten spacing ---------- */
@media (max-width: 640px) {
    .whitoo-explore-v2 { --wx-gap: 10px; }

    .wx26-discover {
        padding: 14px;
        gap: 14px;
    }

    .wx26-discover-copy h2 { font-size: 19px; margin: 8px 0 6px; }
    .wx26-discover-copy p { font-size: 11.5px; margin-bottom: 10px; }
    .wx26-chips { gap: 9px; }

    .wx26-cards { gap: 8px; }
    .wx26-card { padding: 11px 10px; gap: 8px; grid-template-columns: auto minmax(0, 1fr); }
    .wx26-ci { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
    .wx26-ct strong { font-size: 9.8px; }
    .wx26-ct small { font-size: 9.2px; }
    .wx26-go { display: none; }

    .wx26-join { padding: 12px; gap: 10px; }
    .wx26-join-ico { width: 36px; height: 36px; font-size: 17px; }
    .wx26-join-copy strong { font-size: 12.5px; }

    .wx26-welcome { padding: 10px 12px; gap: 10px; }
    .wx26-me img { width: 36px; height: 36px; }
    .wx26-me strong { font-size: 12.5px; }
    .whitoo-explore-v2 .wx26-quick a { width: 32px; height: 32px; font-size: 15px; }

    .wx26-chip > span { height: 30px; padding: 0 11px; font-size: 10.5px; }
    .wx26-top { padding: 10px; }
    .whitoo-explore-v2 .wx26-top .whitoo-room-search { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    /* Still 2-up — do not collapse to a single tall column. */
    .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wx26-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .wx26-ct strong { font-size: 9.2px; }
}

/* ===== whitoo-explore-pro.css ===== */
/* ==========================================================================
   WHITOO EXPLORE — GORSEL KATMAN (2026-08-28)

   Bu dosya SADECE gorunumu yukseltir. Hicbir isaretleme, baglanti ya da
   dugme degistirilmedi: kartlarin hepsi zaten gercek kontrol
   (.whitoo-quick-match-open, .whitoo-create-normal, markt SSO baglantisi,
   .whitoo-create-ai, join_by_link formu) ve oldugu gibi calismaya devam
   ediyor. Bu yuzden burada calismayan tek bir dugme yok - yeni dugme
   EKLENMEDI, var olanlar yeniden giydirildi.

   Kapsam: yalnizca body.whitoo-explore-active — oda ekranina dokunmaz.
   Geri alma: chat_room.html icindeki bu dosyanin <link> satirini sil.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

body.whitoo-explore-active {
    --wxp-line:  rgba(255, 255, 255, .065);
    --wxp-line2: rgba(255, 255, 255, .10);
    --wxp-fill:  linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .014));
    --wxp-lift:  inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 46px rgba(0, 0, 0, .42);
    --wxp-red:   #ef2b52;
    --wxp-text:  #f2f5fc;
    --wxp-mute:  #8b93a7;
    --wxp-dim:   #6b7488;
}

/* ---------- hareket sozlugu ---------- */
@keyframes wxpRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wxpGlint { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes wxpSweep { to { transform: rotate(360deg); } }
@keyframes wxpHalo  { 0% { transform: scale(.9); opacity: .65; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@keyframes wxpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* kaydirdikca yerine oturan bolumler */
@keyframes wxpIn { from { opacity: .001; transform: translateY(34px) scale(.99); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
    body.whitoo-explore-active .wx26-discover,
    body.whitoo-explore-active .wx26-join,
    body.whitoo-explore-active .wx26-welcome,
    body.whitoo-explore-active .wx26-cats,
    body.whitoo-explore-active .wx26-top {
        animation: wxpIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}

/* ==========================================================================
   1) KESFET — asimetrik duzen + radar imzasi
   ========================================================================== */
body.whitoo-explore-active .wx26-discover {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    padding: clamp(26px, 2.6vw, 40px) !important;
    border: 1px solid var(--wxp-line);
    border-radius: 22px;
    background: var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}

/* radar taramasi: "KESFET" basligindaki radar ikonunun gorsel karsiligi */
body.whitoo-explore-active .wx26-discover::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -260px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .5;
    background:
        repeating-radial-gradient(circle, rgba(239, 43, 82, .11) 0 1px, transparent 1px 54px),
        conic-gradient(from 0deg, rgba(239, 43, 82, .22), transparent 32%);
    animation: wxpSweep 18s linear infinite;
    -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
    mask-image: radial-gradient(circle, #000 42%, transparent 72%);
}
body.whitoo-explore-active .wx26-discover > * { position: relative; z-index: 1; }

body.whitoo-explore-active .wx26-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 2.6px;
    font-size: 10.5px;
    font-weight: 600;
}
body.whitoo-explore-active .wx26-discover-copy h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 2.9vw, 42px);
    line-height: 1.08;
    letter-spacing: -1.6px;
    color: var(--wxp-text);
    text-wrap: pretty;
}
body.whitoo-explore-active .wx26-discover-copy p {
    font-weight: 300;
    line-height: 1.65;
    color: var(--wxp-mute);
}

/* ---------- aksiyon kartlari: bento ritmi ---------- */
body.whitoo-explore-active .wx26-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
/* Asimetrik ritim: ust satir 3+3, alt satir 2+4.
   Woo AI en genis kutu - sayfanin one cikardigi eylem o. */
body.whitoo-explore-active .wx26-cards > *:nth-child(1) { grid-column: span 3; }
body.whitoo-explore-active .wx26-cards > *:nth-child(2) { grid-column: span 3; }
body.whitoo-explore-active .wx26-cards > *:nth-child(3) { grid-column: span 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) { grid-column: span 4; }

body.whitoo-explore-active .wx26-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line);
    border-radius: 16px;
    background: var(--wxp-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .wx26-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}
body.whitoo-explore-active .wx26-card:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 26px 54px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .wx26-card:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .wx26-card:focus-visible {
    outline: 2px solid rgba(239, 43, 82, .7);
    outline-offset: 2px;
}
body.whitoo-explore-active .wx26-ct strong {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: .7px;
}
body.whitoo-explore-active .wx26-ct small { color: var(--wxp-mute); line-height: 1.5; }

/* kart rengi kimligi korunur, sadece derinlesir */
body.whitoo-explore-active .wx26-card:has(.wx26-c-red)    { background: linear-gradient(150deg, rgba(239, 43, 82, .11), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-green)  { background: linear-gradient(150deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-blue)   { background: linear-gradient(150deg, rgba(59, 130, 246, .10), rgba(255, 255, 255, .014)); }
body.whitoo-explore-active .wx26-card:has(.wx26-c-purple) {
    background: linear-gradient(150deg, rgba(168, 85, 247, .15), rgba(255, 255, 255, .014));
    border-color: rgba(168, 85, 247, .24);
}

body.whitoo-explore-active .wx26-chips span {
    border: 1px solid var(--wxp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--wxp-mute);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, color .2s ease;
}
body.whitoo-explore-active .wx26-chips span:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 43, 82, .5);
    color: #ffd9e0;
}

body.whitoo-explore-active .wx26-studio {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 12px;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-studio:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(168, 85, 247, .28);
}

/* ==========================================================================
   2) DAVET ILE ERISIM
   ========================================================================== */
body.whitoo-explore-active .wx26-join {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 6% 50%, rgba(239, 43, 82, .13), transparent 40%),
        var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}
body.whitoo-explore-active .wx26-join-ico { animation: wxpFloat 5s ease-in-out infinite; }
body.whitoo-explore-active .wx26-join input[type="text"],
body.whitoo-explore-active .wx26-join .form-control {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    border-radius: 13px;
    border: 1px solid var(--wxp-line);
    background: rgba(5, 7, 13, .72);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join input[type="text"]:focus,
body.whitoo-explore-active .wx26-join .form-control:focus {
    border-color: rgba(239, 43, 82, .55);
    box-shadow: 0 0 0 3px rgba(239, 43, 82, .12);
}
body.whitoo-explore-active .wx26-join button[type="submit"],
body.whitoo-explore-active .wx26-join .btn-primary {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 13px;
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    border: 0;
    box-shadow: 0 14px 32px rgba(239, 43, 82, .36);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join button[type="submit"]:hover,
body.whitoo-explore-active .wx26-join .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(239, 43, 82, .48);
}

/* ==========================================================================
   3) HOS GELDIN + HIZLI BAGLANTILAR
   ========================================================================== */
body.whitoo-explore-active .wx26-welcome {
    border: 1px solid var(--wxp-line);
    border-radius: 20px;
    background: var(--wxp-fill);
    box-shadow: var(--wxp-lift);
}
body.whitoo-explore-active .wx26-quick-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9.5px;
    letter-spacing: 2.2px;
    color: #5f6779;
}
body.whitoo-explore-active .wx26-quick-items > * {
    border-radius: 10px;
    transition: transform .18s cubic-bezier(.2, .9, .25, 1), background .18s ease, color .18s ease;
}
body.whitoo-explore-active .wx26-quick-items > *:hover {
    transform: translateX(2px);
    background: rgba(239, 43, 82, .1);
    color: #ffd9e0;
}

/* ==========================================================================
   4) KATEGORILER — tiklanabilirlik korunur, sadece his degisir
   ========================================================================== */
body.whitoo-explore-active .wx26-cats h2,
body.whitoo-explore-active .wx26-top h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(21px, 2.1vw, 30px);
    letter-spacing: -1.1px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .wx26-cat-chips > * {
    border: 1px solid var(--wxp-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .028);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s ease, background .2s ease, color .2s ease;
}
body.whitoo-explore-active .wx26-cat-chips > *:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 43, 82, .5);
    background: rgba(239, 43, 82, .1);
    color: #ffd9e0;
}

/* ==========================================================================
   5) EN IYI TOPLULUKLAR — oda kartlari
   ========================================================================== */
body.whitoo-explore-active .chatroom-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line);
    border-radius: 18px;
    background: var(--wxp-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .chatroom-item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 2;
}
body.whitoo-explore-active .chatroom-item:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 58px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .chatroom-item:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .lt-room-title {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.3px;
}

/* ==========================================================================
   6) hareketi kapatanlar
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.whitoo-explore-active *,
    body.whitoo-explore-active *::before,
    body.whitoo-explore-active *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* dar ekranda bento tek sutuna duser */
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-discover { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.whitoo-explore-active .wx26-cards > * { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
    body.whitoo-explore-active .wx26-cards { grid-template-columns: minmax(0, 1fr); }
}

/* bolum ust etiketleri (EN IYI TOPLULUKLAR, KATEGORILER ...) */
body.whitoo-explore-active .wx26-top-copy > *:first-child,
body.whitoo-explore-active .wx26-cat-row > *:first-child {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 2.4px;
}

/* ==========================================================================
   7) SES KURESI — "ONE WORLD. ENDLESS VOICES." cumlesinin gorsel karsiligi
   Tamamen dekoratif: pointer-events yok, hicbir kontrolun onunu kesmez.
   ========================================================================== */
@keyframes wxpGlobe  { to { transform: rotateY(360deg); } }
@keyframes wxpTwink  { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes wxpOrbit  { to { offset-distance: 100%; } }

body.whitoo-explore-active .wxp-globe {
    position: absolute;
    right: -40px;
    top: 50%;
    width: 520px;
    height: 520px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    opacity: .72;
}
body.whitoo-explore-active .wxp-globe::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    filter: blur(58px);
    background: radial-gradient(circle, rgba(239, 43, 82, .5), rgba(168, 85, 247, .18) 52%, transparent 70%);
}
body.whitoo-explore-active .wxp-globe svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
body.whitoo-explore-active .wxp-mer {
    transform-origin: 210px 210px;
    animation: wxpGlobe 15s linear infinite;
}
body.whitoo-explore-active .wxp-mer-2 { animation-delay: -5s; }
body.whitoo-explore-active .wxp-mer-3 { animation-delay: -10s; }

body.whitoo-explore-active .wxp-node   { animation: wxpTwink 3.2s ease-in-out infinite; }
body.whitoo-explore-active .wxp-node-2 { animation-delay: .6s; }
body.whitoo-explore-active .wxp-node-3 { animation-delay: 1.3s; }
body.whitoo-explore-active .wxp-node-4 { animation-delay: 2s; }

body.whitoo-explore-active .wxp-spark {
    offset-path: path('M132 128 Q 210 60 286 164');
    animation: wxpOrbit 3.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
body.whitoo-explore-active .wxp-spark-2 {
    offset-path: path('M104 246 Q 190 340 252 292');
    animation: wxpOrbit 4.2s cubic-bezier(.4, 0, .6, 1) .8s infinite;
}

/* kure kartlarin arkasinda kalsin, metin okunur olsun */
body.whitoo-explore-active .wx26-discover-copy,
body.whitoo-explore-active .wx26-cards { position: relative; z-index: 2; }
/* kure kartlarin altinda kalinca yazi okunurlugu dusmesin diye kartlara
   ince bir zemin karartmasi ekliyoruz */
body.whitoo-explore-active .wx26-card { backdrop-filter: blur(3px); }

@media (max-width: 1200px) {
    body.whitoo-explore-active .wxp-globe { width: 360px; height: 360px; right: -110px; opacity: .34; }
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wxp-globe { display: none; }
}

/* ==========================================================================
   8) UC ADIM SERIDI
   ========================================================================== */
body.whitoo-explore-active .wxp-steps {
    margin-bottom: var(--wx-gap, 18px);
}
body.whitoo-explore-active .wxp-steps-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.6px;
    color: var(--wxp-red);
}
body.whitoo-explore-active .wxp-steps-label::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--wxp-red);
}
body.whitoo-explore-active .wxp-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--wxp-line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--wxp-line);
}
body.whitoo-explore-active .wxp-step {
    position: relative;
    overflow: hidden;
    padding: 28px 26px;
    background: #0b0d16;
    transition: background .26s ease;
}
body.whitoo-explore-active .wxp-step::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}
body.whitoo-explore-active .wxp-step:hover { background: #0e1120; }
body.whitoo-explore-active .wxp-step:hover::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }
body.whitoo-explore-active .wxp-step-no {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--wxp-red);
}
body.whitoo-explore-active .wxp-n2 { color: #ff6b81; }
body.whitoo-explore-active .wxp-n3 { color: #a855f7; }
body.whitoo-explore-active .wxp-step strong {
    display: block;
    margin-top: 13px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.9px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .wxp-step small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--wxp-mute);
}
@supports (animation-timeline: view()) {
    body.whitoo-explore-active .wxp-steps {
        animation: wxpIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}
@media (max-width: 760px) {
    body.whitoo-explore-active .wxp-steps-grid { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .wxp-step { padding: 22px 20px; }
    body.whitoo-explore-active .wxp-step strong { font-size: 21px; }
}

/* ==========================================================================
   9) KAHRAMAN — afis slaytinin yerine gecen bolum (2026-08-28)
   ========================================================================== */
@keyframes wxpLetter { from { opacity: 0; transform: translateY(88%) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes wxpFlow   { to { background-position: 300% 0; } }
@keyframes wxpDrift  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes wxpBlink  { 0%, 40% { transform: scaleY(0); } 42.5% { transform: scaleY(1); } 45%, 86% { transform: scaleY(0); } 88.5% { transform: scaleY(1); } 91%, 100% { transform: scaleY(0); } }
@keyframes wxpEq     { 0%, 100% { height: 22%; } 50% { height: 100%; } }

body.whitoo-explore-active .wxp-hero {
    position: relative;
    /* Bootstrap'in .d-lg-block kurali display:block !important ile geliyordu;
       sinif sablondan kaldirildi, yine de garanti olsun diye zorluyoruz. */
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: 24px;
    min-height: 0;
    padding: 46px 44px;
    overflow: hidden;
    border: 1px solid rgba(239, 43, 82, .2);
    border-radius: 24px;
    background:
        radial-gradient(120% 80% at 78% 40%, rgba(239, 43, 82, .2), transparent 56%),
        radial-gradient(70% 60% at 12% 10%, rgba(168, 85, 247, .12), transparent 60%),
        linear-gradient(122deg, #120a12 0%, #0d0f1c 54%, #08090f 100%);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
body.whitoo-explore-active .wxp-hero-copy { position: relative; z-index: 2; min-width: 0; }

body.whitoo-explore-active .wxp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 15px 7px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: #ff9fb0;
}
body.whitoo-explore-active .wxp-hero-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef2b52;
}
body.whitoo-explore-active .wxp-hero-dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1.5px solid #ef2b52;
    border-radius: 50%;
    animation: wxpHalo 2.6s ease-out infinite;
}

/* harf harf acilan baslik */
body.whitoo-explore-active .wxp-hero-title {
    margin: 22px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4.4vw, 66px);
    line-height: .94;
    font-weight: 700;
    letter-spacing: -2.6px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wxp-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
body.whitoo-explore-active .wxp-w > span { display: inline-block; animation: wxpLetter .82s cubic-bezier(.16, 1, .3, 1) both; }
body.whitoo-explore-active .wxp-w > span:nth-child(1) { animation-delay: .10s; }
body.whitoo-explore-active .wxp-w > span:nth-child(2) { animation-delay: .15s; }
body.whitoo-explore-active .wxp-w > span:nth-child(3) { animation-delay: .20s; }
body.whitoo-explore-active .wxp-w > span:nth-child(4) { animation-delay: .25s; }
body.whitoo-explore-active .wxp-w > span:nth-child(5) { animation-delay: .30s; }
body.whitoo-explore-active .wxp-w > span:nth-child(6) { animation-delay: .35s; }
body.whitoo-explore-active .wxp-w > span:nth-child(7) { animation-delay: .40s; }
/* Gradyan HARFLERE uygulanmali: metin cocuk span'lerin icinde, ustteki
   kutuda dogrudan metin yok - orada background-clip:text bos alani kirpip
   yaziyi tamamen gorunmez yapiyordu. */
body.whitoo-explore-active .wxp-flow > span {
    background: linear-gradient(96deg, #ef2b52 0%, #ff7d92 22%, #f4ece6 48%, #ff7d92 74%, #ef2b52 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: wxpLetter .82s cubic-bezier(.16, 1, .3, 1) both, wxpFlow 8s linear infinite;
}

body.whitoo-explore-active .wxp-hero-lead {
    margin: 22px 0 0;
    max-width: 430px;
    font-size: 16px;
    line-height: 1.68;
    font-weight: 300;
    color: #98a1b6;
    text-wrap: pretty;
}
body.whitoo-explore-active .wxp-hero-lead b { color: #f2f5fc; font-weight: 400; }

body.whitoo-explore-active .wxp-hero-cta { display: flex; gap: 11px; margin-top: 28px; }
body.whitoo-explore-active .wxp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 26px;
    border-radius: 13px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease, border-color .2s ease;
}
/* whitoo-brand.css icinde `a { color: var(--whitoo-red-2) !important }` var -
   secicisiz ve !important'li oldugu icin kirmizi dugmede kirmizi yazi cikiyordu.
   Bu yuzden dugme renklerini de !important ile sabitliyoruz. */
body.whitoo-explore-active .wxp-btn-main {
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(239, 43, 82, .42);
}
body.whitoo-explore-active .wxp-btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(239, 43, 82, .55); color: #fff !important; }
body.whitoo-explore-active .wxp-btn-main i { color: #fff !important; }
body.whitoo-explore-active .wxp-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .12);
    color: #f2f5fc !important;
}
body.whitoo-explore-active .wxp-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .26); color: #f2f5fc !important; }

/* gercek sayilar */
body.whitoo-explore-active .wxp-hero-stats {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
body.whitoo-explore-active .wxp-stat b {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1.1px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wxp-stat small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    letter-spacing: .3px;
    color: #6b7488;
}
body.whitoo-explore-active .wxp-stat-sep { width: 1px; height: 32px; background: rgba(255, 255, 255, .08); }
body.whitoo-explore-active .wxp-stat-live { color: #ff8fa3 !important; }
body.whitoo-explore-active .wxp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
body.whitoo-explore-active .wxp-eq i { width: 2.5px; background: #ef2b52; border-radius: 2px; animation: wxpEq 1s ease-in-out infinite; }
body.whitoo-explore-active .wxp-eq i:nth-child(2) { background: #ff6b81; animation-delay: .14s; }
body.whitoo-explore-active .wxp-eq i:nth-child(3) { animation-delay: .28s; }

/* kure + maskot */
body.whitoo-explore-active .wxp-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 0;
    aspect-ratio: 1 / .78;
}
body.whitoo-explore-active .wxp-hero-globe { position: relative; width: min(340px, 100%); aspect-ratio: 1; }
body.whitoo-explore-active .wxp-hero-globe::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    filter: blur(62px);
    background: radial-gradient(circle, rgba(239, 43, 82, .5), rgba(168, 85, 247, .18) 52%, transparent 70%);
}
body.whitoo-explore-active .wxp-hero-globe svg { position: relative; width: 100%; height: 100%; overflow: visible; }
body.whitoo-explore-active .wxp-mer-4 { animation-delay: -12s; }
body.whitoo-explore-active .wxp-node-5 { animation-delay: 2.6s; }
body.whitoo-explore-active .wxp-spark-3 {
    offset-path: path("M286 164 Q 350 200 330 238");
    animation: wxpOrbit 2.8s cubic-bezier(.4, 0, .6, 1) 1.4s infinite;
}

body.whitoo-explore-active .wxp-hero-mascot {
    position: absolute;
    right: 6%;
    bottom: 6%;
    width: 152px;
    animation: wxpDrift 5s ease-in-out infinite;
    filter: drop-shadow(0 22px 46px rgba(239, 43, 82, .55));
}
body.whitoo-explore-active .wxp-hero-mascot img { display: block; width: 100%; height: auto; }
body.whitoo-explore-active .wxp-lid {
    position: absolute;
    transform: scaleY(0);
    transform-origin: top center;
    background: linear-gradient(180deg, #ded8da 0%, #f2eff0 38%, #f8f6f7 100%);
    border-radius: 46% 46% 50% 50%/18% 18% 58% 58%;
    animation: wxpBlink 4.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
body.whitoo-explore-active .wxp-lid-l { left: 22.5%; top: 30.1%; width: 28.5%; height: 22.4%; }
body.whitoo-explore-active .wxp-lid-r { left: 58.5%; top: 30.6%; width: 28%; height: 21.9%; }

@media (max-width: 1200px) {
    body.whitoo-explore-active .wxp-hero { padding: 38px 32px; min-height: 380px; }
    body.whitoo-explore-active .wxp-hero-globe { width: 320px; height: 320px; }
    body.whitoo-explore-active .wxp-hero-mascot { width: 118px; }
    body.whitoo-explore-active .wxp-hero-stats { gap: 20px; }
}

@media (max-width: 991.98px) {
    body.whitoo-explore-active .wxp-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 30px 22px;
        text-align: left;
    }
    body.whitoo-explore-active .wxp-hero-art { display: none; }
    body.whitoo-explore-active .wxp-hero-stats { gap: 16px; margin-top: 26px; padding-top: 18px; }
    body.whitoo-explore-active .wxp-stat b { font-size: 22px; }
    body.whitoo-explore-active .wxp-hero-cta { flex-wrap: wrap; }
    body.whitoo-explore-active .wxp-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   10) BENTO — maketteki duzen (2026-08-28)
   Ust satir: WOO AI tam genislik.  Alt satir: uc esit kutu.
   DOM sirasi 1=hizli esles 2=sunucu 3=market 4=woo ai oldugu icin
   yerlesim grid-row / grid-column ile veriliyor; isaretleme sirasi bozulmadi.
   ========================================================================== */
body.whitoo-explore-active .wx26-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    align-content: start;
    gap: 12px;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(4) { grid-column: 1 / -1; grid-row: 1; }
body.whitoo-explore-active .wx26-cards > *:nth-child(1) { grid-column: 1; grid-row: 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(2) { grid-column: 2; grid-row: 2; }
body.whitoo-explore-active .wx26-cards > *:nth-child(3) { grid-column: 3; grid-row: 2; }

/* ---- uc kucuk kutu: ikon ustte, metin altta ---- */
body.whitoo-explore-active .wx26-cards > *:nth-child(1),
body.whitoo-explore-active .wx26-cards > *:nth-child(2),
body.whitoo-explore-active .wx26-cards > *:nth-child(3) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 18px 18px !important;
    text-align: left;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct {
    display: block;
    margin-top: 34px;
    text-align: left;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct strong,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct strong,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct strong {
    display: block;
    font-size: 12px;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-ct small,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-ct small,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-ct small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}
/* ok isaretleri kucuk kutularda gereksiz — kutunun tamami zaten tiklanabilir */
body.whitoo-explore-active .wx26-cards > *:nth-child(1) .wx26-go,
body.whitoo-explore-active .wx26-cards > *:nth-child(2) .wx26-go,
body.whitoo-explore-active .wx26-cards > *:nth-child(3) .wx26-go {
    display: none;
}

/* ---- Woo AI: genis kutu ---- */
body.whitoo-explore-active .wx26-cards > *:nth-child(4) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 14px;
    padding: 22px 24px !important;
}
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ci { align-self: center; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-go { align-self: center; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ct { text-align: left; }
body.whitoo-explore-active .wx26-cards > *:nth-child(4) .wx26-ct strong { font-size: 12.5px; }

/* yazan istem kutusu */
@keyframes wxpType  { from { width: 0; } to { width: 100%; } }
body.whitoo-explore-active .wxp-ai-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 11px 0 9px;
    padding: 11px 14px;
    border: 1px solid rgba(168, 85, 247, .22);
    border-radius: 11px;
    background: rgba(5, 7, 13, .66);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: .4px;
    color: #d8b4fe;
    white-space: nowrap;
    overflow: hidden;
}
body.whitoo-explore-active .wxp-ai-prompt em { font-style: normal; color: #6b7488; }
body.whitoo-explore-active .wxp-ai-prompt i {
    width: 7px;
    height: 14px;
    background: #a855f7;
    animation: wxpCaret 1s step-end infinite;
}
@keyframes wxpCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ==========================================================================
   11) DAVET CUBUGU — maketteki tek satir hali
   Form ve girdi AYNEN duruyor, yalnizca giydiriliyor.
   ========================================================================== */
body.whitoo-explore-active .wx26-join .lt-join-link-card {
    display: grid;
    grid-template-columns: minmax(0, .34fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy small { display: none; }
body.whitoo-explore-active .wx26-join .lt-join-link-copy span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: #ff9fb0;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy strong {
    display: block;
    margin-top: 7px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: #f2f5fc;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form {
    display: contents;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(5, 7, 13, .72);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input:focus-within {
    border-color: rgba(239, 43, 82, .55);
    box-shadow: 0 0 0 3px rgba(239, 43, 82, .12);
}
body.whitoo-explore-active .wx26-join .lt-join-link-input i { color: #6b7488; font-size: 17px; }
body.whitoo-explore-active .wx26-join .lt-join-link-input input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .3px;
    color: #ff8fa3;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input input::placeholder { color: #ff8fa3; opacity: .7; }
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 54px;
    padding: 0 34px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(100deg, #ef2b52, #c81e4a);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(239, 43, 82, .38);
    transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] i { color: #fff !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(239, 43, 82, .5);
}
body.whitoo-explore-active .wx26-join .lt-join-link-error { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    body.whitoo-explore-active .wx26-join .lt-join-link-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    body.whitoo-explore-active .wx26-join .lt-join-link-copy { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-cards > * { grid-column: auto !important; grid-row: auto !important; }
    body.whitoo-explore-active .wx26-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.whitoo-explore-active .wx26-join .lt-join-link-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    body.whitoo-explore-active .wx26-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   12) DAVET CUBUGU — referansa gore sadelestirme (2026-08-28)
   Soldaki ikon rozeti, baslik ikonu ve girdideki dunya ikonu kaldirildi;
   girdinin onune gri "whitoo.com/" oneki kondu. Form ve girdi AYNEN duruyor.
   ========================================================================== */
body.whitoo-explore-active .wx26-join { padding: 18px 24px !important; }
body.whitoo-explore-active .wx26-join .wx26-join-ico { display: none !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-copy span i { display: none !important; }
body.whitoo-explore-active .wx26-join .lt-join-link-input > i { display: none !important; }

body.whitoo-explore-active .wx26-join .lt-join-link-card {
    gap: 20px;
    grid-template-columns: minmax(0, .30fr) minmax(0, 1fr) auto;
}
body.whitoo-explore-active .wx26-join .lt-join-link-copy strong {
    margin-top: 4px;
    font-size: 19px;
    line-height: 1.2;
}
body.whitoo-explore-active .wx26-join .lt-join-link-input {
    position: relative;
    height: 50px;
    padding: 0 18px;
    gap: 0;
}
/* gri onek — girdinin kendisi degismedi, yalnizca onunde duruyor */
body.whitoo-explore-active .wx26-join .lt-join-link-input::before {
    content: "whitoo.com/";
    flex: 0 0 auto;
    margin-right: 7px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .3px;
    color: #6b7488;
    pointer-events: none;
}
body.whitoo-explore-active .wx26-join .lt-join-link-form button[type="submit"] {
    height: 50px;
    padding: 0 30px;
}
@media (max-width: 900px) {
    body.whitoo-explore-active .wx26-join { padding: 18px 18px !important; }
}

/* ==========================================================================
   13) ODA KARTLARI — referansa gore (2026-08-28)
   Isaretleme AYNEN duruyor (room_loop.html): kapak, ikon, baslik, dogrulama
   rozeti, sahip + WOO ROZETI, uye sayisi ve "Sunucuya gir" bagi. Sadece
   yerlesim ve yuzey degisti. Kartin tamami hala tek bir <a> — tiklama alani
   kucultulmedi.
   ========================================================================== */
body.whitoo-explore-active .room-loop-link { text-decoration: none; display: block; }
body.whitoo-explore-active .room-loop-link:hover { text-decoration: none; }

body.whitoo-explore-active .room-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wxp-line) !important;
    border-radius: 18px !important;
    background: var(--wxp-fill) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-color .26s ease, box-shadow .26s ease;
}
body.whitoo-explore-active .room-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 3;
}
body.whitoo-explore-active .room-loop-link:hover .room-card {
    transform: translateY(-5px);
    border-color: rgba(239, 43, 82, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 58px rgba(0, 0, 0, .5) !important;
}
body.whitoo-explore-active .room-loop-link:hover .room-card::after { animation: wxpGlint .9s cubic-bezier(.3, 0, .2, 1); }

/* ---- kapak ---- */
body.whitoo-explore-active .room-card .card-img-top {
    position: relative;
    height: 132px !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
}
/* alt tarafa karartma: ikon ve baslik alani okunur kalsin */
body.whitoo-explore-active .room-card .card-img-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 8, 15, .12) 0%, rgba(7, 8, 15, .55) 62%, rgba(11, 13, 22, .95) 100%);
}

/* ---- govde ---- */
body.whitoo-explore-active .room-card .card-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding: 0 18px 18px !important;
}
/* oda ikonu: kapagin alt kenarina binen kare rozet */
body.whitoo-explore-active .room-card .card-body > .room-image {
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    border-radius: 13px !important;
    border: 2px solid rgba(11, 13, 22, .9) !important;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
body.whitoo-explore-active .room-card .lt-room-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--wxp-text);
}
body.whitoo-explore-active .room-card .lt-room-title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.whitoo-explore-active .room-card .lt-room-verified {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(52, 211, 153, .16);
    color: #6ee7b7;
    font-size: 11px;
}

/* aciklama: iki satirda kesilir, kartlar esit boyda kalir */
body.whitoo-explore-active .room-card .card-body > p {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 9px 0 0 !important;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--wxp-mute) !important;
}

/* ---- alt satir: solda sahip + Woo rozeti + uye sayisi, sagda dugme ---- */
body.whitoo-explore-active .room-card .room-stats {
    grid-column: 1;
    grid-row: 4;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 16px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 11.5px;
    color: var(--wxp-mute);
}
body.whitoo-explore-active .room-card .room-owner-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
body.whitoo-explore-active .room-card .room-owner-name {
    min-width: 0;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* WOO ROZETI KALIYOR — sadece hizalanip biraz kuculuyor */
body.whitoo-explore-active .room-card .woo-server-member-badge img {
    width: 26px;
    height: auto;
    display: block;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto {
    margin-left: auto !important;
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .2px;
    white-space: nowrap;
}
body.whitoo-explore-active .room-card .room-stats i { color: var(--wxp-dim); }

/* "Sunucuya gir" — alt satirin sagina, kompakt dugme */
body.whitoo-explore-active .room-card .whitoo-room-card-action {
    grid-column: 2;
    grid-row: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: end;
    margin: 16px 0 0 !important;
    padding: 9px 15px !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--wxp-text) !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2, .9, .25, 1);
}
body.whitoo-explore-active .room-loop-link:hover .whitoo-room-card-action {
    border-color: transparent;
    background: #ef2b52;
    color: #fff !important;
    transform: translateY(-1px);
}
body.whitoo-explore-active .room-card .whitoo-room-card-action i { font-size: 14px; }

@media (max-width: 640px) {
    body.whitoo-explore-active .room-card .card-body { grid-template-columns: minmax(0, 1fr); }
    body.whitoo-explore-active .room-card .room-stats { grid-column: 1; grid-row: auto; }
    body.whitoo-explore-active .room-card .whitoo-room-card-action {
        grid-column: 1;
        grid-row: auto;
        margin-top: 12px !important;
        justify-content: center;
    }
}

/* ==========================================================================
   13b) ODA KARTLARI — oncelik duzeltmesi (2026-08-28)
   whitoo-refresh.css icinde `#chat-room-list ... .card-body { display:flex }`
   var; ID tasidigi icin sinif secicilerimi eziyor ve kart icerigini ortaliyordu.
   Yerlesimi belirleyen ozellikleri !important ile sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 0 12px !important;
    padding: 0 18px 18px !important;
}
body.whitoo-explore-active .room-card .room-image {
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.whitoo-explore-active .room-card .lt-room-title {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
body.whitoo-explore-active .room-card .card-body > p {
    justify-self: stretch !important;
    -webkit-line-clamp: 2 !important;
    text-align: left !important;
}
body.whitoo-explore-active .room-card .room-stats {
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
}
body.whitoo-explore-active .room-card .whitoo-room-card-action {
    justify-self: end !important;
    width: auto !important;
}

/* ==========================================================================
   13c) ODA KARTLARI — son duzeltmeler (2026-08-28)
   1. Aciklamanin display'i baska bir kuralla flow-root'a duşuyordu; iki satirda
      kesilmesi icin -webkit-box zorunlu.
   2. "Sunucuya gir" dugmesi 128px yer kapliyordu, sahip adina 0px kaliyordu.
      Dugme kompaktlastirildi, isim icin yer acildi.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body > p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

body.whitoo-explore-active .room-card .whitoo-room-card-action {
    gap: 6px !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
}
body.whitoo-explore-active .room-card .whitoo-room-card-action i { font-size: 13px !important; }

body.whitoo-explore-active .room-card .room-stats { gap: 8px !important; }
body.whitoo-explore-active .room-card .room-owner-meta { flex: 0 1 auto; min-width: 0; }
body.whitoo-explore-active .room-card .room-owner-name {
    max-width: 84px !important;
    flex: 0 1 auto;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto { padding-left: 4px; }
body.whitoo-explore-active .room-card .woo-server-member-badge { flex: 0 0 auto; }

/* ==========================================================================
   13d) ODA KARTLARI — iki inatci sorun (2026-08-28)

   1) ACIKLAMA KIRPILMIYORDU. Sebep: .card-body'yi grid yaptik; grid/flex
      cocuklari "bloklasiyor" ve `display:-webkit-box` hayatta kalmiyor
      (computed: flow-root), boylece -webkit-line-clamp devre disi kaliyor.
      Cozum: clamp yerine iki satirlik max-height ile kirpmak.
   2) SAHIP ADI 0px'e cokuyordu. Esnek kutuda `flex: 0 1 auto` + `min-width:0`
      birlesimi ogeyi tamamen ezilebilir yapiyor; sikisinca once o siliniyordu.
      Cozum: taban genislik vermek ve satirin sarmasina izin vermek.
   ========================================================================== */
body.whitoo-explore-active .room-card .card-body > p {
    display: block !important;
    line-height: 1.55 !important;
    max-height: 3.1em !important;   /* tam iki satir */
    overflow: hidden !important;
}

body.whitoo-explore-active .room-card .room-stats {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
}
body.whitoo-explore-active .room-card .room-owner-name {
    flex: 1 1 auto !important;
    min-width: 56px !important;
    max-width: 120px !important;
}

/* 13e) Aciklama punto'su da ID'li bir kuralla 18px kaliyordu; max-height em
   cinsinden oldugu icin iki satir yerine uc satir gorunuyordu. */
body.whitoo-explore-active .room-card .card-body > p {
    font-size: 12.5px !important;
}
body.whitoo-explore-active .room-card .room-stats {
    font-size: 11.5px !important;
}
body.whitoo-explore-active .room-card .room-stats .ms-auto {
    font-size: 11px !important;
}

/* 13f) Izgara ogelerinde `min-height: auto` varsayilani icerik yuksekligine
   esitlenir ve max-height'i EZER — aciklama bu yuzden kirpilmiyordu. */
body.whitoo-explore-active .room-card .card-body > p {
    min-height: 0 !important;
}
body.whitoo-explore-active .room-card .woo-server-member-badge img {
    width: 22px !important;
}

/* ==========================================================================
   14) ODA KARTLARI — referans duzeni (2026-08-28)
   Yeni parcalar: kapak rozeti, ikon+ad+kategori basligi, DOGRULANMIS cipi,
   ORTAK ARKADAS avatarlari. Woo rozeti ve sahip satiri korundu.
   ========================================================================== */

/* --- kapaktaki kategori rozeti --- */
body.whitoo-explore-active .room-card .room-cat-badge {
    position: absolute;
    top: 12px;
    left: 13px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(7, 8, 15, .78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #ff9fb0;
    white-space: nowrap;
    max-width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- baslik satiri: ikon + (ad / kategori) + dogrulama --- */
body.whitoo-explore-active .room-card .room-head {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 16px;
}
body.whitoo-explore-active .room-card .room-head .room-image {
    flex: 0 0 auto;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: none;
    object-fit: cover;
}
body.whitoo-explore-active .room-card .room-head-text { min-width: 0; flex: 1 1 auto; }
body.whitoo-explore-active .room-card .room-head .lt-room-title {
    display: block !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.25;
}
body.whitoo-explore-active .room-card .room-head-cat {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--wxp-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.whitoo-explore-active .room-card .room-head .lt-room-verified {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(52, 211, 153, .13);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #6ee7b7;
}
body.whitoo-explore-active .room-card .room-head .lt-room-verified i { font-size: 11px; }

/* --- ORTAK ARKADAS AVATARLARI --- */
body.whitoo-explore-active .room-card .room-mutuals {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
body.whitoo-explore-active .room-card .room-mutuals img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0b0d16;
    background: #12141f;
}
body.whitoo-explore-active .room-card .room-mutuals img + img { margin-left: -9px; }
body.whitoo-explore-active .room-card .room-mutual-more {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    margin-left: -9px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #0b0d16;
    background: rgba(239, 43, 82, .2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: #ff9fb0;
}

/* --- sahip satiri arkadas avatarlari varken alta iner --- */
body.whitoo-explore-active .room-card .room-owner-second {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin-top: 9px !important;
    font-size: 11px;
    color: var(--wxp-dim);
}
body.whitoo-explore-active .room-card .room-owner-second .room-owner-name {
    max-width: 150px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   14b) SON DUZELTMELER (2026-08-28)
   1. Oda ikonu `#chat-room-loop .room-image` kuraliyla `position:absolute;
      top:-30px` tasiyordu; baslik satirinin icinde akmasi icin static'e cekildi.
   2. Satir sirasi: sahip satiri -> arkadas avatarlari + uye sayisi + dugme.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-head .room-image {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

body.whitoo-explore-active .room-card .room-owner-second {
    grid-row: 4;
    grid-column: 1 / -1;
    margin-top: 15px !important;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
body.whitoo-explore-active .room-card .card-body:has(.room-owner-second) .room-stats {
    grid-row: 5 !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
body.whitoo-explore-active .room-card .card-body:has(.room-owner-second) .whitoo-room-card-action {
    grid-row: 5 !important;
    margin-top: 10px !important;
}

/* ==========================================================================
   14c) ORTAK ARKADAS AVATARLARI — boyut zorlamasi (2026-08-28)
   `#chat-room-loop` altindaki eski bir kural kart icindeki tum img'lere
   width:100% veriyor; avatarlar dev cikip duzeni bozuyordu. ID onceligini
   asmak icin olculeri !important ile sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-mutuals {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
body.whitoo-explore-active .room-card .room-mutuals img {
    width: 25px !important;
    height: 25px !important;
    min-width: 0 !important;
    max-width: 25px !important;
    min-height: 0 !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    border-radius: 50% !important;
    border: 2px solid #0b0d16 !important;
    object-fit: cover !important;
    background: #12141f !important;
    display: block !important;
}
body.whitoo-explore-active .room-card .room-mutuals img + img { margin-left: -9px !important; }
body.whitoo-explore-active .room-card .room-mutual-more {
    flex: 0 0 auto !important;
    margin-left: -9px !important;
}

/* ==========================================================================
   14d) SAHIP SATIRI TEK TIP (2026-08-28)
   Ortak arkadasi olan kartta sahip .room-owner-second icinde, olmayan kartta
   .room-stats icinde duruyordu; iki kutu farkli renk/punto veriyordu.
   Ikisini de ayni degerlere sabitliyoruz.
   ========================================================================== */
body.whitoo-explore-active .room-card .room-owner-meta,
body.whitoo-explore-active .room-card .room-owner-second {
    font-size: 11.5px !important;
    color: #8b93a7 !important;
}
body.whitoo-explore-active .room-card .room-owner-meta .room-owner-name,
body.whitoo-explore-active .room-card .room-owner-second .room-owner-name {
    color: #8b93a7 !important;
    font-weight: 400 !important;
}
body.whitoo-explore-active .room-card .room-owner-meta > i,
body.whitoo-explore-active .room-card .room-owner-second > i {
    color: #6b7488 !important;
    font-size: 13px !important;
}

/* kapak rozeti kalktigi icin kuralini da etkisizlestiriyoruz */
body.whitoo-explore-active .room-card .room-cat-badge { display: none !important; }

/* kategori satiri oda adinin hemen altinda, sade */
body.whitoo-explore-active .room-card .room-head-cat {
    font-size: 11.5px !important;
    color: #6b7488 !important;
}

/* ===== whitoo-room-2026.css ===== */
/* ==========================================================================
   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; }
}

/* ===== whitoo-live.css ===== */
.whitoo-live-active #sidebar-wrapper{display:none!important}.whitoo-live-active .room-bar{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:100!important}.whitoo-live-active .main-container{flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important}.live-room{text-decoration:none!important;color:#9ca3af}.live-room:hover,.live-room.active{color:#fff!important;background:linear-gradient(145deg,#ef233c,#b80f29)!important;box-shadow:0 10px 28px rgba(239,35,60,.3)}
.wlive-shell{height:100vh;overflow:auto;background:radial-gradient(circle at 72% -15%,rgba(239,35,60,.13),transparent 35%),#080a11;color:#f7f8fb;font-family:Inter,Poppins,sans-serif;padding:0 36px 70px}.wlive-topbar{height:78px;display:grid;grid-template-columns:auto minmax(260px,620px) auto;gap:28px;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:20;background:rgba(8,10,17,.88);backdrop-filter:blur(18px)}.wlive-wordmark{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-size:19px}.wlive-wordmark em{color:#ef233c;font-style:normal}.wlive-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#ef233c;box-shadow:0 0 28px rgba(239,35,60,.35)}.wlive-search{height:42px;display:flex;align-items:center;gap:10px;padding:0 15px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#10131d;color:#707887}.wlive-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:13px}.wlive-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.wlive-go-live,.wlive-partner{height:40px;border:1px solid rgba(239,35,60,.4);border-radius:12px;background:rgba(239,35,60,.1);color:#fff;display:flex;align-items:center;gap:8px;padding:0 15px;font-weight:750;font-size:12px;text-decoration:none}.wlive-go-live>span{width:7px;height:7px;border-radius:50%;background:#ef233c;box-shadow:0 0 0 4px rgba(239,35,60,.14)}.wlive-avatar img{width:38px;height:38px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.wlive-categories{display:flex;gap:9px;overflow-x:auto;padding:24px 0 20px;scrollbar-width:none}.wlive-categories button{flex:0 0 auto;border:1px solid rgba(255,255,255,.08);background:#10131d;color:#8c93a3;border-radius:12px;padding:10px 15px;font-size:12px;font-weight:700;display:flex;gap:8px;align-items:center;transition:.2s}.wlive-categories button:hover,.wlive-categories button.is-active{color:#fff;border-color:rgba(239,35,60,.45);background:rgba(239,35,60,.12);transform:translateY(-1px)}.wlive-message:empty{display:none}.wlive-message{margin-bottom:18px}.wlive-message .alert{border-radius:14px}
.wlive-hero{min-height:410px;display:grid;grid-template-columns:minmax(0,1.68fr) minmax(330px,.72fr);border:1px solid rgba(255,255,255,.09);border-radius:25px;overflow:hidden;background:linear-gradient(145deg,#11141e,#0b0d14);box-shadow:0 30px 70px rgba(0,0,0,.28)}.wlive-hero-media,.wlive-thumb{position:relative;background:linear-gradient(135deg,#1a1d2b,#090b11);background-size:cover;background-position:center;overflow:hidden}.wlive-hero-media:after,.wlive-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}.wlive-live-badge,.wlive-viewers{position:absolute;z-index:2;top:16px;border-radius:8px;color:#fff;font-size:10px;font-weight:850;letter-spacing:.07em;padding:7px 10px}.wlive-live-badge{left:16px;background:#ed1636}.wlive-live-badge i{display:inline-block;width:6px;height:6px;background:#fff;border-radius:50%;margin-right:5px;animation:wlivePulse 1.3s infinite}.wlive-viewers{right:16px;background:rgba(6,7,12,.75);backdrop-filter:blur(8px);display:flex;gap:6px;align-items:center}.wlive-play,.wlive-card-play{position:absolute;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:rgba(239,35,60,.92);color:#fff;box-shadow:0 18px 42px rgba(239,35,60,.35);transition:.22s}.wlive-play{width:70px;height:70px;font-size:28px}.wlive-hero-media:hover .wlive-play,.wlive-thumb:hover .wlive-card-play{transform:translate(-50%,-50%) scale(1.08)}.wlive-hero-copy{padding:42px;display:flex;flex-direction:column;justify-content:center}.wlive-kicker{font-size:10px;font-weight:850;letter-spacing:.16em;color:#ef4b61}.wlive-hero h1,.wlive-empty h1{font-size:clamp(30px,3.2vw,54px);line-height:1.04;margin:14px 0;color:#fff;letter-spacing:-.045em}.wlive-hero-copy>p,.wlive-empty>p{color:#8e95a4;font-size:13px;line-height:1.7;max-width:560px}.wlive-creator{display:flex;gap:12px;align-items:center;margin:24px 0}.wlive-creator img{width:44px;height:44px;object-fit:cover;border-radius:13px}.wlive-creator div{display:grid;gap:3px}.wlive-creator strong{font-size:13px}.wlive-creator strong i,.wlive-card-info i{color:#35a7ff}.wlive-creator span{font-size:10px;color:#7b8291}.wlive-watch-now{width:max-content;border:0;border-radius:12px;background:#ef233c;color:#fff;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;text-decoration:none;font-size:12px;font-weight:850;box-shadow:0 14px 30px rgba(239,35,60,.2)}
.wlive-empty{min-height:430px;border:1px solid rgba(255,255,255,.08);border-radius:25px;background:radial-gradient(circle at 50% 20%,rgba(239,35,60,.12),transparent 38%),linear-gradient(145deg,#11141e,#090b11);display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:45px}.wlive-empty h1 em{font-style:normal;color:#ef3c55}.wlive-empty-orbit{width:86px;height:86px;border:1px solid rgba(239,35,60,.35);border-radius:50%;display:grid;place-items:center;position:relative;margin-bottom:22px;color:#fff;font-size:30px;background:rgba(239,35,60,.1)}.wlive-empty-orbit span{position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(255,255,255,.14);animation:wliveSpin 12s linear infinite}.wlive-empty .wlive-watch-now{margin-top:18px}
.wlive-section{padding-top:32px}.wlive-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.wlive-section-head span{font-size:9px;letter-spacing:.15em;color:#ef435b;font-weight:850}.wlive-section-head h2{font-size:21px;margin:4px 0 0}.wlive-section-head small{color:#697080}.wlive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.wlive-card{min-width:0;transition:.2s}.wlive-card:hover{transform:translateY(-4px)}.wlive-thumb{display:block;aspect-ratio:16/9;border-radius:16px;border:1px solid rgba(255,255,255,.08)}.wlive-card-play{width:42px;height:42px;opacity:0}.wlive-thumb:hover .wlive-card-play{opacity:1}.wlive-card-info{display:grid;grid-template-columns:39px minmax(0,1fr);gap:10px;padding-top:11px}.wlive-card-info img{width:39px;height:39px;border-radius:12px;object-fit:cover}.wlive-card-info div{min-width:0;display:grid}.wlive-card-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#f7f8fb}.wlive-card-info span,.wlive-card-info small{font-size:9px;color:#818898}.wlive-card.is-hidden{display:none}
.wlive-watch{padding:8px 0 40px}.wlive-back{display:inline-flex;align-items:center;gap:8px;color:#aab0bd;text-decoration:none;font-size:12px;margin:0 0 16px}.wlive-player{aspect-ratio:16/8.5;background:#030408;border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;display:grid;place-items:center}.wlive-player video{width:100%;height:100%;object-fit:contain}.wlive-player-wait{display:flex;flex-direction:column;align-items:center;gap:13px;color:#8a91a0}.wlive-player-wait i{font-size:42px;color:#ef233c}.wlive-watch-meta{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 4px}.wlive-watch-meta .wlive-live-badge{position:static;display:inline-block}.wlive-watch-meta h1{font-size:24px;margin:10px 0 4px}.wlive-watch-meta p{color:#808797}.wlive-watch-meta>button{border:0;border-radius:12px;background:#ef233c;color:#fff;padding:11px 16px;font-weight:800}
.wlive-studio{position:fixed;z-index:10000;inset:0;display:none;align-items:center;justify-content:center;padding:24px}.wlive-studio.is-open{display:flex}.wlive-studio-backdrop{position:absolute;inset:0;border:0;background:rgba(3,4,8,.78);backdrop-filter:blur(10px)}.wlive-studio>section{position:relative;width:min(620px,100%);border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#10131d;box-shadow:0 32px 90px rgba(0,0,0,.55);overflow:hidden;color:#fff;animation:wliveIn .25s ease}.wlive-studio header{padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between}.wlive-studio header span{font-size:9px;letter-spacing:.14em;color:#ef435b;font-weight:850}.wlive-studio h2{font-size:21px;margin:5px 0 0}.wlive-studio header button{border:0;background:#1a1e2a;color:#aab0bc;width:36px;height:36px;border-radius:10px}.wlive-studio form{padding:22px 24px;display:grid;gap:16px}.wlive-studio label{display:grid;gap:7px;font-size:11px;font-weight:800;color:#c4c8d1}.wlive-studio input,.wlive-studio select,.wlive-studio textarea{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#090b12;color:#fff;padding:12px 13px;outline:none}.wlive-readiness{display:flex;gap:12px;border:1px solid rgba(245,158,11,.23);background:rgba(245,158,11,.07);border-radius:14px;padding:13px;color:#fbbf24}.wlive-readiness.is-ready{color:#34d399;border-color:rgba(52,211,153,.23);background:rgba(52,211,153,.07)}.wlive-readiness i{font-size:22px}.wlive-readiness div{display:grid;gap:3px}.wlive-readiness strong{font-size:11px}.wlive-readiness span{font-size:9px;color:#9299a8}.wlive-studio footer{display:flex;justify-content:flex-end;gap:10px}.wlive-studio footer button{border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#171a25;color:#fff;padding:11px 15px;font-size:11px;font-weight:800}.wlive-studio footer button[type=submit]{border-color:#ef233c;background:#ef233c}
@keyframes wlivePulse{50%{opacity:.35}}@keyframes wliveSpin{to{transform:rotate(360deg)}}@keyframes wliveIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media(max-width:1050px){.wlive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wlive-hero{grid-template-columns:1fr}.wlive-hero-media{min-height:330px}.wlive-hero-copy{padding:30px}.wlive-topbar{grid-template-columns:auto 1fr}.wlive-search{grid-row:2;grid-column:1/-1;margin-bottom:13px}.wlive-topbar{height:auto;padding:14px 0}.wlive-categories{padding-top:14px}}
@media(max-width:650px){.whitoo-live-active .main-container{flex:1 1 auto!important;min-width:0!important;width:auto!important}.wlive-shell{padding:0 16px 55px}.wlive-wordmark strong{display:none}.wlive-actions .wlive-partner{font-size:0}.wlive-actions .wlive-partner i{font-size:18px}.wlive-grid{grid-template-columns:1fr}.wlive-hero-media{min-height:230px}.wlive-empty{padding:30px 18px}.wlive-studio{padding:12px}}
.wlive-creator-menu{position:relative}.wlive-creator-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px}.wlive-creator-menu>summary::-webkit-details-marker{display:none}.wlive-avatar>i{font-size:11px;color:#778397;transition:transform .2s ease}.wlive-creator-menu[open] .wlive-avatar>i{transform:rotate(180deg)}.wlive-creator-popover{position:absolute;right:0;top:49px;width:280px;padding:10px;border:1px solid rgba(148,163,184,.18);border-radius:17px;background:rgba(8,12,21,.97);box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(20px);z-index:80;animation:wliveCreatorMenu .2s ease both}.wlive-creator-popover-head{display:flex;gap:10px;align-items:center;padding:9px;margin-bottom:6px;border-radius:12px;background:linear-gradient(135deg,rgba(239,35,60,.12),rgba(46,218,195,.06))}.wlive-creator-popover-head img{width:42px;height:42px;border-radius:12px;object-fit:cover}.wlive-creator-popover-head strong,.wlive-creator-popover-head span{display:block}.wlive-creator-popover-head strong{font-size:13px}.wlive-creator-popover-head span{margin-top:2px;color:#7f8ba0;font-size:10px}.wlive-creator-popover a,.wlive-creator-popover button{width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:11px;padding:10px;background:transparent;color:#cdd6e4;text-decoration:none;font-size:12px;font-weight:800;text-align:left}.wlive-creator-popover a:hover,.wlive-creator-popover button:hover{background:rgba(255,255,255,.055);color:#fff}.wlive-creator-popover i{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.05);color:#ff5571}.wlive-creator-popover-sep{height:1px;margin:6px;background:rgba(255,255,255,.07)}.wlive-creator-popover-empty{padding:12px;text-align:center}.wlive-creator-popover-empty>i{width:42px;height:42px;margin:0 auto 8px;border-radius:13px;background:rgba(239,35,60,.13);font-size:20px}.wlive-creator-popover-empty strong,.wlive-creator-popover-empty span{display:block}.wlive-creator-popover-empty span{margin-top:5px;color:#7f8ba0;font-size:10px;line-height:1.45}@keyframes wliveCreatorMenu{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:650px){.wlive-creator-popover{position:fixed;top:68px;right:10px;left:10px;width:auto}}
.wlive-shell{position:relative}.wlive-profile-view{position:absolute;z-index:16;inset:78px 0 0;height:calc(100vh - 78px);display:grid;grid-template-rows:56px minmax(0,1fr);border-top:1px solid rgba(255,255,255,.07);background:#070a12;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .24s ease,transform .24s ease,visibility .24s}.wlive-profile-view.is-open{opacity:1;visibility:visible;transform:none}.wlive-profile-view>header{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid rgba(148,163,184,.12);background:linear-gradient(90deg,rgba(239,35,60,.08),rgba(7,10,18,.98) 30%,rgba(39,219,195,.05))}.wlive-profile-view>header button{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.13);border-radius:11px;background:#101623;color:#d9e1ed}.wlive-profile-view>header button:hover{border-color:rgba(239,35,60,.42);color:#fff}.wlive-profile-view>header div{min-width:0}.wlive-profile-view>header span,.wlive-profile-view>header strong{display:block}.wlive-profile-view>header span{color:#ff4868;font-size:8px;font-weight:950;letter-spacing:1px}.wlive-profile-view>header strong{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.wlive-profile-view>iframe{width:100%;height:100%;border:0;background:#050812;opacity:1;transform:none;transition:opacity .16s ease,transform .2s ease}.wlive-profile-view.is-switching>iframe{opacity:.18;transform:translateY(5px) scale(.998)}.wlive-profile-view.is-loading:after{content:"";position:absolute;z-index:3;left:50%;top:50%;width:34px;height:34px;margin:-17px;border:3px solid rgba(255,255,255,.12);border-top-color:#ef233c;border-radius:50%;animation:wliveProfileSpin .7s linear infinite}@keyframes wliveProfileSpin{to{transform:rotate(360deg)}}body.wlive-profile-open .wlive-mode-nav,body.wlive-profile-open .wlive-categories{pointer-events:none}.wlive-creator-popover a.is-current{background:rgba(239,35,60,.12);color:#fff}.wlive-creator-popover a.is-current i{color:#ff4868}@media(max-width:650px){.wlive-profile-view{inset:68px -16px 0;height:calc(100vh - 68px);grid-template-rows:52px}.wlive-profile-view>header{padding:0 10px}}

/* Full-width live workspace. The fixed 72px navigation rail always remains visible. */
body.whitoo-live-active #wrapper{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;width:100vw!important;max-width:none!important}
body.whitoo-live-active .room-bar{grid-column:1!important;display:flex!important;visibility:visible!important;opacity:1!important;z-index:100!important}
body.whitoo-live-active #sidebar-wrapper{display:none!important}
body.whitoo-live-active .main-container{grid-column:2!important;display:flex!important;min-width:0!important;width:100%!important;max-width:none!important}
body.whitoo-live-active .main-tab-content,body.whitoo-live-active #main-live{width:100%!important;max-width:none!important;min-width:0!important}
body.whitoo-live-active .wlive-shell{width:100%!important;max-width:none!important;padding-left:clamp(24px,3vw,52px);padding-right:clamp(24px,3vw,52px)}
.wlive-wordmark{width:clamp(152px,12vw,205px);height:52px;flex:0 0 auto}
.wlive-logo{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.wlive-key-once{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:16px 18px;border:1px solid rgba(52,211,153,.3);border-radius:16px;background:rgba(52,211,153,.07);color:#d1fae5}.wlive-key-once>div{display:flex;align-items:center;gap:12px;min-width:0}.wlive-key-once>div>i{font-size:24px;color:#34d399}.wlive-key-once span{display:grid;gap:6px;min-width:0}.wlive-key-once strong{font-size:11px}.wlive-key-once code{color:#fff;overflow-wrap:anywhere}.wlive-key-once button{border:1px solid rgba(52,211,153,.35);border-radius:11px;background:#12382e;color:#ecfdf5;padding:10px 13px;white-space:nowrap}

@media(max-width:650px){body.whitoo-live-active #wrapper{grid-template-columns:64px minmax(0,1fr)!important}body.whitoo-live-active .wlive-shell{padding-left:16px;padding-right:16px}.wlive-wordmark{width:118px;height:44px}}

/* Phase 2: discovery, following and scheduled broadcasts */
.wlive-filter-empty{display:none;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:38px;border:1px dashed rgba(255,255,255,.1);border-radius:18px;color:#777f90;text-align:center}.wlive-filter-empty.is-visible{display:flex}.wlive-filter-empty i{font-size:28px;color:#ef435b}.wlive-filter-empty strong{color:#e7e9ef}.wlive-filter-empty span{font-size:11px}.wlive-section.is-filter-empty,[data-live-card].is-hidden{display:none!important}
.wlive-card-info{grid-template-columns:39px minmax(0,1fr) auto}.wlive-card-info form{align-self:center}.wlive-follow,.wlive-remind{border:1px solid rgba(239,35,60,.35);border-radius:11px;background:rgba(239,35,60,.09);color:#f4f5f8;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 13px;font-size:11px;font-weight:800;transition:.2s}.wlive-follow:hover,.wlive-remind:hover{transform:translateY(-1px);border-color:#ef334e}.wlive-follow.is-following,.wlive-remind.is-following{border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.09);color:#a7f3d0}.wlive-follow.is-compact,.wlive-follow.is-icon{width:38px;padding:0}.wlive-follow:disabled,.wlive-remind:disabled{opacity:.55;cursor:wait}.wlive-creator form{margin-left:auto}
.wlive-upcoming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.wlive-upcoming-card{min-width:0;border:1px solid rgba(255,255,255,.08);border-radius:17px;overflow:hidden;background:linear-gradient(145deg,#11141e,#0b0d14);transition:.2s}.wlive-upcoming-card:hover{transform:translateY(-3px);border-color:rgba(239,35,60,.22)}.wlive-upcoming-cover{height:112px;padding:14px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 80% 15%,rgba(239,35,60,.26),transparent 42%),#0b0e16;background-size:cover;background-position:center}.wlive-upcoming-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.05),rgba(5,6,10,.64))}.wlive-upcoming-cover>i{font-size:34px;color:rgba(255,255,255,.75);position:relative;z-index:1}.wlive-upcoming-cover>span{position:absolute;z-index:2;left:12px;bottom:11px;padding:6px 8px;border-radius:8px;background:rgba(6,7,12,.82);color:#fff;font-size:9px;font-weight:850}.wlive-upcoming-body{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px}.wlive-upcoming-body>img{width:38px;height:38px;border-radius:11px;object-fit:cover}.wlive-upcoming-body>div{display:grid;gap:3px;min-width:0}.wlive-upcoming-body strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.wlive-upcoming-body span{font-size:9px;color:#7c8494}.wlive-upcoming-body .wlive-remind{padding:0 10px}.wlive-next-hero{min-height:370px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.75fr);border:1px solid rgba(255,255,255,.09);border-radius:25px;overflow:hidden;background:linear-gradient(145deg,#11141e,#0b0d14)}.wlive-next-visual{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(239,35,60,.24),transparent 34%),#080a11;background-size:cover;background-position:center}.wlive-next-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(7,8,13,.58))}.wlive-next-visual>i{font-size:62px;color:#ef334e;filter:drop-shadow(0 15px 30px rgba(239,35,60,.3));z-index:1}.wlive-next-date{position:absolute;left:18px;top:18px;z-index:2;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(5,6,10,.8);padding:8px 11px;font-size:10px;font-weight:850}.wlive-next-copy{padding:38px;display:flex;justify-content:center;flex-direction:column}.wlive-next-copy h1{font-size:clamp(28px,3vw,48px);line-height:1.05;margin:12px 0}.wlive-next-copy>p{color:#8e95a4;font-size:12px;line-height:1.65}.wlive-next-copy>.wlive-remind{width:max-content}
.wlive-schedule-field small{font-size:9px;color:#7d8595;font-weight:500}.wlive-toast{position:fixed;z-index:20000;right:24px;bottom:24px;transform:translateY(20px);opacity:0;pointer-events:none;border:1px solid rgba(52,211,153,.3);border-radius:12px;background:#10231f;color:#d1fae5;padding:12px 16px;font-size:11px;font-weight:750;box-shadow:0 18px 50px rgba(0,0,0,.4);transition:.22s}.wlive-toast.is-visible{transform:none;opacity:1}.wlive-toast.is-error{border-color:rgba(239,35,60,.4);background:#301117;color:#fecdd3}
@media(max-width:1450px){.wlive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wlive-upcoming-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.wlive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wlive-next-hero{grid-template-columns:1fr}.wlive-next-visual{min-height:250px}.wlive-upcoming-grid{grid-template-columns:1fr}.wlive-upcoming-cover{height:135px}}
@media(max-width:650px){.wlive-grid{grid-template-columns:1fr}.wlive-follow span,.wlive-remind span{display:none}.wlive-follow,.wlive-remind{width:38px;padding:0}.wlive-next-copy{padding:24px}.wlive-next-hero{min-height:0}.wlive-toast{left:80px;right:14px;bottom:14px}.wlive-section-head{align-items:flex-start;gap:10px}.wlive-section-head small{white-space:nowrap}}

/* Phase 3: real HLS playback, stream health and OBS handoff */
.wlive-key-once>div>span{grid-template-columns:auto minmax(0,1fr);align-items:center}.wlive-key-once>div>span>strong{grid-column:1/-1}.wlive-key-once small{color:#7f8a98;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.wlive-key-once code{display:block;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.22);padding:7px 9px;font-size:10px}.wlive-player{position:relative}.wlive-player-tools{position:absolute;z-index:5;left:14px;right:14px;top:14px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.wlive-health,.wlive-quality>button{height:35px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(5,7,12,.78);backdrop-filter:blur(12px);color:#f8fafc;display:inline-flex;align-items:center;gap:8px;padding:0 11px;font-size:10px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.22)}.wlive-health i{width:7px;height:7px;border-radius:50%;background:#94a3b8}.wlive-health[data-state=healthy] i{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.12)}.wlive-health[data-state=connecting] i,.wlive-health[data-state=reconnecting] i{background:#f59e0b;animation:wlivePulse 1s infinite}.wlive-health[data-state=degraded] i{background:#fb923c}.wlive-health[data-state=offline] i{background:#ef334e}.wlive-quality{position:relative;pointer-events:auto}.wlive-quality>button{cursor:pointer}.wlive-quality>[data-live-quality-menu]{position:absolute;right:0;top:42px;display:none;min-width:135px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(10,12,19,.96);box-shadow:0 18px 45px rgba(0,0,0,.42)}.wlive-quality.is-open>[data-live-quality-menu]{display:grid}.wlive-quality [data-live-quality-menu] button{border:0;border-radius:8px;background:transparent;color:#98a1b2;padding:8px 10px;text-align:left;font-size:10px;font-weight:750}.wlive-quality [data-live-quality-menu] button:hover,.wlive-quality [data-live-quality-menu] button.is-active{background:rgba(239,35,60,.13);color:#fff}.wlive-player video{background:#030408}
@media(max-width:650px){.wlive-key-once{align-items:stretch;flex-direction:column}.wlive-key-once>button{width:100%}.wlive-player-tools{left:9px;right:9px;top:9px}.wlive-health b{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlive-quality>button span{display:none}}

/* Creator experience: VOD, clips, monetization, multistream and growth UI */
.wlive-studio-launch{height:40px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#141722;color:#dce0e8;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:11px;font-weight:800;transition:.2s}.wlive-studio-launch:hover{border-color:rgba(239,35,60,.35);color:#fff;transform:translateY(-1px)}
.wlive-mode-nav{position:sticky;top:78px;z-index:19;display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:18px 0 0;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(13,16,25,.86);backdrop-filter:blur(16px);overflow-x:auto;scrollbar-width:none}.wlive-mode-nav button{height:37px;border:0;border-radius:10px;background:transparent;color:#7d8594;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:11px;font-weight:800;white-space:nowrap;transition:.2s}.wlive-mode-nav button:hover{color:#e5e7eb}.wlive-mode-nav button.is-active{background:linear-gradient(135deg,#ef233c,#c8102e);color:#fff;box-shadow:0 9px 24px rgba(239,35,60,.2)}.wlive-mode-hidden{display:none!important}
.wlive-library{padding:26px 0 10px;animation:wliveIn .28s ease}.wlive-library[hidden]{display:none}.wlive-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 22px}.wlive-library-head>div>span,.wlive-panel-title>div>span{color:#ef435b;font-size:9px;font-weight:900;letter-spacing:.16em}.wlive-library-head h1{font-size:clamp(27px,3vw,43px);letter-spacing:-.04em;margin:5px 0 7px}.wlive-library-head p{max-width:650px;margin:0;color:#818898;font-size:12px;line-height:1.6}.wlive-ui-ready{width:max-content;display:inline-flex!important;align-items:center;gap:7px;border:1px solid rgba(52,211,153,.25);border-radius:999px;background:rgba(52,211,153,.08);color:#a7f3d0!important;padding:7px 10px;font-size:9px!important;font-weight:850!important;letter-spacing:.03em!important;white-space:nowrap}.wlive-ui-ready i{color:#34d399}
.wlive-resume-card{min-height:320px;display:grid;grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(145deg,#111520,#0b0d14)}.wlive-resume-visual{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(239,35,60,.22),transparent 28%),linear-gradient(135deg,#171a26,#080a10)}.wlive-resume-visual>span{width:66px;height:66px;display:grid;place-items:center;border-radius:50%;background:#ef233c;color:#fff;font-size:25px;box-shadow:0 18px 50px rgba(239,35,60,.32)}.wlive-resume-visual small{position:absolute;right:15px;bottom:14px;border-radius:8px;background:rgba(0,0,0,.65);padding:6px 8px;color:#fff;font-size:9px}.wlive-resume-copy{display:flex;justify-content:center;flex-direction:column;padding:42px}.wlive-resume-copy>span{font-size:9px;letter-spacing:.15em;color:#ef435b;font-weight:900}.wlive-resume-copy h2{margin:8px 0 7px;font-size:28px}.wlive-resume-copy p{max-width:580px;color:#858d9d;font-size:12px;line-height:1.6}.wlive-progress{height:5px;margin:21px 0 18px;border-radius:999px;background:#272b36;overflow:hidden}.wlive-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ef233c,#ff5269)}.wlive-resume-copy>div:last-child{display:flex;gap:9px}.wlive-resume-copy button,.wlive-primary-action{height:40px;border:0;border-radius:11px;background:#ef233c;color:#fff;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:850}.wlive-resume-copy button.is-ghost{border:1px solid rgba(255,255,255,.1);background:#171a24;color:#c8cdd6}
.wlive-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.wlive-media-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#10131c;transition:.2s}.wlive-media-card:hover{transform:translateY(-3px);border-color:rgba(239,35,60,.24)}.wlive-media-cover{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 45% 40%,rgba(239,35,60,.18),transparent 27%),linear-gradient(135deg,#191d2a,#080a10)}.wlive-media-cover>span{position:absolute;left:11px;top:11px;border-radius:7px;background:#ef233c;padding:5px 7px;color:#fff;font-size:8px;font-weight:900}.wlive-media-cover>i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(239,35,60,.92);font-size:17px}.wlive-media-cover>small{position:absolute;right:10px;bottom:10px;border-radius:6px;background:rgba(0,0,0,.7);padding:5px 7px;color:#fff;font-size:8px}.wlive-media-card>div:nth-child(2){padding:14px 15px 16px}.wlive-media-card>div:nth-child(2)>span{font-size:8px;color:#ef435b;letter-spacing:.12em;font-weight:850}.wlive-media-card h3{margin:6px 0 9px;font-size:12px}.wlive-media-card p{margin:0;color:#737b8b;font-size:9px;display:flex;gap:7px}.wlive-media-card>button{position:absolute;right:8px;bottom:10px;width:32px;height:32px;border:0;border-radius:9px;background:#1b1f2a;color:#9ca3b1}
.wlive-clip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.wlive-clip-grid article{padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#10131c}.wlive-clip-grid article>div{position:relative;aspect-ratio:9/12;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 36%,rgba(239,35,60,.2),transparent 24%),linear-gradient(150deg,#1a1e2b,#090a10)}.wlive-clip-grid article>div>i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(239,35,60,.9);color:#fff}.wlive-clip-grid article>div>span{position:absolute;right:8px;bottom:8px;border-radius:6px;background:rgba(0,0,0,.7);padding:5px 7px;font-size:8px}.wlive-clip-grid h3{font-size:11px;margin:12px 3px 6px}.wlive-clip-grid p{font-size:8px;color:#777f8e;margin:0 3px 4px}.wlive-clip-grid p i{color:#ef435b;margin-right:5px}
.wlive-command,.wlive-clip-dialog{position:fixed;z-index:10020;inset:0;display:none;align-items:center;justify-content:center;padding:24px;color:#f7f8fb}.wlive-command.is-open,.wlive-clip-dialog.is-open{display:flex}.wlive-command-backdrop,.wlive-clip-dialog>button{position:absolute;inset:0;border:0;background:rgba(2,3,7,.82);backdrop-filter:blur(12px)}.wlive-command>section{position:relative;width:min(1180px,calc(100vw - 110px));height:min(780px,calc(100vh - 48px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:#0e111a;box-shadow:0 38px 100px rgba(0,0,0,.66);animation:wliveIn .25s ease}.wlive-command>section>header{min-height:82px;padding:18px 22px 17px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(239,35,60,.06),transparent 36%)}.wlive-command header>div:first-child>span{font-size:9px;letter-spacing:.15em;color:#ef435b;font-weight:900}.wlive-command header h2{margin:5px 0 0;font-size:20px}.wlive-command header>div:last-child{display:flex;align-items:center;gap:12px}.wlive-command header button[data-live-command-close]{width:37px;height:37px;border:0;border-radius:10px;background:#191d28;color:#9ba2b0}.wlive-command-layout{min-height:0;flex:1;display:grid;grid-template-columns:178px minmax(0,1fr)}.wlive-command-layout>aside{padding:17px 11px;border-right:1px solid rgba(255,255,255,.07);background:#0b0e16}.wlive-command-layout>aside button{width:100%;height:45px;border:0;border-radius:11px;background:transparent;color:#747d8d;display:flex;align-items:center;gap:10px;padding:0 13px;font-size:11px;font-weight:800;text-align:left;margin-bottom:4px}.wlive-command-layout>aside button i{font-size:17px}.wlive-command-layout>aside button:hover{color:#dfe3ea;background:#141822}.wlive-command-layout>aside button.is-active{color:#fff;background:linear-gradient(135deg,rgba(239,35,60,.2),rgba(239,35,60,.06));box-shadow:inset 3px 0 #ef233c}.wlive-command-content{min-width:0;overflow:auto;padding:25px 27px 30px}.wlive-command-content>[data-studio-panel]{display:none;animation:wliveIn .22s ease}.wlive-command-content>[data-studio-panel].is-active{display:block}.wlive-panel-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}.wlive-panel-title h3{margin:5px 0 0;font-size:25px;letter-spacing:-.025em}
.wlive-health-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wlive-health-board>div{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#121620;padding:14px}.wlive-health-board>div>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#1b202c;color:#ef435b;font-size:18px}.wlive-health-board span{display:grid;gap:3px}.wlive-health-board strong{font-size:10px}.wlive-health-board small{font-size:8px;color:#737b8b}.wlive-health-board b{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.1)}.wlive-health-board b.is-ok{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.1)}.wlive-stage-preview{min-height:340px;margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) 240px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#07090e}.wlive-stage-preview>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:radial-gradient(circle,rgba(239,35,60,.11),transparent 30%);color:#727b8c}.wlive-stage-preview>div>i{font-size:43px;color:#ef334e}.wlive-stage-preview>div strong{color:#d9dde5;font-size:12px}.wlive-stage-preview>div span{font-size:9px}.wlive-stage-preview>aside{padding:23px 19px;border-left:1px solid rgba(255,255,255,.07);background:#10131b;display:flex;flex-direction:column;gap:15px}.wlive-stage-preview>aside>strong{font-size:11px;margin-bottom:4px}.wlive-stage-preview>aside>span{font-size:9px;color:#858d9c;display:flex;align-items:center;gap:8px}.wlive-stage-preview>aside>span i{color:#ef435b;font-size:14px}
.wlive-setting-list{display:grid;gap:10px}.wlive-setting-list article{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#121620;padding:15px 16px}.wlive-setting-list article>i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(239,35,60,.09);color:#ef435b;font-size:19px}.wlive-setting-list article>div{display:grid;gap:4px}.wlive-setting-list strong{font-size:11px}.wlive-setting-list span{font-size:9px;color:#7d8595}.wlive-switch{width:42px;height:24px;border:0;border-radius:999px;background:#292d38;padding:3px;transition:.2s}.wlive-switch i{display:block;width:18px;height:18px;border-radius:50%;background:#89909d;transition:.2s}.wlive-switch.is-on{background:#ef233c}.wlive-switch.is-on i{background:#fff;transform:translateX(18px)}
.wlive-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.wlive-metrics article{min-height:130px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#151925,#10131b);display:flex;flex-direction:column}.wlive-metrics span{font-size:9px;color:#81899a}.wlive-metrics strong{margin:11px 0 auto;font-size:25px}.wlive-metrics small{font-size:8px;color:#687181}.wlive-metrics small i{margin-right:5px}.wlive-revenue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wlive-revenue-grid article{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#11151e;padding:15px}.wlive-revenue-grid article>i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(239,35,60,.1);color:#ef435b;font-size:19px}.wlive-revenue-grid article>div{display:grid;gap:3px}.wlive-revenue-grid strong{font-size:10px}.wlive-revenue-grid span{font-size:8px;color:#777f90}.wlive-revenue-grid button,.wlive-platform-grid button{border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#1a1e29;color:#d4d8e0;padding:8px 10px;font-size:9px;font-weight:800}.wlive-revenue-grid em{font-size:8px;color:#737b8b;font-style:normal}
.wlive-platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wlive-platform-grid article{min-height:180px;padding:19px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#121620;display:flex;flex-direction:column;align-items:flex-start}.wlive-platform-grid article>i{font-size:30px;color:#ef334e}.wlive-platform-grid article>div{display:grid;gap:4px;margin:18px 0 auto}.wlive-platform-grid strong{font-size:13px}.wlive-platform-grid span{font-size:9px;color:#747d8d}.wlive-security-note{display:flex;align-items:center;gap:13px;margin-top:14px;border:1px solid rgba(52,211,153,.19);border-radius:14px;background:rgba(52,211,153,.05);padding:15px;color:#a7f3d0}.wlive-security-note>i{font-size:22px}.wlive-security-note>div{display:grid;gap:3px}.wlive-security-note strong{font-size:10px}.wlive-security-note span{color:#7d928c;font-size:8px;line-height:1.5}
.wlive-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.wlive-feature-grid article{position:relative;min-height:145px;padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(145deg,#141823,#0f121a);display:flex;flex-direction:column}.wlive-feature-grid article>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(239,35,60,.1);color:#ef435b;font-size:18px}.wlive-feature-grid strong{margin:18px 0 4px;font-size:10px}.wlive-feature-grid span{font-size:8px;color:#71798a}.wlive-feature-grid button{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;border-radius:9px;background:#1b1f2a;color:#8991a1}
.wlive-clip-dialog>section{position:relative;width:min(540px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:21px;background:#10131c;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:wliveIn .25s ease}.wlive-clip-dialog header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.08)}.wlive-clip-dialog header span{color:#ef435b;font-size:9px;letter-spacing:.14em;font-weight:900}.wlive-clip-dialog header h2{font-size:19px;margin:5px 0 0}.wlive-clip-dialog header button{width:35px;height:35px;border:0;border-radius:10px;background:#1a1e28;color:#9da4b2}.wlive-clip-editor{padding:21px;display:grid;gap:17px}.wlive-clip-editor>div{height:150px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:radial-gradient(circle,rgba(239,35,60,.12),transparent 30%),#090b11;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}.wlive-clip-editor>div i{font-size:28px;color:#ef334e}.wlive-clip-editor>div strong{font-size:11px}.wlive-clip-editor>div span{font-size:9px;color:#747c8c}.wlive-clip-editor label{display:grid;gap:7px;color:#c6cad3;font-size:10px;font-weight:800}.wlive-clip-editor input{height:42px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#090b11;color:#fff;padding:0 12px;outline:0}.wlive-clip-editor footer{display:flex;justify-content:flex-end;gap:9px}.wlive-clip-editor footer button{height:39px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#191d27;color:#d5d9e1;padding:0 13px;font-size:10px;font-weight:800}.wlive-clip-editor footer button:last-child{border-color:#ef233c;background:#ef233c;color:#fff}
@media(max-width:1050px){.wlive-mode-nav{top:127px}.wlive-command>section{width:calc(100vw - 92px)}.wlive-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wlive-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wlive-clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wlive-resume-card{grid-template-columns:1fr}.wlive-resume-visual{min-height:250px}.wlive-stage-preview{grid-template-columns:1fr}.wlive-stage-preview>aside{display:none}}
@media(max-width:760px){.wlive-studio-launch span{display:none}.wlive-command{padding:10px}.wlive-command>section{width:calc(100vw - 74px);height:calc(100vh - 20px);border-radius:18px}.wlive-command>section>header{padding:15px 16px}.wlive-command header .wlive-ui-ready{display:none!important}.wlive-command-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.wlive-command-layout>aside{display:flex;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.wlive-command-layout>aside button{width:auto;flex:0 0 auto;margin:0 3px;height:39px;padding:0 11px}.wlive-command-layout>aside button.is-active{box-shadow:inset 0 -2px #ef233c}.wlive-command-content{padding:19px 16px 24px}.wlive-health-board,.wlive-metrics,.wlive-platform-grid{grid-template-columns:1fr}.wlive-health-board>div{padding:11px}.wlive-stage-preview{min-height:250px}.wlive-revenue-grid{grid-template-columns:1fr}.wlive-library-head{align-items:flex-start;flex-direction:column}.wlive-media-grid{grid-template-columns:1fr}.wlive-resume-copy{padding:27px}.wlive-resume-visual{min-height:220px}}
@media(max-width:650px){.wlive-mode-nav{top:116px;width:100%}.wlive-mode-nav button{flex:1;justify-content:center;padding:0 9px}.wlive-mode-nav button span{font-size:9px}.wlive-studio-launch{width:40px;padding:0;justify-content:center}.wlive-command>section{width:calc(100vw - 74px)}.wlive-command header h2{font-size:15px}.wlive-command-layout>aside button span{font-size:9px}.wlive-panel-title{align-items:flex-start}.wlive-panel-title h3{font-size:20px}.wlive-feature-grid{grid-template-columns:1fr 1fr}.wlive-clip-grid{grid-template-columns:1fr 1fr;gap:10px}.wlive-resume-copy>div:last-child{align-items:stretch;flex-direction:column}.wlive-resume-copy button{width:100%}.wlive-library-head .wlive-primary-action{width:100%}}
body.wlive-profile-open .wlive-mode-nav,body.wlive-profile-open .wlive-categories,body.wlive-profile-open .wlive-filter-empty{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-8px)!important}.wlive-profile-view.is-open{z-index:40}.wlive-profile-view>header{position:relative;z-index:2}.wlive-profile-view>iframe{position:relative;z-index:1}body.wlive-profile-open .wlive-topbar{z-index:70}body.wlive-profile-open .wlive-creator-menu[open]{position:relative;z-index:90}body.wlive-profile-open .wlive-creator-popover{z-index:100}

/* Premium creator account menu */
.wlive-creator-popover{top:52px;width:326px;padding:11px;border-color:rgba(148,163,184,.2);border-radius:21px;background:linear-gradient(155deg,rgba(13,19,31,.99),rgba(6,10,18,.995));box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025) inset;overflow:hidden}.wlive-creator-popover:before{content:"";position:absolute;right:19px;top:-6px;width:12px;height:12px;border-left:1px solid rgba(148,163,184,.2);border-top:1px solid rgba(148,163,184,.2);background:#0c121e;transform:rotate(45deg)}.wlive-creator-popover:after{content:"";position:absolute;left:-45px;top:-70px;width:190px;height:150px;border-radius:50%;background:rgba(239,35,60,.08);filter:blur(42px);pointer-events:none}.wlive-creator-popover-head{position:relative;z-index:1;gap:12px;min-height:68px;margin:0 0 9px;padding:11px;border:1px solid rgba(148,163,184,.1);border-radius:15px;background:linear-gradient(135deg,rgba(239,35,60,.1),rgba(14,29,43,.85) 58%,rgba(46,218,195,.07))}.wlive-creator-head-avatar{position:relative;flex:0 0 auto}.wlive-creator-popover-head .wlive-creator-head-avatar>img{width:46px;height:46px;border:2px solid rgba(255,255,255,.8);border-radius:13px}.wlive-creator-head-avatar>b{position:absolute;right:-3px;bottom:-2px;width:18px;height:18px;display:grid;place-items:center;border:3px solid #101927;border-radius:50%;background:#ef233c}.wlive-creator-head-avatar>b i{width:auto;height:auto;border-radius:0;background:transparent;color:#fff;font-size:8px}.wlive-creator-popover-head>div{min-width:0;flex:1}.wlive-creator-popover-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.wlive-creator-popover-head span{margin-top:2px;color:#929eb0;font-size:9px}.wlive-creator-popover-head small{display:flex;align-items:center;gap:5px;margin-top:5px;color:#61dfcc;font-size:7px;font-weight:850;letter-spacing:.35px;text-transform:uppercase}.wlive-creator-popover-head small i{width:5px;height:5px;border-radius:50%;background:#35d8b9;box-shadow:0 0 0 3px rgba(53,216,185,.1)}.wlive-creator-menu-label{position:relative;z-index:1;margin:10px 8px 5px;color:#59677b;font-size:7px;font-weight:950;letter-spacing:1.25px}.wlive-creator-popover>a,.wlive-creator-popover>button{position:relative;z-index:1;min-height:53px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;gap:10px;align-items:center;margin:3px 0;padding:7px 9px;border:1px solid transparent;border-radius:13px;color:#cbd5e1;transition:background .18s,border-color .18s,transform .18s}.wlive-creator-popover>a:hover,.wlive-creator-popover>button:hover{border-color:rgba(148,163,184,.11);background:rgba(255,255,255,.045);transform:translateX(2px)}.wlive-creator-popover>a>i,.wlive-creator-popover>button>i{width:34px;height:34px;border:1px solid rgba(148,163,184,.1);border-radius:10px;background:#131c2b;color:#ff5571;font-size:15px}.wlive-creator-popover>a>span,.wlive-creator-popover>button>span{min-width:0;display:block}.wlive-creator-popover>a strong,.wlive-creator-popover>a small,.wlive-creator-popover>button strong,.wlive-creator-popover>button small{display:block}.wlive-creator-popover>a strong,.wlive-creator-popover>button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8edf5;font-size:10px}.wlive-creator-popover>a small,.wlive-creator-popover>button small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#68778c;font-size:7px;font-weight:650}.wlive-creator-popover>a>em,.wlive-creator-popover>button>em{color:#4e5c70;font-size:12px;font-style:normal;transition:.18s}.wlive-creator-popover>a:hover>em,.wlive-creator-popover>button:hover>em{color:#cbd5e1;transform:translateX(2px)}.wlive-creator-popover>a.is-current{border-color:rgba(239,35,60,.22);background:linear-gradient(90deg,rgba(239,35,60,.16),rgba(239,35,60,.045));box-shadow:inset 3px 0 #ef233c}.wlive-creator-popover>a.is-current>i{border-color:rgba(239,35,60,.2);background:rgba(239,35,60,.12);color:#ff617a}.wlive-creator-popover>a.is-current strong{color:#fff}.wlive-creator-popover-sep{height:1px;margin:9px 7px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.16),transparent)}.wlive-creator-popover>a.wlive-account-link>i{background:rgba(47,218,194,.07);color:#4bdcc6}.wlive-creator-popover>a.wlive-account-link:hover{border-color:rgba(47,218,194,.16);background:rgba(47,218,194,.055)}@media(max-width:650px){.wlive-creator-popover{top:65px;right:9px;left:74px;width:auto;max-width:326px}}

/* Creator Studio professional broadcast console */
.wlive-command{padding:12px}.wlive-command>section{width:min(1740px,calc(100vw - 92px));height:calc(100vh - 24px);border-radius:22px;background:#080d17}.wlive-command>section>header{min-height:64px;padding:10px 14px 10px 19px;background:linear-gradient(90deg,rgba(239,35,60,.065),rgba(8,13,23,.98) 30%,rgba(42,218,190,.035))}.wlive-command header>div:first-child>span{font-size:7px}.wlive-command header h2{margin-top:3px;font-size:16px}.wlive-command header>div:last-child{gap:8px}.wlive-studio-channel{min-height:39px;display:grid;grid-template-columns:28px auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:7px;padding:5px 10px 5px 6px;border:1px solid rgba(148,163,184,.11);border-radius:11px;background:#111824}.wlive-studio-channel>i{grid-row:1/-1;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(239,35,60,.11);color:#ff526e}.wlive-studio-channel b{align-self:end;font-size:8px}.wlive-studio-channel small{align-self:start;color:#6f7c90;font-size:7px}.wlive-command-layout{grid-template-columns:166px minmax(0,1fr)}.wlive-command-layout>aside{padding:11px 8px;background:linear-gradient(180deg,#0a101b,#070c15)}.wlive-studio-nav-title{margin:5px 11px 8px;color:#536176;font-size:7px;font-weight:950;letter-spacing:1.1px}.wlive-command-layout>aside button{height:40px;margin-bottom:3px;padding:0 11px;font-size:9px}.wlive-command-layout>aside button i{font-size:15px}.wlive-studio-quick-status{margin-top:14px;padding:11px;border:1px solid rgba(148,163,184,.1);border-radius:13px;background:rgba(255,255,255,.02)}.wlive-studio-quick-status>span,.wlive-studio-quick-status>strong,.wlive-studio-quick-status>code,.wlive-studio-quick-status>small,.wlive-studio-quick-status>b{display:block}.wlive-studio-quick-status>span{margin-bottom:9px;color:#536176;font-size:6px;font-weight:950;letter-spacing:1px}.wlive-studio-quick-status>strong{font-size:8px}.wlive-studio-quick-status>code{margin:5px 0 8px;color:#8996a8;font-size:9px;letter-spacing:1.5px}.wlive-studio-quick-status>small{overflow:hidden;text-overflow:ellipsis;color:#637086;font-size:6px;white-space:nowrap}.wlive-studio-quick-status>b{margin-top:9px;color:#4edbb9;font-size:7px}.wlive-studio-quick-status>b i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#36d8b6}.wlive-command-content{padding:12px 13px 18px;background:radial-gradient(circle at 55% -30%,rgba(239,35,60,.065),transparent 34%),#080d17}.wlive-panel-title{margin-bottom:10px}.wlive-pro-title{align-items:center}.wlive-pro-title h3{font-size:20px}.wlive-pro-title p{margin:4px 0 0;color:#6f7b8e;font-size:8px}.wlive-pro-title .wlive-primary-action{height:39px;padding:0 14px;font-size:9px}.wlive-pro-title .wlive-primary-action i:last-child{margin-left:7px}.wlive-pro-health{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}.wlive-pro-health article{min-width:0;min-height:57px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(148,163,184,.1);border-radius:11px;background:#0e1522}.wlive-pro-health article>i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#172132;color:#ff526e;font-size:15px}.wlive-pro-health article>div{min-width:0}.wlive-pro-health span,.wlive-pro-health strong,.wlive-pro-health small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlive-pro-health span{color:#9aa6b7;font-size:6px}.wlive-pro-health strong{margin:2px 0;color:#dfe6ef;font-size:8px}.wlive-pro-health small{color:#657287;font-size:6px}.wlive-pro-health article>b{width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.08)}.wlive-pro-health article>b.is-ok{background:#35d6a6;box-shadow:0 0 0 4px rgba(53,214,166,.08)}.wlive-pro-health article>button{width:27px;height:27px;border:0;border-radius:8px;background:#171f2d;color:#748196}.wlive-pro-console{display:grid;grid-template-columns:minmax(520px,1fr) 210px 238px;gap:8px}.wlive-pro-preview-column{min-width:0}.wlive-pro-monitor{position:relative;min-height:315px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(239,35,60,.2);border-radius:13px;background:radial-gradient(circle at 50% 50%,rgba(239,35,60,.1),transparent 36%),#03060b}.wlive-pro-monitor:before{content:"";position:absolute;inset:0;opacity:.25;background-image:radial-gradient(circle,rgba(239,35,60,.26) 1px,transparent 1px);background-size:8px 8px;mask-image:radial-gradient(circle,black,transparent 68%)}.wlive-pro-safe-area{position:absolute;inset:9px;border:1px dashed rgba(239,35,60,.35)}.wlive-pro-safe-area:before,.wlive-pro-safe-area:after{content:"";position:absolute;background:rgba(239,35,60,.26)}.wlive-pro-safe-area:before{left:33%;top:0;bottom:0;width:1px;box-shadow:calc((100% - 1px)/2) 0 rgba(239,35,60,.26)}.wlive-pro-safe-area:after{top:50%;left:0;right:0;height:1px}.wlive-pro-scene-label,.wlive-pro-monitor-status{position:absolute;z-index:2;top:10px;padding:5px 7px;border-radius:6px;background:rgba(5,8,14,.78);color:#a8b1c0;font-size:6px}.wlive-pro-scene-label{left:10px}.wlive-pro-monitor-status{right:10px;display:flex;align-items:center;gap:6px}.wlive-pro-offline{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;text-align:center}.wlive-pro-offline>i{margin-bottom:12px;color:#ef334e;font-size:33px}.wlive-pro-offline strong{font-size:20px;letter-spacing:4px}.wlive-pro-offline strong em{padding:4px 7px;border-radius:6px;background:#ef233c;font-style:normal;letter-spacing:2px}.wlive-pro-offline span{margin-top:13px;color:#c3cad4;font-size:9px;font-weight:900}.wlive-pro-offline small{max-width:360px;margin-top:6px;color:#606c7d;font-size:7px}.wlive-pro-monitor-meta{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:6px}.wlive-pro-monitor-meta>span,.wlive-pro-monitor-meta>button{min-height:25px;display:flex;align-items:center;gap:5px;padding:0 7px;border:1px solid rgba(148,163,184,.1);border-radius:7px;background:rgba(7,11,18,.8);color:#8b97aa;font-size:6px}.wlive-pro-monitor-meta>button{margin-left:auto}.wlive-pro-scenes{height:38px;display:flex;align-items:center;gap:5px;margin-top:6px;overflow:auto}.wlive-pro-scenes>strong{margin-right:3px;font-size:8px}.wlive-pro-scenes button{height:29px;display:flex;align-items:center;gap:5px;padding:0 9px;border:1px solid rgba(148,163,184,.1);border-radius:7px;background:#111927;color:#8b97aa;font-size:7px;white-space:nowrap}.wlive-pro-scenes button b{width:15px;height:15px;display:grid;place-items:center;border-radius:5px;background:#1c2636;font-size:6px}.wlive-pro-scenes button.is-active{border-color:rgba(239,35,60,.35);background:rgba(239,35,60,.12);color:#fff}.wlive-pro-scenes button.is-active b{background:#ef233c}.wlive-pro-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:5px}.wlive-pro-controls button{min-width:0;min-height:46px;display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:5px;padding:5px;border:1px solid rgba(148,163,184,.1);border-radius:9px;background:#101825;color:#a3adbb;text-align:left}.wlive-pro-controls button>i{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#182233;font-size:13px}.wlive-pro-controls button span,.wlive-pro-controls button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlive-pro-controls button span{font-size:7px}.wlive-pro-controls button small{margin-top:2px;color:#596679;font-size:6px}.wlive-pro-controls button.is-on>i{color:#3ee0ad}.wlive-pro-controls button.is-danger{border-color:rgba(239,35,60,.28);background:rgba(239,35,60,.14);color:#fff}.wlive-pro-controls button.is-danger>i{background:#ef233c}.wlive-pro-checklist,.wlive-pro-live-rail>section{border:1px solid rgba(148,163,184,.1);border-radius:12px;background:#0d1420}.wlive-pro-checklist{padding:10px}.wlive-pro-checklist>header,.wlive-pro-live-rail section>header,.wlive-pro-widget>header{display:flex;align-items:center;justify-content:space-between;gap:7px}.wlive-pro-checklist>header{margin-bottom:7px}.wlive-pro-checklist>header strong,.wlive-pro-live-rail header strong,.wlive-pro-widget>header strong{font-size:8px}.wlive-pro-checklist>header span{color:#4edbb9;font-size:7px}.wlive-pro-checklist>div{min-height:47px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px;margin:5px 0;padding:6px;border:1px solid rgba(148,163,184,.08);border-radius:8px;background:#101925}.wlive-pro-checklist>div>i{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:rgba(45,211,153,.12);color:#43dca8;font-size:10px}.wlive-pro-checklist strong,.wlive-pro-checklist small{display:block}.wlive-pro-checklist strong{font-size:7px}.wlive-pro-checklist small{margin-top:3px;color:#657286;font-size:6px}.wlive-pro-checklist>div.is-warn>i{background:rgba(245,158,11,.12);color:#fbbf24}.wlive-pro-live-rail{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}.wlive-pro-live-rail>section{padding:9px}.wlive-pro-live-rail section>header{margin-bottom:6px}.wlive-pro-live-rail header button{border:0;background:transparent;color:#778498;font-size:6px}.wlive-pro-live-rail section>label{min-height:41px;display:grid;grid-template-columns:27px minmax(0,1fr) 35px;align-items:center;gap:7px;margin:4px 0;padding:5px;border:1px solid rgba(148,163,184,.08);border-radius:8px;background:#111927}.wlive-pro-live-rail section>label>i{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#172131;color:#ff4e6b}.wlive-pro-live-rail label b,.wlive-pro-live-rail label small{display:block}.wlive-pro-live-rail label b{font-size:7px}.wlive-pro-live-rail label small{margin-top:2px;color:#47d9ab;font-size:6px}.wlive-pro-live-rail .wlive-switch{width:34px;height:19px}.wlive-pro-live-rail .wlive-switch i{width:13px;height:13px}.wlive-pro-live-rail .wlive-switch.is-on i{transform:translateX(15px)}.wlive-pro-chat{min-height:0;display:flex;flex-direction:column}.wlive-pro-chat>div{min-height:70px;flex:1;overflow:auto;padding:5px;border-radius:7px;background:#080e18}.wlive-pro-chat p{margin:5px;color:#6f7d90;font-size:6px}.wlive-pro-chat p b{color:#c2cad6}.wlive-pro-chat>label{min-height:30px!important;display:flex!important;margin-top:6px!important;padding:0 4px 0 8px!important}.wlive-pro-chat input{min-width:0;flex:1;border:0;background:transparent;color:#fff;font-size:7px;outline:0}.wlive-pro-chat label button{width:23px;height:23px;border:0;border-radius:6px;background:#1a2434;color:#8794a7}.wlive-pro-bottom{display:grid;grid-template-columns:1.05fr .9fr 1fr 1.35fr 1.08fr;gap:7px;margin-top:8px}.wlive-pro-widget{min-width:0;min-height:158px;padding:9px;border:1px solid rgba(148,163,184,.1);border-radius:11px;background:#0d1420}.wlive-pro-widget>header{margin-bottom:8px}.wlive-pro-widget>header>i,.wlive-pro-widget>header button{border:0;background:transparent;color:#718095;font-size:10px}.wlive-pro-audio label{display:block;margin:9px 0}.wlive-pro-audio label span{display:flex;justify-content:space-between;color:#8e9aab;font-size:6px}.wlive-pro-audio input{width:100%;height:4px;margin-top:7px;accent-color:#ef233c}.wlive-pro-sources ul{display:grid;gap:3px;margin:0;padding:0}.wlive-pro-sources li{display:grid;grid-template-columns:19px minmax(0,1fr) 16px;align-items:center;gap:6px;min-height:25px;padding:0 6px;border-radius:6px;background:#111927;color:#8e9aab;font-size:6px;list-style:none}.wlive-pro-sources li>i{color:#ff536f}.wlive-pro-sources li>em{font-style:normal;color:#647287}.wlive-pro-details label{display:grid;gap:4px;color:#7a8799;font-size:6px}.wlive-pro-details select{height:28px;border:1px solid rgba(148,163,184,.1);border-radius:7px;background:#111927;color:#dce3ec;padding:0 7px;font-size:7px}.wlive-pro-tags{display:flex;gap:4px;margin:8px 0}.wlive-pro-tags span,.wlive-pro-tags button{padding:5px;border:0;border-radius:5px;background:#172133;color:#8390a2;font-size:6px}.wlive-pro-details>small{color:#546176;font-size:6px}.wlive-pro-realtime>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.wlive-pro-realtime article{position:relative;min-height:52px;padding:7px;overflow:hidden;border-radius:7px;background:#111927}.wlive-pro-realtime article span,.wlive-pro-realtime article strong{display:block}.wlive-pro-realtime article span{color:#6f7c8e;font-size:6px}.wlive-pro-realtime article strong{margin-top:4px;font-size:11px}.wlive-pro-realtime article i{position:absolute;left:7px;right:7px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,#ef233c var(--v),#263143 var(--v))}.wlive-pro-quick>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.wlive-pro-quick>div button{min-height:51px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid rgba(148,163,184,.08);border-radius:8px;background:#111927;color:#8e9aab;font-size:6px}.wlive-pro-quick>div button i{color:#ff536f;font-size:15px}.wlive-studio-analytics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.wlive-studio-analytics-grid article{min-height:135px;display:flex;flex-direction:column;padding:17px;border:1px solid rgba(148,163,184,.1);border-radius:15px;background:#101722}.wlive-studio-analytics-grid article>i{color:#ff536f;font-size:21px}.wlive-studio-analytics-grid span{margin-top:16px;color:#778497;font-size:9px}.wlive-studio-analytics-grid strong{margin:6px 0;font-size:25px}.wlive-studio-analytics-grid small{color:#5f6c80;font-size:8px}.wlive-studio-chart{height:330px;margin-top:12px;padding:17px;border:1px solid rgba(148,163,184,.1);border-radius:16px;background:#0e1521}.wlive-studio-chart header{display:flex;justify-content:space-between}.wlive-studio-chart header strong{font-size:11px}.wlive-studio-chart header span{color:#68768a;font-size:8px}.wlive-studio-chart svg{width:100%;height:250px;margin-top:14px}@media(max-width:1500px){.wlive-command>section{width:calc(100vw - 76px)}.wlive-command-layout{grid-template-columns:145px minmax(0,1fr)}.wlive-pro-console{grid-template-columns:minmax(460px,1fr) 195px 215px}.wlive-pro-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}.wlive-pro-quick,.wlive-pro-realtime{grid-column:span 1}}@media(max-width:1180px){.wlive-command>section{width:calc(100vw - 28px)}.wlive-studio-channel{display:none}.wlive-pro-health{grid-template-columns:repeat(3,1fr)}.wlive-pro-console{grid-template-columns:1fr 210px}.wlive-pro-live-rail{grid-column:1/-1;grid-template-columns:1fr 1fr}.wlive-pro-bottom{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.wlive-command{padding:4px}.wlive-command>section{width:calc(100vw - 8px);height:calc(100vh - 8px)}.wlive-command-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.wlive-command-layout>aside{display:flex;overflow:auto}.wlive-studio-nav-title,.wlive-studio-quick-status{display:none}.wlive-pro-health{grid-template-columns:1fr 1fr}.wlive-pro-console{grid-template-columns:1fr}.wlive-pro-checklist,.wlive-pro-live-rail{grid-column:1}.wlive-pro-live-rail{grid-template-columns:1fr}.wlive-pro-bottom{grid-template-columns:1fr}.wlive-pro-monitor{min-height:240px}.wlive-pro-controls{grid-template-columns:repeat(3,1fr)}.wlive-studio-analytics-grid{grid-template-columns:1fr 1fr}}

/* ===== whitoo-chat-ref2026.css ===== */
/* ==========================================================================
   Whitoo — Chat messages 2026
   Loaded LAST in chat_room.html. Pure visual layer: markup and chatnet.js are
   untouched.

   Layout target (from the reference):
     - other people : avatar left, name above, bubble sized to its content
     - own messages : right aligned, NO avatar, no name, time under the bubble
     - bubbles are dark grey — the old teal/blue gradient is removed

   Structure produced by chatnet.js:
     .cht.sent | .cht.replies (+ .bot-message)
       .forward-check, img.avatar
       .message-data > small.sender-name + .message-html + .current-chat-reactions
       .chat-actions / .chat-reactions   (hover)
       .message-meta > .lt-edited-label / .message-time / .message-status

   SPECIFICITY: whitoo-next.css and whitoo-refresh.css style these with
   `body.incallx .cht.sent .message-data { ... !important }`, which outranks a
   plain `.chats .cht ...` selector. Every override here is therefore prefixed
   with `body.incallx` (verified on a live test page).
   ========================================================================== */

body.incallx .chats .cht {
    --wc26-line: rgba(255, 255, 255, .07);
    --wc26-text: #e8ebf2;
    --wc26-muted: #7d8699;

    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    float: none !important;
    box-shadow: none !important;
}

body.incallx .chats .cht.replies { justify-content: flex-start !important; }
body.incallx .chats .cht.sent    { justify-content: flex-end !important; }

/* ---------- avatar (only for other people, like the reference) ---------- */
body.incallx .chats .cht .avatar {
    order: 0 !important;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 !important;
    content-visibility: visible;
}

body.incallx .chats .cht.sent .avatar {
    display: none !important;
}

/* ---------- content column: transparent, the bubble is .message-html ---------- */
body.incallx .chats .cht .message-data {
    order: 1 !important;
    display: block !important;
    min-width: 0;
    width: auto !important;
    max-width: min(620px, 76%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

body.incallx .chats .cht.sent .message-data {
    text-align: right !important;
}

/* ---------- name row ---------- */
/* display:flex (block-level), NOT inline-flex — inline-flex let the bubble sit
   on the same line as the name instead of underneath it. */
body.incallx .chats .cht .sender-name {
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 5px !important;
    padding: 0 !important;
    background: none !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* own messages don't repeat your own name (reference shows none) */
body.incallx .chats .cht.sent .sender-name {
    display: none !important;
}

body.incallx .chats .cht .bot-sender-name {
    color: #c4b5fd !important;
}

body.incallx .chats .cht .bot-sender-name i {
    color: #c4b5fd;
}

/* role / bot badges (not the username wrapper) */
body.incallx .chats .cht .sender-name .badge,
body.incallx .chats .cht .bot-sender-name > span,
body.incallx .chats .cht .usertype-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(99, 102, 241, .22);
    color: #a5b4fc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- the bubble ---------- */
body.incallx .chats .cht .message-html {
    display: inline-block;
    max-width: 100%;
    padding: 10px 14px !important;
    border: 1px solid var(--wc26-line);
    border-radius: 14px 14px 14px 4px;
    background: #1b2030 !important;
    background-image: none !important;
    color: var(--wc26-text) !important;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
}

body.incallx .chats .cht.sent .message-html {
    border-radius: 14px 14px 4px 14px;
    background: #262d3d !important;
    background-image: none !important;
}

body.incallx .chats .cht.bot-message .message-html {
    background: #1e1b33 !important;
    border-color: rgba(124, 58, 237, .28);
}

body.incallx .chats .cht .message-html strong,
body.incallx .chats .cht .message-html b {
    color: #fff;
    font-weight: 800;
}

body.incallx .chats .cht .message-html a {
    color: #8ab4ff !important;
    text-decoration: none;
}

body.incallx .chats .cht .message-html a:hover { text-decoration: underline; }

body.incallx .chats .cht .message-html code {
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(124, 58, 237, .2);
    color: #c4b5fd;
    font-size: 12.5px;
}

body.incallx .chats .cht .message-html img {
    max-width: 100%;
    border-radius: 10px;
    content-visibility: visible;
}

/* ---------- time / edited / status ---------- */
body.incallx .chats .cht .message-meta {
    order: 2 !important;
    align-self: flex-end;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: var(--wc26-muted) !important;
    font-size: 10.5px;
    white-space: nowrap;
}

/* on own messages the time sits to the LEFT of the bubble */
body.incallx .chats .cht.sent .message-meta {
    order: 0 !important;
}

body.incallx .chats .cht .message-time { color: var(--wc26-muted) !important; }

body.incallx .chats .cht .lt-edited-label {
    color: var(--wc26-muted) !important;
    font-style: italic;
}

body.incallx .chats .cht .message-status i { font-size: 12px; }

/* ---------- reactions ---------- */
body.incallx .chats .cht .current-chat-reactions {
    display: block;
    margin-top: 7px;
}

body.incallx .chats .cht .current-reacts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--wc26-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

body.incallx .chats .cht .current-reacts:hover {
    border-color: rgba(239, 43, 82, .45);
    background: rgba(239, 43, 82, .12);
}

body.incallx .chats .cht .current-reacts-count {
    order: 2;
    color: var(--wc26-text);
    font-size: 11px;
    font-weight: 800;
}

body.incallx .chats .cht .current-reacts img,
body.incallx .chats .cht .current-reacts i {
    order: 1;
    width: 14px;
    height: 14px;
    font-size: 13px;
}

/* Hover tools are taken OUT of the flow — in-flow they reserved ~110px next to
   every bubble, so own messages never reached the right edge. */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions,
body.incallx .chats .cht .forward-check {
    position: absolute !important;
    top: 0;
    z-index: 5;
    margin: 0 !important;
}

body.incallx .chats .cht.replies .chat-actions  { right: 8px; }
body.incallx .chats .cht.replies .chat-reactions { right: 46px; }
body.incallx .chats .cht.replies .forward-check  { right: 84px; }

body.incallx .chats .cht.sent .chat-actions   { left: 8px; }
body.incallx .chats .cht.sent .chat-reactions { left: 46px; }
body.incallx .chats .cht.sent .forward-check  { left: 84px; }

/* only reveal them on hover, like the reference's clean rows */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions {
    opacity: 0;
    transition: opacity .12s ease;
}

body.incallx .chats .cht:hover .chat-actions,
body.incallx .chats .cht:hover .chat-reactions {
    opacity: 1;
}

/* ---------- date divider ---------- */
body.incallx .chats .new-date {
    display: flex;
    justify-content: center;
    margin: 6px 0 16px;
}

body.incallx .chats .new-date p {
    display: inline-block;
    margin: 0;
    padding: 4px 14px;
    border: 1px solid var(--wc26-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    color: var(--wc26-muted);
    font-size: 10.5px;
    font-weight: 700;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    body.incallx .chats .cht .avatar { width: 34px; height: 34px; }
    body.incallx .chats .cht .message-data { max-width: 84% !important; }
    body.incallx .chats .cht .message-html { font-size: 13px; }
}

/* ==========================================================================
   REFERANS TAMAMLAMA (2026-07-18)
   Eksik parcalar: hos geldin karti, tek parca yuvarlak yazma cubugu,
   cizgili tarih ayraci, silinen mesaj balonu.
   ========================================================================== */

/* ---------- Hos geldin karti ---------- */
body.incallx .wc-welcome {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 18px 6px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(23, 30, 48, .92), rgba(14, 19, 32, .92));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

body.incallx .wc-welcome.is-hidden { display: none !important; }

body.incallx .wc-welcome-emoji {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.2;
}

body.incallx .wc-welcome-copy { flex: 1 1 auto; min-width: 0; }

body.incallx .wc-welcome-copy strong {
    display: block;
    color: #f3f6fb;
    font-size: 14px;
    font-weight: 800;
}

body.incallx .wc-welcome-copy small {
    display: block;
    margin-top: 3px;
    color: rgba(148, 163, 184, .82);
    font-size: 12px;
    line-height: 1.4;
}

body.incallx .wc-welcome-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(148, 163, 184, .7);
    font-size: 16px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

body.incallx .wc-welcome-x:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ---------- Tarih ayraci: ortada yazi, iki yanda ince cizgi ---------- */
body.incallx .chats .new-date {
    align-items: center;
    gap: 12px;
    margin: 18px 4px 16px !important;
}

body.incallx .chats .new-date::before,
body.incallx .chats .new-date::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .07);
}

body.incallx .chats .new-date p {
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(125, 134, 153, .9) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* ---------- Silinen mesaj: kirmizi balon ---------- */
body.incallx .chats .cht .chat-txt.deleted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px !important;
    border: 1px solid rgba(230, 18, 43, .35) !important;
    border-radius: 14px !important;
    background: rgba(230, 18, 43, .14) !important;
    color: #ffb3bd !important;
    font-size: 13px;
    font-style: normal !important;
}

body.incallx .chats .cht .chat-txt.deleted i { color: #ff6b7f; }

/* ---------- Yazma cubugu: tek parca yuvarlak kapsul ---------- */
body.incallx .editor-container.editor-controller {
    align-items: center;
    gap: 4px;
    margin: 10px 18px 14px;
    padding: 6px 8px 6px 6px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 16px !important;
    background: rgba(16, 21, 34, .92) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(230, 18, 43, .38) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

/* + dugmesi: yuvarlak, sakin */
body.incallx .editor-container .whitoo-attach-trigger {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: rgba(203, 213, 225, .85);
    transition: background .16s ease, color .16s ease;
}

body.incallx .editor-container .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

body.incallx .editor-container .whitoo-attach-trigger svg { width: 20px; height: 20px; }

/* Yazma alani */
body.incallx .editor-container .editor-col { padding: 0 4px; }

body.incallx .editor-container #chatnet-editor {
    min-height: 36px;
    border: 0 !important;
    background: transparent !important;
}

/* Emoji / sticker / gif ikonlari */
body.incallx .editor-container .emoji-col .editor-icon {
    width: 21px;
    height: 21px;
    color: rgba(148, 163, 184, .75);
    transition: color .16s ease, transform .16s ease;
    cursor: pointer;
}

body.incallx .editor-container .emoji-col .editor-icon:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* Mikrofon */
body.incallx .editor-container .lt-voice-hold-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(148, 163, 184, .8);
    font-size: 18px;
}

body.incallx .editor-container .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Gonder: kirmizi yuvarlak */
body.incallx .editor-container .lt-send-message {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin-left: 4px;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.incallx .editor-container .lt-send-message:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(230, 18, 43, .4);
}

body.incallx .editor-container .lt-send-message i { font-size: 18px; }

/* ==========================================================================
   DUZELTME (2026-07-18) — canlida balonlar mavi ve "kutu icinde kutu" cikti.
   Sebep: gercek balon .chat-txt elemani; whitoo-modern.css:3186 ona
   mavi-turkuaz gradient basiyor. Benim katmanim dis kap .message-html'i
   boyadigi icin ikinci bir kutu olusuyordu.
   Cozum: dis kap seffaf, renk/kose SADECE .chat-txt uzerinde.
   ========================================================================== */

/* Dis kap: gorsel yok, sadece hizalama */
html body.incallx .chats .cht .message-html {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Karsi taraf: koyu gri balon */
html body.incallx .chats .cht.replies .chat-txt {
    display: inline-block;
    max-width: 100%;
    padding: 9px 13px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px 14px 14px 4px !important;
    background: #232a38 !important;
    color: #e8ebf2 !important;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: none !important;
}

/* Kendi mesajim: kirmizi balon (referanstaki gibi) */
html body.incallx .chats .cht.sent .chat-txt {
    display: inline-block;
    max-width: 100%;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 14px 14px 4px 14px !important;
    background: linear-gradient(135deg, #d81230, #9d1026) !important;
    color: #fff !important;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(180, 16, 38, .22) !important;
}

/* Bot: mor balon */
html body.incallx .chats .cht.bot-message .chat-txt {
    background: #241f3d !important;
    border-color: rgba(139, 92, 246, .3) !important;
    color: #e9e5ff !important;
}

/* Silinen mesaj balonu her iki tarafta da kirmizi cerceveli kalsin */
html body.incallx .chats .cht .chat-txt.deleted {
    background: rgba(230, 18, 43, .14) !important;
    border: 1px solid rgba(230, 18, 43, .35) !important;
    color: #ffb3bd !important;
    box-shadow: none !important;
}

/* Saat + tik: balonun altinda, sakin */
html body.incallx .chats .cht .message-meta {
    margin-top: 4px !important;
    color: rgba(125, 134, 153, .85) !important;
    font-size: 10.5px !important;
}

/* ---------- Yazma cubugu: tema mavisi/turuncusu yerine referans ---------- */
html body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(16, 21, 34, .92) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

html body.incallx .editor-container .lt-send-message,
html body.incallx .editor-container .send-col .btn.lt-send-message,
html body.incallx .editor-container .send-col .btn-primary {
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    background-image: linear-gradient(135deg, #e6122b, #a5122a) !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32) !important;
}

html body.incallx .editor-container .lt-voice-hold-btn {
    background: transparent !important;
    border: 0 !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

html body.incallx .editor-container .whitoo-attach-trigger {
    border: 0 !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

/* ---------- Ust bant duyurusu: referanstaki hos geldin karti gorunumu ---------- */
html body.incallx .main-panel > .alert,
html body.incallx .room-notice .alert {
    margin: 12px 18px 6px !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(23, 30, 48, .92), rgba(14, 19, 32, .92)) !important;
    color: #dfe6f2 !important;
    font-size: 13px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2) !important;
}

/* ==========================================================================
   BASLIK + BALON ICI SAAT + GONDER BUTONU (referans birebir)
   ========================================================================== */

/* ---------- Kanal basligi ---------- */
html body.incallx .navbar.topbar .top-channel-icon i {
    color: #ff4d63 !important;
    font-size: 19px !important;
}

html body.incallx .navbar.topbar .top-channel-name {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
}

/* Altin yildiz */
html body.incallx .navbar.topbar .wc-fav {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    color: rgba(148, 163, 184, .5);
    font-size: 15px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

html body.incallx .navbar.topbar .wc-fav.is-on {
    color: #ffc24b;
}

html body.incallx .navbar.topbar .wc-fav:hover { transform: scale(1.08); }

/* Takip Et hapi */
html body.incallx .navbar.topbar .wc-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-left: 10px;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #dbe3ef;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

html body.incallx .navbar.topbar .wc-follow i { font-size: 14px; }

html body.incallx .navbar.topbar .wc-follow:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(148, 163, 184, .38);
    color: #fff;
}

html body.incallx .navbar.topbar .wc-follow.is-on {
    border-color: rgba(255, 194, 75, .45);
    background: rgba(255, 194, 75, .12);
    color: #ffd280;
}

html body.incallx .navbar.topbar .wc-follow.is-on i { color: #ffc24b; }

/* "Guvenli" seridi basligi kalabaliklastiriyordu -> sadece genis ekranda */
@media (max-width: 1200px) {
    html body.incallx .navbar.topbar .woo-room-status-strip { display: none !important; }
}

/* Sag ust ikonlar: esit boyda, yuvarlak, sakin */
html body.incallx .navbar.topbar .nav-item > .nav-link,
html body.incallx .navbar.topbar .rightbarToggle {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(203, 213, 225, .82) !important;
    transition: background .16s ease, color .16s ease;
}

html body.incallx .navbar.topbar .nav-item > .nav-link:hover,
html body.incallx .navbar.topbar .rightbarToggle:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

html body.incallx .navbar.topbar .rightbarToggle i.rotate { transform: none !important; }

/* ---------- Saat + tik: balonun icinde, sagda ---------- */
html body.incallx .chats .cht .message-meta.wc-meta-in {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    float: right;
    margin: 6px 0 -2px 10px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1;
    white-space: nowrap;
}

html body.incallx .chats .cht.sent .message-meta.wc-meta-in {
    color: rgba(255, 255, 255, .78) !important;
}

html body.incallx .chats .cht.replies .message-meta.wc-meta-in {
    color: rgba(148, 163, 184, .72) !important;
}

html body.incallx .chats .cht .message-meta.wc-meta-in .message-status i,
html body.incallx .chats .cht .message-meta.wc-meta-in i {
    font-size: 12px;
}

/* Balon: saat sigacak sekilde minimum genislik */
html body.incallx .chats .cht .chat-txt {
    min-width: 74px;
}

/* Isim satiri: ad + saat yan yana (referans) */
html body.incallx .chats .cht .sender-name {
    color: #e9edf5 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* ---------- Gonder butonu: yuvarlak kare (referans) ---------- */
html body.incallx .editor-container .lt-send-message,
html body.incallx .editor-container .send-col .btn.lt-send-message,
html body.incallx .editor-container .send-col .btn-primary {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 13px !important;
}

/* ==========================================================================
   ODA TEMASI (Woo Theme Studio) UZERINE REFERANS
   Bu odada body.woo-room-themed aktif; woo-theme-studio.css sohbet alanina
   turkuaz kenarlik/kutu basiyordu (mesaj kutulari, editor, + ve mikrofon).
   Referans gorunum icin sohbet bilesenleri temadan muaf tutuluyor.
   ========================================================================== */

/* Mesaj kabi: tema kutusu iptal — balon SADECE .chat-txt */
html body.incallx.woo-room-themed .cht .message-data,
html body.incallx.woo-room-themed .cht.sent .message-data,
html body.woo-room-themed .cht .message-data,
html body.woo-room-themed .cht.sent .message-data {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Yazma cubugu: tek parca koyu kapsul, ic kutu yok */
html body.woo-room-themed .editor-container,
html body.woo-room-themed .editor-wrap,
html body.woo-room-themed .editor-col {
    border-radius: 16px !important;
    backdrop-filter: none !important;
}

html body.woo-room-themed .editor-container.editor-controller {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(16, 21, 34, .94) !important;
}

html body.incallx .editor-wrap,
html body.woo-room-themed .editor-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .editor-col,
html body.woo-room-themed .editor-container .editor-col {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container #chatnet-editor,
html body.woo-room-themed .editor-container #chatnet-editor {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* + ve mikrofon: tema gradienti yerine sakin gri */
html body.woo-room-themed .whitoo-attach-trigger {
    border: 0 !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .lt-voice-hold-btn,
html body.woo-room-themed .lt-voice-hold-btn {
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

/* Gonder: her temada kirmizi yuvarlak kare */
html body.woo-room-themed .lt-send-message {
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32) !important;
}

/* Sohbet alani cercevesi yok */
html body.incallx .chat-scroll,
html body.woo-room-themed .chat-scroll,
html body.incallx .group-chat .messages,
html body.woo-room-themed .group-chat .messages {
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------- Saat: gonderen adinin yaninda (karsi taraf) ---------- */
html body.incallx .chats .cht .message-meta.wc-meta-name {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    float: none !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    color: rgba(125, 134, 153, .8) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    vertical-align: middle;
}

/* Ad + saat ayni satirda */
html body.incallx .chats .cht .message-data .sender-name {
    display: inline-block !important;
    margin-bottom: 5px !important;
}

/* Balon icindeki saat (kendi mesajim) */
html body.incallx .chats .cht.sent .chat-txt .message-meta.wc-meta-in {
    float: right;
    margin: 5px 0 -1px 12px !important;
}

/* Hover aksiyon ikonlari soldaki bosluga tasiyordu -> balonun yanina */
html body.incallx .chats .cht .chat-actions,
html body.incallx .chats .cht .chat-reactions {
    background: rgba(15, 20, 32, .92) !important;
    border-radius: 10px;
}

/* ==========================================================================
   TURKUAZ CERCEVELERIN GERCEK KAYNAGI (whitoo-refresh.css) EZILIYOR
   - .chat-scroll        : 8414 -> turkuaz kenarlik + kirmizi/turkuaz degrade
   - .note-editor        : 8288 -> yazma kutusunun ic cercevesi
   - .lt-voice-hold-btn  : 8342 -> mikrofonun turkuaz kutusu
   - .lt-send-message    : 8352 -> turuncu-kirmizi gradient
   Onlarin ozgullugu (0,4,1); buradaki kurallar "html" ile (0,4,2) olup kazanir.
   ========================================================================== */

/* Sohbet alani: cercevesiz, duz koyu zemin (referans) */
html body.incallx .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Yazma kutusunun ic cercevesi tamamen kalksin */
html body.incallx .editor-container.editor-controller .note-editor.note-frame,
html body.incallx .editor-container.editor-controller .note-editor.note-frame:focus-within {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .note-editing-area,
html body.incallx .editor-container.editor-controller .note-editable {
    background: transparent !important;
}

/* Mikrofon: turkuaz kutu yerine duz ikon */
html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

/* Gonder: turuncu gradient yerine referans kirmizisi */
html body.incallx .editor-container.editor-controller .lt-send-message {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .3) !important;
}

/* + butonu */
html body.incallx .editor-container.editor-controller .whitoo-attach-trigger {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

/* ---------- Mesaj blogu: ad ustte, balon altta (referans sirasi) ---------- */
html body.incallx .chats .cht .message-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
}

html body.incallx .chats .cht.sent .message-data {
    align-items: flex-end !important;
}

/* Ad satiri en ustte, balon onun altinda */
html body.incallx .chats .cht .message-data .sender-name {
    order: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
}

html body.incallx .chats .cht .message-data .message-html {
    order: 1 !important;
    width: auto !important;
    max-width: 100% !important;
}

html body.incallx .chats .cht .message-data .current-chat-reactions {
    order: 2 !important;
}

/* Karsi tarafta saat adin yaninda kalsin (ayri satira dusmesin) */
html body.incallx .chats .cht .message-meta.wc-meta-name {
    display: inline !important;
    margin-left: 8px !important;
}

/* ==========================================================================
   REFERANS BIREBIR (son)
   whitoo-refresh.css:11766 -> #main-room .group-chat .chat-scroll turkuaz
   cerceve + izgara arka plan basiyordu; ozgullugu (0,4,1). Asagidaki
   secicilerde "html" var (0,4,2) -> kesin kazanir.
   ========================================================================== */

/* Sohbet alani: cerceve yok, izgara yok, duz koyu zemin */
html body.incallx #main-room .group-chat .chat-scroll,
html body.incallx .group-chat .chat-scroll,
html body.incallx .private-chat .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* Yazma cubugu alani: cerceve/zemin yok, kapsul icerde dursun */
html body.incallx .room-editor,
html body.incallx .private-editor {
    padding: 10px 14px 14px !important;
    border: 0 !important;
    background: transparent !important;
}

html body.incallx .editor-container.editor-controller {
    min-height: 54px !important;
    margin: 0 !important;
    padding: 7px 8px 7px 7px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 16px !important;
    background: #15131c !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(255, 255, 255, .14) !important;
}

/* + : cerceve/daire yok, duz gri ikon */
html body.incallx .editor-container.editor-controller .whitoo-attach-trigger {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .8) !important;
}

html body.incallx .editor-container.editor-controller .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

/* Placeholder */
html body.incallx .editor-container .note-placeholder,
html body.incallx .editor-container .note-editable[placeholder]:empty::before {
    color: rgba(148, 163, 184, .55) !important;
    font-size: 13.5px !important;
}

/* GIF / emoji / mikrofon: esit boy, sakin gri */
html body.incallx .editor-container .emoji-col .editor-icon,
html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 20px !important;
    height: 20px !important;
    color: rgba(148, 163, 184, .78) !important;
}

html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 17px !important;
}

/* Gonder: referanstaki kirmizi yuvarlak kare */
html body.incallx .editor-container.editor-controller .lt-send-message {
    width: 42px !important;
    height: 38px !important;
    min-width: 42px !important;
    margin-left: 6px !important;
    border-radius: 12px !important;
    background: #e8203a !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .lt-send-message:hover {
    background: #f5273f !important;
}

/* ---------- Balon renkleri: referanstaki mat tonlar ---------- */
html body.incallx .chats .cht.replies .chat-txt {
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #1c1a24 !important;
    color: #e9ecf3 !important;
}

html body.incallx .chats .cht.sent .chat-txt {
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: #7a1b2c !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

html body.incallx .chats .cht .chat-txt.deleted {
    background: #7a1b2c !important;
    border: 0 !important;
    color: #ffd6dc !important;
}

html body.incallx .chats .cht .chat-txt.deleted i { color: #ff8a9b !important; }

/* Bot: mor isim, mavi rozet, koyu balon */
html body.incallx .chats .cht.bot-message .sender-name { color: #b79cff !important; }

html body.incallx .chats .cht.bot-message .sender-name span {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #2f6bd8;
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .4px;
    vertical-align: middle;
}

html body.incallx .chats .cht.bot-message .chat-txt {
    background: #1c1a24 !important;
}

/* Avatar 34px (referans) */
html body.incallx .chats .cht .avatar {
    width: 34px !important;
    height: 34px !important;
}

/* Isim + saat satiri */
html body.incallx .chats .cht .message-data .sender-name {
    color: #eef1f7 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

html body.incallx .chats .cht .message-meta.wc-meta-name {
    color: rgba(139, 148, 166, .85) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

/* Balon ici saat */
html body.incallx .chats .cht.sent .chat-txt .message-meta.wc-meta-in {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 10px !important;
}

/* "+" cevresindeki kutu .attachment-col'dan geliyordu (whitoo-refresh:8271) */
html body.incallx .editor-container.editor-controller .attachment-col {
    width: 38px !important;
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ikon sutunlarinin sabit 52px yuksekligi cubugu sismanlatiyordu */
html body.incallx .room-editor .attachment-col,
html body.incallx .room-editor .emoji-col,
html body.incallx .room-editor .send-col {
    min-height: 0 !important;
}

/* ==========================================================================
   Yazma cubugu: sabit koyu kutu degil -> arkasindaki zemini alan SAYDAM yuzey.
   Boylece oda arka plani/temasi ne renkse cubuk da o renge burunur.
   Ayrica mesajlar cubugun arkasina kaymaz (cubuk kendi satirinda, ustte).
   ========================================================================== */
html body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(255, 255, 255, .06) !important;
    background: rgba(255, 255, 255, .035) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .05) !important;
}

/* Cubugun bulundugu serit de seffaf: arka plan kesintisiz aksin */
html body.incallx .room-editor,
html body.incallx .private-editor {
    position: relative;
    z-index: 2;
    background: transparent !important;
    background-image: none !important;
}

/* Mesajlar cubugun altina girmesin: kaydirma alani cubuktan once bitsin */
html body.incallx .chat-scroll {
    padding-bottom: 4px !important;
    overflow-x: hidden !important;
}

html body.incallx .chats {
    padding-bottom: 6px !important;
}


/* ===== whitoo-composer.css ===== */
/* ==========================================================================
   DEMODAN BIREBIR AKTARIM (composer-demo.html)
   Localhost demosunda onaylanan tam degerler. Son blok oldugu icin oncekileri
   ezer; site markup'i (.editor-wrap > .editor-container) demo yapisina esitlenir.
   ========================================================================== */

/* Kapsul = demo .wcx */
body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #17181d !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 8px 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* + = demo .wcx-plus (34px, #24262c, 10px kose, ince arti) */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #24262c !important;
    color: #dfe3ea !important;
    box-shadow: none !important;
    transition: background .16s ease !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: #2d3037 !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
}

/* + ikonundaki cember gizli -> demo ile ayni ince arti */
body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg circle,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg circle {
    display: none !important;
}

/* Yazi alani = demo .wcx-input */
body.incallx #main-room .group-chat .room-editor .editor-col,
body.incallx #main-private .private-chat .private-editor .editor-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx #main-room .group-chat .room-editor .note-editable,
body.incallx #main-private .private-chat .private-editor .note-editable {
    min-height: 22px !important;
    padding: 0 !important;
    color: #eef1f7 !important;
    font-size: 14.5px !important;
}

body.incallx #main-room .group-chat .room-editor .note-placeholder,
body.incallx #main-private .private-chat .private-editor .note-placeholder {
    padding: 0 !important;
    color: #767b87 !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
}

/* Sag ikonlar = demo .wcx-icons (13px aralik, 22px kutu) */
body.incallx #main-room .group-chat .room-editor .emoji-col,
body.incallx #main-private .private-chat .private-editor .emoji-col {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-right: 4px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon,
body.incallx #main-private .private-chat .private-editor .emoji-col .editor-icon {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    color: #c3c8d2 !important;
    cursor: pointer;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon:hover {
    color: #fff !important;
}

/* GIF rozeti = demo .wcx-gif */
body.incallx #main-room .group-chat .room-editor .wcx-gif,
body.incallx #main-private .private-chat .private-editor .wcx-gif {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 19px !important;
    padding: 0 5px !important;
    border: 1.6px solid #b9bec8 !important;
    border-radius: 5px !important;
    color: #d3d8e0 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    cursor: pointer;
}

/* Mikrofon = demo ikon olcusu */
body.incallx #main-room .group-chat .room-editor .send-col,
body.incallx #main-private .private-chat .private-editor .send-col {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding-left: 13px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn,
body.incallx #main-private .private-chat .private-editor .lt-voice-hold-btn {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #c3c8d2 !important;
    font-size: 19px !important;
    box-shadow: none !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn:hover {
    color: #fff !important;
}

/* Gonder = demo .wcx-send (44x38, 11px kose, #ec2743) */
body.incallx #main-room .group-chat .room-editor .lt-send-message,
body.incallx #main-private .private-chat .private-editor .lt-send-message {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 38px !important;
    min-width: 44px !important;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #ec2743 !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background .16s ease !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message:hover {
    background: #f4344f !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message i,
body.incallx #main-private .private-chat .private-editor .lt-send-message i {
    font-size: 19px !important;
}

/* ==========================================================================
   ODA ARKA PLANI — okunabilirlik perdesi geri
   Kanal arka plan gorseli varken mesajlarin okunmasi icin koyu perde sart.
   (Bolme sirasinda dusmustu.)
   ========================================================================== */
body.incallx #main-room .group-chat.has-room-bg .chat-scroll {
    background:
        linear-gradient(135deg, rgba(5, 8, 17, .78), rgba(5, 8, 17, .55) 44%, rgba(5, 8, 17, .82)),
        var(--whitoo-room-bg-image) center center / cover no-repeat !important;
    background-size: auto, cover !important;
}

body.incallx #main-room .group-chat .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   CERCEVE = ARKA PLANDAN TURETILIR (sabit renk yok)
   - Cubuk kendi rengini tasimaz: backdrop blur+saturate ile arkasindaki zemini
     alir. Zemin kirmizidan siyaha kayarken cubuk da o tonlara burunur.
   - Cerceve yerine %12 opaklikta ic halka + zeminden turetilen yumusak golge
     (tema vurgusu --wts-accent varsa ondan, yoksa notr).
   - Zemin sohbet + yazma seridini TEK parca kaplar -> cubuk arka plandan kopuk
     durmaz, dogal uzantisi gibi gorunur.
   ========================================================================== */
body.incallx #main-room .group-chat.has-room-bg .main-panel {
    background:
        linear-gradient(135deg, rgba(5, 8, 17, .78), rgba(5, 8, 17, .55) 44%, rgba(5, 8, 17, .82)),
        var(--whitoo-room-bg-image) center center / cover no-repeat !important;
    background-size: auto, cover !important;
}

body.incallx #main-room .group-chat.has-room-bg .chat-scroll,
body.incallx #main-room .group-chat .room-editor {
    background: transparent !important;
    background-image: none !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 30px rgba(0, 0, 0, .22),
        0 0 26px color-mix(in srgb, var(--wts-accent, #000) 12%, transparent) !important;
    transition: background .2s ease, box-shadow .2s ease !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap:focus-within,
body.incallx #main-private .private-chat .private-editor .editor-wrap:focus-within {
    background: rgba(255, 255, 255, .05) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 12px 34px rgba(0, 0, 0, .26),
        0 0 32px color-mix(in srgb, var(--wts-accent, #000) 18%, transparent) !important;
}

/* ==========================================================================
   SON AYAR — daha uzun cubuk, modern "+" butonu, isik gibi cerceve
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    max-width: 1000px !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 12px 34px rgba(0, 0, 0, .20) !important;
}

body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller {
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 10px 0 12px !important;
}

/* + : 40px cam kare, ince halka, belirgin ama sakin */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
    color: #f1f4f9 !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .15) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2.2 !important;
}

/* Yazi ve ikonlar cubukla orantili */
body.incallx #main-room .group-chat .room-editor .note-placeholder,
body.incallx #main-room .group-chat .room-editor .note-editable {
    font-size: 15px !important;
}

body.incallx #main-room .group-chat .room-editor .editor-col,
body.incallx #main-private .private-chat .private-editor .editor-col {
    padding: 0 16px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col,
body.incallx #main-private .private-chat .private-editor .emoji-col {
    gap: 15px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon,
body.incallx #main-private .private-chat .private-editor .emoji-col .editor-icon {
    width: 22px !important;
    height: 22px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn,
body.incallx #main-private .private-chat .private-editor .lt-voice-hold-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 20px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message,
body.incallx #main-private .private-chat .private-editor .lt-send-message {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    margin-left: 14px !important;
    border-radius: 13px !important;
}

/* ==========================================================================
   "+" DUGMESI — modern: daire, ince isik halkasi, dolgusuz
   Uzerine gelince dolar ve hafif yukselir; basinca kucuk bir geri bildirim.
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .9) !important;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .30) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:active,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:active {
    transform: scale(.94) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.4 !important;
}

/* ==========================================================================
   "+" SON HALI — KARE (12px kose) ve BUYUK arti simgesi
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .92) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32) !important;
    color: #fff !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.6 !important;
}

/* ==========================================================================
   OZEL MESAJ (DM) — sunucudakiyle ayni cubuk
   Kullanici secilmemisken editor alani gizlendigi icin ikonlar sola yigiliyor
   ve alttaki uyari ayri gri bir kutu olarak duruyordu. Artik: bos cubuk
   tamamen gizleniyor, uyari ayni cam kapsul icinde ortalanmis gorunuyor.
   ========================================================================== */
body.incallx #main-private .private-editor {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 16px 14px !important;
    background: transparent !important;
}

body.incallx #main-private .private-editor .editor-wrap {
    width: 100% !important;
    max-width: 1000px !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .editor-container.editor-controller {
    display: none !important;
}

/* Uyari SADECE kullanici secilmemisken gorunur (aksi halde sohbet acikken de
   ekranda kaliyordu). */
body.incallx #main-private .private-editor:not(.is-private-user-empty) .non-chat-select {
    display: none !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    color: rgba(203, 213, 225, .75) !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select p {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select img,
body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select .avatar {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   MESAJ ISLEM BUTONLARI — balonun hemen yaninda
   Eskiden satirin en soluna mutlak konumlaniyordu (mesajla alakasiz duruyordu).
   Artik akista: kendi mesajimda balonun SOLUNDA, karsi tarafta SAGINDA.
   ========================================================================== */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
    background: transparent !important;
    opacity: 0;
    transition: opacity .14s ease;
}

body.incallx .chats .cht:hover .chat-actions,
body.incallx .chats .cht:hover .chat-reactions {
    opacity: 1;
}

body.incallx .chats .cht.sent .chat-actions { order: -1 !important; }
body.incallx .chats .cht.sent .chat-reactions { order: -2 !important; }
body.incallx .chats .cht.sent .message-data { order: 0 !important; }

body.incallx .chats .cht.replies .chat-actions,
body.incallx .chats .cht.replies .chat-reactions { order: 5 !important; }

body.incallx .chats .cht .chat-actions > *,
body.incallx .chats .cht .chat-reactions > * {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(203, 213, 225, .85) !important;
    font-size: 14px !important;
}

body.incallx .chats .cht .chat-actions > *:hover,
body.incallx .chats .cht .chat-reactions > *:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

/* ===== whitoo-rightpanel.css ===== */
/* ==========================================================================
   Whitoo — Sag panel (uye listesi) 2026
   Referans: rol basliklari UPPERCASE + "— N" sayaci, sade uye satirlari,
   34px yuvarlak avatar + durum noktasi, hover'da aksiyon ikonu.
   En son yuklenen sayfa oldugu icin onceki katmanlari ezer.
   ========================================================================== */

/* ---------- Rol basligi: YONETICI — 2 ---------- */
body.incallx #rightbar-wrapper .lt-role-user-heading {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 16px 4px 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

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

/* Referansta baslikta ikon yok */
body.incallx #rightbar-wrapper .lt-role-user-heading span i {
    display: none !important;
}

body.incallx #rightbar-wrapper .lt-role-user-heading b {
    margin-left: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .62) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
}

body.incallx #rightbar-wrapper .lt-role-user-heading b::before {
    content: "— ";
}

/* ---------- Uye satiri ---------- */
body.incallx #rightbar-wrapper .room-users .user-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    margin: 1px 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .14s ease !important;
}

body.incallx #rightbar-wrapper .room-users .user-row:hover {
    background: rgba(255, 255, 255, .05) !important;
}

/* Avatar + cevrimici noktasi */
body.incallx #rightbar-wrapper .channel-user-image {
    position: relative !important;
}

body.incallx #rightbar-wrapper .channel-user-image img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

body.incallx #rightbar-wrapper .online-status {
    position: absolute !important;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0e1118;
}

body.incallx #rightbar-wrapper .online-status i {
    font-size: 8px !important;
}

body.incallx #rightbar-wrapper .online-status.online i { color: #2ed573 !important; }
body.incallx #rightbar-wrapper .online-status.offline i { color: #6b7280 !important; }

/* Isim + durum satiri */
body.incallx #rightbar-wrapper .channel-user-name {
    color: #e9edf5 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

body.incallx #rightbar-wrapper .user-status {
    margin-top: 1px !important;
    color: rgba(148, 163, 184, .6) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

body.incallx #rightbar-wrapper .user-status:empty {
    display: none !important;
}

/* Satir menusu: sadece hover */
body.incallx #rightbar-wrapper .dm-profile-options-toggle {
    border: 0 !important;
    background: transparent !important;
    color: rgba(203, 213, 225, .7) !important;
    opacity: 0;
    transition: opacity .14s ease;
}

body.incallx #rightbar-wrapper .user-row:hover .dm-profile-options-toggle {
    opacity: 1;
}

/* ---------- Arama kutusu ---------- */
body.incallx #rightbar-wrapper .room-users input,
body.incallx #rightbar-wrapper .tab-content input {
    height: 38px !important;
    padding: 0 34px 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .05) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    color: #e9edf5 !important;
    font-size: 12.5px !important;
}

body.incallx #rightbar-wrapper .room-users input::placeholder {
    color: rgba(148, 163, 184, .55) !important;
}

/* ---------- Rol rengi: baslik ve isimler role gore renklenir (referans) ----------
   Bolume --role-color degiskeni yaziliyor (rolun kendi rengi). Rolsuz uyelerde
   notr gri kalir. */
body.incallx #rightbar-wrapper .lt-role-user-section .lt-role-user-heading {
    color: color-mix(in srgb, var(--role-color, #94a3b8) 78%, #94a3b8) !important;
}

body.incallx #rightbar-wrapper .lt-role-user-section .lt-role-user-heading b {
    color: color-mix(in srgb, var(--role-color, #94a3b8) 55%, #94a3b8) !important;
}

body.incallx #rightbar-wrapper .lt-role-user-section .channel-user-name {
    color: var(--role-color, #e9edf5) !important;
}

/* Rolsuz "Uyeler" bolumu notr kalsin (renk kirliligi olmasin) */
body.incallx #rightbar-wrapper .lt-role-user-section[style*="#94a3b8"] .channel-user-name {
    color: #e9edf5 !important;
}

/* ---------- Baslik: sol renk cubugu kaldirildi ----------
   Baslikta inset 3px sol cubuk + 10px kose vardi; kucuk boyutta "(" gibi
   gorunen bir ark olusturuyordu. Referansta boyle bir cizgi yok. */
body.incallx #rightbar-wrapper .lt-role-user-heading {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 18px 0 8px !important;
    padding: 0 10px 0 12px !important;
    justify-content: space-between !important;
    overflow: visible !important;
}

body.incallx #rightbar-wrapper .lt-role-user-section {
    overflow: visible !important;
}

body.incallx #rightbar-wrapper .lt-role-user-items {
    padding: 0 4px !important;
}

/* Panel kaydirma cubugu: ince ve notr */
body.incallx #rightbar-wrapper .room-users,
body.incallx #rightbar-wrapper .height-scroll-rpanel,
body.incallx #rightbar-wrapper .room-users-row {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, .25) transparent !important;
}

body.incallx #rightbar-wrapper *::-webkit-scrollbar { width: 7px !important; }

body.incallx #rightbar-wrapper *::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, .25) !important;
    background-clip: content-box !important;
}

body.incallx #rightbar-wrapper *::-webkit-scrollbar-track { background: transparent !important; }

/* ==========================================================================
   SEKME SERIDI — referans: kutu yok, duz ikonlar, aktif kirmizi + alt cizgi
   Turnuvalar/Etkinlikler artik panelin ustunde ayri kart degil, bu seritte.
   ========================================================================== */
body.incallx #rightbar-wrapper #rpanel-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    margin: 4px 6px 10px !important;
    padding: 0 4px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    background: transparent !important;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-item {
    flex: 1 1 auto !important;
    margin: 0 !important;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-link {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .7) !important;
    font-size: 18px !important;
    box-shadow: none !important;
    transition: color .16s ease, background .16s ease !important;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-link:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #e8edf4 !important;
}

/* Aktif: kirmizi ikon + altinda kirmizi cizgi */
body.incallx #rightbar-wrapper #rpanel-tab .nav-link.active {
    background: transparent !important;
    color: #ff2d4b !important;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: #ff2d4b;
    transform: translateX(-50%);
}

/* Sekme icerigi: turnuva / etkinlik listeleri */
body.incallx #rightbar-wrapper .woo-rpanel-scroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding: 0 6px;
}

body.incallx #rightbar-wrapper .woo-right-tournament-body {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx #rightbar-wrapper .woo-right-tournament-item {
    display: block !important;
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #e9edf5 !important;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease !important;
}

body.incallx #rightbar-wrapper .woo-right-tournament-item:hover {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

body.incallx #rightbar-wrapper .woo-right-tournament-item b {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

body.incallx #rightbar-wrapper .woo-right-tournament-item span {
    display: block;
    margin-top: 3px;
    color: rgba(148, 163, 184, .75);
    font-size: 11px;
}

body.incallx #rightbar-wrapper .woo-right-tournament-item em {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(46, 213, 115, .14);
    color: #6ee7a0;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}

body.incallx #rightbar-wrapper .woo-right-see-all {
    display: inline-block;
    margin: 2px 0 10px;
    color: #ff6b7f !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

body.incallx #rightbar-wrapper .woo-right-tournament-empty {
    padding: 18px 4px;
    color: rgba(148, 163, 184, .6);
    font-size: 12px;
    text-align: center;
}

/* Sekmeler yan yana kalsin (nav-item list-item olarak tam genislik aliyordu) */
body.incallx #rightbar-wrapper #rpanel-tab {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

body.incallx #rightbar-wrapper #rpanel-tab .nav-item {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    list-style: none !important;
}

/* ==========================================================================
   PROFIL KARTI — Woo taci ve etiketler
   Woo aboneligi AKTIF ise: altin cerceve + nabiz gibi isilti.
   AKTIF DEGILSE: kesik cizgi cerceve, gri, doygunlugu alinmis -> "pasif" hissi.
   ========================================================================== */
body.incallx #rightbar-wrapper .woo-right-crown {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

body.incallx #rightbar-wrapper .woo-right-crown i {
    font-size: 19px !important;
}

body.incallx #rightbar-wrapper .woo-right-crown.is-active {
    border: 1px solid rgba(255, 194, 75, .55) !important;
    background: linear-gradient(135deg, rgba(255, 194, 75, .22), rgba(231, 154, 31, .10)) !important;
    color: #ffc24b !important;
    animation: wooCrownGlow 2.4s ease-in-out infinite !important;
}

@keyframes wooCrownGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 194, 75, .06), 0 6px 16px rgba(255, 194, 75, .14); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 194, 75, .12), 0 8px 22px rgba(255, 194, 75, .26); }
}

/* Pasif: "yokmus gibi" gorunur ama tiklanabilir kalir (Woo satin alma) */
body.incallx #rightbar-wrapper .woo-right-crown:not(.is-active) {
    border: 1px dashed rgba(148, 163, 184, .28) !important;
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(148, 163, 184, .45) !important;
    box-shadow: none !important;
    filter: grayscale(1);
}

body.incallx #rightbar-wrapper .woo-right-crown:not(.is-active):hover {
    border-color: rgba(255, 194, 75, .40) !important;
    color: rgba(255, 194, 75, .70) !important;
    filter: none;
}

/* ---------- Etiketler (otomatik rozetler) ---------- */
body.incallx #rightbar-wrapper .profile-auto-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 2px 4px !important;
}

body.incallx #rightbar-wrapper .profile-auto-badge {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(203, 213, 225, .75) !important;
    font-size: 13px !important;
    transition: transform .16s ease, border-color .16s ease !important;
}

body.incallx #rightbar-wrapper .profile-auto-badge:hover {
    transform: translateY(-1px);
}

body.incallx #rightbar-wrapper .profile-auto-badge.is-premium {
    border-color: rgba(255, 194, 75, .35) !important;
    background: rgba(255, 194, 75, .10) !important;
    color: #ffc24b !important;
}

/* Panel basligi ("TOPLULUK / Uyeler ve medya") kaldirildi — sekme seridi zaten
   neyin gosterildigini anlatiyor, bu satir yer kapliyordu. */
body.incallx #rightbar-wrapper .woo-rpanel-head {
    display: none !important;
}

/* ============================================================
   SAG PANEL PROFIL KARTI: alta kadar uzasin, sabit kalsin
   .right-panel sabit 718px yukseklikteydi; ekran 859px olunca
   altta 141px olu bosluk kaliyor, kart yarida bitiyordu.
   Panel artik kalan alani doldurur, kart paneli doldurur,
   tasan icerik kart icinde kayar. Her ekran boyutunda ayni.
   ============================================================ */
body.incallx .wrapper>.right-panel{
  height:100%!important;max-height:100%!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;
}
body.incallx .wrapper>.right-panel>.woo-right-profile-card{
  flex:1 1 auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  box-sizing:border-box!important;
}
/* sekme seridi (kisi/gorsel/video/dosya/baglanti) sabit kalsin */
body.incallx .wrapper>.right-panel>.woo-right-tabs,
body.incallx .wrapper>.right-panel>.user-info-panel>.woo-right-tabs{
  flex:0 0 auto!important;
}
/* 2026-08-11: KULLANICI BASLIGI SABIT.
   Yukaridaki kural bu karta "flex:1 1 auto + overflow-y:auto" veriyordu; kart
   panelde sikisip 102px'e duserken kendi 149px'lik icerigini KENDI ICINDE
   kaydiriyordu. Sonuc: avatarin yaninda bir kaydirma cubugu ve yarim gorunen
   bir profil karti. Baslik kaydirilacak bir liste degil -- dogal yuksekliginde
   ve sabit durmasi gerekir. */
body.incallx .wrapper>.right-panel>.woo-right-profile-card{
  flex:0 0 auto!important;
  overflow:visible!important;
  max-height:none!important;
}


/* ============================================================
   SAG PANEL: kaydirma kabini panele yay, alta kadar uzasin
   .tab-pane sadece icerik kadar (146px) yuksekteydi; panel 871px
   olunca altta olu bosluk kaliyordu. SADECE kapsayici zinciri
   duzeltiliyor - kart ve icerigine DOKUNULMUYOR (onceki bozulma
   karta flex verildigi icindi). Kaydirma "height-scroll" kabinda.
   ============================================================ */
body.incallx .wrapper>.right-panel{
  display:flex!important;flex-direction:column!important;min-height:0!important;
}
body.incallx .right-panel>#rpanel-tabContent,
body.incallx .right-panel>.tab-content{
  flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;
}
body.incallx .right-panel .tab-content>#rpanel-user-info.active{
  height:100%!important;min-height:0!important;
}
body.incallx #rpanel-user-info>.height-scroll-rpanelx{
  height:100%!important;min-height:0!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}
body.incallx #rpanel-user-info>.height-scroll-rpanelx::-webkit-scrollbar{width:7px}
body.incallx #rpanel-user-info>.height-scroll-rpanelx::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.28)}
body.incallx #rpanel-user-info>.height-scroll-rpanelx::-webkit-scrollbar-track{background:transparent}

/* 2026-08-11: KAYDIRMA TUM SEKMELERE.
   Yukaridaki kural yalnizca #rpanel-user-info icin yazilmisti. Uye listesi ve
   BOTLAR paneli ise #rpanel-members sekmesinde duruyor; .tab-content'te
   overflow:hidden oldugu icin o sekmenin icerigi KIRPILIYOR ve kaydirilamiyordu
   -- yedi bot kurulunca ilk uc tanesi gorunuyor, gerisi erisilemez oluyordu.
   Kural artik AKTIF olan hangi sekme olursa olsun gecerli (uyeler, gorseller,
   videolar, dosyalar, baglantilar). */
body.incallx .right-panel>.tab-content>.tab-pane.active,
body.incallx .right-panel>#rpanel-tabContent>.tab-pane.active{
  height:100%!important;min-height:0!important;
}
body.incallx .right-panel>.tab-content>.tab-pane>.height-scroll-rpanelx,
body.incallx .right-panel>#rpanel-tabContent>.tab-pane>.height-scroll-rpanelx{
  height:100%!important;min-height:0!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}
body.incallx .right-panel>#rpanel-tabContent>.tab-pane>.height-scroll-rpanelx::-webkit-scrollbar{width:7px}
body.incallx .right-panel>#rpanel-tabContent>.tab-pane>.height-scroll-rpanelx::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.28)}
body.incallx .right-panel>#rpanel-tabContent>.tab-pane>.height-scroll-rpanelx::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   DM SAG PANEL: sadece rich referans kart gorunsun
   renderDmPremiumProfileCard her zaman .dm-premium-profile-card
   (kapak/avatar/Country/Spotify/Mutual/Roller/Rozetler/Mesaj Gonder)
   uretiyor ama eski bootstrap icerigi (ABOUT ME, Dogum/Cinsiyet/Ulke,
   Sunucu profili cipi, footer) yaninda kaliyordu -> karisiklik.
   Premium kart varken eski icerik gizlenir, SADECE rich kart kalir.
   NOT: .user-card'a flex/overflow VERILMIYOR (onceki bozulma oydu),
   yalnizca eski cocuklar display:none.
   ============================================================ */
body.incallx .user-card.has-dm-premium-card{
  border:0!important;background:transparent!important;
  padding:0!important;box-shadow:none!important;overflow:visible!important;
}
body.incallx .user-card.has-dm-premium-card>.card-img-top,
body.incallx .user-card.has-dm-premium-card>.card-body,
body.incallx .user-card.has-dm-premium-card>.card-footer{
  display:none!important;
}
body.incallx .user-card.has-dm-premium-card>.dm-premium-profile-card{
  /* display:block IDI -> kart flex konteyner olamadigi icin .dmpp-body'nin
     flex:1 ve .dmpp-actions'in margin-top:auto kurallari hic calismiyordu.
     Alt bosluk sorununun asil sebebi buydu. */
  display:flex!important;flex-direction:column!important;
  margin:0!important;width:100%!important;height:100%!important;min-height:0!important;
}
body.incallx .user-card.has-dm-premium-card>.dm-premium-profile-card>.dmpp-body{
  flex:1 1 auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
}
body.incallx .user-card.has-dm-premium-card>.dm-premium-profile-card>.dmpp-body>.dmpp-actions{
  margin-top:auto!important;
}

/* ============================================================
   DM KARTI: Mesaj Gonder KALDIRILDI + karisik satirlar cam kutu
   .dm-premium-profile-card yalniz DM sag panelde. Zaten DM'de
   oldugun icin Mesaj Gonder gereksiz -> gizlendi, Secenekler
   butonu tam genislige yayildi. Ayrica Ortak Sunucular / Baglantilar
   (woo-profile-v2-*) Country satiriyla ayni cam gorunume getirildi.
   ============================================================ */
/* Mesaj Gonder gizle, secenekler tam genislik */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-message{display:none!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions{gap:0!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions>button:not(.dmpp-message){
  flex:1 1 auto!important;width:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
/* Ortak Sunucular + Baglantilar -> Country ile ayni cam kutu */
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers,
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections{
  margin:0 0 8px!important;padding:11px 13px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;
  background:rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(15px) saturate(150%);backdrop-filter:blur(15px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.18)!important;
}
/* ic etiket (ORTAK SUNUCULAR / BAGLANTILAR / SIMDI DINLIYOR) */
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers>small,
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections small{
  display:block!important;margin-bottom:7px!important;
  color:#aab6c6!important;font-size:9.5px!important;font-weight:800!important;letter-spacing:.13em!important;
}

/* ============================================================
   DM KARTI KOK DUZELTME: satirlarda hic display:flex yoktu
   (sadece cam zemin eklenmisti, hizalama unutulmustu) -> ikon/
   etiket/deger/ok ic ice giriyordu. Ayrica .dmpp-name paylasilan
   .user-title selektorunden position:absolute;top:6px;left:90px
   miras aliyordu (eski bootstrap kartin duzeni) -> isim avatarin
   YANINDA cikiyordu, ALTINDA degil. Hepsi burada duzeltiliyor.
   ============================================================ */
/* isim: avatarin yanindaki eski mutlak konumdan kurtar */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-name{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  display:block!important;font-size:19px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-user{
  display:block!important;margin:2px 0 10px!important;font-size:11.5px!important;font-weight:650!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-about{
  display:block!important;margin:0 0 11px!important;font-size:12px!important;line-height:1.5!important;
}
/* rozet cipleri: bosluk ver */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-badges{
  display:flex!important;flex-wrap:wrap;gap:7px;margin:0 0 12px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-badges .profile-auto-badge{
  width:26px;height:26px;border-radius:50%;
}
/* --- satirlar: gercek flex hizalama (onceki turda unutulmustu) --- */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row{
  display:flex!important;align-items:center!important;gap:11px!important;
  min-height:46px!important;padding:10px 13px!important;margin-bottom:8px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>i:first-child{
  flex:0 0 18px;color:#9fb0c4;font-size:17px;line-height:1;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>i:last-child{
  flex:0 0 auto;margin-left:auto;color:#6f7d90;font-size:15px;line-height:1;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>div{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>strong{flex:0 0 auto}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>em{
  flex:1 1 auto;margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>div>span{
  display:flex;flex-wrap:wrap;gap:6px;
}
/* rozet ikonlari (Whitoo Rozetleri satiri ici) */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i{font-size:16px;color:#f4c542}
/* secenekler ("...") butonu Mesaj Gonder gizlenince tam genislige yayiliyordu
   ama duz beyaz oval gorunuyordu - karta uygun koyu stil veriyoruz */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-options{
  height:44px!important;border-radius:13px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.07)!important;color:#e6ecf5!important;
  font-size:18px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-options:hover{
  background:rgba(255,255,255,.11)!important;
}

/* ============================================================
   DM KARTI SIKILASTIRMA: panel yuksekligine kaydirmadan sigsin
   Icerik 729px, gorunen alan 517px idi (212px tasma). Kapak,
   avatar, satir yukseklikleri ve bosluklar daraltildi.
   NOT: .active-user-cover ayni zamanda min-height:126px!important
   de tasiyordu (whitoo-profile-studio.css:24) - SADECE height
   degistirmek yetmiyordu, min-height de burada eziliyor.
   ============================================================ */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:58px!important;min-height:58px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap.active-user-identity{
  width:56px!important;height:56px!important;margin:-28px 0 6px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap .user-image{
  width:56px!important;height:56px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-name{font-size:15px!important;margin-bottom:0!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-user{margin:0 0 5px!important;font-size:10px!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-about{margin:0 0 6px!important;font-size:11px!important;line-height:1.4!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-badges{margin:0 0 6px!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-badges .profile-auto-badge{width:20px!important;height:20px!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-stack{gap:5px!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row{
  min-height:28px!important;padding:4px 10px!important;margin-bottom:0!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers,
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections{
  margin:0 0 4px!important;padding:5px 10px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions{margin-top:6px!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-options{height:34px!important}

/* ============================================================
   KULLANICI ISTEGI: cerceve tamamen kalksin, Sunucu Rolleri
   satiri kaldirilsin (DM sunucu degil), "+" ekle butonu kalksin,
   panel biraz genisletilsin.
   Cerceve kaynagi: whitoo-profile-studio.css:22-23 -
   ".right-panel .user-info-panel .user-card" (4 sinif, !important)
   + ayni selektorun ":before" sozde ogesindeki ic parlama/serit.
   Burada 5 sinifli (.has-dm-premium-card eklenmis) daha ozgul
   selektorle eziliyor.
   ============================================================ */
body.incallx .right-panel .user-info-panel .user-card.has-dm-premium-card{
  border:0!important;box-shadow:none!important;background:transparent!important;
}
body.incallx .right-panel .user-info-panel .user-card.has-dm-premium-card:before{
  content:none!important;box-shadow:none!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-add,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-roles{
  display:none!important;
}
/* panel biraz daha genis */
body.incallx .rightbar-wrapper{width:320px!important;min-width:320px!important}

/* Mobile: a closed member drawer must not reserve 320px from the chat. */
@media (max-width: 768px) {
  body.incallx #rightbar-wrapper.rightbar-wrapper {
    display:none!important;
    position:absolute!important;
    right:0!important;
    width:min(320px,calc(100vw - 72px))!important;
    min-width:0!important;
    margin-right:0!important;
    z-index:1300!important;
  }
  body.incallx.sb-rightnav-toggled #wrapper #rightbar-wrapper.rightbar-wrapper {
    display:flex!important;
  }
}

/* ============================================================
   GUVENLIK PAYI: isim/avatar cakismasi hicbir cihaz/yazi tipi
   zamanlamasinda olmasin. Bosluk artirildi + isim her zaman
   avatarin USTUNDE katmanda (z-index) kalacak sekilde kilitlendi.
   ============================================================ */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap{
  margin-bottom:12px!important;position:relative!important;z-index:1!important;
}

/* ============================================================
   KART TAM PANELI DOLDURSUN: fitFrame() artik yuksekligi
   panelin gorunen alanina gore ayarliyor (JS'te yamalandi),
   burada kart flex kolona alinip ".dmpp-actions" margin-top:auto
   ile alta kadar itilebiliyor. Boylece alta bosluk kalmaz.
   ============================================================ */
body.incallx .user-info-panel .dm-premium-profile-card{
  display:flex!important;flex-direction:column!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions{
  margin-top:auto!important;
}
/* avatar cercevesini biraz incelt: pembe halka box-shadow ile
   yapiliyor (0 0 0 3px), 3px->2px; koyu ic cerceve 5px->3px */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap .user-image{
  border-width:3px!important;
  box-shadow:0 0 0 2px var(--woo-a,#ff3158),0 10px 22px rgba(0,0,0,.4)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-name,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-user{
  position:relative!important;z-index:2!important;background:transparent!important;
}

/* ============================================================
   KART TAM PANELI DOLDURSUN (v2 - saf CSS yuzde, JS piksel yok)
   Onceki fitFrame() JS piksel hesaplamasi guvenilmez oldu (satir
   ici !important CSS'i eziyordu, dogrulanamadi). JS artik yukseklik
   ZORLAMIYOR (removeProperty). Bunun yerine .height-scroll-rpanelx
   -> .user-card -> .dm-premium-profile-card zincirinin tamami
   height:100% ile dolduruluyor; .dmpp-actions margin-top:auto ile
   en alta yapisiyor. Arkadas listesinde ayni yontem calisti.
   ============================================================ */
body.incallx .user-info-panel .user-card.has-dm-premium-card{
  height:100%!important;min-height:100%!important;
  display:flex!important;flex-direction:column!important;
}
body.incallx .user-info-panel .user-card.has-dm-premium-card>.dm-premium-profile-card{
  flex:1 1 auto!important;height:100%!important;min-height:0!important;
}

/* ============================================================
   KART TAM PANELI DOLDURSUN (v3 - mutlak konum, yuzdeye guvenme)
   height:100% zinciri sessizce basarisiz oldu (ata zincirinde
   belirsiz yukseklik olabilir, CSS boyle durumlarda sessizce
   auto'ya doner, GORUNURDE HICBIR SEY DEGISMEZ). Artik atalarin
   yuksekligine bagimli degil: kart, en yakin scroll kabina
   MUTLAK olarak (inset:0) sabitleniyor - bu kesin calisir.
   ============================================================ */
body.incallx #rpanel-user-info>.height-scroll-rpanelx{
  position:relative!important;
}
body.incallx .user-info-panel .user-card.has-dm-premium-card{
  position:absolute!important;inset:0!important;
  height:auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}

/* ============================================================
   FINAL: kaydirma YOK, kart alta kadar, icerik alta yaslanir
   Onceki hata: ".dmpp-actions{margin-top:auto}" verdim ama o oge
   ".dmpp-body" icinde; .dmpp-body flex kolon yapilmadigi icin
   margin-top:auto hicbir ise yaramadi -> buton ortada kaldi,
   alti bos gorundu. Zincir: card(flex col) > body(flex col, flex:1)
   > actions(margin-top:auto). Kaydirma kaldirildi (overflow:hidden).
   Kapak ve avatar esnemez (flex:0 0 auto) - logo/kapak bozulmaz.
   ============================================================ */
body.incallx .user-info-panel .user-card.has-dm-premium-card{
  overflow:hidden!important;      /* kaydirma YOK */
}
body.incallx .user-info-panel .dm-premium-profile-card{
  overflow:hidden!important;
}
/* kapak esnemesin, orani bozulmasin */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-cover{
  flex:0 0 auto!important;
}
/* govde kalan alani doldursun ve KENDISI de flex kolon olsun */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-body{
  flex:1 1 auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
}
/* avatar/isim/rozet blogu esnemesin */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-name,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-user,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-about,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-badges,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-stack{
  flex:0 0 auto!important;
}
/* aksiyon seridi en alta yapissin */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions{
  margin-top:auto!important;flex:0 0 auto!important;
}

/* ════════════════════════════════════════════════════════════
   DM PROFIL KARTI — ONAYLANAN TASARIM (final)
   Sag ustte sadece ucnokta, kapak > logo > isim > kullanici adi >
   Woo rozeti, sonra Ulke / Katildi / Son gorulme, Spotify, Rozetler.
   Sunucu rolleri DM tarafinda YOK. Mavi tik YOK. Alt buton YOK.
   Toplam yaklasik 415px -> 517px panele KAYDIRMASIZ sigar.
   ════════════════════════════════════════════════════════════ */

/* arti butonu, rol satiri ve hakkinda DM tarafinda gizli */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-add,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-roles,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-about{display:none!important}

/* kart govdesi */
body.incallx .user-info-panel .dm-premium-profile-card{
  border-radius:20px!important;overflow:hidden!important;
  background:linear-gradient(180deg,#12161e,#0a0d13 64%)!important;
  box-shadow:0 24px 56px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.09)!important;
}

/* kapak: mesh gradyan */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:68px!important;min-height:68px!important;position:relative!important;
  background:
    radial-gradient(120px 76px at 20% 14%,rgba(255,49,88,.6),transparent 68%),
    radial-gradient(130px 82px at 76% 4%,rgba(139,92,246,.55),transparent 70%),
    radial-gradient(120px 76px at 54% 96%,rgba(32,224,196,.32),transparent 68%),
    linear-gradient(125deg,#241534,#132132)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card.has-cover .dmpp-cover{
  background-size:cover!important;background-position:center!important;
}

/* ucnokta: kapagin sag ust kosesine */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-actions{
  position:absolute!important;top:9px!important;right:9px!important;
  margin:0!important;padding:0!important;z-index:6!important;width:auto!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-options{
  width:28px!important;height:28px!important;padding:0!important;
  border-radius:9px!important;font-size:15px!important;
  background:rgba(6,9,14,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)!important;color:#e2e9f4!important;
}

/* govde */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-body{
  padding:0 13px 13px!important;margin-top:-26px!important;
  position:relative!important;z-index:3!important;
}

/* logo: gradyan halka */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap{
  width:58px!important;height:58px!important;margin:0!important;padding:2.5px!important;
  border-radius:20px!important;position:relative!important;
  background:linear-gradient(145deg,#ff3158,#8b5cf6 52%,#20e0c4)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.55)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap .user-image{
  width:100%!important;height:100%!important;border:0!important;border-radius:17.5px!important;
  box-shadow:none!important;object-fit:cover!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .active-user-presence{
  right:-2px!important;bottom:-2px!important;width:15px!important;height:15px!important;
  border:0!important;box-shadow:0 0 0 3.5px #0e1218!important;
}
/* Yesil parlama yalnizca gercekten cevrimiciyken. */
body.incallx .user-info-panel .dm-premium-profile-card .active-user-presence.is-online{
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
}

/* isim + kullanici adi */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-name{
  margin:9px 0 0!important;font-size:18px!important;font-weight:850!important;letter-spacing:-.03em!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-user{
  margin:1px 0 0!important;font-size:11.5px!important;color:#8895a9!important;
}

/* WOO rozeti */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-woo{
  display:inline-flex;align-items:center;gap:6px;
  margin:9px 0 0!important;padding:6px 11px 6px 8px;border-radius:10px;
  background:linear-gradient(120deg,rgba(255,200,81,.2),rgba(255,49,88,.14) 60%,rgba(139,92,246,.14));
  box-shadow:inset 0 0 0 1px rgba(255,200,81,.4);
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-woo-mark{
  display:grid;place-items:center;width:18px;height:18px;border-radius:6px;flex:none;
  background:linear-gradient(140deg,#ffd772,#ff9c3d);color:#3a2000;font-size:11px;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-woo b{
  font-size:11px;font-weight:850;letter-spacing:.03em;color:#ffd08a;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-woo small{
  color:#c9a86a;font-size:8.5px;font-weight:750;letter-spacing:.1em;
}

/* bilgi satirlari */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-stack{
  display:flex!important;flex-direction:column!important;gap:5px!important;margin-top:10px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row{
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:34px!important;padding:6px 11px!important;margin:0!important;
  border-radius:11px!important;border:0!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:none!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row:hover{
  background:rgba(255,255,255,.07)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>i:first-child{
  flex:none!important;width:15px!important;font-size:15px!important;color:#8fa0b6!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-country>i:first-child{color:#5aa9ff!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-joined>i:first-child{color:#31d970!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-seen>i:first-child{color:#ffb15c!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>strong{
  flex:none!important;color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>em{
  flex:1 1 auto!important;margin-left:auto!important;text-align:right!important;
  color:#f0f4fa!important;font-size:12px!important;font-weight:700!important;font-style:normal!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-row>i:last-child{
  flex:none!important;margin-left:0!important;color:#5d6a7d!important;font-size:13px!important;
}

/* Spotify */
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections{
  margin:5px 0 0!important;padding:8px!important;border-radius:13px!important;
  background:linear-gradient(118deg,rgba(30,215,96,.14),rgba(255,255,255,.018) 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.25)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections>small{
  color:#31d970!important;font-size:8px!important;font-weight:900!important;letter-spacing:.13em!important;
}

/* ortak sunucular */
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers{
  margin:5px 0 0!important;padding:8px 11px!important;border-radius:12px!important;
  background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers>small{
  color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;letter-spacing:.12em!important;
}

/* Whitoo Rozetleri: dortlu kutucuk izgara */
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards{
  flex-direction:column!important;align-items:stretch!important;gap:7px!important;
  padding:9px 11px!important;min-height:0!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>i:first-child,
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>i:last-child{display:none!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div{
  display:flex!important;flex-direction:column!important;gap:7px!important;width:100%!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards strong{
  color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;letter-spacing:.12em!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i{
  display:grid!important;place-items:center!important;height:38px!important;margin:0!important;
  border-radius:11px!important;font-size:18px!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
  transition:transform .16s;
}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i:hover{transform:translateY(-2px)}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i:nth-child(1){color:#ffc851!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i:nth-child(2){color:#c084fc!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i:nth-child(3){color:#5aa9ff!important}
body.incallx .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i:nth-child(4){color:#ff6b8a!important}

/* KAYDIRMA YOK: panel kabi tasmayi kessin */
body.incallx #rpanel-user-info>.height-scroll-rpanelx{overflow:hidden!important}

/* ════════════════════════════════════════════════════════════
   DM KARTI — LOGO/KAPAK DUZELTMESI
   .active-user-identity .user-image kurali 82px + border:5px +
   border-radius:50% dayatiyordu ve benim kuralimla ESIT ozgullukte
   oldugu icin cakisiyordu -> logo eziliyor, isim avatara yapisiyordu.
   .right-panel eklenerek ozgulluk bir kademe yukseltildi.
   ════════════════════════════════════════════════════════════ */

/* logo kutusu: gradyan halka, isimle arasinda net bosluk */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-identity{
  width:58px!important;height:58px!important;
  margin:0 0 10px!important;padding:2.5px!important;
  border-radius:19px!important;position:relative!important;overflow:visible!important;
  background:linear-gradient(145deg,#ff3158,#8b5cf6 52%,#20e0c4)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.55)!important;
}
/* logo gorseli: kutuyu tam doldursun, kendi cercevesi olmasin */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap .user-image,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-identity .user-image{
  position:static!important;
  width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;max-width:none!important;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:16.5px!important;
  object-fit:cover!important;display:block!important;
  box-shadow:none!important;
}
/* cevrimici noktasi */
/* Bu kural ONCEDEN kosulsuz YESIL yapiyordu (.is-online sinifina hic
   bakmadan) ve dort sinifli secici oldugu icin diger tum kurallari eziyordu;
   cevrimdisi kullanicilar dahil HERKES aktif gorunuyordu. */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-presence{
  position:absolute!important;right:-3px!important;bottom:-3px!important;
  width:15px!important;height:15px!important;border:0!important;border-radius:50%!important;
  background:#64748b!important;
  box-shadow:0 0 0 3.5px #0e1218!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-presence.is-online{
  background:#25d366!important;
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
}

/* isim: logonun altinda, cakisma yok */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-name{
  position:static!important;top:auto!important;left:auto!important;
  display:block!important;margin:0!important;
  font-size:18px!important;font-weight:850!important;letter-spacing:-.03em!important;
  line-height:1.2!important;color:#fff!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-user{
  display:block!important;margin:2px 0 0!important;
  font-size:11.5px!important;color:#8895a9!important;
}

/* kapak: net dursun, bulanik/gerilmis gorunmesin */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:68px!important;min-height:68px!important;
  background-size:cover!important;background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}

/* ne kadar bilgi olursa olsun asagi kaymasin */
body.incallx #rpanel-user-info>.height-scroll-rpanelx{overflow:hidden!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{
  gap:5px!important;margin-top:9px!important;
}

/* ════════════════════════════════════════════════════════════
   SIGDIRMA PAYI — en kalabalik senaryo icin
   Ulke + Katildi + Son gorulme + Spotify + Ortak Sunucular +
   Rozetler hepsi birden geldiginde ~522px oluyordu, panel 517px.
   Olculer kucultuldu -> ~500px, her durumda sigar.
   ════════════════════════════════════════════════════════════ */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:62px!important;min-height:62px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-body{
  margin-top:-24px!important;padding:0 12px 11px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{
  margin-top:8px!important;padding:5px 10px 5px 7px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{
  gap:4px!important;margin-top:8px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row{
  min-height:32px!important;padding:5px 10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers{
  margin-top:4px!important;padding:7px 10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards{
  padding:8px 10px!important;gap:6px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i{
  height:34px!important;font-size:16px!important;border-radius:10px!important;
}

/* ════════════════════════════════════════════════════════════
   DM KARTI v3 — kapak normal yukseklikte, ucnokta sag ust dikey,
   Woo rozeti sade, sira: Ulke > Katildi > Son gorulme >
   Baglantilar > Ortak Sunucular > Whitoo Rozetleri
   ════════════════════════════════════════════════════════════ */

/* kapak: normal seviye */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:92px!important;min-height:92px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-body{
  margin-top:-26px!important;padding:0 12px 12px!important;
}

/* ucnokta: sag ust kose, dikey, cam buton */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-actions{
  position:absolute!important;top:10px!important;right:10px!important;
  left:auto!important;bottom:auto!important;
  margin:0!important;padding:0!important;z-index:8!important;
  width:auto!important;display:block!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-options{
  width:30px!important;height:30px!important;min-height:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;
  background:rgba(6,9,14,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;
  color:#e6ecf5!important;font-size:17px!important;line-height:1!important;
  transition:background .16s,transform .16s;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-options:hover{
  background:rgba(6,9,14,.8)!important;transform:translateY(-1px);
}

/* Woo rozeti: kompakt, sadece WOO */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{
  margin:9px 0 0!important;padding:6px 12px 6px 8px!important;gap:7px!important;
  border-radius:10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo b{
  font-size:12px!important;letter-spacing:.06em!important;
}

/* SIRA: Ulke -> Katildi -> Son gorulme -> Baglantilar -> Ortak -> Rozetler */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{order:0!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-country{order:1!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-joined{order:2!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-seen{order:3!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections{order:4!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers{order:5!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards{order:6!important}

/* bilgi satirlari: biraz nefes */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row{
  min-height:34px!important;padding:6px 11px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{
  gap:5px!important;margin-top:9px!important;
}

/* ════════════════════════════════════════════════════════════
   DM KARTI v4 — GENISLIK + SIGDIRMA
   Sorun 1: fitFrame() JS ile piksel genislik dayatiyordu ->
            kart panelden genis kaliyor, ucnokta disari tasiyordu.
            JS artik dokunmuyor, genislik %100 CSS ile.
   Sorun 2: icerik alta tasip kesiliyordu. Kart panele oturur,
            icerik ne kadar olursa olsun kart icinde kalir.
   ════════════════════════════════════════════════════════════ */

/* --- GENISLIK: paneli asla asma --- */
body.incallx .right-panel .user-info-panel .user-card.has-dm-premium-card,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;transform:none!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card *{
  min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
}

/* --- ucnokta: kartin sag ust KOSESI --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-actions{
  position:absolute!important;top:10px!important;right:10px!important;
  left:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:0!important;z-index:9!important;
}

/* --- SIGDIRMA: kapak biraz kisalt, bosluklari sik --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-cover{
  height:78px!important;min-height:78px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-body{
  margin-top:-24px!important;padding:0 11px 10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-identity{
  width:54px!important;height:54px!important;margin:0 0 8px!important;border-radius:18px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-avatar-wrap .user-image,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .active-user-identity .user-image{
  border-radius:15.5px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-name{font-size:17px!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-user{font-size:11px!important}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{
  margin-top:8px!important;padding:5px 11px 5px 7px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{
  gap:4px!important;margin-top:8px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row{
  min-height:31px!important;padding:5px 10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers{
  margin-top:4px!important;padding:7px 10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards{
  padding:8px 10px!important;gap:6px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i{
  height:32px!important;font-size:15px!important;border-radius:9px!important;
}
/* Spotify satirini biraz kisalt */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-now-playing{
  margin-top:6px!important;padding:6px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-now-playing img,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-now-playing>i{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
}

/* --- kart panele otursun, disari tasmasin --- */
body.incallx #rpanel-user-info>.height-scroll-rpanelx{
  overflow:hidden!important;padding:8px!important;
}

/* ════════════════════════════════════════════════════════════
   DM KARTI v5
   - Ucnokta artik .dmpp-body ICINDE DEGIL, kartin dogrudan
     cocugu. Bu yuzden sag ust kose hesabi KARTA gore yapiliyor
     (onceden body'ye gore hesaplaniyordu, kapagin altina dusuyordu).
   - Woo rozeti: sadece modern ikon, yazi yok.
   ════════════════════════════════════════════════════════════ */

/* ucnokta: kartin sag ust kosesi */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions{
  position:absolute!important;top:10px!important;right:10px!important;
  left:auto!important;bottom:auto!important;
  width:auto!important;max-width:none!important;height:auto!important;
  margin:0!important;padding:0!important;z-index:10!important;
  display:block!important;background:none!important;box-shadow:none!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dmpp-options{
  width:30px!important;height:30px!important;min-height:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;
  background:rgba(6,9,14,.58)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)!important;
  color:#eaf0f8!important;font-size:17px!important;line-height:1!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dmpp-options:hover{
  background:rgba(6,9,14,.85)!important;
}
/* DM'de mesaj butonu yok */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dmpp-message{
  display:none!important;
}

/* --- WOO rozeti: sadece ikon --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{
  display:inline-grid;place-items:center!important;
  width:34px!important;height:34px!important;
  margin:9px 0 0!important;padding:0!important;gap:0!important;
  border-radius:11px!important;
  background:linear-gradient(140deg,rgba(255,200,81,.22),rgba(255,49,88,.16) 62%,rgba(139,92,246,.16))!important;
  box-shadow:inset 0 0 0 1px rgba(255,200,81,.45),0 6px 16px rgba(255,160,60,.16)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo-mark{
  width:22px!important;height:22px!important;border-radius:8px!important;
  background:linear-gradient(140deg,#ffd772,#ff9c3d)!important;color:#3a2000!important;
  font-size:13px!important;box-shadow:0 2px 8px rgba(255,156,61,.45)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo b,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo small{
  display:none!important;
}

/* ════════════════════════════════════════════════════════════
   DM KARTI v6
   1) Ucnokta ismin hizasina alindi (kose yerine)
   2) Woo ikonu kullanici adinin hemen altina yapistirildi
   3) Acilir menu kesiliyordu: kartta overflow:hidden vardi ->
      kart overflow:visible, kirpma sadece kapakta
   ════════════════════════════════════════════════════════════ */

/* --- 3) menu kesilmesin: kirpmayi kapaga tasi --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card{
  overflow:visible!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-cover{
  overflow:hidden!important;
  border-radius:20px 20px 0 0!important;
}

/* --- 1) ucnokta: ismin hizasinda, sagda --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions{
  position:absolute!important;
  top:112px!important;      /* kapak 78 - margin 24 + avatar 54 + 8 = isim satiri */
  right:11px!important;left:auto!important;bottom:auto!important;
  width:auto!important;max-width:none!important;height:auto!important;
  margin:0!important;padding:0!important;z-index:20!important;
  display:block!important;background:none!important;box-shadow:none!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dmpp-options{
  width:30px!important;height:30px!important;min-height:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
  color:#c9d4e3!important;font-size:17px!important;line-height:1!important;
  transition:background .16s,color .16s;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dmpp-options:hover{
  background:rgba(255,255,255,.1)!important;color:#fff!important;
}
/* isim, ucnokta ile cakismasin */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-name,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-user{
  padding-right:38px!important;
}

/* acilir menu: kartin ustunde, duzgun */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dropdown-menu{
  z-index:60!important;min-width:150px!important;
  border:0!important;border-radius:12px!important;
  background:#141922!important;
  box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.09)!important;
  padding:5px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dropdown-item{
  display:flex!important;align-items:center!important;gap:8px!important;
  border-radius:8px!important;padding:8px 10px!important;
  color:#dbe3ef!important;font-size:12.5px!important;font-weight:650!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card>.dmpp-actions .dropdown-item:hover{
  background:rgba(255,255,255,.07)!important;color:#fff!important;
}

/* --- 2) Woo ikonu: kullanici adinin hemen altinda --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{
  margin-top:7px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo{
  margin:0 0 3px!important;
  width:32px!important;height:32px!important;border-radius:10px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-woo-mark{
  width:21px!important;height:21px!important;font-size:12.5px!important;
}

/* --- "Profilin tamamını görüntüle" bagi kaldirildi ---
   Tiklama calismiyordu (ustteki katmanlar olayi yakaliyordu),
   kullanici kaldirilmasini istedi. Markup korunuyor, sadece gizli. */
body.incallx .user-info-panel .active-user-full-profile,
body.incallx .user-info-panel .dm-premium-profile-card .whitoo-view-profile,
body.incallx .user-info-panel .dropdown-menu .whitoo-view-profile{
  display:none!important;
}

/* ════════════════════════════════════════════════════════════
   TAM GIF MODU DUZELTMESI (DM karti)
   Kartin zemini saydamlastirilinca satirlar da okunmaz hale geldi
   ve kart dogal boyuna uzayip paneli asti. Satirlar tekrar opak
   cam, kart panele sabitlendi.
   ════════════════════════════════════════════════════════════ */

/* kart panele otursun, uzamasin */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"]{
  height:auto!important;max-height:100%!important;
}
/* satirlar GIF uzerinde net okunsun */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .woo-profile-v2-mutual-servers,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .woo-profile-v2-connections,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-awards{
  background:rgba(10,13,20,.72)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%)!important;
  backdrop-filter:blur(16px) saturate(150%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .woo-profile-v2-connections{
  background:linear-gradient(118deg,rgba(18,86,48,.78),rgba(10,13,20,.74) 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.3)!important;
}
/* etiket ve degerler net */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row strong,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .woo-profile-v2-mutual-servers>small,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .woo-profile-v2-connections>small{
  color:#c3cedd!important;text-shadow:0 1px 3px rgba(0,0,0,.8)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row>em{
  color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.85)!important;
}

/* ════════════════════════════════════════════════════════════
   KART: dogal yukseklik + rahat tipografi
   Karti panele zorla yaydiran (height:100%/flex:1) kurallar
   altta kocaman bos GIF alani birakiyordu; icerik de ona gore
   kucuk duruyordu. Kart artik icerigi kadar, panele sigmazsa
   kirpilmadan kucuk kalir.
   ════════════════════════════════════════════════════════════ */
body.incallx .right-panel .user-info-panel .user-card.has-dm-premium-card{
  position:relative!important;inset:auto!important;
  height:auto!important;min-height:0!important;max-height:100%!important;
  display:block!important;
}
body.incallx .right-panel .user-info-panel .user-card.has-dm-premium-card>.dm-premium-profile-card{
  flex:none!important;height:auto!important;max-height:100%!important;
}

/* --- rahat tipografi (sikistirilmis olculer geri alindi) --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-name{
  font-size:19px!important;line-height:1.2!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-user{
  font-size:12px!important;margin-top:3px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row{
  min-height:36px!important;padding:7px 12px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row>strong{
  font-size:9.5px!important;letter-spacing:.11em!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row>em{
  font-size:12.5px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-row>i:first-child{
  font-size:16px!important;width:16px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-mutual-servers>small,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .woo-profile-v2-connections>small,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards strong{
  font-size:9.5px!important;letter-spacing:.11em!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-awards>div>span i{
  height:36px!important;font-size:17px!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card .dmpp-stack{gap:5px!important}

/* ===== whitoo-leftpanel.css ===== */
/* ==========================================================================
   Whitoo — Sol panel (sunucu basligi + durum satirlari)
   1) Sunucu adi kutu gibi duruyordu: cerceve .room-title uzerindeydi -> kaldirildi.
   2) Durum satirlari (aktif / cevrimdisi / sesli) kutu kutu buyuktu ->
      kucuk ikonlu, kompakt tek satira alindi.
   ========================================================================== */

/* ---------- Sunucu adi: kutu yok ---------- */
body.incallx .sidebar-room .room-name,
body.incallx .sidebar-room .room-name .dropdown-toggle {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx .sidebar-room .room-title,
body.incallx .topbar-channels .room-title {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
}

/* ---------- Durum satirlari: kompakt ---------- */
body.incallx .woo-room-hero-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    margin: 6px 12px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx .woo-room-hero-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(148, 163, 184, .8) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

body.incallx .woo-room-hero-meta span i { font-size: 11px !important; }
body.incallx .woo-room-presence-active i { color: #2ed573 !important; }
body.incallx .woo-room-presence-offline i { color: rgba(148, 163, 184, .6) !important; }
body.incallx .woo-room-presence-voice i { color: #5df0dd !important; }

/* ========================================================================== 
   SES BAGLI ALT PANELI - kompakt iki katman (2026080102)
   Ustte baglanti/kanal seridi, altta yalniz avatar ve ses kontrolleri.
   ========================================================================== */
body.incallx.in-voice #sidebar-wrapper,
body.incallx.voice-active #sidebar-wrapper,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]),
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]){
    padding-bottom: 0 !important;
}

body.incallx.in-voice #voice-channel-container,
body.incallx.voice-active #voice-channel-container,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) > #voice-channel-container,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) > #voice-channel-container{
    position: absolute !important;
    inset: auto 0 58px 0 !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(34, 197, 94, .28) !important;
    border-bottom: 1px solid rgba(34, 197, 94, .20) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(7, 104, 61, .84), rgba(5, 35, 29, .96) 66%, rgba(7, 13, 20, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 -8px 24px rgba(0,0,0,.18) !important;
}
body.incallx.in-voice #sidebar-wrapper > .sidebar-room,
body.incallx.voice-active #sidebar-wrapper > .sidebar-room{
    z-index: 0 !important;
    isolation: auto !important;
}
body.incallx.in-voice #sidebar-wrapper,
body.incallx.voice-active #sidebar-wrapper{isolation:isolate!important}

body.incallx #voice-channel-container .voice-channel-info{
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-rows: 14px 16px !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 0 7px !important;
}
body.incallx #voice-channel-container .voice-container-title{
    display: contents !important;
}
body.incallx #voice-channel-container .voice-live-dot{display:none !important}
body.incallx #voice-channel-container .voice-container-title > i{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    color: #4ade80 !important;
    font-size: 20px !important;
}
body.incallx #voice-channel-container .wcx-voice-signal{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:2px!important;
    width:22px!important;
    height:22px!important;
}
body.incallx #voice-channel-container .wcx-voice-signal i{
    display:block!important;
    width:3px!important;
    border-radius:2px 2px 0 0!important;
    background:#45e47c!important;
    box-shadow:0 0 7px rgba(69,228,124,.22)!important;
}
body.incallx #voice-channel-container .wcx-voice-signal i:nth-child(1){height:7px!important}
body.incallx #voice-channel-container .wcx-voice-signal i:nth-child(2){height:13px!important}
body.incallx #voice-channel-container .wcx-voice-signal i:nth-child(3){height:18px!important}
body.incallx #voice-channel-container .wcx-voice-signal i:nth-child(4){height:11px!important}
body.incallx.in-voice #voice-channel-container .voice-toggle-mic,
body.incallx.voice-active #voice-channel-container .voice-toggle-mic{display:none!important}
body.incallx #voice-channel-container .voice-container-title > span:last-child{
    grid-column: 2 !important;
    grid-row: 1 !important;
    overflow: hidden !important;
    color: #63f28f !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
body.incallx #voice-channel-container .voice-name{
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #f2fff7 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body.incallx #voice-channel-container .voice-channel-controls{
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
}
body.incallx #voice-channel-container .voice-channel-controls .btn{
    display: grid !important;
    place-items: center !important;
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.055) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}
body.incallx #voice-channel-container .voice-channel-controls .voice-screen-share{
    border-color: rgba(34,197,94,.42) !important;
    background: rgba(34,197,94,.12) !important;
    color: #5df28d !important;
}
body.incallx #voice-channel-container .voice-channel-controls .voice-leave{
    color: #ff7b8b !important;
}

body.incallx.in-voice .channel-list-bottom.lt-account-dock,
body.incallx.voice-active .channel-list-bottom.lt-account-dock,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) > .channel-list-bottom.lt-account-dock,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) > .channel-list-bottom.lt-account-dock{
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 75 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    /* 2026-08-27: ses paneli bu kutunun ICINDE degil, USTUNDE ayri bir eleman
       olarak duruyor (chat_room.html icindeki wooBottomStack betigi oyle
       konumluyor). 106px o eski tasarimdan kalmaydi ve altta ~48px kapkara
       bosluk biraliyordu. Artik ses acikken de kapali haldeki yukseklik. */
    min-height: 62px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    background: rgba(9, 14, 23, .98) !important;
    box-shadow: 0 -12px 24px rgba(0,0,0,.18) !important;
}
body.incallx.in-voice .channel-list-bottom.lt-account-dock > #voice-channel-container,
body.incallx.voice-active .channel-list-bottom.lt-account-dock > #voice-channel-container{
    position: static !important;
    inset: auto !important;
    order: -1 !important;
    flex: 0 0 calc(100% + 20px) !important;
    width: calc(100% + 20px) !important;
    margin: -7px -10px 7px !important;
    transform: none !important;
}
body.incallx.in-voice .channel-list-bottom .username-bottom,
body.incallx.voice-active .channel-list-bottom .username-bottom,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom .username-bottom,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom .username-bottom{
    display: none !important;
}
body.incallx.in-voice .channel-list-bottom .user-bottom-trigger,
body.incallx.voice-active .channel-list-bottom .user-bottom-trigger,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom .user-bottom-trigger,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom .user-bottom-trigger{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 13px !important;
}
body.incallx.in-voice .channel-list-bottom .user-bottom-avatar img,
body.incallx.voice-active .channel-list-bottom .user-bottom-avatar img,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom .user-bottom-avatar img,
body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom .user-bottom-avatar img{
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #f23862 !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,.18) !important;
}

/* Referansta mikrofon yalniz alt kontrol satirinda bulunur. */
html body.incallx.in-voice .channel-list-bottom #voice-channel-container .voice-channel-controls .voice-toggle-mic,
html body.incallx.voice-active .channel-list-bottom #voice-channel-container .voice-channel-controls .voice-toggle-mic{
    display:none!important;
}

/* Hesap cubugu ses yokken de panelin alt kenarindan ayrilmaz. */
html body.incallx #sidebar-wrapper{
    position:relative!important;
}
html body.incallx #sidebar-wrapper > .channel-list-bottom.lt-account-dock{
    position:absolute!important;
    inset:auto 0 0 0!important;
    width:100%!important;
    margin:0!important;
    z-index:75!important;
}

/* Hoparlor cikis secici */
body.incallx .lt-account-dock-actions{position:relative!important}
body.incallx .wcx-output-menu{
    position:absolute!important;
    right:0!important;
    bottom:calc(100% + 12px)!important;
    z-index:2147483600!important;
    width:220px!important;
    max-height:238px!important;
    padding:8px!important;
    overflow:hidden!important;
    border:1px solid rgba(148,163,184,.18)!important;
    border-radius:14px!important;
    background:rgba(8,13,22,.98)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(18px)!important;
}
body.incallx .wcx-output-menu[hidden]{display:none!important}
body.incallx .wcx-output-head{
    padding:5px 7px 8px!important;color:#f5f7fb!important;font-size:10px!important;
    font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important;
}
body.incallx .wcx-output-list{display:grid!important;gap:4px!important;max-height:190px!important;overflow-y:auto!important;overflow-x:hidden!important}
body.incallx .wcx-output-option{
    display:grid!important;grid-template-columns:25px minmax(0,1fr) 16px!important;align-items:center!important;
    gap:7px!important;width:100%!important;min-height:38px!important;padding:5px 8px!important;
    border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;
    color:#cbd5e1!important;text-align:left!important;font-size:10.5px!important;font-weight:750!important;
}
body.incallx .wcx-output-option:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
body.incallx .wcx-output-option>i{color:#7dd3fc!important;font-size:15px!important}
body.incallx .wcx-output-option>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.incallx .wcx-output-option>b{visibility:hidden!important;color:#4ade80!important;font-size:14px!important}
body.incallx .wcx-output-option.is-active{border-color:rgba(34,197,94,.28)!important;background:rgba(34,197,94,.09)!important;color:#fff!important}
body.incallx .wcx-output-option.is-active>b{visibility:visible!important}
body.incallx .wcx-output-note{padding:10px!important;color:#94a3b8!important;font-size:10px!important;line-height:1.45!important}
body.incallx .wcx-dock-output.is-active{background:rgba(45,212,191,.12)!important;color:#5eead4!important}

/* ==========================================================================
   ALT KULLANICI BARI (referans): avatar + isim / @kullanici, sagda mikrofon,
   kulaklik ve ayar (profil) ikonlari.
   ========================================================================== */
body.incallx .channel-list-bottom.lt-account-dock {
    gap: 4px !important;
    padding: 8px 10px !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    background: rgba(0, 0, 0, .28) !important;
}

body.incallx .channel-list-bottom .user-bottom-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background .14s ease !important;
}

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

body.incallx .channel-list-bottom .user-bottom-avatar img,
body.incallx .channel-list-bottom .user-bottom-trigger img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

body.incallx .channel-list-bottom .current-status {
    position: absolute !important;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0c0b10;
}

body.incallx .channel-list-bottom .current-status i { font-size: 8px !important; }
body.incallx .channel-list-bottom .current-status.online i { color: #2ed573 !important; }

body.incallx .channel-list-bottom .username-bottom {
    display: block !important;
    margin: 0 !important;
    overflow: hidden;
    color: #f1f4f9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sag ikonlar */
body.incallx .lt-account-dock-actions {
    gap: 2px !important;
}

body.incallx .wcx-dock-btn {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(203, 213, 225, .8) !important;
    font-size: 17px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .14s ease, color .14s ease !important;
}

body.incallx .wcx-dock-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

/* Kapali durum: uzeri cizili kirmizi */
body.incallx .wcx-dock-btn.is-off {
    color: #ff5a6a !important;
    background: rgba(255, 90, 106, .10) !important;
}

/* Destek launcher'i gizli: menuden aciliyor */
body.incallx .lt-account-dock-actions .woo-support-launcher {
    display: none !important;
}

/* ---------- Hesap menusu: sadece durum, dil, destek, cikis ---------- */
body.incallx .channel-list-bottom .dropdown-menu .lt-info-tabs,
body.incallx .channel-list-bottom .dropdown-menu .lt-contact-fixed,
body.incallx .channel-list-bottom .dropdown-menu .lt-bots-fixed {
    display: none !important;
}

body.incallx .wcx-lang-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 14px !important;
}

body.incallx .wcx-menu-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(203, 213, 225, .85);
    font-size: 13px;
    font-weight: 600;
}

body.incallx .wcx-lang-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.incallx .wcx-lang {
    display: grid;
    place-items: center;
    width: 26px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 6px;
    opacity: .55;
    transition: opacity .14s ease, border-color .14s ease;
}

body.incallx .wcx-lang:hover { opacity: 1; }

body.incallx .wcx-lang.is-active {
    border-color: rgba(255, 45, 75, .5);
    opacity: 1;
}

body.incallx .wcx-support-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
}

/* Menude sadece istenen 4 oge kalsin: durum, dil, canli destek, cikis.
   "Botlar / Iletisim" satiri gizlendi. (Yonetici Paneli ogesi duruyor.) */
body.incallx .channel-list-bottom .dropdown-menu .lt-action-row {
    display: none !important;
}

/* Durum satiri basligi belli olsun */
body.incallx .channel-list-bottom .dropdown-menu .lt-status-row {
    padding: 8px 14px !important;
}

/* Isim alanindaki kutu kaldirildi (arka plan + cerceve .user-bottom-trigger'daydi) */
body.incallx .channel-list-bottom .user-bottom-trigger {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

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

/* ==========================================================================
   HESAP MENUSU — modern cam panel
   ========================================================================== */
body.incallx .channel-list-bottom .dropdown-menu {
    min-width: 262px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 18px !important;
    background: rgba(18, 17, 24, .96) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Baslik: avatar + kullanici adi (alt yazi kaldirildi) */
body.incallx .channel-list-bottom .lt-account-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .04) !important;
    text-decoration: none !important;
    transition: background .16s ease !important;
}

body.incallx .channel-list-bottom .lt-account-head:hover {
    background: rgba(255, 255, 255, .08) !important;
}

body.incallx .channel-list-bottom .lt-account-head-name {
    color: #f2f5fa !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

body.incallx .channel-list-bottom .lt-account-head-arrow {
    margin-left: auto !important;
    color: rgba(148, 163, 184, .6) !important;
}

/* Durum secici: esit kapsuller, aktif olanda halka */
body.incallx .channel-list-bottom .lt-status-row {
    margin: 8px 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .03) !important;
}

body.incallx .channel-list-bottom .lt-status-row .change-status {
    display: grid !important;
    place-items: center !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    transition: background .16s ease, transform .16s ease !important;
}

body.incallx .channel-list-bottom .lt-status-row .change-status:hover {
    background: rgba(255, 255, 255, .08) !important;
    transform: translateY(-1px);
}

body.incallx .channel-list-bottom .lt-status-row .change-status.is-active,
body.incallx .channel-list-bottom .lt-status-row .change-status.active {
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

/* Menu ogeleri */
body.incallx .channel-list-bottom .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 2px 0 !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    color: #dfe5ef !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: background .16s ease, color .16s ease !important;
}

body.incallx .channel-list-bottom .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

body.incallx .channel-list-bottom .dropdown-menu .dropdown-item i {
    margin: 0 !important;
    font-size: 17px !important;
    opacity: .85;
}

/* Ayirici cizgiler sadelesti */
body.incallx .channel-list-bottom .dropdown-menu .dropdown-divider {
    margin: 6px 4px !important;
    border-color: rgba(255, 255, 255, .07) !important;
    opacity: 1 !important;
}

/* Cikis: kirmizi vurgulu tam genislik */
body.incallx .channel-list-bottom .dropdown-menu .lt-account-logout {
    justify-content: center !important;
    margin-top: 4px !important;
    border: 1px solid rgba(255, 45, 75, .28) !important;
    background: rgba(255, 45, 75, .10) !important;
    color: #ff8a97 !important;
    font-weight: 800 !important;
}

body.incallx .channel-list-bottom .dropdown-menu .lt-account-logout:hover {
    background: rgba(255, 45, 75, .18) !important;
    color: #fff !important;
}

/* Durum secici: sadece renkli nokta gorunur (yazi title olarak kaliyor).
   Modernlestirirken dropdown-item kurallari yazilari acmisti, tasiyordu. */
body.incallx .channel-list-bottom .lt-status-row .change-status {
    gap: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

body.incallx .channel-list-bottom .lt-status-row .change-status i {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

body.incallx .channel-list-bottom .lt-status-row .change-status i.online { color: #2ed573 !important; }
body.incallx .channel-list-bottom .lt-status-row .change-status i.offline { color: #94a3b8 !important; }
body.incallx .channel-list-bottom .lt-status-row .change-status i.busy { color: #ff4d5e !important; }
body.incallx .channel-list-bottom .lt-status-row .change-status i.away { color: #ffb020 !important; }

/* ==========================================================================
   SUNUCU DURUM SATIRI — kompakt: sadece ikon + sayi (yazi yok)
   Sayilar data-count niteliginden basilir (JS her guncellemede yeniler).
   ========================================================================== */
body.incallx .woo-room-hero-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 6px 12px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx .woo-room-hero-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
}

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

body.incallx .woo-room-hero-meta span::after {
    content: attr(data-count);
    color: rgba(203, 213, 225, .85);
    font-size: 12px;
    font-weight: 700;
}

body.incallx .woo-room-presence-active i { color: #2ed573 !important; }
body.incallx .woo-room-presence-offline i { color: rgba(148, 163, 184, .65) !important; }
body.incallx .woo-room-presence-voice i { color: #5df0dd !important; }


/* === 2026-08-27 alt cubuk duzeni ===
   1) Kullanici adi sesteyken de gorunur (eskiden gizleniyordu).
   2) Ust yesil panelde SADECE "hangi kanaldayiz" bilgisi + ekran paylasma kalir;
      mikrofon ve ayrilma dugmeleri alt cubuga tasindi.
   3) Alt cubuga ayrilma (telefon) dugmesi eklendi, yalniz sesteyken gorunur. */

/* 1 - isim geri geldi */
html body.incallx.in-voice .channel-list-bottom .username-bottom,
html body.incallx.voice-active .channel-list-bottom .username-bottom,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom .username-bottom,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom .username-bottom{
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 84px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}
html body.incallx .channel-list-bottom .user-bottom-menu{ min-width: 0 !important; flex: 0 1 auto !important; }
html body.incallx .channel-list-bottom .lt-account-dock-actions{ flex: 0 0 auto !important; gap: 1px !important; }
/* sesteyken avatar 42px'e sisiyordu, isme yer kalmiyordu */
html body.incallx.in-voice .channel-list-bottom .user-bottom-trigger,
html body.incallx.voice-active .channel-list-bottom .user-bottom-trigger{
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 3px 4px 3px 3px !important;
}

/* 2 - ust panel sadelesti: mikrofon ve ayrilma orada durmuyor */
html body.incallx #voice-channel-container .voice-channel-controls .voice-toggle-mic,
html body.incallx #voice-channel-container .voice-channel-controls .voice-leave{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
}

/* 3 - alt cubuktaki ayrilma dugmesi */
html body.incallx .channel-list-bottom [data-wcx-leave]{ display: none !important; }
html body.incallx.in-voice .channel-list-bottom [data-wcx-leave],
html body.incallx.voice-active .channel-list-bottom [data-wcx-leave]{
    display: grid !important;
    place-items: center !important;
    border-color: rgba(242,56,98,.42) !important;
    background: rgba(242,56,98,.12) !important;
    color: #ff8fa1 !important;
}
html body.incallx.in-voice .channel-list-bottom [data-wcx-leave]:hover,
html body.incallx.voice-active .channel-list-bottom [data-wcx-leave]:hover{
    border-color: rgba(242,56,98,.7) !important;
    background: rgba(242,56,98,.22) !important;
    color: #fff !important;
}
/* bes dugme + isim 260px'e sigsin */
html body.incallx.in-voice .channel-list-bottom .wcx-dock-btn,
html body.incallx.voice-active .channel-list-bottom .wcx-dock-btn{
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
}
html body.incallx .channel-list-bottom .wcx-dock-btn.is-off{
    border-color: rgba(242,56,98,.42) !important;
    background: rgba(242,56,98,.12) !important;
    color: #ff8fa1 !important;
}

html body.incallx .wcx-output-bos{
    padding: 10px 8px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

/* === 2026-08-27 (2) isme yer ac === */
html body.incallx.in-voice .channel-list-bottom.lt-account-dock ,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock ,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock ,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .user-bottom-menu,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .user-bottom-menu,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .user-bottom-menu,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .user-bottom-menu{
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .user-bottom-trigger,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .user-bottom-trigger,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .user-bottom-trigger,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .user-bottom-trigger{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    padding: 3px 4px 3px 3px !important;
    gap: 0 !important;
    overflow: hidden !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .username-bottom,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .username-bottom,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .username-bottom,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .username-bottom{
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 92px !important;
    margin-left: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .username-bottom .woo-name-effect,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .username-bottom .woo-name-effect,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .username-bottom .woo-name-effect,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .username-bottom .woo-name-effect{
    display: inline !important;
    max-width: none !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .wcx-dock-btn,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .wcx-dock-btn,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .wcx-dock-btn,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .wcx-dock-btn{
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}
html body.incallx.in-voice .channel-list-bottom.lt-account-dock .lt-account-dock-actions,
html body.incallx.voice-active .channel-list-bottom.lt-account-dock .lt-account-dock-actions,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display: flex"]) .channel-list-bottom.lt-account-dock .lt-account-dock-actions,
html body.incallx #sidebar-wrapper:has(> #voice-channel-container[style*="display:flex"]) .channel-list-bottom.lt-account-dock .lt-account-dock-actions{
    flex: 0 0 auto !important;
    gap: 2px !important;
    margin-left: auto !important;
}

/* ===== whitoo-dmpanel.css ===== */
/* ==========================================================================
   Whitoo — DM sol paneli (kullanici listesi) 2026
   Referans: kart satirlar, avatar + durum noktasi, isim altinda durum yazisi,
   sagda uc nokta; "UYELER — 5" basligi ve "Tumunu gor" baglantisi.
   Durum yazisi data-user-online niteliginden uretilir (TR/EN, html[lang]).
   ========================================================================== */

/* ---------- Baslik ---------- */
body.incallx .sidebar-private .lt-role-user-heading {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 14px 12px 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(148, 163, 184, .72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

/* 2026 compact friends tools — Quick Match and friend management are
   intentionally separate visual groups. */
body.incallx .sidebar-private .lt-dm-tools {
    padding: 4px 10px 10px !important;
}
body.incallx .sidebar-private .lt-quick-match-dm {
    width: 100% !important;
    min-height: 62px !important;
    height: auto !important;
    margin: 0 0 15px !important;
    padding: 9px 11px !important;
    gap: 10px !important;
    border: 1px solid rgba(255,55,87,.38) !important;
    border-radius: 15px !important;
    background: linear-gradient(120deg,rgba(118,18,42,.48),rgba(62,24,60,.52)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.16) !important;
    text-align: left !important;
}
body.incallx .sidebar-private .lt-quick-match-dm:hover {
    border-color: rgba(255,69,101,.68) !important;
    background: linear-gradient(120deg,rgba(145,20,49,.57),rgba(75,28,73,.58)) !important;
    transform: translateY(-1px);
}
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#f23866,#a52fba) !important;
    box-shadow: 0 7px 18px rgba(226,18,75,.23) !important;
}
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-icon i {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 18px !important;
}
body.incallx .sidebar-private .wcx-qm-copy {
    display: grid !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
}
body.incallx .sidebar-private .wcx-qm-copy strong {
    overflow: hidden;
    color: #f8f9fd;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.incallx .sidebar-private .wcx-qm-copy small {
    overflow: hidden;
    color: rgba(193,200,216,.58);
    font-size: 9.5px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-arrow {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: rgba(216,222,234,.56) !important;
    font-size: 17px !important;
}
body.incallx .sidebar-private .wcx-friends-label {
    margin: 0 2px 8px;
    color: rgba(177,187,207,.62);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}
body.incallx .sidebar-private .wcx-friend-search-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
}
body.incallx .sidebar-private .wcx-friend-search-row .wcx-dm-search {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}
body.incallx .sidebar-private .wcx-friend-search-row .wcx-dm-search .lt-add-friend-input {
    height: 38px !important;
    padding-left: 32px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.038) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.075) !important;
}
body.incallx .sidebar-private .wcx-friend-search-row .wcx-invite-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    background: rgba(255,43,75,.09) !important;
}
body.incallx .sidebar-private .wcx-friend-search-row .wcx-invite-btn i { font-size: 16px !important; }
body.incallx .sidebar-private .wcx-requests {
    margin: 0 0 8px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.025) !important;
}
body.incallx .sidebar-private .wcx-requests .lt-friend-requests-head {
    min-height: 46px !important;
    padding: 8px 9px !important;
}
body.incallx .sidebar-private .wcx-requests .wcx-req-ico {
    width: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
}
body.incallx .sidebar-private .wcx-requests .wcx-req-count {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #ff6479;
    background: rgba(255,45,75,.13);
    font-size: 10px;
    font-weight: 900;
}
body.incallx .sidebar-private .wcx-requests .wcx-req-count[hidden] { display: none !important; }
body.incallx .sidebar-private .lt-dm-filters {
    margin: 0 !important;
    padding: 3px !important;
    gap: 3px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 11px !important;
    background: rgba(3,7,13,.38) !important;
}
body.incallx .sidebar-private .lt-dm-filters button {
    height: 29px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
}

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

body.incallx .sidebar-private .lt-role-user-heading span i { display: none !important; }

body.incallx .sidebar-private .lt-role-user-heading b {
    margin-left: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .62) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
}

body.incallx .sidebar-private .lt-role-user-heading b::before { content: "— "; }

/* ---------- Kullanici satiri: kart ---------- */
body.incallx .sidebar-private .private-list .user-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    margin: 4px 10px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .028) !important;
    box-shadow: none !important;
    transition: background .14s ease, border-color .14s ease !important;
}

body.incallx .sidebar-private .private-list .user-row:hover {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .10) !important;
}

body.incallx .sidebar-private .private-list .user-row.active {
    background: rgba(255, 45, 75, .12) !important;
    border-color: rgba(255, 45, 75, .30) !important;
}

/* Avatar + durum noktasi */
body.incallx .sidebar-private .channel-user-image {
    position: relative !important;
}

body.incallx .sidebar-private .channel-user-image img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

body.incallx .sidebar-private .online-status {
    position: absolute !important;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0e0d13;
}

body.incallx .sidebar-private .online-status i { font-size: 8px !important; }
body.incallx .sidebar-private .online-status.online i { color: #2ed573 !important; }
body.incallx .sidebar-private .online-status.offline i { color: #6b7280 !important; }
body.incallx .sidebar-private .online-status.away i { color: #ffb020 !important; }
body.incallx .sidebar-private .online-status.busy i { color: #ff4d5e !important; }

/* Isim */
body.incallx .sidebar-private .channel-user-name {
    color: #eef2f8 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* ---------- Durum yazisi (isim altinda) ---------- */
body.incallx .sidebar-private .user-status {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 2px !important;
    color: rgba(148, 163, 184, .7) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

body.incallx .sidebar-private .user-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6b7280;
}

body.incallx .sidebar-private .user-row[data-user-online="online"] .user-status::before { background: #2ed573; }
body.incallx .sidebar-private .user-row[data-user-online="away"] .user-status::before { background: #ffb020; }
body.incallx .sidebar-private .user-row[data-user-online="busy"] .user-status::before { background: #ff4d5e; }

/* Turkce etiketler */
html[lang="tr"] body.incallx .sidebar-private .user-row[data-user-online="online"] .user-status::after { content: "Çevrimiçi"; }
html[lang="tr"] body.incallx .sidebar-private .user-row[data-user-online="offline"] .user-status::after { content: "Çevrimdışı"; }
html[lang="tr"] body.incallx .sidebar-private .user-row[data-user-online="away"] .user-status::after { content: "Uzakta"; color: #ffb020; }
html[lang="tr"] body.incallx .sidebar-private .user-row[data-user-online="busy"] .user-status::after { content: "Meşgul"; color: #ff8a97; }

/* Ingilizce etiketler */
html:not([lang="tr"]) body.incallx .sidebar-private .user-row[data-user-online="online"] .user-status::after { content: "Online"; }
html:not([lang="tr"]) body.incallx .sidebar-private .user-row[data-user-online="offline"] .user-status::after { content: "Offline"; }
html:not([lang="tr"]) body.incallx .sidebar-private .user-row[data-user-online="away"] .user-status::after { content: "Away"; color: #ffb020; }
html:not([lang="tr"]) body.incallx .sidebar-private .user-row[data-user-online="busy"] .user-status::after { content: "Busy"; color: #ff8a97; }

/* ---------- Sag taraftaki uc nokta ---------- */
body.incallx .sidebar-private .dm-profile-options-toggle {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .7) !important;
    opacity: 0;
    transition: opacity .14s ease, background .14s ease, color .14s ease;
}

body.incallx .sidebar-private .user-row:hover .dm-profile-options-toggle {
    opacity: 1;
}

body.incallx .sidebar-private .dm-profile-options-toggle:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

/* ---------- Arama + kisayol kartlari ---------- */
body.incallx .sidebar-private .dm-user-search {
    height: 40px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .05) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    color: #e9edf5 !important;
    font-size: 12.5px !important;
}

body.incallx .sidebar-private .dm-user-search::placeholder {
    color: rgba(148, 163, 184, .55) !important;
}

body.incallx .sidebar-private .lt-quick-match-dm {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: calc(100% - 20px) !important;
    margin: 8px 10px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 45, 75, .22) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(255, 45, 75, .16), rgba(147, 51, 234, .10)) !important;
    color: #f2f5fa !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    transition: border-color .16s ease, background .16s ease !important;
}

body.incallx .sidebar-private .lt-quick-match-dm:hover {
    border-color: rgba(255, 45, 75, .42) !important;
    background: linear-gradient(135deg, rgba(255, 45, 75, .24), rgba(147, 51, 234, .14)) !important;
}

body.incallx .sidebar-private .lt-quick-match-dm i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, #ff2d4b, #9333ea);
    color: #fff;
    font-size: 18px;
}

/* Filtre butonlari */
body.incallx .sidebar-private .lt-dm-filters {
    display: flex !important;
    gap: 6px !important;
    margin: 0 10px 8px !important;
}

body.incallx .sidebar-private .lt-dm-filters button {
    flex: 1 1 0 !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .04) !important;
    color: rgba(148, 163, 184, .8) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    transition: background .14s ease, color .14s ease !important;
}

body.incallx .sidebar-private .lt-dm-filters button:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

body.incallx .sidebar-private .lt-dm-filters button.active {
    background: rgba(255, 45, 75, .16) !important;
    color: #ff8a97 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 45, 75, .28) !important;
}

/* Isim ve durum alt alta (referans): detay kutusu dikey aksin */
body.incallx .sidebar-private .channel-user-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 0 !important;
}

body.incallx .sidebar-private .user-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

body.incallx .sidebar-private .channel-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* Satirin sol blogu (avatar + detay) esnek olsun */
body.incallx .sidebar-private .private-list .user-row > .d-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* ==========================================================================
   UST BOLUM (referans): ikonlu arama, "Davet Et" butonu, istek karti
   ========================================================================== */
body.incallx .sidebar-private .wcx-dm-search {
    position: relative !important;
    display: block !important;
    margin: 8px 10px !important;
}

body.incallx .sidebar-private .wcx-dm-search-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, .6);
    font-size: 15px;
    pointer-events: none;
}

body.incallx .sidebar-private .wcx-dm-search .lt-add-friend-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px 0 34px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    color: #e9edf5 !important;
    font-size: 12.5px !important;
}

body.incallx .sidebar-private .wcx-dm-search .lt-add-friend-input::placeholder {
    color: rgba(148, 163, 184, .55) !important;
}

body.incallx .sidebar-private .wcx-invite-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100% - 20px) !important;
    height: 42px !important;
    margin: 0 10px 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 45, 75, .35) !important;
    border-radius: 12px !important;
    background: rgba(255, 45, 75, .08) !important;
    color: #ff5a6a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

body.incallx .sidebar-private .wcx-invite-btn:hover {
    border-color: rgba(255, 45, 75, .6) !important;
    background: rgba(255, 45, 75, .16) !important;
    color: #ff8a97 !important;
}

body.incallx .sidebar-private .wcx-invite-btn i { font-size: 17px !important; }

body.incallx .sidebar-private .wcx-requests {
    margin: 0 10px 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .03) !important;
}

body.incallx .sidebar-private .wcx-requests .lt-friend-requests-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx .sidebar-private .wcx-req-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: rgba(226, 232, 240, .85);
    font-size: 17px;
}

body.incallx .sidebar-private .wcx-req-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-width: 0;
}

body.incallx .sidebar-private .wcx-req-text strong {
    color: #eef2f8;
    font-size: 13px;
    font-weight: 700;
}

body.incallx .sidebar-private .wcx-req-text small {
    margin-top: 1px;
    color: rgba(148, 163, 184, .65);
    font-size: 11px;
}

body.incallx .sidebar-private .wcx-requests .lt-friend-requests-refresh {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(148, 163, 184, .6);
    font-size: 16px;
}

body.incallx .sidebar-private .wcx-requests .lt-friend-requests-refresh:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.incallx .sidebar-private .wcx-requests .lt-friend-request-list:not(:empty) {
    padding: 0 12px 10px !important;
}

/* Kartin altindaki tekrar eden "Bekleyen istek yok." yazisi gizlendi
   (bilgi zaten kartin alt satirinda). Gercek istekler liste ogesi olarak gelir. */
body.incallx .sidebar-private .wcx-requests .lt-friend-request-list > small {
    display: none !important;
}

/* Baslik tek satirda kalsin */
body.incallx .sidebar-private .wcx-req-text strong {
    font-size: 12.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Panel dar (177px): baslik sigsin diye ikon/aralik/ok kuculdu */
body.incallx .sidebar-private .wcx-requests .lt-friend-requests-head {
    gap: 8px !important;
    padding: 10px !important;
}

body.incallx .sidebar-private .wcx-req-ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
}

body.incallx .sidebar-private .wcx-requests .lt-friend-requests-refresh {
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
}

body.incallx .sidebar-private .wcx-req-text strong {
    font-size: 12px !important;
    letter-spacing: -.1px;
}

body.incallx .sidebar-private .wcx-req-text small {
    font-size: 10.5px !important;
}

/* Panel dar kaldigi icin baslik kirpiliyordu: iki satira sarsin, kirpma olmasin */
body.incallx .sidebar-private .wcx-req-text strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   ARACLAR: kompakt + acilir/kapanir
   ========================================================================== */
body.incallx .sidebar-private .wcx-tools-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 20px) !important;
    margin: 8px 10px 4px !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    cursor: pointer;
}

body.incallx .sidebar-private .wcx-tools-toggle:hover {
    color: rgba(226, 232, 240, .95) !important;
}

body.incallx .sidebar-private .wcx-tools-toggle i {
    font-size: 14px !important;
    transition: transform .18s ease;
}

/* Acilir govde */
body.incallx .sidebar-private .lt-dm-tools {
    display: grid !important;
    grid-template-rows: 1fr !important;
    opacity: 1;
    transition: grid-template-rows .22s ease, opacity .18s ease, margin .22s ease !important;
}

body.incallx .sidebar-private .lt-dm-tools.is-collapsed {
    grid-template-rows: 0fr !important;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none;
}

body.incallx .sidebar-private .lt-dm-tools.is-collapsed > * {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Hizli esles: kaba butondan kompakt satira */
body.incallx .sidebar-private .lt-quick-match-dm {
    height: 40px !important;
    margin: 4px 10px 8px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

body.incallx .sidebar-private .lt-quick-match-dm i {
    width: 26px !important;
    height: 26px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
}

/* Filtreler: daha kucuk */
body.incallx .sidebar-private .lt-dm-filters {
    margin: 0 10px 8px !important;
    gap: 5px !important;
}

body.incallx .sidebar-private .lt-dm-filters button {
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}

/* Arama + davet: kompakt */
body.incallx .sidebar-private .wcx-dm-search { margin: 0 10px 8px !important; }

body.incallx .sidebar-private .wcx-dm-search .lt-add-friend-input {
    height: 38px !important;
    font-size: 12px !important;
}

body.incallx .sidebar-private .wcx-invite-btn {
    height: 38px !important;
    margin: 0 10px 8px !important;
    font-size: 12.5px !important;
}

body.incallx .sidebar-private .wcx-requests {
    margin: 0 10px 8px !important;
}

/* Kapaliyken tamamen kapansin: grid 0fr ile ic bosluklar yer kaplamaya devam
   ediyordu, max-height + margin sifirlama ile gercek daralma saglaniyor. */
body.incallx .sidebar-private .lt-dm-tools {
    display: block !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
    max-height: 640px;
    transition: max-height .24s ease, opacity .18s ease !important;
}

body.incallx .sidebar-private .lt-dm-tools.is-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.incallx .sidebar-private .lt-dm-tools.is-collapsed > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Final cascade for the compact reference layout. */
body.incallx .sidebar-private .lt-dm-tools { padding: 4px 10px 10px !important; }
body.incallx .sidebar-private .lt-quick-match-dm {
    width: 100% !important; min-height: 62px !important; height: auto !important;
    margin: 0 0 15px !important; padding: 9px 11px !important; gap: 10px !important;
    border: 1px solid rgba(255,55,87,.38) !important; border-radius: 15px !important;
    background: linear-gradient(120deg,rgba(118,18,42,.48),rgba(62,24,60,.52)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.16) !important;
}
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-icon {
    display:grid !important; place-items:center !important; flex:0 0 38px !important;
    width:38px !important; height:38px !important; border-radius:12px !important;
    background:linear-gradient(135deg,#f23866,#a52fba) !important;
}
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-icon i,
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-arrow {
    width:auto !important; height:auto !important; border-radius:0 !important; background:none !important;
}
body.incallx .sidebar-private .wcx-qm-copy { display:grid !important; min-width:0 !important; flex:1 1 auto !important; gap:2px !important; }
body.incallx .sidebar-private .wcx-qm-copy strong { overflow:hidden; color:#f8f9fd; font-size:12.5px; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
body.incallx .sidebar-private .wcx-qm-copy small { overflow:hidden; color:rgba(193,200,216,.58); font-size:9.5px; white-space:nowrap; text-overflow:ellipsis; }
body.incallx .sidebar-private .lt-quick-match-dm .wcx-qm-arrow { flex:0 0 auto !important; color:rgba(216,222,234,.56) !important; font-size:17px !important; }
body.incallx .sidebar-private .wcx-friends-label { margin:0 2px 8px; color:rgba(177,187,207,.62); font-size:9px; font-weight:900; letter-spacing:1.35px; text-transform:uppercase; }
body.incallx .sidebar-private .wcx-friend-search-row { display:flex !important; align-items:stretch !important; gap:7px !important; margin-bottom:8px !important; }
body.incallx .sidebar-private .wcx-friend-search-row .wcx-dm-search { min-width:0 !important; flex:1 1 auto !important; margin:0 !important; }
body.incallx .sidebar-private .wcx-friend-search-row .wcx-dm-search .lt-add-friend-input { height:38px !important; padding-left:32px !important; border-radius:11px !important; }
body.incallx .sidebar-private .wcx-friend-search-row .wcx-invite-btn { width:38px !important; min-width:38px !important; height:38px !important; margin:0 !important; border-radius:11px !important; }
body.incallx .sidebar-private .wcx-requests { margin:0 0 8px !important; border-radius:12px !important; }
body.incallx .sidebar-private .wcx-requests .lt-friend-requests-head { min-height:46px !important; padding:8px 9px !important; }
body.incallx .sidebar-private .wcx-requests .wcx-req-count { min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px; border-radius:999px; color:#ff6479; background:rgba(255,45,75,.13); font-size:10px; font-weight:900; }
body.incallx .sidebar-private .wcx-requests .wcx-req-count[hidden] { display:none !important; }
body.incallx .sidebar-private .lt-dm-filters { margin:0 !important; padding:3px !important; gap:3px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:11px !important; background:rgba(3,7,13,.38) !important; }
body.incallx .sidebar-private .lt-dm-filters button { height:29px !important; border-radius:8px !important; font-size:10px !important; }

/* Reference-locked structure: Quick Match is its own card, Friends is a
   separate compact panel below it. */
body.incallx .sidebar-private .lt-dm-tools {
    width: 100% !important;
    padding: 0 10px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.incallx .sidebar-private .wcx-qm-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    justify-content: flex-start !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong,
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    display: block !important;
    width: 100% !important;
    line-height: 1.25 !important;
}
body.incallx .sidebar-private .wcx-friends-label {
    display: block !important;
    margin: 0 3px 7px !important;
}
body.incallx .sidebar-private .wcx-friends-card {
    display: block !important;
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg,rgba(255,255,255,.042),rgba(255,255,255,.018)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.incallx .sidebar-private .wcx-friends-card .wcx-friend-search-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 38px !important;
    gap: 7px !important;
    width: 100% !important;
}
body.incallx .sidebar-private .wcx-friends-card .wcx-dm-search {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
body.incallx .sidebar-private .wcx-friends-card .wcx-invite-btn {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.incallx .sidebar-private .wcx-friends-card .wcx-requests { width:100% !important; margin:0 0 8px !important; }
body.incallx .sidebar-private .wcx-friends-card .lt-dm-filters { width:100% !important; margin:0 !important; }

/* Final reference lock: prevent legacy quick-match typography from merging. */
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong,
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong { line-height: 17px !important; }
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small { line-height: 14px !important; }

/* v12: match the approved reference composition exactly. */
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    column-gap: 11px !important;
    min-height: 72px !important;
    padding: 11px 13px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-icon {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy {
    align-self: center !important;
    gap: 2px !important;
    text-align: left !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-arrow {
    justify-self: center !important;
    margin: 0 !important;
}
body.incallx .sidebar-private .wcx-friends-card {
    padding: 12px 10px 10px !important;
}
body.incallx .sidebar-private .wcx-friends-card .wcx-friends-label {
    margin: 0 2px 9px !important;
    padding: 0 !important;
}

/* v13: compact Quick Match card. */
body.incallx .sidebar-private .wcx-qm-group {
    margin-bottom: 13px !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    grid-template-columns: 36px minmax(0, 1fr) 16px !important;
    column-gap: 10px !important;
    min-height: 58px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(255, 52, 83, .42) !important;
    border-radius: 14px !important;
    background: linear-gradient(110deg, rgba(255, 45, 75, .13), rgba(255, 45, 75, .045)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm:hover {
    border-color: rgba(255, 62, 91, .72) !important;
    background: linear-gradient(110deg, rgba(255, 45, 75, .19), rgba(255, 45, 75, .065)) !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 17px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong {
    font-size: 12px !important;
    line-height: 15px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    font-size: 9px !important;
    line-height: 12px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-arrow {
    font-size: 15px !important;
}

/* v17: Friends controls and members are one unified section. */
body.incallx .sidebar-private .wcx-friends-label {
    margin: 0 3px 9px !important;
}
body.incallx .sidebar-private .wcx-friends-card {
    padding: 11px !important;
}
body.incallx .sidebar-private .wcx-friends-card .private-list {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.018) !important;
}
body.incallx .sidebar-private .wcx-friends-card .private-list .lt-role-user-heading {
    display: none !important;
}
body.incallx .sidebar-private .wcx-friends-card .private-list .user-row {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
body.incallx .sidebar-private .wcx-friends-card .private-list .user-row + .user-row {
    border-top: 1px solid rgba(255,255,255,.065) !important;
}
body.incallx .sidebar-private .wcx-friends-card .private-list .user-row:hover,
body.incallx .sidebar-private .wcx-friends-card .private-list .user-row.active {
    background: rgba(255,255,255,.04) !important;
}

/* v18: align Friends with Quick Match and make requests collapsible. */
body.incallx .sidebar-private .wcx-friends-label,
body.incallx .sidebar-private .wcx-friends-card {
    transform: translateX(-7px) !important;
}
body.incallx .sidebar-private .wcx-friends-card {
    width: calc(100% - 8px) !important;
}
body.incallx .sidebar-private .wcx-requests .lt-friend-requests-head {
    cursor: pointer !important;
    user-select: none !important;
}
body.incallx .sidebar-private .wcx-requests .lt-friend-request-list {
    display: none !important;
}
body.incallx .sidebar-private .wcx-requests.is-open .lt-friend-request-list {
    display: block !important;
}
body.incallx .sidebar-private .wcx-requests .lt-friend-requests-refresh i {
    transition: transform .18s ease !important;
}
body.incallx .sidebar-private .wcx-requests.is-open .lt-friend-requests-refresh i {
    transform: rotate(90deg) !important;
}

/* v14: Quick Match proportions copied from the approved reference. */
body.incallx .sidebar-private .wcx-qm-group {
    margin: 0 0 22px !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    grid-template-columns: 54px minmax(0, 1fr) 20px !important;
    column-gap: 15px !important;
    min-height: 94px !important;
    padding: 17px 18px !important;
    border: 1px solid rgba(255, 47, 82, .60) !important;
    border-radius: 21px !important;
    background: linear-gradient(112deg, rgba(125, 18, 46, .42) 0%, rgba(44, 20, 45, .68) 55%, rgba(25, 20, 43, .82) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.12) !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-icon {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(255, 70, 118, .60) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, #db2468, #971f61) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 7px 18px rgba(184,25,88,.22) !important;
    font-size: 26px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy {
    gap: 4px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong {
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    color: rgba(203, 196, 215, .68) !important;
    font-size: 12px !important;
    line-height: 16px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-arrow {
    color: rgba(210, 214, 226, .62) !important;
    font-size: 22px !important;
}

/* v15: compact layout for the real sidebar width. */
body.incallx .sidebar-private .wcx-tools-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 32px !important;
    text-align: center !important;
}
body.incallx .sidebar-private .wcx-tools-toggle > i {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}
body.incallx .sidebar-private .wcx-qm-group {
    margin-bottom: 16px !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    grid-template-columns: 42px minmax(0, 1fr) 15px !important;
    column-gap: 10px !important;
    min-height: 72px !important;
    padding: 11px 13px !important;
    border-radius: 17px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy {
    width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong {
    overflow: visible !important;
    font-size: 13px !important;
    line-height: 17px !important;
    text-overflow: clip !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    overflow: visible !important;
    font-size: 9px !important;
    line-height: 13px !important;
    text-overflow: clip !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-arrow {
    font-size: 16px !important;
}

/* v16: restore the Tools label and tighten/shift Quick Match. */
body.incallx .sidebar-private .wcx-tools-toggle {
    justify-content: flex-start !important;
    padding: 0 32px 0 12px !important;
    text-align: left !important;
}
body.incallx .sidebar-private .wcx-qm-group .lt-quick-match-dm {
    width: calc(100% - 8px) !important;
    grid-template-columns: 38px minmax(0, 1fr) 14px !important;
    column-gap: 9px !important;
    min-height: 64px !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
    transform: translateX(-7px) !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy strong {
    font-size: 12px !important;
    line-height: 16px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-copy small {
    font-size: 8.5px !important;
    line-height: 12px !important;
}
body.incallx .sidebar-private .wcx-qm-group .wcx-qm-arrow {
    font-size: 15px !important;
}

/* ===== whitoo-profile-studio.css ===== */
.wps-shell{--wps-a:#ff3158;--wps-b:#20e0c4;--wps-bg:#11111b;padding:18px;border:1px solid rgba(255,49,88,.24);border-radius:20px;background:radial-gradient(circle at 90% 0,rgba(32,224,196,.08),transparent 30%),#080d18;color:#eef3fb}.wps-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:linear-gradient(120deg,rgba(255,49,88,.14),rgba(32,224,196,.05))}.wps-head span{color:#ff5873;font-size:10px;font-weight:900;letter-spacing:1.5px}.wps-head h2{margin:5px 0 3px;font-size:22px}.wps-head p{margin:0;color:#8d99ad;font-size:12px}.wps-head>b{padding:7px 10px;border:1px solid rgba(32,224,196,.35);border-radius:999px;color:#43e9d2;font-size:10px}.wps-lock{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1px solid rgba(255,49,88,.25);border-radius:14px;background:rgba(255,49,88,.08)}.wps-lock>i{font-size:22px;color:#ff506c}.wps-lock div{display:grid;flex:1}.wps-lock span{color:#9aa5b8;font-size:11px}.wps-lock a{padding:7px 13px;border-radius:9px;background:#ff3158;color:#fff;text-decoration:none}.wps-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:14px;margin-top:14px}.wps-layout.is-locked{opacity:.48;pointer-events:none}.wps-controls,.wps-preview-wrap{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025)}.wps-group{margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.07)}.wps-group h3{margin:0 0 9px;color:#ccd5e4;font-size:11px;text-transform:uppercase;letter-spacing:.8px}.wps-presets{display:flex;flex-wrap:wrap;gap:7px}.wps-preset{padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#111827;color:#bac5d7;font-size:10px}.wps-preset.is-active{border-color:var(--preset-a);box-shadow:inset 3px 0 var(--preset-a);color:#fff}.wps-color-grid,.wps-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wps-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wps-controls label{display:grid;gap:5px;color:#9eabba;font-size:10px}.wps-controls select,.wps-controls input[type=url]{height:36px;padding:0 9px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#09111f;color:#eef3fb}.wps-controls input[type=color]{width:100%;height:35px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#09111f}.wps-range{grid-template-columns:60px 1fr!important;align-items:center;margin:7px 0}.wps-range input{accent-color:#ff3158}.wps-visibility{display:flex;flex-wrap:wrap;gap:12px}.wps-visibility h3{width:100%;margin:0}.wps-visibility label{display:flex;align-items:center;gap:6px}.wps-actions{display:flex;justify-content:flex-end;gap:8px}.wps-actions button{min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#121a29;color:#dbe5f3}.wps-actions button[type=submit]{border-color:#ff3158;background:linear-gradient(135deg,#ff3158,#d91845);color:#fff}.wps-status{min-height:18px;margin-top:8px;color:#45e5cf;font-size:11px;text-align:right}.wps-preview-wrap>span{display:block;margin:1px 0 10px;color:#6f7c91;font-size:9px;font-weight:900;letter-spacing:1.4px}.wps-preview{position:sticky;top:12px;overflow:hidden;min-height:430px;border:1px solid color-mix(in srgb,var(--wps-a) 55%,transparent);border-radius:var(--wps-radius,22px);background:color-mix(in srgb,var(--wps-bg) var(--wps-opacity,94%),transparent);box-shadow:0 0 calc(var(--wps-glow,18)*1px) color-mix(in srgb,var(--wps-a) 45%,transparent);font-family:var(--wps-font,Poppins),sans-serif}.wps-preview-cover{height:125px;background:linear-gradient(135deg,color-mix(in srgb,var(--wps-a) 38%,#111),color-mix(in srgb,var(--wps-b) 30%,#07101d));background-image:var(--wps-image,linear-gradient(135deg,color-mix(in srgb,var(--wps-a) 38%,#111),color-mix(in srgb,var(--wps-b) 30%,#07101d)));background-size:cover;background-position:center}.wps-preview-body{position:relative;padding:58px 20px 20px}.wps-preview-body>img{position:absolute;top:-48px;left:20px;width:88px;height:88px;object-fit:cover;border:4px solid var(--wps-bg);border-radius:24px;box-shadow:0 0 0 2px var(--wps-a)}.wps-preview-body h3{margin:0;color:#fff;font-size:22px}.wps-preview[data-name=gradient] h3{background:linear-gradient(90deg,var(--wps-a),var(--wps-b));-webkit-background-clip:text;color:transparent}.wps-preview[data-name=neon] h3{text-shadow:0 0 12px var(--wps-a)}.wps-preview[data-name=shimmer] h3{background:linear-gradient(90deg,#fff,var(--wps-a),#fff);background-size:200%;-webkit-background-clip:text;color:transparent;animation:wpsShimmer 2.2s linear infinite}.wps-preview[data-frame=pulse] .wps-preview-body>img{animation:wpsPulse 1.8s ease-in-out infinite}.wps-preview[data-frame=orbit] .wps-preview-body>img{box-shadow:0 0 0 2px var(--wps-a),0 0 22px var(--wps-b)}.wps-preview-body small{color:var(--wps-b)}.wps-preview-body p{margin:18px 0;color:#aab5c6;font-size:12px}.wps-preview-meta{display:grid;gap:7px}.wps-preview-meta span{padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#bac4d5;font-size:10px}.wps-particles{position:absolute;inset:0;z-index:1;pointer-events:none}.wps-preview[data-particle=stars] .wps-particles{background-image:radial-gradient(#fff 1px,transparent 1px);background-size:28px 28px;opacity:.35}.wps-preview[data-particle=snow] .wps-particles{background-image:radial-gradient(#fff 2px,transparent 2px);background-size:40px 40px;animation:wpsSnow 8s linear infinite;opacity:.45}.wps-preview[data-effect=aurora]::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 90deg,var(--wps-a),transparent,var(--wps-b),transparent,var(--wps-a));filter:blur(45px);opacity:.22;animation:wpsSpin 9s linear infinite}.woo-profile-appearance{--woo-a:#ff3158;--woo-b:#20e0c4;--woo-bg:#11111b;border-color:color-mix(in srgb,var(--woo-a) 50%,transparent)!important;border-radius:var(--woo-radius,22px)!important;background:color-mix(in srgb,var(--woo-bg) var(--woo-opacity,94%),transparent)!important;box-shadow:0 0 calc(var(--woo-glow,18)*1px) color-mix(in srgb,var(--woo-a) 35%,transparent)!important;font-family:var(--woo-font,Poppins),sans-serif!important}.woo-profile-appearance[data-name=gradient] h2,.woo-profile-appearance[data-name=gradient] .active-user-name{background:linear-gradient(90deg,var(--woo-a),var(--woo-b));-webkit-background-clip:text;color:transparent!important}.woo-profile-appearance[data-name=neon] h2,.woo-profile-appearance[data-name=neon] .active-user-name{text-shadow:0 0 12px var(--woo-a)}@keyframes wpsPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--wps-a) 30%,transparent),0 0 24px var(--wps-a)}}@keyframes wpsShimmer{to{background-position:-200%}}@keyframes wpsSnow{to{background-position:0 160px}}@keyframes wpsSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){.wps-layout{grid-template-columns:1fr}.wps-field-grid,.wps-color-grid{grid-template-columns:1fr 1fr}}

/* v3 approved compact reference */
.wps-shell{max-width:1180px;margin:auto;padding:0;border-color:rgba(148,163,184,.18);border-radius:16px;background:#080d16;overflow:hidden}.wps-head{min-height:92px;padding:18px 24px;border:0;border-bottom:1px solid rgba(148,163,184,.14);border-radius:0;background:linear-gradient(100deg,#0a101b,#0b1521)}.wps-head h2{font-size:20px}.wps-head>b{color:#35dec9;background:rgba(32,224,196,.05)}.wps-lock{margin:10px 14px 0}.wps-layout{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:10px;margin:0;padding:12px}.wps-controls,.wps-preview-wrap{padding:0;border:0;border-radius:0;background:transparent}.wps-studio-card{margin-bottom:8px;overflow:hidden;border:1px solid rgba(148,163,184,.15);border-radius:11px;background:linear-gradient(145deg,rgba(17,25,38,.9),rgba(8,14,24,.96))}.wps-studio-card>header{display:flex;align-items:center;gap:9px;height:39px;padding:0 12px;border-bottom:1px solid rgba(148,163,184,.12);color:#edf3fb}.wps-studio-card>header>i:first-child{color:#ff3c5f;font-size:17px}.wps-studio-card>header>strong{flex:1;font-size:13px}.wps-studio-card>header>i:last-child{font-size:13px}.wps-card-body{padding:11px}.wps-card-body>small{display:block;margin:0 0 7px;color:#8d99aa;font-size:9px}.wps-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:13px}.wps-preset{position:relative;min-height:67px;padding:42px 5px 5px;border-radius:9px;background:linear-gradient(150deg,color-mix(in srgb,var(--preset-a) 42%,#08111f),#0b111c);color:#dae2ee}.wps-preset:before{content:"";position:absolute;inset:0 0 23px;border-radius:8px 8px 0 0;background:linear-gradient(160deg,transparent,color-mix(in srgb,var(--preset-a) 52%,transparent))}.wps-preset.is-active:after{content:"✓";position:absolute;right:6px;top:5px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#ff3d60;color:#fff;font-weight:900}.wps-color-grid,.wps-identity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wps-controls label{font-size:9px}.wps-controls select,.wps-controls input[type=url]{height:34px}.wps-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wps-field-grid label{position:relative}.wps-field-grid label>i{position:absolute;left:10px;bottom:9px;z-index:1;color:#aeb8c8;font-size:14px}.wps-field-grid label>i+select{padding-left:32px}.wps-privacy-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}.wps-range{grid-template-columns:55px 1fr 38px!important;margin:8px 0}.wps-range output{text-align:right;color:#cbd5e1;font-size:9px}.wps-visibility{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}.wps-visibility>small{width:100%;color:#8793a5;font-size:9px}.wps-visibility label{display:flex;align-items:center;gap:5px}.wps-visibility input{position:absolute;opacity:0}.wps-visibility label>i{width:22px;height:12px;border-radius:999px;background:#263143;transition:.15s}.wps-visibility label>i:after{content:"";display:block;width:8px;height:8px;margin:2px;border-radius:50%;background:#8c98a9;transition:.15s}.wps-visibility input:checked+i{background:#ff3b5e}.wps-visibility input:checked+i:after{margin-left:12px;background:#fff}.wps-actions{display:grid;grid-template-columns:.75fr 1.25fr;gap:8px;padding:0}.wps-actions button{height:43px}.wps-actions button[type=submit]{font-weight:800}.wps-status{text-align:center}.wps-preview-wrap{padding:9px;border:1px solid rgba(148,163,184,.13);border-radius:11px;background:linear-gradient(145deg,rgba(14,22,35,.78),rgba(7,12,21,.92))}.wps-preview-wrap>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.wps-preview-wrap>header>strong{display:flex;align-items:center;gap:7px;font-size:12px}.wps-preview-wrap>header>strong i{color:#aab4c3}.wps-preview-modes{display:flex;border:1px solid rgba(148,163,184,.15);border-radius:8px;overflow:hidden}.wps-preview-modes button{height:31px;padding:0 10px;border:0;border-right:1px solid rgba(148,163,184,.12);background:#0b121e;color:#aeb8c7;font-size:9px}.wps-preview-modes button:last-child{border:0}.wps-preview-modes button.is-active{background:rgba(255,49,88,.11);color:#fff;box-shadow:inset 0 0 0 1px #ff3158}.wps-preview{position:relative;top:auto;min-height:560px;border-radius:19px}.wps-preview-cover{height:150px;background:linear-gradient(140deg,#68132e,#17263a)}.wps-preview-body{padding:70px 22px 22px}.wps-preview-body>img{top:-60px;width:105px;height:105px;border-radius:50%;box-shadow:0 0 0 4px #07101a,0 0 0 7px var(--wps-a)}.wps-preview-body h3{font-size:25px}.wps-preview-body p{margin:17px 0 12px}.wps-preview-badges{display:flex;gap:7px;padding-bottom:16px;border-bottom:1px solid rgba(148,163,184,.14)}.wps-preview-badges span{padding:5px 8px;border:1px solid rgba(255,49,88,.25);border-radius:6px;color:#ff5570;font-size:9px}.wps-preview-badges span+span{border-color:rgba(32,224,196,.25);color:#34dcc7}.wps-preview-meta{margin-top:11px}.wps-preview-meta span{display:grid;grid-template-columns:18px 1fr auto;align-items:center;border:0;padding:7px 0}.wps-preview-meta span>i{color:#a8b3c3}.wps-preview-meta b{font-weight:500}.wps-preview-meta em{font-style:normal}.wps-preview-awards{display:flex;gap:7px;margin-top:14px}.wps-preview-awards i{width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.13);border-radius:8px;color:#ff3158;background:rgba(255,255,255,.03)}.wps-preview-awards i:nth-child(2){color:#22d3ee}.wps-preview-awards i:nth-child(3){color:#f59e0b}.wps-preview.is-mobile{max-width:300px;min-height:520px;margin:auto}.wps-preview.is-compact{min-height:310px}.wps-preview.is-compact .wps-preview-cover{height:90px}.wps-preview.is-compact .wps-preview-meta,.wps-preview.is-compact .wps-preview-awards{display:none}@media(max-width:900px){.wps-layout{grid-template-columns:1fr}.wps-preview{min-height:500px}.wps-privacy-grid{grid-template-columns:1fr}.wps-presets{grid-template-columns:repeat(3,1fr)}}
.woo-profile-appearance{position:relative;overflow:hidden}.woo-profile-appearance>*{position:relative;z-index:1}.woo-profile-appearance[data-effect=neon]{border-color:var(--woo-a)!important;box-shadow:0 0 calc((var(--woo-glow,18) + 8)*1px) color-mix(in srgb,var(--woo-a) 55%,transparent)!important}.woo-profile-appearance[data-effect=aurora]::before{content:"";position:absolute;z-index:0;inset:-45%;background:conic-gradient(from 20deg,var(--woo-a),transparent,var(--woo-b),transparent,var(--woo-a));filter:blur(45px);opacity:.18;animation:wpsSpin 10s linear infinite}.woo-profile-appearance[data-particle=stars]::after,.woo-profile-appearance[data-particle=snow]::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:27px 27px;opacity:.3}.woo-profile-appearance[data-particle=snow]::after{background-size:38px 38px;animation:wpsSnow 9s linear infinite}.woo-profile-appearance[data-frame=ring] :is(.user-image,.whitoo-public-profile-avatar){box-shadow:0 0 0 3px var(--woo-a)!important}.woo-profile-appearance[data-frame=pulse] :is(.user-image,.whitoo-public-profile-avatar){box-shadow:0 0 0 2px var(--woo-a);animation:wpsWooPulse 1.9s ease-in-out infinite}.woo-profile-appearance[data-frame=orbit] :is(.user-image,.whitoo-public-profile-avatar){box-shadow:0 0 0 2px var(--woo-a),0 0 20px var(--woo-b)!important}@keyframes wpsWooPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--woo-a) 20%,transparent),0 0 22px var(--woo-a)}}

/* v4 upload + AI designer */
.wps-ai-card{margin-bottom:8px;padding:13px;border:1px solid rgba(255,49,88,.28);border-radius:12px;background:radial-gradient(circle at 92% 0,rgba(32,224,196,.13),transparent 37%),linear-gradient(135deg,rgba(255,49,88,.12),rgba(9,16,28,.96));box-shadow:inset 0 1px rgba(255,255,255,.035)}.wps-ai-title{display:flex;align-items:flex-start;gap:11px}.wps-ai-title>span{flex:0 0 38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:linear-gradient(145deg,#ff3158,#9b1fba);box-shadow:0 8px 22px rgba(255,49,88,.18);color:#fff;font-size:19px}.wps-ai-title>div{display:grid}.wps-ai-title small{color:#43e9d2;font-size:8px;font-weight:900;letter-spacing:1.5px}.wps-ai-title strong{margin-top:2px;color:#fff;font-size:14px}.wps-ai-title p{margin:2px 0 0;color:#8f9bad;font-size:9px;line-height:1.5}.wps-ai-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.wps-ai-compose textarea{min-height:58px;max-height:110px;resize:vertical;padding:10px 11px;border:1px solid rgba(148,163,184,.16);border-radius:9px;outline:none;background:#080f1b;color:#eaf1fb;font:inherit;font-size:10px;line-height:1.45}.wps-ai-compose textarea:focus{border-color:rgba(255,49,88,.72);box-shadow:0 0 0 3px rgba(255,49,88,.08)}.wps-ai-compose button{align-self:stretch;min-width:128px;padding:0 13px;border:1px solid #ff4263;border-radius:9px;background:linear-gradient(135deg,#ff3158,#c82375);box-shadow:0 8px 20px rgba(255,49,88,.17);color:#fff;font-size:10px;font-weight:800}.wps-ai-compose button:disabled{opacity:.65}.wps-ai-compose button i{margin-right:5px}.wps-ai-status{min-height:14px;margin-top:6px;color:#43e9d2;font-size:9px}.wps-ai-status.is-error,.wps-upload-status.is-error{color:#ff6680}.wps-upload{display:grid;grid-template-columns:1fr 36px;gap:7px}.wps-upload>input{display:none}.wps-upload button{height:36px;border:1px solid rgba(148,163,184,.17);border-radius:9px;background:#0a1321;color:#dce6f4;font-size:10px}.wps-upload button:first-of-type{border-color:rgba(32,224,196,.3);background:linear-gradient(135deg,rgba(32,224,196,.09),rgba(255,49,88,.07))}.wps-upload button i{margin-right:6px;color:#35dec9}.wps-upload button:last-child i{margin:0;color:#ff5570}.wps-upload-status{display:block!important;margin-top:5px!important;color:#748197!important;font-size:8px!important}.wps-spin{display:inline-block;animation:wpsSpin .8s linear infinite}@media(max-width:560px){.wps-ai-compose{grid-template-columns:1fr}.wps-ai-compose button{min-height:40px}.wps-ai-title p{display:none}}

/* v5 one renderer for preview, sidebar and public profile */
.wps-theme-symbol,.woo-theme-symbol{position:absolute;right:17px;bottom:14px;z-index:3;width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--wps-a,var(--woo-a)) 65%,#fff 10%);border-radius:13px;background:color-mix(in srgb,var(--wps-bg,var(--woo-bg)) 76%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--wps-a,var(--woo-a)) 35%,transparent);color:var(--wps-a,var(--woo-a));font-size:22px;backdrop-filter:blur(12px)}.wps-preview-cover,.woo-profile-appearance .active-user-cover,.woo-profile-appearance .whitoo-public-profile-cover{position:relative}.woo-profile-appearance.has-woo-background .active-user-cover,.woo-profile-appearance.has-woo-background .whitoo-public-profile-cover{background-image:linear-gradient(180deg,rgba(3,7,18,.08),rgba(3,7,18,.58)),var(--woo-image)!important;background-size:cover!important;background-position:center!important}.woo-profile-appearance.has-woo-background .whitoo-public-profile-cover>img{visibility:hidden}.woo-profile-appearance .whitoo-public-profile-head h2,.woo-profile-appearance .user-title{font-family:var(--woo-font,Poppins),sans-serif}.woo-profile-appearance[data-name=gradient] :is(.whitoo-public-profile-head h2,.user-title){background:linear-gradient(90deg,var(--woo-a),var(--woo-b));-webkit-background-clip:text;background-clip:text;color:transparent!important}.woo-profile-appearance[data-name=shimmer] :is(.whitoo-public-profile-head h2,.user-title){background:linear-gradient(90deg,#fff,var(--woo-a),var(--woo-b),#fff);background-size:220%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:wpsShimmer 2.2s linear infinite}.woo-profile-appearance[data-effect=glass] :is(.card-body,.whitoo-public-profile-about,.whitoo-public-profile-meta span){backdrop-filter:blur(14px);background:color-mix(in srgb,var(--woo-bg) 72%,transparent)!important}.woo-profile-appearance :is(.card-body,.whitoo-public-profile-head~*){position:relative;z-index:2}.woo-profile-appearance[data-motion=float],.wps-preview[data-motion=float]{animation:wpsCardFloat 5s ease-in-out infinite}.woo-profile-appearance[data-motion=pulse],.wps-preview[data-motion=pulse]{animation:wpsCardPulse 2.8s ease-in-out infinite}.woo-profile-appearance[data-motion=slide] :is(.card-body,.whitoo-public-profile-head),.wps-preview[data-motion=slide] .wps-preview-body{animation:wpsContentSlide .65s cubic-bezier(.2,.8,.2,1)}.woo-profile-appearance[data-motion=cinematic] .active-user-cover,.woo-profile-appearance[data-motion=cinematic] .whitoo-public-profile-cover,.wps-preview[data-motion=cinematic] .wps-preview-cover{animation:wpsCinematic 9s ease-in-out infinite alternate}.woo-profile-appearance[data-particle=embers]::after,.wps-preview[data-particle=embers] .wps-particles{background-image:radial-gradient(circle,#ff7849 0 1px,transparent 2px);background-size:34px 42px;opacity:.45;animation:wpsEmbers 7s linear infinite}@keyframes wpsCardFloat{50%{transform:translateY(-5px)}}@keyframes wpsCardPulse{50%{box-shadow:0 0 calc((var(--woo-glow,var(--wps-glow,18)) + 15)*1px) color-mix(in srgb,var(--woo-a,var(--wps-a)) 48%,transparent)}}@keyframes wpsContentSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes wpsCinematic{to{background-position:65% 45%}}@keyframes wpsEmbers{to{background-position:15px -150px}}

/* v6: profile controls must scroll inside the fixed application shell. */
#main-profile{overflow-y:hidden}
#main-profile>.page-content-wrapper{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#main-profile #v-profile-tabContent{min-height:min-content}
.wps-shell{isolation:isolate}

/* v7: Discord-inspired, Whitoo-native server profile card. */
body.incallx .right-panel .user-info-panel{padding:10px!important;background:transparent}
body.incallx .right-panel .user-info-panel .user-card{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--woo-a,#ff3158) 45%,rgba(148,163,184,.35))!important;border-radius:18px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--woo-bg,#11111b) 94%,#111827),color-mix(in srgb,var(--woo-bg,#11111b) 98%,#050914))!important;box-shadow:0 22px 54px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.045)!important}
body.incallx .right-panel .user-info-panel .user-card:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--woo-a,#ff3158) 28%,transparent),inset 3px 0 color-mix(in srgb,var(--woo-a,#ff3158) 72%,transparent)}
body.incallx .right-panel .user-info-panel .active-user-cover{height:126px!important;min-height:126px!important;background-position:center!important;background-size:cover!important}
body.incallx .right-panel .user-info-panel .active-user-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,15,.04),rgba(3,6,15,.08) 55%,color-mix(in srgb,var(--woo-bg,#11111b) 93%,transparent))!important}
.active-user-cover-shine{position:absolute;z-index:3;right:11px;top:10px;width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(5,9,18,.62);backdrop-filter:blur(10px)}
.active-user-cover-shine:before,.active-user-cover-shine:after{content:"";position:absolute;background:#fff;border-radius:999px;opacity:.75}.active-user-cover-shine:before{width:12px;height:2px;left:10px;top:12px}.active-user-cover-shine:after{width:2px;height:12px;left:15px;top:7px}
body.incallx .right-panel .user-info-panel .card-body{position:relative;padding:0 16px 13px!important}
.active-user-identity{position:relative;z-index:6;width:82px;height:82px;margin:-42px 0 9px}
body.incallx .right-panel .user-info-panel .active-user-identity .user-image{position:static!important;width:82px!important;height:82px!important;margin:0!important;border:5px solid color-mix(in srgb,var(--woo-bg,#11111b) 96%,#070b14)!important;border-radius:50%!important;object-fit:cover;box-shadow:0 0 0 3px var(--woo-a,#ff3158),0 12px 28px rgba(0,0,0,.45)!important}
/* Gosterge VARSAYILAN OLARAK CEVRIMDISI (gri). Onceden varsayilan yesildi ve
   JS yalnizca .is-online sinifini EKLIYORDU; kimseyi griye cevirmedigi icin
   profil kartinda herkes cevrimici gorunuyordu. */
.active-user-presence{position:absolute;right:0;bottom:2px;width:20px;height:20px;border:4px solid var(--woo-bg,#11111b);border-radius:50%;background:#64748b;box-shadow:0 0 0 1px rgba(255,255,255,.13)}
.active-user-presence.is-online{background:#22c55e;box-shadow:0 0 0 1px rgba(255,255,255,.13),0 0 10px rgba(34,197,94,.45)}
body.incallx .right-panel .user-info-panel .user-title{margin:0!important;color:#fff;font-size:20px!important;font-weight:950!important;line-height:1.15;text-align:left!important;letter-spacing:-.02em}
.active-user-handle{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:4px;color:#aeb8c8;font-size:10px}.active-user-username{color:#eef3fb;font-weight:700}.active-user-handle-dot{color:var(--woo-a,#ff3158)}
body.incallx .right-panel .user-info-panel .active-user-auto-badges{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:9px 0 0!important;padding:0!important}
body.incallx .right-panel .user-info-panel .profile-auto-badge{width:22px;height:22px;padding:0!important;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.055)}
.active-user-context{display:flex;align-items:center;gap:7px;margin:11px 0 0;padding:9px 10px;border:1px solid rgba(148,163,184,.12);border-radius:10px;background:rgba(255,255,255,.035);color:#cbd5e1;font-size:10px}.active-user-context i{color:var(--woo-b,#20e0c4);font-size:15px}
body.incallx .right-panel .user-info-panel .text-muted{display:grid;gap:5px;margin:10px 0!important;padding:11px!important;border:1px solid rgba(148,163,184,.12)!important;border-radius:11px!important;background:rgba(3,7,18,.34)!important;color:#d7deea!important;font-size:11px;line-height:1.45}.user-info-panel .text-muted>small{color:#7f8ba0;font-size:8px;font-weight:900;letter-spacing:1.2px}
body.incallx .right-panel .user-info-panel hr{margin:9px 0!important;border-color:rgba(148,163,184,.12)!important}
body.incallx .right-panel .user-info-panel .card-body>.row:not(:has(.user-badge)){align-items:center;margin:5px 0!important;padding:8px 9px!important;border:1px solid rgba(148,163,184,.1);border-radius:9px;background:rgba(255,255,255,.025);color:#cbd5e1;font-size:10px}
body.incallx .right-panel .user-info-panel .card-body>.row label{margin:0;color:#8592a6;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
body.incallx .right-panel .user-info-panel .active-user-room-roles{margin:9px 0!important;padding:10px!important;border-radius:11px!important;background:rgba(255,255,255,.03)!important}
body.incallx .right-panel .user-info-panel .card-footer{position:relative;z-index:5;padding:11px 14px 14px!important;border-top:1px solid rgba(148,163,184,.12)!important;background:rgba(3,7,18,.22)!important}
body.incallx .right-panel .user-info-panel .lt-user-actions{grid-template-columns:1fr 42px!important}.right-panel .user-info-panel .lt-user-actions .btn{height:40px;border-radius:11px!important}.right-panel .user-info-panel #user-options-dropdown{padding:0!important;font-size:0}.right-panel .user-info-panel #user-options-dropdown i{margin:0!important;font-size:18px}
.active-user-full-profile{display:flex;align-items:center;justify-content:space-between;gap:8px;height:42px;margin-top:9px;padding:0 13px;border:1px solid color-mix(in srgb,var(--woo-a,#ff3158) 32%,rgba(148,163,184,.12));border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--woo-a,#ff3158) 13%,#111827),rgba(17,24,39,.8));color:#eef3fb!important;font-size:10px;font-weight:850;text-decoration:none!important}.active-user-full-profile i{color:var(--woo-b,#20e0c4);font-size:16px}

/* Full profile portal: same identity, more room for biography and badges. */
body.incallx .whitoo-public-profile-panel{width:min(420px,calc(100vw - 26px))!important;max-height:min(760px,calc(100dvh - 28px))!important;border-color:color-mix(in srgb,var(--woo-a,#ff3158) 48%,rgba(148,163,184,.22))!important;border-radius:22px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--woo-bg,#11111b) 94%,#10182a),color-mix(in srgb,var(--woo-bg,#11111b) 98%,#050914))!important;box-shadow:0 30px 90px rgba(0,0,0,.62),inset 3px 0 color-mix(in srgb,var(--woo-a,#ff3158) 65%,transparent)!important}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-cover{height:170px!important}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-head{align-items:flex-end;margin-top:-52px;padding:0 20px!important}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-avatar{width:104px!important;height:104px!important;flex-basis:104px!important;border-radius:50%!important;border:5px solid var(--woo-bg,#11111b)!important;box-shadow:0 0 0 3px var(--woo-a,#ff3158),0 15px 34px rgba(0,0,0,.46)!important}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-head h2{font-size:23px!important}.whitoo-public-profile-head>div{min-width:0;padding-bottom:7px}.whitoo-public-profile-head>div span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-small-badges{padding:13px 20px 0!important}
.whitoo-public-profile-roles{display:flex;flex-wrap:wrap;gap:6px;padding:11px 20px 0}.whitoo-public-profile-roles span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--profile-role) 38%,rgba(148,163,184,.12));border-radius:8px;background:color-mix(in srgb,var(--profile-role) 10%,rgba(255,255,255,.025));color:#dbe4f0;font-size:9px;font-weight:750}.whitoo-public-profile-roles span i{width:7px;height:7px;border-radius:50%;background:var(--profile-role);box-shadow:0 0 8px var(--profile-role)}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-about{margin:13px 20px 0!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta{grid-template-columns:1fr!important;padding:11px 20px 0!important}.whitoo-public-profile-panel .whitoo-public-profile-meta span{border:1px solid rgba(148,163,184,.1)}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-badges{padding:15px 20px 0!important}.whitoo-public-profile-panel .whitoo-public-profile-badge-grid{grid-template-columns:1fr!important}.whitoo-public-profile-panel .whitoo-public-profile-badge{min-height:70px}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-actions{position:sticky;bottom:0;padding:14px 20px 18px!important;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--woo-bg,#11111b) 97%,#050914) 28%)}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-actions .btn{background:linear-gradient(135deg,var(--woo-a,#ff3158),color-mix(in srgb,var(--woo-b,#20e0c4) 70%,var(--woo-a,#ff3158)))!important}
@media(max-width:560px){body.incallx .right-panel .user-info-panel{padding:7px!important}body.incallx .whitoo-public-profile-panel{width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:20px 20px 12px 12px!important}}
.whitoo-public-profile-connections{padding:15px 20px 0}.whitoo-public-profile-connections h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#f8fafc;font-size:15px}.whitoo-public-profile-connections h3>i{color:#2dd4bf}.whitoo-public-profile-connections>div{display:grid;gap:9px}.whitoo-profile-connection{padding:11px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(255,255,255,.03)}.whitoo-profile-connection.is-spotify{--pc:#1ed760}.whitoo-profile-connection.is-github{--pc:#f8fafc}.whitoo-profile-connection.is-google{--pc:#ff334f}.whitoo-profile-connection-head,.whitoo-profile-connection-activity{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.whitoo-profile-connection-head>i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:11px;background:color-mix(in srgb,var(--pc) 12%,transparent);color:var(--pc);font-size:21px}.whitoo-profile-connection-head span,.whitoo-profile-connection-activity span{min-width:0}.whitoo-profile-connection-head small,.whitoo-profile-connection-head strong,.whitoo-profile-connection-activity small,.whitoo-profile-connection-activity strong,.whitoo-profile-connection-activity em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitoo-profile-connection-head small{color:#94a3b8;font-size:10px}.whitoo-profile-connection-head strong{color:#f8fafc;font-size:13px}.whitoo-profile-connection-head b{display:flex;align-items:center;gap:4px;margin-left:auto;color:var(--pc);font-size:9px}.whitoo-profile-connection-activity{margin-top:9px;padding:8px;border-radius:10px;background:rgba(2,6,23,.36)}.whitoo-profile-connection-activity>img,.whitoo-profile-connection-activity>i{width:40px;height:40px;flex:0 0 40px;border-radius:8px;object-fit:cover}.whitoo-profile-connection-activity>i{display:grid;place-items:center;color:var(--pc)}.whitoo-profile-connection-activity small{color:var(--pc);font-size:8px;font-weight:900;letter-spacing:.08em}.whitoo-profile-connection-activity strong{color:#f8fafc;font-size:11px}.whitoo-profile-connection-activity em{color:#94a3b8;font-size:10px;font-style:normal}
.woo-profile-v2-mutual-servers{margin:7px 16px 0}.woo-profile-v2-mutual-servers>small{display:block;margin-bottom:4px;color:#667287;font-size:7px;font-weight:800;letter-spacing:.09em}.woo-profile-v2-mutual-servers>div,.whitoo-public-profile-mutual>div{display:flex;flex-wrap:wrap;gap:4px}.whitoo-mutual-server{display:inline-flex!important;align-items:center;max-width:150px;gap:5px;padding:4px 7px!important;border:1px solid rgba(148,163,184,.1)!important;border-radius:7px!important;background:rgba(255,255,255,.025)!important;color:#aeb8c8!important;text-decoration:none!important;font-size:9px;line-height:1;transition:color .16s ease,border-color .16s ease,background .16s ease}.whitoo-mutual-server:hover{border-color:rgba(45,212,191,.2)!important;background:rgba(45,212,191,.04)!important;color:#d8e5e4!important}.whitoo-mutual-server>i{flex:0 0 auto;color:#718296!important;font-size:10px}.whitoo-mutual-server>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitoo-public-profile-mutual{padding:11px 20px 0}.whitoo-public-profile-mutual h3{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:#aeb8c8;font-size:11px;font-weight:700}
.whitoo-mutual-server.is-extra{display:none!important}.is-expanded .whitoo-mutual-server.is-extra{display:inline-flex!important}.whitoo-mutual-more{height:20px;padding:0 7px;border:1px solid rgba(148,163,184,.1);border-radius:7px;background:rgba(255,255,255,.025);color:#7d899b;font-size:8px;font-weight:800;line-height:18px}.whitoo-mutual-more:hover{border-color:rgba(45,212,191,.2);color:#b7c8c7}.is-expanded .whitoo-mutual-more{padding-inline:8px}
body.whitoo-channel-send-denied .room-editor .editor-container,body.whitoo-channel-send-denied .room-editor .editor-col,body.whitoo-channel-send-denied .room-editor .attachment-col,body.whitoo-channel-send-denied .room-editor .emoji-col,body.whitoo-channel-send-denied .room-editor .send-col{display:none!important}body.whitoo-channel-send-denied .room-editor .permission-denied-editor{display:flex!important}
.room-editor{position:relative}.whitoo-slowmode-status{display:none;position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%);padding:4px 10px;border-radius:7px;background:rgba(15,18,28,.82);color:#ffbdca;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;pointer-events:none}body.whitoo-slowmode-active .room-editor .editor-container{opacity:.62}body.whitoo-slowmode-active .room-editor .send-col,body.whitoo-slowmode-active .room-editor .attachment-col,body.whitoo-slowmode-active .room-editor .emoji-col{pointer-events:none;opacity:.42}

/* v8: member-list popover actions and direct-message composer. */
.popover.woo-profile-popover-v2{width:330px!important;max-width:min(330px,calc(100vw - 18px))!important}.popover.woo-profile-popover-v2 .popover-body{overflow:visible!important}.woo-profile-card-v2{overflow:visible;border:1px solid rgba(148,163,184,.2);border-radius:16px;background:linear-gradient(180deg,#121827,#080c15);box-shadow:0 26px 64px rgba(0,0,0,.55)}.woo-profile-v2-cover{min-height:112px;border-radius:15px 15px 0 0;opacity:1}.woo-profile-v2-cover-actions{position:absolute;z-index:8;right:10px;top:10px;display:flex;gap:7px}.woo-profile-v2-circle{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(9,13,22,.76);box-shadow:0 8px 20px rgba(0,0,0,.3);color:#fff;backdrop-filter:blur(12px);transition:.16s}.woo-profile-v2-circle:hover{transform:translateY(-1px);background:rgba(20,27,42,.94)}.woo-profile-v2-circle i{font-size:18px}.woo-profile-v2-circle.btn-primary{color:#fff}.woo-profile-v2-circle.btn-danger{color:#ff6b82}.woo-profile-v2-cover-actions .dropdown{position:relative}.woo-profile-v2-menu{z-index:1085;min-width:220px;padding:7px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:#0c111d;box-shadow:0 20px 50px rgba(0,0,0,.55)}.woo-profile-v2-menu .dropdown-item{display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#dce5f1;font-size:11px;font-weight:700;text-decoration:none}.woo-profile-v2-menu .dropdown-item:hover{background:rgba(255,255,255,.06);color:#fff}.woo-profile-v2-menu .dropdown-item i{width:18px;color:#ff5570;font-size:16px}.woo-profile-v2-menu .dropdown-item:first-child i{color:#35dec9}.woo-profile-v2-body{justify-items:start;padding:0 15px 13px;text-align:left}.woo-profile-v2-identity{justify-items:start}.woo-profile-v2-avatar{width:72px!important;height:72px!important;margin:-36px 0 9px!important;border:4px solid #090e18!important;border-radius:50%!important;box-shadow:0 0 0 3px var(--woo-a,#ff3158),0 12px 28px rgba(0,0,0,.42)!important}.woo-profile-v2-name{padding:0!important;text-align:left!important;font-size:18px!important}.woo-profile-v2-badges{justify-content:flex-start!important;margin-top:8px!important}.woo-profile-v2-about{margin-top:8px}.woo-profile-v2-quick-message{position:relative;display:flex;align-items:center;margin:0 13px 13px;border:1px solid rgba(148,163,184,.16);border-radius:11px;background:rgba(255,255,255,.035);overflow:hidden}.woo-profile-v2-quick-message:focus-within{border-color:color-mix(in srgb,var(--woo-a,#ff3158) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--woo-a,#ff3158) 10%,transparent)}.woo-profile-v2-quick-message input{min-width:0;flex:1;height:42px;padding:0 42px 0 12px;border:0;outline:0;background:transparent;color:#eef3fb;font:inherit;font-size:10px}.woo-profile-v2-quick-message input::placeholder{color:#8792a4}.woo-profile-v2-quick-message button{position:absolute;right:5px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#cbd5e1}.woo-profile-v2-quick-message button:hover{background:rgba(255,255,255,.07);color:#fff}.woo-profile-v2-quick-message button:disabled{opacity:.45}.woo-profile-v2-quick-message button i{font-size:16px}
.woo-profile-v2-connections{width:100%;margin-top:10px}.woo-profile-v2-connections>small{display:block;margin-bottom:6px;color:#7f8b9d;font-size:8px;font-weight:900;letter-spacing:.12em}.woo-profile-v2-connections>div{display:flex;flex-wrap:wrap;gap:6px}.woo-profile-v2-connection{--pc:#38bdf8;display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:5px 7px;border:1px solid color-mix(in srgb,var(--pc) 25%,rgba(148,163,184,.12));border-radius:9px;background:color-mix(in srgb,var(--pc) 7%,rgba(255,255,255,.02));color:#dce5f1;text-decoration:none;transition:.16s ease}.woo-profile-v2-connection.is-spotify{--pc:#1ed760}.woo-profile-v2-connection.is-github{--pc:#f8fafc}.woo-profile-v2-connection.is-google{--pc:#ff334f}.woo-profile-v2-connection:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--pc) 55%,transparent);color:#fff}.woo-profile-v2-connection>i{color:var(--pc);font-size:14px}.woo-profile-v2-connection>span{font-size:9px;font-weight:800}.woo-profile-v2-connection>b{width:13px;height:13px;display:grid;place-items:center;border-radius:50%;background:var(--pc);color:#071019}.woo-profile-v2-connection>b i{font-size:8px;font-weight:900}
.woo-profile-v2-now-playing{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;padding:8px;border:1px solid rgba(30,215,96,.22);border-radius:11px;background:linear-gradient(135deg,rgba(30,215,96,.1),rgba(255,255,255,.025));color:inherit;text-decoration:none}.woo-profile-v2-now-playing>img,.woo-profile-v2-now-playing>i{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:8px;object-fit:cover;background:rgba(30,215,96,.12);color:#1ed760;font-size:18px}.woo-profile-v2-now-playing>span{min-width:0;flex:1}.woo-profile-v2-now-playing small,.woo-profile-v2-now-playing strong,.woo-profile-v2-now-playing em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.woo-profile-v2-now-playing small{color:#1ed760;font-size:7px;font-weight:950;letter-spacing:.09em}.woo-profile-v2-now-playing small i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#1ed760;box-shadow:0 0 8px #1ed760}.woo-profile-v2-now-playing strong{margin-top:2px;color:#f8fafc;font-size:10px}.woo-profile-v2-now-playing em{color:#8f9bad;font-size:8px;font-style:normal}.woo-profile-v2-equalizer{height:22px;display:flex;align-items:end;gap:2px}.woo-profile-v2-equalizer i{width:2px;border-radius:2px;background:#1ed760;animation:wooNowPlaying .75s ease-in-out infinite alternate}.woo-profile-v2-equalizer i:nth-child(1){height:8px}.woo-profile-v2-equalizer i:nth-child(2){height:17px;animation-delay:.2s}.woo-profile-v2-equalizer i:nth-child(3){height:12px;animation-delay:.4s}@keyframes wooNowPlaying{to{height:4px}}
.woo-profile-v2-connection-icon{width:32px;height:32px;min-height:32px;display:grid;place-items:center;padding:0;border-radius:50%}.woo-profile-v2-connection-icon>i{font-size:18px}.woo-profile-v2-connection-icon:hover{background:rgba(30,215,96,.14);box-shadow:0 0 16px rgba(30,215,96,.16)}
.woo-profile-v2-quick-message:focus-within{border-color:color-mix(in srgb,var(--woo-a,#ff3158) 42%,rgba(148,163,184,.2))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--woo-a,#ff3158) 7%,transparent)!important}.woo-profile-v2-quick-message button{right:6px!important;width:29px!important;height:29px!important;border:1px solid color-mix(in srgb,var(--woo-a,#ff3158) 36%,rgba(255,255,255,.1))!important;border-radius:8px!important;background:color-mix(in srgb,var(--woo-a,#ff3158) 15%,#111827)!important;color:color-mix(in srgb,var(--woo-a,#ff3158) 76%,#fff)!important;box-shadow:none!important}.woo-profile-v2-quick-message button:hover{border-color:color-mix(in srgb,var(--woo-a,#ff3158) 65%,transparent)!important;background:color-mix(in srgb,var(--woo-a,#ff3158) 27%,#111827)!important;color:#fff!important;filter:none!important;transform:none!important}.woo-profile-v2-quick-message button i{display:block!important;color:currentColor!important;font-size:15px!important;opacity:1!important}

/* Premium voice message */
.chat-audio.whitoo-voice-message{position:relative!important;display:flex!important;align-items:center!important;gap:7px!important;width:min(390px,calc(100vw - 110px))!important;max-width:100%!important;padding:6px!important;border:1px solid rgba(83,104,132,.42)!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(19,27,40,.98),rgba(10,15,24,.98))!important;box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035)!important}.chat-audio.whitoo-voice-message>.audio-icon{display:none!important}.chat-audio.whitoo-voice-message .green-audio-player{min-width:0!important;width:auto!important;flex:1 1 auto!important;height:44px!important;padding:0 7px!important;gap:8px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important}.chat-audio.whitoo-voice-message .green-audio-player .holder{width:34px!important;height:34px!important;flex:0 0 34px!important;border:1px solid rgba(38,214,195,.42)!important;border-radius:50%!important;background:rgba(38,214,195,.09)!important}.chat-audio.whitoo-voice-message .green-audio-player .holder .play-pause-btn{width:100%!important;height:100%!important;display:grid!important;place-items:center!important}.chat-audio.whitoo-voice-message .green-audio-player .holder svg{fill:#39dfcd!important;width:16px!important;height:16px!important}.chat-audio.whitoo-voice-message .green-audio-player .controls{min-width:105px!important;gap:3px!important}.chat-audio.whitoo-voice-message .green-audio-player .controls .controls__slider{height:23px!important;border-radius:5px!important;background:repeating-linear-gradient(90deg,rgba(93,110,135,.52) 0 3px,transparent 3px 7px)!important;mask:linear-gradient(180deg,transparent 5%,#000 32%,#000 68%,transparent 95%)!important}.chat-audio.whitoo-voice-message .green-audio-player .controls .controls__slider .controls__progress{height:100%!important;border-radius:5px!important;background:repeating-linear-gradient(90deg,#26d6c3 0 3px,transparent 3px 7px)!important}.chat-audio.whitoo-voice-message .green-audio-player .controls .progress__pin{width:2px!important;height:27px!important;right:0!important;top:-2px!important;border-radius:2px!important;background:#26d6c3!important;box-shadow:0 0 8px rgba(38,214,195,.65)!important}.chat-audio.whitoo-voice-message .green-audio-player .controls span{color:#8492a6!important;font-size:8px!important;font-variant-numeric:tabular-nums!important}.chat-audio.whitoo-voice-message .green-audio-player .volume{margin-left:0!important}.chat-audio.whitoo-voice-message .green-audio-player .volume__button{color:#92a0b4!important;background:rgba(255,255,255,.025)!important}.chat-audio.whitoo-voice-message .green-audio-player .volume__button svg{fill:#92a0b4!important}.whitoo-voice-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}.whitoo-audio-speed,.whitoo-audio-download{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid rgba(111,130,155,.25);border-radius:9px;background:rgba(255,255,255,.035);color:#a8b4c5;font-size:9px;font-weight:900;text-decoration:none;transition:.15s}.whitoo-audio-speed:hover,.whitoo-audio-download:hover{border-color:rgba(255,49,88,.48);background:rgba(255,49,88,.1);color:#fff}.whitoo-audio-download i{font-size:14px}@media(max-width:520px){.chat-audio.whitoo-voice-message{width:min(330px,calc(100vw - 82px))!important}.whitoo-audio-download{display:none}.chat-audio.whitoo-voice-message .green-audio-player{padding:0 3px!important}}
.chat-audio.whitoo-voice-message .green-audio-player .holder .loading{display:none!important;animation:none!important}.chat-audio.whitoo-voice-message .green-audio-player .holder .play-pause-btn{display:grid!important;visibility:visible!important;opacity:1!important}
.whitoo-native-audio>audio{display:none!important}.whitoo-audio-play{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;padding:0;border:1px solid rgba(38,214,195,.45);border-radius:50%;background:rgba(38,214,195,.1);color:#39dfcd}.whitoo-audio-play:hover{background:rgba(38,214,195,.19);color:#75f7e8}.whitoo-audio-play i{font-size:16px}.whitoo-audio-track{min-width:100px;flex:1;display:grid;gap:3px}.whitoo-audio-seek{width:100%;height:24px;margin:0;appearance:none;background:repeating-linear-gradient(90deg,rgba(93,110,135,.58) 0 3px,transparent 3px 7px);cursor:pointer}.whitoo-audio-seek::-webkit-slider-thumb{width:3px;height:27px;appearance:none;border:0;border-radius:3px;background:#26d6c3;box-shadow:0 0 8px rgba(38,214,195,.62)}.whitoo-audio-seek::-moz-range-thumb{width:3px;height:27px;border:0;border-radius:3px;background:#26d6c3}.whitoo-audio-time{display:flex;justify-content:space-between;color:#8492a6;font-size:8px;font-variant-numeric:tabular-nums}.whitoo-audio-volume{width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.025);color:#92a0b4}.whitoo-audio-volume:hover{background:rgba(255,255,255,.07);color:#fff}.whitoo-audio-volume i{font-size:15px}
.chat-audio.whitoo-direct-voice{width:min(360px,calc(100vw - 100px))!important;gap:7px!important;padding:6px 7px!important;border-color:rgba(83,104,132,.38)!important;border-radius:13px!important;background:linear-gradient(145deg,#121a27,#0a1019)!important}.whitoo-voice-mark{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border:1px solid rgba(38,214,195,.35);border-radius:9px;background:rgba(38,214,195,.08);color:#39dfcd}.whitoo-voice-mark i{font-size:15px}.whitoo-direct-audio{display:block!important;min-width:0!important;width:100%!important;height:34px!important;flex:1!important;border-radius:9px!important;filter:invert(.88) hue-rotate(150deg) saturate(.8)}.whitoo-direct-audio::-webkit-media-controls-enclosure{border-radius:9px;background:#dce3ec}.chat-audio.whitoo-direct-voice>.whitoo-audio-download{flex:0 0 30px}@media(max-width:520px){.chat-audio.whitoo-direct-voice{width:min(320px,calc(100vw - 80px))!important}.whitoo-voice-mark{display:none}}
.chat-audio.whitoo-native-audio{width:min(320px,calc(100vw - 92px))!important;gap:8px!important;padding:7px 8px!important;border-color:rgba(76,96,123,.4)!important;border-radius:13px!important;background:linear-gradient(145deg,#121a27,#0a1019)!important}.chat-audio.whitoo-native-audio .whitoo-audio-play{width:34px!important;height:34px!important;flex-basis:34px!important}.chat-audio.whitoo-native-audio .whitoo-audio-seek{height:5px!important;border-radius:999px!important;background:rgba(112,130,153,.34)!important}.chat-audio.whitoo-native-audio .whitoo-audio-seek::-webkit-slider-thumb{width:11px!important;height:11px!important;border-radius:50%!important;background:#26d6c3!important;box-shadow:0 0 0 3px rgba(38,214,195,.12)!important}.chat-audio.whitoo-native-audio .whitoo-audio-track{gap:6px!important}.chat-audio.whitoo-native-audio .whitoo-audio-time{font-size:9px!important}.chat-audio.whitoo-native-audio .whitoo-audio-volume{width:28px!important;height:28px!important}.chat-audio.whitoo-native-audio .whitoo-audio-speed{width:28px!important;height:28px!important}.chat-audio.whitoo-native-audio .whitoo-audio-download{width:28px!important;height:28px!important}@media(max-width:520px){.chat-audio.whitoo-native-audio{width:min(292px,calc(100vw - 74px))!important}}
.chat-audio.whitoo-native-audio{position:relative!important;z-index:30!important;isolation:isolate!important;pointer-events:auto!important}.chat-audio.whitoo-native-audio .whitoo-audio-play{position:relative!important;z-index:100!important;width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;margin:-4px 0!important;padding:0!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;user-select:none!important}.chat-audio.whitoo-native-audio .whitoo-audio-play i{pointer-events:none!important}.chat-audio.whitoo-native-audio .whitoo-audio-track{position:relative!important;z-index:2!important}.chat-audio.whitoo-native-audio .whitoo-voice-actions,.chat-audio.whitoo-native-audio .whitoo-audio-volume{position:relative!important;z-index:3!important}.chat-audio.whitoo-native-audio~.show-actions,.chat-audio.whitoo-native-audio .show-actions{pointer-events:none!important}
.message-html .chat-gallery{position:relative!important;z-index:30!important;isolation:isolate!important;pointer-events:auto!important}.message-html .chat-gallery figure,.message-html .chat-gallery a,.message-html .chat-gallery img{position:relative!important;z-index:31!important;pointer-events:auto!important;cursor:zoom-in!important;touch-action:manipulation!important}.message-html .chat-gallery img{display:block}.message-html:has(.chat-gallery)~.show-actions{pointer-events:none!important}
/* Woo Profile Studio v2: real media universe and interactive layers */
.wps-scope{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.wps-scope input{position:absolute;opacity:0}.wps-scope span{display:flex;min-height:68px;padding:12px;border:1px solid #263247;border-radius:13px;background:#0b1220;flex-direction:column;gap:3px;cursor:pointer;transition:.2s}.wps-scope input:checked+span{border-color:var(--wps-a,#ff3158);box-shadow:0 0 0 2px color-mix(in srgb,var(--wps-a,#ff3158) 18%,transparent)}.wps-scope i{color:var(--wps-a,#ff3158);font-size:18px}.wps-scope small{opacity:.62}.wps-media-row,.wps-layer-toolbar{display:flex;gap:8px;margin:10px 0}.wps-media-row button,.wps-layer-toolbar button,.wps-layer-row button{border:1px solid #29354b;background:#101827;color:#e8edf7;border-radius:10px;padding:9px 12px}.wps-check{display:flex!important;align-items:center;gap:8px;margin-top:10px}.wps-avatar-position{grid-column:1/-1}.wps-layer-list{display:grid;gap:7px}.wps-layer-row{display:grid;grid-template-columns:34px 1fr repeat(4,32px);align-items:center;gap:6px;padding:7px;border:1px solid #263247;border-radius:11px;background:#0a111d}.wps-layer-row.is-hidden{opacity:.45}.wps-layer-row button{padding:6px}.wps-layer-thumb{width:30px;height:30px;object-fit:contain;font-size:22px;text-align:center}.wps-preview{isolation:isolate;background-image:linear-gradient(rgba(0,0,0,var(--wps-overlay,.42)),rgba(0,0,0,var(--wps-overlay,.42))),var(--wps-image)!important;background-size:var(--wps-fit,cover)!important;background-position:var(--wps-position,center)!important}.wps-preview[data-scope="cover"]{background-image:none!important}.wps-preview-cover{background-image:linear-gradient(rgba(0,0,0,var(--wps-overlay,.42)),rgba(0,0,0,var(--wps-overlay,.42))),var(--wps-cover),var(--wps-image)!important;background-size:var(--wps-fit,cover)!important;background-position:var(--wps-position,center)!important}.wps-preview-body>img{left:var(--wps-avatar-x,20%)!important;transform:translateX(-50%)}.wps-layer-stage,.woo-profile-layer-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}.wps-layer,.woo-profile-layer{position:absolute;display:block;object-fit:contain;transform:translate(-50%,-50%) rotate(var(--wps-layer-rotation,var(--woo-layer-rotation,0deg)));filter:drop-shadow(0 5px 12px rgba(0,0,0,.48))}.wps-layer[data-motion="float"],.woo-profile-layer[data-motion="float"]{animation:wooLayerFloat 4s ease-in-out infinite alternate}.wps-layer[data-motion="pulse"],.woo-profile-layer[data-motion="pulse"]{animation:wooLayerPulse 2.2s ease-in-out infinite}@keyframes wooLayerFloat{to{transform:translate(-50%,calc(-50% - 9px)) rotate(var(--wps-layer-rotation,var(--woo-layer-rotation,0deg)))}}@keyframes wooLayerPulse{50%{scale:1.12}}.woo-profile-appearance{position:relative;isolation:isolate;overflow:hidden}.woo-profile-appearance.has-woo-full-background:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(0,0,0,var(--woo-overlay,.42)),rgba(0,0,0,var(--woo-overlay,.42))),var(--woo-image);background-size:var(--woo-fit,cover);background-position:var(--woo-position,center);opacity:var(--woo-intensity,1)}.woo-profile-appearance .active-user-cover,.woo-profile-appearance .whitoo-public-profile-cover{background-image:linear-gradient(rgba(0,0,0,var(--woo-overlay,.42)),rgba(0,0,0,var(--woo-overlay,.42))),var(--woo-cover),var(--woo-image);background-size:var(--woo-fit,cover);background-position:var(--woo-position,center)}.woo-profile-appearance .active-user-avatar,.woo-profile-appearance .whitoo-public-profile-avatar{left:var(--woo-avatar-x,20%)!important;transform:translateX(-50%)}.woo-profile-appearance[data-entrance="rise"]{animation:wooEnterRise .45s cubic-bezier(.2,.8,.2,1)}.woo-profile-appearance[data-entrance="zoom"]{animation:wooEnterZoom .4s ease-out}@keyframes wooEnterRise{from{opacity:0;transform:translateY(18px)}}@keyframes wooEnterZoom{from{opacity:0;transform:scale(.94)}}@media(max-width:640px){.wps-scope{grid-template-columns:1fr}.wps-layer-row{grid-template-columns:32px 1fr repeat(2,30px)}.wps-layer-row button:nth-of-type(2),.wps-layer-row button:nth-of-type(3){display:none}}@media(prefers-reduced-motion:reduce){.wps-layer,.woo-profile-layer,.woo-profile-appearance{animation:none!important}}

.wps-layer-row{display:block;padding:10px}.wps-layer-summary{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px}.wps-layer-actions{display:flex;gap:5px}.wps-layer-title{min-width:0;display:flex;flex-direction:column}.wps-layer-title strong,.wps-layer-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wps-layer-title small{opacity:.55;font-size:10px}.wps-layer-editor{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #1d293d}.wps-layer-editor label{font-size:10px;color:#98a7bd}.wps-layer-editor input,.wps-layer-editor select{width:100%;margin-top:4px}.wps-layer-empty{display:grid;justify-items:center;gap:3px;padding:22px;border:1px dashed #2b3850;border-radius:12px;color:#8492a8}.wps-layer-empty i{font-size:24px;color:var(--wps-a,#ff3158)}.wps-layer-empty strong{color:#dbe5f4}.wps-history-help{font-size:11px;color:#8190a6;margin:0 0 10px}.wps-history-list{display:grid;gap:7px}.wps-history-row{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid #253149;border-radius:11px;background:#0a111d}.wps-history-row span{display:grid;grid-template-columns:20px 1fr;align-items:center}.wps-history-row span i{grid-row:1/3;color:var(--wps-a,#ff3158)}.wps-history-row small{font-size:10px;color:#78869b}.wps-history-row button,.wps-history-card>header button{border:1px solid #2c3950;background:#111a2a;color:#dce5f2;border-radius:9px;padding:7px 10px}.wps-history-card>header button{margin-left:auto}.wps-layer,.woo-profile-layer{animation-duration:var(--wps-layer-speed,var(--woo-layer-speed,4s))!important;animation-delay:var(--wps-layer-delay,var(--woo-layer-delay,0s))!important}.wps-layer[data-motion="drift"],.woo-profile-layer[data-motion="drift"]{animation:wooLayerDrift ease-in-out infinite alternate}.wps-layer[data-motion="orbit"],.woo-profile-layer[data-motion="orbit"]{animation:wooLayerOrbit linear infinite}.wps-layer[data-motion="bounce"],.woo-profile-layer[data-motion="bounce"]{animation:wooLayerBounce ease-in-out infinite}.wps-layer[data-motion="shimmer"],.woo-profile-layer[data-motion="shimmer"]{animation:wooLayerShimmer ease-in-out infinite}@keyframes wooLayerDrift{to{transform:translate(calc(-50% + 22px),calc(-50% - 12px)) rotate(var(--wps-layer-rotation,var(--woo-layer-rotation,0deg)))}}@keyframes wooLayerOrbit{to{transform:translate(-50%,-50%) rotate(calc(var(--wps-layer-rotation,var(--woo-layer-rotation,0deg)) + 360deg))}}@keyframes wooLayerBounce{50%{transform:translate(-50%,calc(-50% - 16px)) rotate(var(--wps-layer-rotation,var(--woo-layer-rotation,0deg)))}}@keyframes wooLayerShimmer{50%{filter:drop-shadow(0 0 16px var(--wps-a,var(--woo-a,#fff))) brightness(1.5)}}.woo-profile-appearance[data-reduce-motion="1"] .woo-profile-layer,.wps-preview[data-reduce-motion="1"] .wps-layer{animation:none!important}@media(max-width:720px){.wps-layer-editor{grid-template-columns:1fr 1fr}.wps-layer-actions button:nth-child(2),.wps-layer-actions button:nth-child(3){display:inline-flex}}
.woo-profile-appearance .active-user-identity{margin-left:calc(var(--woo-avatar-x,18%) - 18%)!important}.woo-profile-appearance[data-entrance="soft"]{animation:wooEnterSoft .45s ease-out}.woo-profile-appearance[data-entrance="luxury"]{animation:wooEnterLuxury .65s cubic-bezier(.16,1,.3,1)}.woo-profile-appearance[data-entrance="cyber"]{animation:wooEnterCyber .38s steps(5)}@keyframes wooEnterSoft{from{opacity:0;transform:translateY(14px)}}@keyframes wooEnterLuxury{from{opacity:0;transform:scale(.94) translateY(22px);filter:blur(8px)}}@keyframes wooEnterCyber{0%{opacity:0;transform:translateX(-12px)}40%{transform:translateX(8px)}100%{opacity:1;transform:none}}
.wps-layer-stage{pointer-events:none}.wps-layer-stage .wps-layer{pointer-events:auto;cursor:grab;touch-action:none}.wps-layer-stage .wps-layer.is-dragging{cursor:grabbing;animation-play-state:paused!important;filter:drop-shadow(0 0 14px var(--wps-a))}.wps-preview-body>img{cursor:ew-resize;touch-action:none}
.wps-emoji-palette{display:none;grid-template-columns:repeat(6,38px);gap:6px;margin:8px 0;padding:9px;border:1px solid #2a3850;border-radius:12px;background:#080f1b;box-shadow:0 15px 35px rgba(0,0,0,.35)}.wps-emoji-palette.is-open{display:grid}.wps-emoji-palette button{width:38px;height:38px;border:1px solid #26344b;border-radius:10px;background:#101928;font-size:20px;transition:.18s}.wps-emoji-palette button:hover{transform:translateY(-2px);border-color:var(--wps-a,#ff3158)}
.wps-layout{align-items:start}.wps-preview-wrap{position:sticky!important;top:12px!important;align-self:start;z-index:5}@media(max-width:900px){.wps-preview-wrap{position:relative!important;top:auto!important}}
.woo-profile-appearance[data-background-fixed="1"]:before,.woo-profile-appearance[data-background-fixed="1"] :is(.active-user-cover,.whitoo-public-profile-cover),.wps-preview[data-background-fixed="1"],.wps-preview[data-background-fixed="1"] .wps-preview-cover{background-attachment:fixed!important}.woo-profile-appearance[data-avatar-intro="fade"] :is(.active-user-identity,.whitoo-public-profile-avatar),.wps-preview[data-avatar-intro="fade"] .wps-preview-body>img{animation:wooAvatarFade .55s ease-out}.woo-profile-appearance[data-avatar-intro="slide"] :is(.active-user-identity,.whitoo-public-profile-avatar),.wps-preview[data-avatar-intro="slide"] .wps-preview-body>img{animation:wooAvatarSlide .55s cubic-bezier(.16,1,.3,1)}.woo-profile-appearance[data-avatar-intro="pop"] :is(.active-user-identity,.whitoo-public-profile-avatar),.wps-preview[data-avatar-intro="pop"] .wps-preview-body>img{animation:wooAvatarPop .5s cubic-bezier(.16,1.4,.3,1)}.woo-profile-appearance[data-avatar-intro="cinematic"] :is(.active-user-identity,.whitoo-public-profile-avatar),.wps-preview[data-avatar-intro="cinematic"] .wps-preview-body>img{animation:wooAvatarCinema .8s ease-out}@keyframes wooAvatarFade{from{opacity:0}}@keyframes wooAvatarSlide{from{opacity:0;translate:-28px 0}}@keyframes wooAvatarPop{from{opacity:0;scale:.55}}@keyframes wooAvatarCinema{from{opacity:0;scale:1.35;filter:blur(8px)}}.woo-profile-appearance[data-entrance="anime"],.wps-preview[data-entrance="anime"]{animation:wooEnterAnime .5s cubic-bezier(.2,1.3,.3,1)}.woo-profile-appearance[data-entrance="royal"],.wps-preview[data-entrance="royal"]{animation:wooEnterRoyal .7s ease-out}.woo-profile-appearance[data-entrance="inferno"],.wps-preview[data-entrance="inferno"]{animation:wooEnterInferno .6s ease-out}.woo-profile-appearance[data-entrance="cosmic"],.wps-preview[data-entrance="cosmic"]{animation:wooEnterCosmic .7s ease-out}@keyframes wooEnterAnime{from{opacity:0;transform:translateX(-22px) skewX(-4deg)}}@keyframes wooEnterRoyal{from{opacity:0;transform:translateY(20px);filter:drop-shadow(0 0 30px #f7c948)}}@keyframes wooEnterInferno{from{opacity:0;transform:scale(.9);filter:drop-shadow(0 0 34px #ff5a1f) saturate(1.8)}}@keyframes wooEnterCosmic{from{opacity:0;transform:scale(.92) rotate(-1.5deg);filter:blur(7px) hue-rotate(80deg)}}@media(max-width:720px){.woo-profile-appearance[data-mobile-effects="0"] .woo-profile-layer,.woo-profile-appearance[data-mobile-effects="0"],.wps-preview[data-mobile-effects="0"] .wps-layer,.wps-preview[data-mobile-effects="0"]{animation:none!important}.woo-profile-appearance[data-mobile-effects="0"] .woo-profile-layer-stage,.wps-preview[data-mobile-effects="0"] .wps-layer-stage{display:none}}

/* ============================================================
   DM PROFIL KARTI — CAM GORUNUM (siyah bloklar kaldirildi)
   Satirlar/rozet bolumu opak koyu zemin yerine arka plani goren
   cam panellere cevrildi, yazi hiyerarsisi guclendirildi.
   Degerler degisken; Profil Studyosu bunlari ezerek ayarlayabilir.
   ============================================================ */
body.incallx .whitoo-public-profile-panel{
  --wpp-glass:.075;            /* satir cam yogunlugu */
  --wpp-glass-hover:.115;
  --wpp-blur:16px;             /* arka plan bulanikligi */
  --wpp-line:.12;              /* hairline cerceve */
  --wpp-radius:14px;
  --wpp-text:#f4f7fb;          /* birincil yazi */
  --wpp-dim:#aab6c6;           /* etiket yazisi */
}

/* --- satirlar: Country / Connections / Mutual servers --- */
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta span,
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-about,
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-connections>div,
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-badges{
  border:1px solid rgba(255,255,255,var(--wpp-line))!important;
  border-radius:var(--wpp-radius)!important;
  background:rgba(255,255,255,var(--wpp-glass))!important;
  -webkit-backdrop-filter:blur(var(--wpp-blur)) saturate(150%);
  backdrop-filter:blur(var(--wpp-blur)) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.16)!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta span:hover{
  background:rgba(255,255,255,var(--wpp-glass-hover))!important;
  border-color:rgba(255,255,255,.2)!important;
}
/* rozet bolumu bir kutu oldugu icin ic bosluk gerekiyor */
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-badges{
  margin:15px 20px 0!important;padding:14px 15px!important;
}

/* --- yazi hiyerarsisi --- */
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta b{
  color:var(--wpp-dim)!important;font-size:9.5px!important;font-weight:800!important;
  letter-spacing:.13em!important;text-transform:uppercase!important;
}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta span>em,
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-meta span>small{
  color:var(--wpp-text)!important;font-size:12.5px!important;font-weight:650!important;font-style:normal!important;
}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-badges h3{
  color:var(--wpp-text)!important;font-size:13px!important;letter-spacing:.01em!important;
}
/* isim ve kullanici adi: sert siyah bant yerine yumusak gradyan okunurluk */
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-head{
  position:relative;z-index:2;
}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-head h2{
  text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.8)!important;
}
body.incallx .whitoo-public-profile-panel .whitoo-public-profile-head span{
  color:#dbe3ee!important;font-weight:600!important;
  text-shadow:0 1px 10px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.85)!important;
}

/* ============================================================
   DM PREMIUM PROFIL KARTI (.dm-premium-profile-card)
   Kullanicinin kapak/arka plan gorseli (gif dahil) artik kartin
   tamamina basiliyor; satirlar opak kutu yerine cam panel.
   Tum degerler degisken -> Profil Studyosu ezerek ayarlayabilir.
   ============================================================ */
body.incallx .dm-premium-profile-card{
  --dmpp-glass:.07;          /* satir cam yogunlugu */
  --dmpp-glass-hover:.115;
  --dmpp-blur:15px;          /* cam bulanikligi */
  --dmpp-line:.12;           /* hairline cerceve */
  --dmpp-radius:13px;
  --dmpp-scrim:.58;          /* arka plan uzerindeki okunurluk perdesi */
  position:relative;
  isolation:isolate;
}
/* arka plan gorseli + okunurluk perdesi (sert siyah blok yerine gradyan) */
body.incallx .dm-premium-profile-card.has-cover::before,
body.incallx .dm-premium-profile-card.has-cover::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
}
body.incallx .dm-premium-profile-card.has-cover::before{
  background-image:var(--dmpp-cover);background-size:cover;background-position:center;
}
body.incallx .dm-premium-profile-card.has-cover::after{
  background:linear-gradient(180deg,rgba(8,10,16,.26),rgba(8,10,16,var(--dmpp-scrim)) 58%,rgba(8,10,16,.88));
}
/* kapak seridi: gorsel varsa kirpmadan otursun */
body.incallx .dm-premium-profile-card .dmpp-cover{
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
}
/* --- satirlar: cam panel --- */
body.incallx .dm-premium-profile-card .dmpp-row{
  border:1px solid rgba(255,255,255,var(--dmpp-line));
  border-radius:var(--dmpp-radius);
  background:rgba(255,255,255,var(--dmpp-glass));
  -webkit-backdrop-filter:blur(var(--dmpp-blur)) saturate(150%);
  backdrop-filter:blur(var(--dmpp-blur)) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.18);
  transition:background .18s ease,border-color .18s ease;
}
body.incallx .dm-premium-profile-card .dmpp-row:hover{
  background:rgba(255,255,255,var(--dmpp-glass-hover));
  border-color:rgba(255,255,255,.21);
}
/* --- yazi hiyerarsisi --- */
body.incallx .dm-premium-profile-card .dmpp-row strong{
  color:#aab6c6;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
body.incallx .dm-premium-profile-card .dmpp-row em,
body.incallx .dm-premium-profile-card .dmpp-row>div>span{
  color:#f4f7fb;font-size:12.5px;font-weight:650;font-style:normal;
}
body.incallx .dm-premium-profile-card .dmpp-name{
  text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.8);
}
body.incallx .dm-premium-profile-card .dmpp-user,
body.incallx .dm-premium-profile-card .dmpp-about{
  color:#dbe3ee;text-shadow:0 1px 10px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.8);
}

/* ============================================================
   STUDYO ONIZLEMESI = KARSI TARAFIN GORDUGU KART
   .wps-profile-row satirlarinin hic duzeni yoktu (display:block,
   padding:0) -> ikon/etiket/deger/ok ic ice geciyordu.
   Gercek karttaki .dmpp-row ile birebir ayni gorunum veriliyor.
   ============================================================ */
body.incallx .wps-preview-sections{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;
}
body.incallx .wps-profile-row{
  display:flex;align-items:center;gap:11px;
  min-height:46px;padding:10px 13px;
  border:1px solid rgba(255,255,255,var(--dmpp-line,.12));
  border-radius:var(--dmpp-radius,13px);
  background:rgba(255,255,255,var(--dmpp-glass,.07));
  -webkit-backdrop-filter:blur(var(--dmpp-blur,15px)) saturate(150%);
  backdrop-filter:blur(var(--dmpp-blur,15px)) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.18);
  transition:background .18s ease,border-color .18s ease;
}
body.incallx .wps-profile-row:hover{
  background:rgba(255,255,255,var(--dmpp-glass-hover,.115));
  border-color:rgba(255,255,255,.21);
}
/* bas ikon / son ok */
body.incallx .wps-profile-row>i:first-child{flex:0 0 18px;color:#9fb0c4;font-size:17px;line-height:1}
body.incallx .wps-profile-row>i:last-child{flex:0 0 auto;margin-left:auto;color:#6f7d90;font-size:15px;line-height:1}
/* iki satirli icerik (Spotify / Ortak Sunucu / Roller / Rozetler) */
body.incallx .wps-profile-row>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
/* tek satirlik icerik (Country: i + strong + em + ok) */
body.incallx .wps-profile-row>em{margin-left:auto;text-align:right}
/* tipografi: etiket kucuk-buyuk harf, deger parlak */
body.incallx .wps-profile-row strong{
  color:#aab6c6;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1.3;
}
body.incallx .wps-profile-row em,
body.incallx .wps-profile-row>div>span{
  overflow:hidden;color:#f4f7fb;font-size:12.5px;font-weight:650;font-style:normal;
  line-height:1.35;text-overflow:ellipsis;
}
/* rozet/ikon satirlari icin ic bosluk */
body.incallx .wps-profile-row>div>span i{margin-right:6px;font-size:15px}

/* --- sira: iki tarafta da ayni olsun --- */
body.incallx .wps-country,   body.incallx .dmpp-country{order:1}
body.incallx .wps-roles,     body.incallx .dmpp-roles{order:2}
body.incallx .wps-mutual,    body.incallx .woo-profile-v2-mutual-servers{order:3}
body.incallx .wps-spotify,   body.incallx .woo-profile-v2-connections{order:4}
body.incallx .wps-award-row, body.incallx .dmpp-awards{order:5}
body.incallx .dmpp-stack{display:flex;flex-direction:column;gap:8px}

/* ============================================================
   STUDYO ONIZLEME: DM / Sunucu baglam secici
   Iki gorunumu de gosterir: "Sunucuda tiklaninca" (Mesaj Gonder
   butonlu) ve "DM sag panelde" (buton gizli - zaten sohbettesin).
   ============================================================ */
body.incallx .wps-preview-context{
  display:flex;gap:6px;margin:0 0 12px;padding:4px;
  border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(10,14,22,.5);
}
body.incallx .wps-preview-context button{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;
  color:#96a3b6;font-size:11.5px;font-weight:750;letter-spacing:.01em;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
body.incallx .wps-preview-context button i{font-size:15px}
body.incallx .wps-preview-context button:hover{color:#e6ecf5}
body.incallx .wps-preview-context button.is-active{
  background:linear-gradient(135deg,#ff3158,#d91f63);color:#fff;
  box-shadow:0 6px 16px rgba(217,31,99,.28);
}
/* DM baglaminda Mesaj Gonder butonu gizli (sadece ilk buton -> tam genislik options) */
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions>button:first-child{display:none!important}
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions>button:last-child{flex:1 1 auto!important;width:100%!important}
/* DM baglaminda ust rozet cipleri "Sunucu profili" baglami yerine sade kalir */
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions{gap:0}

/* ════════════════════════════════════════════════════════════
   WOO PROFIL STUDYOSU v2
   1) Sag onizleme paneli SABIT kalsin (asagi kaydirinca kaymasin)
   2) Onizleme, gercek DM karti ile AYNI gorunsun
   3) Baglama gore: DM'de rol+mesaj yok, sunucuda ikisi de var
   ════════════════════════════════════════════════════════════ */

/* --- 1) SABIT ONIZLEME ---
   sticky, ancestor'da overflow:hidden varsa calismaz; zinciri aciyoruz */
body.incallx .wps-shell,
body.incallx .wps-layout{overflow:visible!important}
body.incallx .wps-layout{align-items:start!important}
body.incallx .wps-preview-wrap{
  position:sticky!important;top:10px!important;
  align-self:start!important;z-index:5!important;
  max-height:calc(100vh - 90px)!important;
  overflow:auto!important;overscroll-behavior:contain;
}
body.incallx .wps-preview-wrap::-webkit-scrollbar{width:6px}
body.incallx .wps-preview-wrap::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.25)}
body.incallx .wps-preview-wrap::-webkit-scrollbar-track{background:transparent}

/* --- 2) ONIZLEME = GERCEK DM KARTI --- */
body.incallx .wps-preview{
  border-radius:20px!important;overflow:visible!important;
  background:linear-gradient(180deg,#12161e,#0a0d13 64%)!important;
  box-shadow:0 24px 56px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.incallx .wps-preview .wps-preview-cover{
  height:78px!important;min-height:78px!important;
  border-radius:20px 20px 0 0!important;overflow:hidden!important;
}
body.incallx .wps-preview .wps-preview-body{
  padding:0 11px 11px!important;margin-top:-24px!important;position:relative!important;
}
/* logo: kare-yuvarlak, gradyan halka */
body.incallx .wps-preview .wps-preview-body>img{
  width:54px!important;height:54px!important;
  margin:0 0 8px!important;padding:2.5px!important;
  border:0!important;border-radius:18px!important;
  background:linear-gradient(145deg,#ff3158,#8b5cf6 52%,#20e0c4)!important;
  object-fit:cover!important;display:block!important;
  box-shadow:0 10px 24px rgba(0,0,0,.55)!important;
}
body.incallx .wps-preview .wps-online-dot{
  position:absolute!important;left:47px!important;top:34px!important;
  width:15px!important;height:15px!important;border-radius:50%!important;
  background:#25d366!important;border:0!important;
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
}
body.incallx .wps-preview .wps-preview-body>h3{
  margin:0!important;font-size:17px!important;font-weight:850!important;
  letter-spacing:-.03em!important;color:#fff!important;padding-right:38px!important;
}
body.incallx .wps-preview .wps-preview-body>small{
  display:block!important;margin:2px 0 0!important;
  font-size:11px!important;color:#8895a9!important;
}
/* hakkinda ve Premium/Verified cipleri DM kartinda yok */
body.incallx .wps-preview .wps-preview-body>p,
body.incallx .wps-preview .wps-preview-badges,
body.incallx .wps-preview .wps-preview-meta,
body.incallx .wps-preview>.wps-preview-body>.wps-preview-awards{display:none!important}

/* Woo ikonu */
body.incallx .wps-preview .wps-woo{
  display:inline-grid!important;place-items:center!important;
  width:32px!important;height:32px!important;margin:0 0 3px!important;
  border-radius:10px!important;
  background:linear-gradient(140deg,rgba(255,200,81,.22),rgba(255,49,88,.16) 62%,rgba(139,92,246,.16))!important;
  box-shadow:inset 0 0 0 1px rgba(255,200,81,.45),0 6px 16px rgba(255,160,60,.16)!important;
}
body.incallx .wps-preview .wps-woo-mark{
  display:grid;place-items:center;width:21px;height:21px;border-radius:8px;
  background:linear-gradient(140deg,#ffd772,#ff9c3d);color:#3a2000;font-size:12.5px;
  box-shadow:0 2px 8px rgba(255,156,61,.45);
}

/* satirlar */
body.incallx .wps-preview .wps-preview-sections{
  display:flex!important;flex-direction:column!important;gap:4px!important;margin-top:7px!important;
}
body.incallx .wps-preview .wps-profile-row{
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:31px!important;padding:5px 10px!important;margin:0!important;
  border-radius:11px!important;border:0!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:none!important;
}
body.incallx .wps-preview .wps-profile-row>i:first-child{
  flex:none!important;width:15px!important;font-size:15px!important;color:#8fa0b6!important;
}
body.incallx .wps-preview .wps-country>i:first-child{color:#5aa9ff!important}
body.incallx .wps-preview .wps-joined>i:first-child{color:#31d970!important}
body.incallx .wps-preview .wps-seen>i:first-child{color:#ffb15c!important}
body.incallx .wps-preview .wps-profile-row strong{
  flex:none!important;color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.incallx .wps-preview .wps-profile-row>em{
  flex:1 1 auto!important;margin-left:auto!important;text-align:right!important;
  color:#f0f4fa!important;font-size:12px!important;font-weight:700!important;font-style:normal!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
body.incallx .wps-preview .wps-profile-row>i:last-child{
  flex:none!important;color:#5d6a7d!important;font-size:13px!important;
}
/* Spotify satiri */
body.incallx .wps-preview .wps-spotify{
  background:linear-gradient(118deg,rgba(30,215,96,.14),rgba(255,255,255,.018) 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.25)!important;
}
body.incallx .wps-preview .wps-spotify strong{color:#31d970!important}
/* rozet satiri: 4'lu izgara */
body.incallx .wps-preview .wps-award-row{
  flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:8px 10px!important;
}
body.incallx .wps-preview .wps-award-row>i:first-child,
body.incallx .wps-preview .wps-award-row>i:last-child{display:none!important}
body.incallx .wps-preview .wps-award-row>div{display:flex!important;flex-direction:column!important;gap:6px!important;width:100%!important}
body.incallx .wps-preview .wps-award-row .wps-preview-awards{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;
}
body.incallx .wps-preview .wps-award-row .wps-preview-awards i{
  display:grid!important;place-items:center!important;height:32px!important;margin:0!important;
  border-radius:9px!important;font-size:15px!important;
  background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
}
body.incallx .wps-preview .wps-award-row .wps-preview-awards i:nth-child(1){color:#ffc851!important}
body.incallx .wps-preview .wps-award-row .wps-preview-awards i:nth-child(2){color:#c084fc!important}
body.incallx .wps-preview .wps-award-row .wps-preview-awards i:nth-child(3){color:#5aa9ff!important}
body.incallx .wps-preview .wps-award-row .wps-preview-awards i:nth-child(4){color:#ff6b8a!important}

/* --- 3) BAGLAM FARKLARI --- */
/* DM: sunucu rolleri ve mesaj butonu YOK, ucnokta ismin hizasinda */
body.incallx .wps-preview.is-ctx-dm .wps-roles{display:none!important}
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions>button:first-child{display:none!important}
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions{
  position:absolute!important;top:88px!important;right:11px!important;
  margin:0!important;padding:0!important;width:auto!important;z-index:9!important;
}
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions>button:last-child{
  width:30px!important;height:30px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
  color:#c9d4e3!important;font-size:16px!important;
}
/* Sunucu: roller gorunur, altta mesaj yazma satiri */
body.incallx .wps-preview.is-ctx-server .wps-roles{display:flex!important}
body.incallx .wps-preview.is-ctx-server .wps-preview-actions{
  display:flex!important;gap:7px!important;margin-top:9px!important;
}
body.incallx .wps-preview.is-ctx-server .wps-preview-actions>button:first-child{
  flex:1!important;height:38px!important;border-radius:12px!important;
  background:linear-gradient(135deg,#ff3158,#e01e57)!important;color:#fff!important;
  font-size:12.5px!important;font-weight:750!important;border:0!important;
  box-shadow:0 8px 20px rgba(224,30,87,.3)!important;
}
body.incallx .wps-preview.is-ctx-server .wps-preview-actions>button:last-child{
  width:42px!important;height:38px!important;border-radius:12px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important;
  color:#dbe3ef!important;border:0!important;
}

/* ════════════════════════════════════════════════════════════
   STUDYO ONIZLEME v3 — DUZELTMELER
   Sorun 1: KATILDI/SON GORULME en uste cikiyordu. Sebep: onceki
            blokta bu iki satira "order" verilmemisti -> varsayilan
            order:0 ile digerlerinin onune geciyorlardi.
   Sorun 2: cevrimici noktasi kullanici adinin yanina dusuyordu.
   Sorun 3: "Now playingConnected activity" ve "DesignerCreator
            Supporter" ic ice geciyordu (bosluk yok).
   Sorun 4: DM'de ucnokta kapagin sag ustunde kaliyordu.
   ════════════════════════════════════════════════════════════ */

/* --- 1) DOGRU SIRA: Woo > Ulke > Katildi > Son gorulme >
         Roller(sunucu) > Ortak > Spotify > Rozetler --- */
body.incallx .wps-preview .wps-preview-sections>.wps-woo{order:0!important}
body.incallx .wps-preview .wps-preview-sections>.wps-country{order:1!important}
body.incallx .wps-preview .wps-preview-sections>.wps-joined{order:2!important}
body.incallx .wps-preview .wps-preview-sections>.wps-seen{order:3!important}
body.incallx .wps-preview .wps-preview-sections>.wps-roles{order:4!important}
body.incallx .wps-preview .wps-preview-sections>.wps-mutual{order:5!important}
body.incallx .wps-preview .wps-preview-sections>.wps-spotify{order:6!important}
body.incallx .wps-preview .wps-preview-sections>.wps-award-row{order:7!important}
body.incallx .wps-preview .wps-preview-sections>.wps-preview-actions{order:8!important}

/* --- 2) cevrimici noktasi: logonun sag alt kosesi --- */
body.incallx .wps-preview .wps-preview-body{position:relative!important}
body.incallx .wps-preview .wps-preview-body>.wps-online-dot{
  position:absolute!important;
  left:52px!important;top:39px!important;right:auto!important;bottom:auto!important;
  width:15px!important;height:15px!important;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:50%!important;
  background:#25d366!important;
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
  z-index:4!important;
}

/* --- 3) ic metinler ayrilsin --- */
body.incallx .wps-preview .wps-profile-row>div{
  flex:1 1 auto!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
}
body.incallx .wps-preview .wps-np{
  display:flex!important;flex-direction:column!important;gap:1px!important;
}
body.incallx .wps-preview .wps-np b{
  color:#fff!important;font-size:12px!important;font-weight:750!important;
}
body.incallx .wps-preview .wps-np small{
  color:#8895a9!important;font-size:10px!important;
}
/* rol rozetleri: yan yana bosluklu */
body.incallx .wps-preview .wps-role-pills{
  display:flex!important;flex-wrap:wrap!important;gap:5px!important;
}
body.incallx .wps-preview .wps-role-pills b{
  padding:3px 8px!important;border-radius:7px!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  color:#dfe6f1!important;font-size:10.5px!important;font-weight:700!important;
}
/* ortak sunucu rozetleri */
body.incallx .wps-preview .wps-server-dots{
  display:flex!important;gap:4px!important;flex-wrap:wrap!important;
}
body.incallx .wps-preview .wps-server-dots b{
  display:grid!important;place-items:center!important;
  min-width:22px!important;height:22px!important;padding:0 6px!important;
  border-radius:7px!important;background:rgba(255,255,255,.08)!important;
  color:#dfe6f1!important;font-size:10px!important;font-weight:800!important;
}

/* --- 4) DM: ucnokta ismin hizasinda --- */
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions{
  position:absolute!important;top:86px!important;right:11px!important;
  left:auto!important;bottom:auto!important;
  margin:0!important;padding:0!important;width:auto!important;z-index:12!important;
  display:block!important;
}
/* isim/kullanici adi ucnoktaya carpmasin */
body.incallx .wps-preview .wps-preview-body>h3,
body.incallx .wps-preview .wps-preview-body>small{
  padding-right:40px!important;
}

/* Woo ikonu: kullanici adinin hemen altinda, sola hizali */
body.incallx .wps-preview .wps-preview-sections>.wps-woo{
  margin:0 0 3px!important;
}

/* ════════════════════════════════════════════════════════════
   STUDYO ONIZLEME v4 — YAPISAL DUZELTME
   Onceki denemelerde ucnokta ve cevrimici noktasi PIKSEL ile
   konumlandiriliyordu; onizleme genisligi degisince kayiyordu.
   Artik ikisi de kapsayicilarina bagli (flex/relative) - hangi
   boyutta olursa olsun dogru yerde durur.
   Ayrica kapak gorseli hic basilmiyordu, o da baglandi.
   ════════════════════════════════════════════════════════════ */

/* --- KAPAK: gorsel gercekten bassin --- */
body.incallx .wps-preview .wps-preview-cover{
  height:78px!important;min-height:78px!important;
  border-radius:20px 20px 0 0!important;overflow:hidden!important;
  background-image:var(--wps-image,none)!important;
  background-size:cover!important;background-position:var(--wps-position,center)!important;
  background-repeat:no-repeat!important;
}

/* --- LOGO: kapsayici, nokta ona bagli --- */
body.incallx .wps-preview .wps-avatar-wrap{
  position:relative!important;display:inline-block!important;
  width:54px!important;height:54px!important;margin:0 0 8px!important;
  border-radius:18px!important;padding:2.5px!important;
  background:linear-gradient(145deg,#ff3158,#8b5cf6 52%,#20e0c4)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.55)!important;
}
body.incallx .wps-preview .wps-avatar-wrap>img{
  width:100%!important;height:100%!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:15.5px!important;object-fit:cover!important;
  display:block!important;background:none!important;box-shadow:none!important;
}
body.incallx .wps-preview .wps-avatar-wrap>.wps-online-dot{
  position:absolute!important;right:-3px!important;bottom:-3px!important;
  left:auto!important;top:auto!important;
  width:15px!important;height:15px!important;margin:0!important;
  border:0!important;border-radius:50%!important;background:#25d366!important;
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
}

/* --- ISIM SATIRI: isim solda, ucnokta sagda (flex) --- */
body.incallx .wps-preview .wps-name-row{
  display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;margin:0!important;
}
body.incallx .wps-preview .wps-name-row>h3{
  flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important;
  font-size:17px!important;font-weight:850!important;letter-spacing:-.03em!important;
  color:#fff!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
body.incallx .wps-preview .wps-name-dots{
  flex:none!important;width:30px!important;height:30px!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;cursor:pointer;
  background:rgba(255,255,255,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
  color:#c9d4e3!important;font-size:16px!important;line-height:1!important;
}
body.incallx .wps-preview .wps-name-dots:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
/* kullanici adi tam genislik, sag bosluk gerekmez */
body.incallx .wps-preview .wps-preview-body>small{
  display:block!important;margin:2px 0 0!important;padding:0!important;
  font-size:11px!important;color:#8895a9!important;
}
body.incallx .wps-preview .wps-preview-body>h3{padding-right:0!important}

/* --- BAGLAM: DM'de ustteki ucnokta, sunucuda alttaki mesaj cubugu --- */
body.incallx .wps-preview.is-ctx-dm .wps-name-dots{display:grid!important}
body.incallx .wps-preview.is-ctx-dm .wps-preview-actions{display:none!important}

body.incallx .wps-preview.is-ctx-server .wps-name-dots{display:none!important}
body.incallx .wps-preview.is-ctx-server .wps-preview-actions{
  position:static!important;display:flex!important;gap:7px!important;margin-top:9px!important;
  width:auto!important;
}

/* Woo ikonu: kullanici adinin hemen altinda */
body.incallx .wps-preview .wps-preview-sections>.wps-woo{
  margin:0 0 4px!important;
}

/* ════════════════════════════════════════════════════════════
   WOO PROFIL STUDYOSU — KOMPAKT & MODERN GORUNUM
   Sadece gorsel sikilastirma: bosluklar, tipografi, kaydiricilar.
   Hicbir islev/yapi degistirilmedi, sadece olculer ve renkler.
   ════════════════════════════════════════════════════════════ */

/* --- kabuk --- */
body.incallx .wps-shell{
  padding:14px!important;border-radius:16px!important;
  background:#080b12!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.13)!important;
  border:0!important;
}

/* --- ust baslik --- */
body.incallx .wps-head{margin-bottom:12px!important;padding-bottom:12px!important;
  border-bottom:1px solid rgba(148,163,184,.1)!important}
body.incallx .wps-head h2,
body.incallx .wps-head h3{font-size:17px!important;font-weight:850!important;letter-spacing:-.02em!important;margin:2px 0 3px!important}
body.incallx .wps-head p{font-size:11.5px!important;color:#7d8a9e!important;margin:0!important}
body.incallx .wps-head>span:first-child{font-size:9px!important;letter-spacing:.16em!important}

/* --- kartlar: daha ince, daha az dolgu --- */
body.incallx .wps-studio-card{
  margin-bottom:9px!important;border-radius:13px!important;
  border:0!important;background:#0c1119!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.11)!important;
}
body.incallx .wps-studio-card>header,
body.incallx .wps-studio-card>summary{
  padding:11px 13px!important;font-size:12.5px!important;font-weight:750!important;
}
body.incallx .wps-studio-card>header strong,
body.incallx .wps-studio-card>summary strong{font-size:12.5px!important;font-weight:750!important}
body.incallx .wps-card-body{padding:0 13px 13px!important}

/* --- AI karti --- */
body.incallx .wps-ai-card{
  margin-bottom:9px!important;padding:11px!important;border-radius:13px!important;
  border:0!important;box-shadow:inset 0 0 0 1px rgba(255,49,88,.24)!important;
}
body.incallx .wps-ai-title strong{font-size:13px!important;font-weight:800!important}
body.incallx .wps-ai-title small,
body.incallx .wps-ai-card p{font-size:10.5px!important;color:#7d8a9e!important}
body.incallx .wps-ai-compose{gap:8px!important}
body.incallx .wps-ai-compose textarea{
  min-height:52px!important;padding:9px 11px!important;border-radius:10px!important;
  border:0!important;background:rgba(255,255,255,.04)!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)!important;
  font-size:12px!important;color:#e6ecf5!important;
}

/* --- mod kartlari (Tam profil GIF / Yalnizca kapak) --- */
body.incallx .wps-scope{gap:8px!important;margin-bottom:11px!important}
body.incallx .wps-scope span{
  min-height:56px!important;padding:10px!important;border-radius:11px!important;
  border:0!important;background:#0a0f18!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)!important;
  transition:box-shadow .16s,background .16s;
}
body.incallx .wps-scope span:hover{background:#0d1420!important}
body.incallx .wps-scope input:checked+span{
  background:rgba(255,49,88,.08)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,49,88,.55)!important;
}
body.incallx .wps-scope span b{font-size:11.5px!important;font-weight:750!important}
body.incallx .wps-scope span small{font-size:9.5px!important;color:#7d8a9e!important}

/* --- yukleme satiri --- */
body.incallx .wps-media-row{gap:8px!important;margin-bottom:8px!important}
body.incallx .wps-upload,
body.incallx .wps-media-row button{
  min-height:38px!important;padding:0 13px!important;border-radius:10px!important;
  border:0!important;background:rgba(255,255,255,.05)!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)!important;
  font-size:12px!important;font-weight:700!important;color:#dbe3ef!important;
}
body.incallx .wps-upload-status{font-size:10px!important;color:#7d8a9e!important;margin-top:5px!important}

/* --- alan izgarasi + etiketler --- */
body.incallx .wps-field-grid{gap:9px 11px!important;margin-top:9px!important}
body.incallx .wps-field-grid label,
body.incallx .wps-card-body label{
  font-size:9.5px!important;font-weight:800!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;color:#6f7c93!important;margin-bottom:4px!important;
}
body.incallx .wps-card-body select,
body.incallx .wps-card-body input[type="text"],
body.incallx .wps-card-body input[type="number"]{
  height:36px!important;padding:0 10px!important;border-radius:9px!important;
  border:0!important;background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)!important;
  font-size:12px!important;color:#e6ecf5!important;
}

/* --- kaydiricilar: ince ve modern --- */
body.incallx .wps-shell input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%!important;height:4px!important;margin:9px 0 0!important;
  border-radius:99px!important;background:rgba(148,163,184,.2)!important;
  outline:none!important;cursor:pointer;
}
body.incallx .wps-shell input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(140deg,#ff5c7a,#ff3158);
  box-shadow:0 2px 8px rgba(255,49,88,.5),0 0 0 3px rgba(255,49,88,.14);
  cursor:pointer;border:0;
}
body.incallx .wps-shell input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:50%;
  background:linear-gradient(140deg,#ff5c7a,#ff3158);
  box-shadow:0 2px 8px rgba(255,49,88,.5);cursor:pointer;
}

/* --- renk kutulari --- */
body.incallx .wps-color-grid{gap:9px!important}
body.incallx .wps-color-grid input[type="color"]{
  height:34px!important;border:0!important;border-radius:9px!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.16)!important;cursor:pointer;
  padding:2px!important;background:transparent!important;
}

/* --- hazir temalar --- */
body.incallx .wps-presets{gap:7px!important}
body.incallx .wps-presets button{
  min-height:52px!important;border-radius:11px!important;border:0!important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14)!important;
  font-size:10.5px!important;font-weight:750!important;
  transition:box-shadow .16s,transform .16s;
}
body.incallx .wps-presets button:hover{transform:translateY(-1px)}
body.incallx .wps-presets button.is-active,
body.incallx .wps-presets button[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1.5px rgba(255,49,88,.6)!important;
}

/* --- onay kutusu --- */
body.incallx .wps-check{
  gap:8px!important;margin-top:9px!important;
  font-size:11px!important;color:#9aa7bb!important;
}
body.incallx .wps-check input[type="checkbox"]{
  width:16px!important;height:16px!important;accent-color:#ff3158!important;cursor:pointer;
}

/* --- alt aksiyonlar --- */
body.incallx .wps-actions{gap:8px!important;margin-top:11px!important}
body.incallx .wps-actions button{
  min-height:40px!important;padding:0 15px!important;border-radius:11px!important;
  border:0!important;font-size:12.5px!important;font-weight:750!important;
}
body.incallx .wps-status{font-size:11px!important;color:#7d8a9e!important}

/* --- katman listesi --- */
body.incallx .wps-layer-row{padding:9px!important;border-radius:11px!important}
body.incallx .wps-layer-title strong{font-size:11.5px!important}
body.incallx .wps-layer-title small{font-size:9.5px!important;color:#7d8a9e!important}

/* --- gecmis --- */
body.incallx .wps-history-list{gap:6px!important}
body.incallx .wps-history-help{font-size:10px!important;color:#6f7c93!important}

/* --- Studyo kartlari: acilir/kapanir --- */
body.incallx .wps-studio-card.is-collapsed>.wps-card-body{display:none!important}
body.incallx .wps-studio-card>header{
  user-select:none;transition:background .15s ease;border-radius:13px 13px 0 0;
}
body.incallx .wps-studio-card.is-collapsed>header{border-radius:13px}
body.incallx .wps-studio-card>header:hover{background:rgba(255,255,255,.035)}
body.incallx .wps-studio-card>header>i:last-child{
  margin-left:auto;color:#7d8a9e;font-size:16px;transition:color .15s ease;
}
body.incallx .wps-studio-card>header:hover>i:last-child{color:#dbe3ef}
/* surum gecmisi listesi cok uzarsa kendi icinde kaysin */
body.incallx .wps-history-card .wps-history-list{
  max-height:240px!important;overflow-y:auto!important;overscroll-behavior:contain;
}
body.incallx .wps-history-card .wps-history-list::-webkit-scrollbar{width:6px}
body.incallx .wps-history-card .wps-history-list::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.25)}

/* ════════════════════════════════════════════════════════════
   TAM PROFIL GIF MODU
   Mod data-scope="full" / "cover" ile isaretleniyor ama gorsel
   sadece .wps-preview-cover'a baglanmisti -> "Tam profil GIF"
   secilince hicbir sey degismiyordu.
   Ayrica GIF uzerinde yazilar kayboluyordu: okunurluk katmani +
   yazi golgeleri + daha opak cam satirlar eklendi.
   ════════════════════════════════════════════════════════════ */

/* ---------- ONIZLEME ---------- */

/* YALNIZCA KAPAK: gorsel sadece ust seritte */
body.incallx .wps-preview[data-scope="cover"] .wps-preview-cover{
  background-image:var(--wps-image,none)!important;
}
body.incallx .wps-preview[data-scope="cover"]{background-image:none!important}

/* TAM PROFIL: gorsel kartin TAMAMINI kaplar */
body.incallx .wps-preview[data-scope="full"]{
  position:relative!important;isolation:isolate!important;
  background-image:var(--wps-image,none)!important;
  background-size:cover!important;
  background-position:var(--wps-position,center)!important;
  background-repeat:no-repeat!important;
}
/* tam modda ust serit saydam olsun, gorsel altindan gorunsun */
body.incallx .wps-preview[data-scope="full"] .wps-preview-cover{
  background-image:none!important;background-color:transparent!important;
}
/* okunurluk perdesi: GIF ne olursa olsun yazilar okunsun */
body.incallx .wps-preview[data-scope="full"]::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
  border-radius:inherit!important;pointer-events:none!important;
  background:linear-gradient(180deg,
      rgba(8,11,17,.28) 0%,
      rgba(8,11,17,.60) 34%,
      rgba(8,11,17,.86) 100%)!important;
}
body.incallx .wps-preview[data-scope="full"]>*{position:relative!important;z-index:1!important}

/* tam modda yazilar one ciksin */
body.incallx .wps-preview[data-scope="full"] .wps-name-row>h3{
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.95)!important;
  font-weight:900!important;
}
body.incallx .wps-preview[data-scope="full"] .wps-preview-body>small{
  color:#dbe3ee!important;font-weight:650!important;
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95)!important;
}
/* satirlar: GIF uzerinde daha opak + bulanik cam */
body.incallx .wps-preview[data-scope="full"] .wps-profile-row{
  background:rgba(10,13,20,.62)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
  backdrop-filter:blur(14px) saturate(140%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
}
body.incallx .wps-preview[data-scope="full"] .wps-profile-row strong{
  color:#b7c3d4!important;text-shadow:0 1px 3px rgba(0,0,0,.7)!important;
}
body.incallx .wps-preview[data-scope="full"] .wps-profile-row>em,
body.incallx .wps-preview[data-scope="full"] .wps-np b{
  color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;
}
body.incallx .wps-preview[data-scope="full"] .wps-spotify{
  background:linear-gradient(118deg,rgba(20,90,50,.72),rgba(10,13,20,.66) 72%)!important;
}

/* ---------- GERCEK DM KARTI ---------- */

/* tam profil modunda kartin tamami gorsel */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-2!important;
  border-radius:inherit!important;
  background-image:var(--dmpp-cover,none)!important;
  background-size:cover!important;background-position:center!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  border-radius:inherit!important;pointer-events:none!important;
  background:linear-gradient(180deg,
      rgba(8,11,17,.28) 0%,
      rgba(8,11,17,.60) 34%,
      rgba(8,11,17,.86) 100%)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-cover{
  background-image:none!important;background-color:transparent!important;
}
/* yazilar one ciksin */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-name{
  font-weight:900!important;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.95)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-user{
  color:#dbe3ee!important;font-weight:650!important;
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row{
  background:rgba(10,13,20,.62)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
  backdrop-filter:blur(14px) saturate(140%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row strong{
  color:#b7c3d4!important;text-shadow:0 1px 3px rgba(0,0,0,.7)!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-row>em{
  color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;
}

/* ════════════════════════════════════════════════════════════
   SUNUCU PROFIL KARTI (.woo-profile-card-v2) — YENI TASARIM
   DM karti ile ayni gorsel dil. Studyo gorunumune bagli:
   data-scope + --wv2-cover degiskeni popover acilinca yaziliyor.
   ════════════════════════════════════════════════════════════ */

body.incallx .woo-profile-card-v2{
  position:relative!important;isolation:isolate!important;
  border-radius:20px!important;overflow:visible!important;border:0!important;
  background:linear-gradient(180deg,#12161e,#0a0d13 64%)!important;
  box-shadow:0 24px 56px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.09)!important;
}

/* kapak */
body.incallx .woo-profile-card-v2 .woo-profile-v2-cover{
  height:78px!important;min-height:78px!important;
  border-radius:20px 20px 0 0!important;overflow:hidden!important;
  background-size:cover!important;background-position:center!important;
}
body.incallx .woo-profile-card-v2.has-cover[data-scope="cover"] .woo-profile-v2-cover{
  background-image:var(--wv2-cover,none)!important;
}
/* TAM PROFIL: gorsel tum karti kaplar */
body.incallx .woo-profile-card-v2.has-cover[data-scope="full"]{
  background-image:var(--wv2-cover,none)!important;
  background-size:cover!important;background-position:center!important;
}
body.incallx .woo-profile-card-v2.has-cover[data-scope="full"] .woo-profile-v2-cover{
  background-image:none!important;background-color:transparent!important;
}
body.incallx .woo-profile-card-v2.has-cover[data-scope="full"]::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
  border-radius:inherit!important;pointer-events:none!important;
  background:linear-gradient(180deg,rgba(8,11,17,.28),rgba(8,11,17,.60) 34%,rgba(8,11,17,.86))!important;
}
body.incallx .woo-profile-card-v2.has-cover[data-scope="full"]>*{position:relative!important;z-index:1!important}

/* govde */
body.incallx .woo-profile-card-v2 .woo-profile-v2-body{
  padding:0 12px 12px!important;margin-top:-24px!important;position:relative!important;
}

/* logo + cevrimici noktasi */
body.incallx .woo-profile-card-v2 .woo-profile-v2-identity{
  display:block!important;text-align:left!important;margin:0!important;
}
body.incallx .woo-profile-card-v2 .wv2-avatar-wrap{
  position:relative!important;display:inline-block!important;
  width:54px!important;height:54px!important;margin:0 0 8px!important;
  padding:2.5px!important;border-radius:18px!important;
  background:linear-gradient(145deg,#ff3158,#8b5cf6 52%,#20e0c4)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.55)!important;
}
body.incallx .woo-profile-card-v2 .wv2-avatar-wrap>img,
body.incallx .woo-profile-card-v2 .woo-profile-v2-avatar{
  width:100%!important;height:100%!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:15.5px!important;object-fit:cover!important;
  display:block!important;box-shadow:none!important;
}
body.incallx .woo-profile-card-v2 .wv2-dot{
  position:absolute!important;right:-3px!important;bottom:-3px!important;
  width:15px!important;height:15px!important;border-radius:50%!important;
  background:#25d366!important;border:0!important;
  box-shadow:0 0 0 3.5px #0e1218,0 0 10px rgba(37,211,102,.7)!important;
}
/* isim + kullanici adi */
body.incallx .woo-profile-card-v2 .woo-profile-v2-name{
  margin:0!important;font-size:17px!important;font-weight:850!important;
  letter-spacing:-.03em!important;color:#fff!important;text-align:left!important;
}
body.incallx .woo-profile-card-v2 .wv2-user{
  display:block!important;margin:2px 0 0!important;
  font-size:11px!important;color:#8895a9!important;
}
/* Woo rozeti */
body.incallx .woo-profile-card-v2 .wv2-woo{
  place-items:center!important;width:32px!important;height:32px!important;
  margin:8px 0 0!important;border-radius:10px!important;
  background:linear-gradient(140deg,rgba(255,200,81,.22),rgba(255,49,88,.16) 62%,rgba(139,92,246,.16))!important;
  box-shadow:inset 0 0 0 1px rgba(255,200,81,.45),0 6px 16px rgba(255,160,60,.16)!important;
}
body.incallx .woo-profile-card-v2 .wv2-woo-mark{
  display:grid;place-items:center;width:21px;height:21px;border-radius:8px;
  background:linear-gradient(140deg,#ffd772,#ff9c3d);color:#3a2000;font-size:12.5px;
  box-shadow:0 2px 8px rgba(255,156,61,.45);
}

/* bilgi satirlari */
body.incallx .woo-profile-card-v2 .wv2-rows{
  display:flex!important;flex-direction:column!important;gap:4px!important;margin-top:8px!important;
}
body.incallx .woo-profile-card-v2 .wv2-row{
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:31px!important;padding:5px 10px!important;border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
body.incallx .woo-profile-card-v2 .wv2-row>i:first-child{
  flex:none!important;width:15px!important;font-size:15px!important;color:#8fa0b6!important;
}
body.incallx .woo-profile-card-v2 .wv2-country>i:first-child{color:#5aa9ff!important}
body.incallx .woo-profile-card-v2 .wv2-joined>i:first-child{color:#31d970!important}
body.incallx .woo-profile-card-v2 .wv2-seen>i:first-child{color:#ffb15c!important}
body.incallx .woo-profile-card-v2 .wv2-row>strong{
  flex:none!important;color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.incallx .woo-profile-card-v2 .wv2-row>em{
  flex:1 1 auto!important;margin-left:auto!important;text-align:right!important;
  color:#f0f4fa!important;font-size:12px!important;font-weight:700!important;font-style:normal!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* mevcut bolumler ayni dile getirildi */
body.incallx .woo-profile-card-v2 .woo-profile-v2-mutual-servers,
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections,
body.incallx .woo-profile-card-v2 .woo-profile-v2-roles{
  margin:4px 0 0!important;padding:7px 10px!important;border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-mutual-servers>small,
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections>small,
body.incallx .woo-profile-card-v2 .woo-profile-v2-role-title{
  color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections{
  background:linear-gradient(118deg,rgba(30,215,96,.14),rgba(255,255,255,.018) 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.25)!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections>small{color:#31d970!important}

/* kapak butonlari: sag ust, cam */
body.incallx .woo-profile-card-v2 .woo-profile-v2-cover-actions{
  top:9px!important;right:9px!important;gap:6px!important;z-index:5!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-circle{
  width:30px!important;height:30px!important;border-radius:10px!important;border:0!important;
  background:rgba(6,9,14,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;
  color:#e6ecf5!important;font-size:15px!important;
}

/* TAM PROFIL modunda yazilar one ciksin */
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-name{
  font-weight:900!important;text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.95)!important;
}
body.incallx .woo-profile-card-v2[data-scope="full"] .wv2-user{
  color:#dbe3ee!important;text-shadow:0 1px 10px rgba(0,0,0,.85)!important;
}
body.incallx .woo-profile-card-v2[data-scope="full"] .wv2-row,
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-mutual-servers,
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-roles{
  background:rgba(10,13,20,.62)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
  backdrop-filter:blur(14px) saturate(140%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;
}
body.incallx .woo-profile-card-v2[data-scope="full"] .wv2-row>em{
  color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.8)!important;
}

/* --- SUNUCU KARTI: ekrana sigsin, tasmasin --- */
body.incallx .popover.woo-profile-popover-v2{
  max-height:none;
}
body.incallx .popover.woo-profile-popover-v2 .popover-body{
  max-height:none;
  overflow-y:auto!important;overscroll-behavior:contain;
  border-radius:20px!important;
}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar{width:6px}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.28)}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar-track{background:transparent}
/* kart kendi genisligini asmasin */
body.incallx .woo-profile-card-v2{
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;
}
body.incallx .woo-profile-card-v2 *{max-width:100%!important;box-sizing:border-box!important}

/* ════════════════════════════════════════════════════════════
   SUNUCU KARTI — ONIZLEMEYLE BIREBIR + EKRANA SIGMA
   Sorun: govde ortalanmis geliyordu -> isim ortada, satirlar
   icerik kadar dar kutular halindeydi. Ayrica kart ekrani asiyordu.
   ════════════════════════════════════════════════════════════ */

/* --- ekrana sigsin: govde kendi icinde kaysin --- */
body.incallx .popover.woo-profile-popover-v2 .popover-body{
  max-height:none;overflow:hidden!important;
  padding:0!important;border-radius:20px!important;
}
body.incallx .woo-profile-card-v2{
  display:flex!important;flex-direction:column!important;
  max-height:none;overflow:hidden!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-cover{flex:0 0 auto!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-body{
  flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overscroll-behavior:contain;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-body::-webkit-scrollbar{width:6px}
body.incallx .woo-profile-card-v2 .woo-profile-v2-body::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(148,163,184,.28)}
body.incallx .woo-profile-card-v2 .woo-profile-v2-body::-webkit-scrollbar-track{background:transparent}
/* mesaj yazma cubugu altta sabit kalsin */
body.incallx .woo-profile-card-v2 .woo-profile-v2-quick-message,
body.incallx .woo-profile-card-v2>.woo-profile-v2-actions{flex:0 0 auto!important}

/* --- ONIZLEMEYLE AYNI: sola hizali, tam genislik satirlar --- */
body.incallx .woo-profile-card-v2 .woo-profile-v2-body,
body.incallx .woo-profile-card-v2 .woo-profile-v2-identity{
  text-align:left!important;align-items:flex-start!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-name,
body.incallx .woo-profile-card-v2 .wv2-user{
  text-align:left!important;width:100%!important;
}
body.incallx .woo-profile-card-v2 .wv2-rows{width:100%!important}
body.incallx .woo-profile-card-v2 .wv2-row{
  width:100%!important;justify-content:flex-start!important;
}
/* rozetler ortada kalmasin, sola hizali izgara */
body.incallx .woo-profile-card-v2 .woo-profile-v2-badges{
  display:flex!important;flex-wrap:wrap!important;gap:6px!important;
  justify-content:flex-start!important;width:100%!important;margin:8px 0 0!important;
}
/* bolumler tam genislik */
body.incallx .woo-profile-card-v2 .woo-profile-v2-mutual-servers,
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections,
body.incallx .woo-profile-card-v2 .woo-profile-v2-roles{
  width:100%!important;text-align:left!important;
}

/* --- SUNUCU KARTI: sola hizalama kesin (bir kural eziyordu) --- */
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-identity,
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-body{
  display:block!important;text-align:left!important;justify-items:start!important;
}
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-name{
  display:block!important;width:100%!important;text-align:left!important;
  margin:0!important;padding:0!important;
}
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .wv2-user{
  display:block!important;width:100%!important;text-align:left!important;
}
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-badges{
  justify-content:flex-start!important;text-align:left!important;
}

/* --- Whitoo Rozetleri bolumu (yeni) --- */
body.incallx .woo-profile-card-v2 .wv2-awards{
  width:100%!important;margin:4px 0 0!important;padding:8px 10px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
body.incallx .woo-profile-card-v2 .wv2-awards>strong{
  display:block!important;margin-bottom:6px!important;
  color:#6f7c93!important;font-size:8.5px!important;font-weight:850!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.incallx .woo-profile-card-v2 .wv2-awards>span{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important;
}
body.incallx .woo-profile-card-v2 .wv2-awards>span i{
  display:grid!important;place-items:center!important;height:32px!important;
  border-radius:9px!important;font-size:15px!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
}
body.incallx .woo-profile-card-v2 .wv2-awards>span i:nth-child(1){color:#ffc851!important}
body.incallx .woo-profile-card-v2 .wv2-awards>span i:nth-child(2){color:#c084fc!important}
body.incallx .woo-profile-card-v2 .wv2-awards>span i:nth-child(3){color:#5aa9ff!important}
body.incallx .woo-profile-card-v2 .wv2-awards>span i:nth-child(4){color:#ff6b8a!important}

/* --- SUNUCU KARTI: kaydirma popover GOVDESINDE (kesin cozum) ---
   Kart icinde flex+overflow zinciri calismadi; kaydirmayi dogrudan
   .popover-body ustlenir, kart dogal yuksekliginde kalir. */
body.incallx .popover.woo-profile-popover-v2 .popover-body{
  overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain;
}
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2{
  display:block!important;max-height:none!important;overflow:visible!important;
}
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-body{
  max-height:none!important;overflow:visible!important;
}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar{width:6px}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar-thumb{
  border-radius:99px;background:rgba(148,163,184,.3);
}
body.incallx .popover.woo-profile-popover-v2 .popover-body::-webkit-scrollbar-track{background:transparent}

/* ════════════════════════════════════════════════════════════
   TAM PROFIL GIF: kapak seridinin karartmasi otomatik kalksin
   .active-user-cover:after ve benzeri koyu gradyanlar, tam GIF
   modunda ust bantta siyahlik olusturuyordu. Bu modda hepsi
   saydamlasir; okunurluk zaten kartin genel perdesiyle saglanir.
   ════════════════════════════════════════════════════════════ */

/* --- DM karti --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-cover,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .active-user-cover{
  background-color:transparent!important;background-image:none!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-cover:after,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-cover:before,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .active-user-cover:after,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .active-user-cover:before{
  content:none!important;display:none!important;background:none!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .active-user-cover-shine{
  display:none!important;
}

/* --- Sunucu karti --- */
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-cover{
  background-color:transparent!important;background-image:none!important;
}
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-cover:after,
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-cover:before{
  content:none!important;display:none!important;background:none!important;
}

/* --- Studyo onizlemesi --- */
body.incallx .wps-preview[data-scope="full"] .wps-preview-cover{
  background-color:transparent!important;background-image:none!important;
}
body.incallx .wps-preview[data-scope="full"] .wps-preview-cover:after,
body.incallx .wps-preview[data-scope="full"] .wps-preview-cover:before{
  content:none!important;display:none!important;background:none!important;
}

/* ════════════════════════════════════════════════════════════
   TAM GIF: kapak ile govde arasindaki CIZGI (dikis) kaldirildi
   Sebep: gorsel ::before katmaninda z-index:-2 ile duruyordu,
   yani kartin KENDI opak zemininin ARKASINDA kaliyordu. Sadece
   kapak seridinde gorunuyor, govdede gradyan basiyordu -> arada
   yatay bir cizgi olusuyordu. Artik gorsel dogrudan karta basilir,
   govde ve kapak tamamen saydam olur.
   ════════════════════════════════════════════════════════════ */

/* --- DM karti --- */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover{
  background-image:var(--dmpp-cover,none)!important;
  background-size:cover!important;background-position:center!important;
  background-repeat:no-repeat!important;background-color:transparent!important;
}
/* eski arka katman iptal */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover::before{
  content:none!important;display:none!important;
}
/* okunurluk perdesi one alindi */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover::after{
  content:""!important;display:block!important;
  position:absolute!important;inset:0!important;z-index:0!important;
  border-radius:inherit!important;pointer-events:none!important;
  background:linear-gradient(180deg,rgba(8,11,17,.26),rgba(8,11,17,.58) 34%,rgba(8,11,17,.86))!important;
}
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"].has-cover>*{
  position:relative!important;z-index:1!important;
}
/* govde ve kapak saydam -> dikis yok */
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-body,
body.incallx .right-panel .user-info-panel .dm-premium-profile-card[data-scope="full"] .dmpp-cover{
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;
}

/* --- Sunucu karti --- */
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-body,
body.incallx .woo-profile-card-v2[data-scope="full"] .woo-profile-v2-cover{
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;
}
body.incallx .woo-profile-card-v2[data-scope="full"].has-cover{background-color:transparent!important}

/* --- Studyo onizlemesi --- */
body.incallx .wps-preview[data-scope="full"] .wps-preview-body,
body.incallx .wps-preview[data-scope="full"] .wps-preview-cover{
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;
}

/* --- kapak seridinde hicbir cerceve/dikis olmasin (her modda) --- */
body.incallx .dm-premium-profile-card .dmpp-cover,
body.incallx .woo-profile-card-v2 .woo-profile-v2-cover,
body.incallx .wps-preview .wps-preview-cover{
  border:0!important;border-bottom:0!important;outline:0!important;
}

/* --- Sunucu karti menusu: kirpilmasin, rahat tiklansin ---
   Karti ekrana sigdirmak icin konan overflow:hidden, acilir menuyu
   de kesiyordu (ikinci secenek gorunmuyor, tiklama alani daraliyordu).
   Menu artik 'fixed' stratejiyle konumlaniyor ve kirpma disinda. */
body.incallx .woo-profile-v2-menu,
body.incallx .woo-profile-card-v2 .dropdown-menu{
  position:fixed!important;z-index:20000!important;
  min-width:186px!important;padding:6px!important;
  border:0!important;border-radius:13px!important;
  background:#151a24!important;
  box-shadow:0 22px 50px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.1)!important;
}
body.incallx .woo-profile-v2-menu .dropdown-item,
body.incallx .woo-profile-card-v2 .dropdown-menu .dropdown-item{
  display:flex!important;align-items:center!important;gap:9px!important;
  width:100%!important;min-height:38px!important;padding:8px 11px!important;
  border:0!important;border-radius:9px!important;background:transparent!important;
  color:#dbe3ef!important;font-size:12.5px!important;font-weight:650!important;
  text-align:left!important;cursor:pointer!important;
}
body.incallx .woo-profile-v2-menu .dropdown-item:hover,
body.incallx .woo-profile-card-v2 .dropdown-menu .dropdown-item:hover{
  background:rgba(255,255,255,.08)!important;color:#fff!important;
}
body.incallx .woo-profile-v2-menu .dropdown-item i{flex:none!important;font-size:16px!important}
body.incallx .woo-profile-v2-menu .dropdown-item.woo-profile-v2-block i,
body.incallx .woo-profile-card-v2 .dropdown-menu .init-report i{color:#ff6b8a!important}

/* --- Kapak aksiyonlari: uc dogrudan buton (acilir menu kaldirildi) ---
   Menu, karti ekrana sigdiran overflow/transform baglami icinde
   kaldigi icin hem kirpiliyor hem tiklanamiyordu. Artik menu yok:
   arkadas ekle / engelle / bildir dogrudan butonlar. */
body.incallx .woo-profile-card-v2 .woo-profile-v2-cover-actions{
  display:flex!important;align-items:center!important;gap:6px!important;
  position:absolute!important;top:9px!important;right:9px!important;z-index:8!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-circle{
  width:30px!important;height:30px!important;min-height:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:10px!important;cursor:pointer!important;
  background:rgba(6,9,14,.58)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;
  color:#e6ecf5!important;font-size:15px!important;line-height:1!important;
  transition:background .16s ease,transform .16s ease,color .16s ease;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-circle:hover{
  background:rgba(6,9,14,.85)!important;transform:translateY(-1px)!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-circle.woo-profile-v2-block:hover{color:#ff8296!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-circle.init-report:hover{color:#ffb15c!important}

/* ════════════════════════════════════════════════════════════
   SUNUCU KARTI: basibos ikonlar kaldirildi + dogru sira
   .woo-profile-v2-badges (otomatik rozetler) kartin ortasinda
   kapsayicisiz duruyordu ve "Whitoo Rozetleri" bolumuyle
   tekrar ediyordu -> gizlendi.
   Sira DM karti ve onizleme ile ayni yapildi.
   ════════════════════════════════════════════════════════════ */

/* basibos otomatik rozet satiri gizli */
body.incallx .woo-profile-card-v2 .woo-profile-v2-badges{display:none!important}

/* govde flex kolon -> sira uygulanabilir, hizalama sola kalir */
body.incallx .popover.woo-profile-popover-v2 .woo-profile-card-v2 .woo-profile-v2-body{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
}
body.incallx .woo-profile-card-v2 .woo-profile-v2-identity{order:0!important}
body.incallx .woo-profile-card-v2 .wv2-rows{order:1!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-roles{order:2!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-mutual-servers{order:3!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-connections{order:4!important}
body.incallx .woo-profile-card-v2 .wv2-awards{order:5!important}
body.incallx .woo-profile-card-v2 .woo-profile-v2-about,
body.incallx .woo-profile-card-v2 .woo-profile-v2-quick-message{order:6!important}

/* Unified Woo membership entry point */
.wps-lock{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:13px!important;margin:12px 14px 2px!important;padding:12px 13px!important;border:1px solid rgba(255,71,105,.3)!important;border-radius:14px!important;background:linear-gradient(110deg,rgba(255,49,88,.11),rgba(139,92,246,.07) 56%,rgba(32,224,196,.05))!important;box-shadow:0 10px 30px rgba(0,0,0,.16)!important}
.wps-lock-icon{width:38px;height:38px;display:grid!important;place-items:center;border:1px solid rgba(255,78,108,.3);border-radius:11px;background:rgba(255,49,88,.1);color:#ff5571;font-size:18px}
.wps-lock>div{display:grid;gap:3px;min-width:0}.wps-lock>div strong{color:#f5f7fb;font-size:12px;font-weight:800}.wps-lock>div span{color:#929eb1;font-size:10px;line-height:1.45}
.wps-unlock-woo{min-width:174px;height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid rgba(255,82,112,.55);border-radius:11px;background:linear-gradient(135deg,#ff3158,#d81b62);box-shadow:0 8px 22px rgba(255,49,88,.22);color:#fff!important;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.wps-unlock-woo:hover{transform:translateY(-1px);box-shadow:0 11px 27px rgba(255,49,88,.3)}.wps-unlock-woo>i:first-child{font-size:15px}.wps-unlock-woo>i:last-child{font-size:13px;opacity:.8}
@media(max-width:700px){.wps-lock{grid-template-columns:40px minmax(0,1fr)!important}.wps-unlock-woo{grid-column:1/-1;width:100%;min-width:0}.wps-lock-icon{width:36px;height:36px}}

/* User-created GIF/sticker layers must stay above the card content. The
   stage itself is click-through, so profile controls remain usable. */
.wps-preview>.wps-layer-stage,.woo-profile-appearance>.woo-profile-layer-stage{z-index:12!important;pointer-events:none!important}
.wps-preview>.wps-layer-stage .wps-layer{pointer-events:auto}

/* ============================================================
   2026-08-11 — iki duzeltme

   1) TEMA SIMGESI "Yok". Listede kapatma secenegi yoktu; simge her zaman
      cizilirdi. Deger 'none' ise simge gosterilmez.

   2) AVATAR YATAY KONUMU ONIZLEMEDE CALISMIYORDU.
      Gercek kart --woo-avatar-x degiskenini kullaniyor ve calisiyor; onizleme
      ise JS'te --wps-avatar-x kuruyor ama bu degiskeni TUKETEN hicbir kural
      yoktu. Yani kaydirici oynatiliyor, onizlemede hicbir sey degismiyordu.
      Asagidaki kural gercek karttaki davranisin aynisini onizlemeye tasir.
   ============================================================ */
[data-theme-icon="none"] .wps-theme-symbol,
[data-theme-icon="none"] .woo-theme-symbol,
.wps-preview[data-theme-icon="none"] .wps-theme-symbol,
.woo-profile-appearance[data-theme-icon="none"] .woo-theme-symbol{
  display:none!important;
}

/* ASIL NEDEN: onizleme icin zaten bir kural vardi --
     .wps-preview-body>img{left:var(--wps-avatar-x,20%);transform:translateX(-50%)}
   ama incallx tasarimi avatari .wps-avatar-wrap icine aldi. Boylece img artik
   .wps-preview-body'nin DOGRUDAN cocugu degil ve o kural hicbir seye uymuyor.
   Olcum: eskiKuralUyuyorMu=false, katman img'i wrap icinde.

   Cozumu kapsayiciya tasiyoruz. margin-left DEGIL 'left' kullaniyoruz: yukaridaki
   'body.incallx .wps-preview .wps-avatar-wrap' kurali margin kisayolunu
   !important ile kuruyor (margin:0 0 8px) ve ozgulluk savasini kaybediyoruz;
   'left' ise o kuralda hic tanimli degil (olcum: left=auto), yani catisma yok.
   Ayrica 'left' akisi bozmaz -- kardeslerin yerlesimi aynen kalir.
   left+translateX(-50%) ikilisi gercek karttaki davranisin birebir aynisi. */
.wps-preview .wps-avatar-wrap{
  /* position'i burada da kuruyoruz: incallx disi bir baglamda wrap 'static'
     kalirsa 'left' islemez ve translateX(-50%) tek basina avatari
     yari genisligi kadar sola kaydirirdi. */
  position:relative!important;
  left:var(--wps-avatar-x,20%)!important;
  transform:translateX(-50%)!important;
}

/* ============================================================
   HAREKETLI KATMANLARDA GIF GORUNMUYORDU.

   Neden: su uc toptan kural kartin HER dogrudan cocugunu relative yapiyor
   ve katman sahnesini de yakaliyor --
     .woo-profile-appearance>*                                  (0,1,0)
     body.incallx .wps-preview[data-scope="full"]>*             (0,3,1) !important
     body.incallx .woo-profile-card-v2.has-cover[...]>*         (0,4,1) !important
   Sahne 'position:absolute;inset:0' olmak ZORUNDA. Relative olunca cocuklari
   absolute oldugu icin sahnenin yuksekligi 0'a duser, 'overflow:hidden' de
   GIF'i tamamen kirpar. Ayni kurallar z-index:1 dayatarak yazarin
   'z-index:12' niyetini de eziyordu.

   Olcum (panel ACIKKEN): sahne h=0 z=1; GIF 338x209 ve yuklendi=true,
   visible, opacity 1 -- ama elementFromPoint sahneyi dondurmuyordu.
   Yani gorsel sagliklidir, sorun tamamen kirpmaydi.

   Asagidaki seciciler her uc kurali da ozgullukte gecer (sirasiyla
   0,2,0 / 0,4,1 / 0,5,1) ve sahnenin dogru konumlanmasini geri verir. */
.wps-preview>.wps-layer-stage,
.woo-profile-appearance>.woo-profile-layer-stage,
body.incallx .wps-preview[data-scope="full"]>.wps-layer-stage,
body.incallx .woo-profile-card-v2.has-cover[data-scope="full"]>.woo-profile-layer-stage{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
}

/* ===== whitoo-settings-modal.css ===== */
.wsm-shell{position:fixed;inset:0;z-index:2147483000;display:none;place-items:center;padding:22px;font-family:inherit;isolation:isolate}
.wsm-shell.is-open{display:grid}
.wsm-backdrop{position:absolute;inset:0;border:0;background:rgba(3,6,14,.82);backdrop-filter:blur(12px);cursor:default}
.wsm-dialog{position:relative;width:min(1040px,calc(100vw - 44px));height:min(740px,calc(100vh - 44px));display:grid;grid-template-rows:62px minmax(0,1fr);overflow:hidden;border:1px solid rgba(148,163,184,.22);border-radius:17px;background:#090f1a;box-shadow:0 30px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,54,92,.06)}
.wsm-header{display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid rgba(148,163,184,.15);background:linear-gradient(120deg,rgba(255,50,85,.1),rgba(13,22,36,.98) 30%,rgba(15,23,42,.98))}
.wsm-header>img{width:38px;height:38px;object-fit:cover;border-radius:13px;border:2px solid rgba(255,54,92,.75);box-shadow:0 0 20px rgba(255,54,92,.18)}
.wsm-header>div{display:grid;gap:1px}.wsm-header strong{font-size:17px;line-height:1.25;color:#f8fafc}.wsm-header span{font-size:12px;color:#94a3b8}
.wsm-header>button{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:12px;background:transparent;color:#a8b2c2;font-size:23px;transition:.18s ease}
.wsm-header>button:hover{color:#fff;border-color:rgba(255,54,92,.36);background:rgba(255,54,92,.12);transform:rotate(3deg)}
.wsm-body{min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr)}
body.whitoo-settings-open{overflow:hidden!important}
body.whitoo-settings-open>.bottom-message-form,body.whitoo-settings-open .room-editor,body.whitoo-settings-open .private-editor,body.whitoo-settings-open .chat-input-row,body.whitoo-settings-open .message-form,body.whitoo-settings-open .editor-controller:not(.wsm-shell *){visibility:hidden!important;pointer-events:none!important}

.wsm-shell .sidebar-profile{position:relative!important;inset:auto!important;z-index:1!important;display:flex!important;width:auto!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:0!important;padding:0!important;flex-direction:column;background:linear-gradient(180deg,#0c1320,#090f19)!important;border:0!important;border-right:1px solid rgba(148,163,184,.14)!important;box-shadow:none!important}
.wsm-shell .sidebar-profile .disc-header{display:none!important}
.wsm-shell .sidebar-profile .disc-cat-list{height:100%!important;min-height:0;overflow:hidden;padding:0!important}
.wsm-shell .sidebar-profile #v-profile-tab{height:100%;overflow-y:auto;overscroll-behavior:contain;margin:0!important;padding:18px 14px 22px;gap:3px;scrollbar-width:thin;scrollbar-color:#344156 transparent}
.wsm-nav-label{display:block;padding:15px 12px 6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#64748b}.wsm-nav-label:first-child{padding-top:3px}
.wsm-shell .sidebar-profile .v-profile-tab-item{position:relative!important;display:flex!important;align-items:center!important;gap:11px!important;min-height:40px!important;margin:0!important;padding:9px 11px!important;border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#aeb8c8!important;font-size:13px!important;font-weight:600!important;line-height:1.2!important;text-align:left!important;text-decoration:none!important;box-shadow:none!important;transform:none!important;transition:.16s ease!important}
.wsm-shell .sidebar-profile .v-profile-tab-item::before{display:none!important}
.wsm-shell .sidebar-profile .v-profile-tab-item i{width:19px!important;min-width:19px!important;margin:0!important;color:#7f8da3!important;font-size:18px!important;text-align:center!important}
.wsm-shell .sidebar-profile .v-profile-tab-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsm-shell .sidebar-profile .v-profile-tab-item:hover{border-color:rgba(148,163,184,.13)!important;background:rgba(148,163,184,.07)!important;color:#f1f5f9!important}
.wsm-shell .sidebar-profile .v-profile-tab-item.active{border-color:rgba(255,58,92,.55)!important;background:linear-gradient(90deg,rgba(255,48,82,.2),rgba(217,44,138,.14))!important;color:#fff!important;box-shadow:inset 3px 0 #ff365c,0 8px 22px rgba(255,32,73,.08)!important}
.wsm-shell .sidebar-profile .v-profile-tab-item.active i{color:#ff4969!important}
.wsm-shell .sidebar-profile .wsm-logout{margin-top:15px!important;border-top:1px solid rgba(148,163,184,.12)!important;border-radius:0!important;padding-top:16px!important;color:#ff6b79!important}.wsm-shell .sidebar-profile .wsm-logout i{color:#ff5368!important}

.wsm-shell #main-profile{position:relative!important;inset:auto!important;display:block!important;visibility:visible!important;width:auto!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;opacity:1!important;transform:none!important;background:#0a101b!important;overflow:hidden!important}
.wsm-shell #main-profile>.page-content-wrapper{height:100%!important;min-height:0!important;overflow:hidden!important;background:transparent!important}
.wsm-shell #main-profile .topbar{display:none!important}
.wsm-shell #v-profile-tabContent{height:100%!important;overflow-y:auto!important;overscroll-behavior:contain;padding:24px 26px 34px!important;scrollbar-width:thin;scrollbar-color:#344156 transparent;background:radial-gradient(circle at 88% 0,rgba(32,193,213,.06),transparent 30%),radial-gradient(circle at 28% 0,rgba(255,48,82,.06),transparent 26%),#0a101b!important}
.wsm-shell #v-profile-tabContent>.tab-pane{max-width:100%!important;margin:0 auto!important}
.wsm-shell #v-profile-tabContent .container{max-width:100%!important}
.wsm-shell #v-profile-tabContent .card,.wsm-shell #v-profile-tabContent .profile-inline-panel,.wsm-shell #v-profile-tabContent .wps-shell{border-color:rgba(148,163,184,.17)!important;border-radius:16px!important;background:#0d1522!important;box-shadow:0 16px 38px rgba(0,0,0,.18)!important}
.wsm-shell #v-profile-tabContent .card-header,.wsm-shell #v-profile-tabContent .card-footer{border-color:rgba(148,163,184,.12)!important;background:rgba(15,23,38,.8)!important}
.wsm-shell #v-profile-tabContent h1,.wsm-shell #v-profile-tabContent h2,.wsm-shell #v-profile-tabContent h3,.wsm-shell #v-profile-tabContent h4,.wsm-shell #v-profile-tabContent .card-title{color:#f8fafc!important}
.wsm-shell #v-profile-tabContent .form-control,.wsm-shell #v-profile-tabContent .form-select{border-color:rgba(148,163,184,.2)!important;border-radius:10px!important;background:#09111d!important;color:#e5edf8!important}

.wsm-placeholder{display:none;min-height:100%;place-items:center;align-content:center;padding:50px;text-align:center}.wsm-placeholder.is-active{display:grid}
.wsm-placeholder-icon{width:70px;height:70px;display:grid;place-items:center;margin-bottom:18px;border:1px solid rgba(255,61,94,.45);border-radius:22px;background:linear-gradient(145deg,rgba(255,48,83,.2),rgba(17,201,210,.08));color:#ff4a69;font-size:31px;box-shadow:0 18px 38px rgba(255,32,73,.1)}
.wsm-placeholder>span{font-size:10px;font-weight:800;letter-spacing:.18em;color:#ff536f}.wsm-placeholder h2{margin:9px 0 8px;color:#f8fafc;font-size:25px}.wsm-placeholder p{max-width:520px;margin:0;color:#8f9bad;font-size:14px;line-height:1.65}.wsm-placeholder em{margin-top:18px;padding:7px 12px;border:1px solid rgba(148,163,184,.16);border-radius:999px;background:#101927;color:#aeb8c8;font-size:11px;font-style:normal}

.wsm-settings-page{display:none;max-width:940px;min-height:100%;margin:0 auto;padding:4px 0 30px}.wsm-settings-page.is-active{display:block}
.wsm-settings-page>form>header{display:flex;align-items:center;gap:17px;margin-bottom:20px;padding:4px 2px 18px;border-bottom:1px solid rgba(148,163,184,.13)}
.wsm-page-icon{width:58px;height:58px;display:grid;place-items:center;flex:0 0 58px;border:1px solid rgba(255,55,91,.42);border-radius:17px;background:linear-gradient(145deg,rgba(255,48,83,.2),rgba(16,190,204,.07));color:#ff4968;font-size:25px;box-shadow:0 15px 34px rgba(255,32,73,.09)}
.wsm-settings-page header>div:last-child{min-width:0}.wsm-settings-page header span{color:#ff506d;font-size:9px;font-weight:900;letter-spacing:.16em}.wsm-settings-page header h2{margin:4px 0 3px!important;color:#f8fafc;font-size:24px!important;line-height:1.2}.wsm-settings-page header p{margin:0;color:#8996a9;font-size:12.5px;line-height:1.5}
.wsm-settings-card{overflow:hidden;border:1px solid rgba(148,163,184,.16);border-radius:17px;background:linear-gradient(180deg,rgba(15,23,38,.92),rgba(10,17,29,.96));box-shadow:0 18px 44px rgba(0,0,0,.16)}
.wsm-setting-row,.wsm-setting-control{min-height:72px;display:flex;align-items:center;gap:22px;margin:0;padding:15px 18px;border-bottom:1px solid rgba(148,163,184,.11);cursor:pointer}.wsm-setting-row:last-child,.wsm-setting-control:last-child{border-bottom:0}
.wsm-setting-row>span,.wsm-setting-control>span{min-width:0;display:grid;gap:4px;flex:1}.wsm-setting-row strong,.wsm-setting-control strong{color:#edf3fb;font-size:13px;font-weight:750}.wsm-setting-row small,.wsm-setting-control small{color:#748196;font-size:11px;line-height:1.4}
.wsm-setting-row input{position:absolute;opacity:0;pointer-events:none}.wsm-setting-row>i{position:relative;width:44px;height:24px;flex:0 0 44px;border:1px solid rgba(148,163,184,.28);border-radius:999px;background:#222c3c;transition:.18s}.wsm-setting-row>i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#9aa6b6;transition:.18s}.wsm-setting-row input:checked+i{border-color:#ff3b5f;background:linear-gradient(90deg,#ff3157,#da2f91)}.wsm-setting-row input:checked+i::after{left:23px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.35)}
.wsm-setting-control>select{width:min(260px,38%);height:39px;padding:0 36px 0 12px;border:1px solid rgba(148,163,184,.2);border-radius:10px;background:#09111d;color:#e8eef7;font-size:12px;outline:0}.wsm-setting-control>select:focus{border-color:rgba(255,55,91,.55);box-shadow:0 0 0 3px rgba(255,55,91,.08)}
.wsm-setting-control>div{width:min(310px,42%);display:flex;align-items:center;gap:12px}.wsm-setting-control input[type=range]{width:100%;height:5px;accent-color:#ff365c}.wsm-setting-control output{min-width:42px;color:#aeb9c9;font-size:11px;text-align:right}
.wsm-settings-page>form>footer{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:18px}.wsm-settings-page footer>span{margin-right:auto;color:#ff7285;font-size:12px}.wsm-settings-page footer>span.is-success{color:#28d9a2}.wsm-settings-page footer button{min-height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 17px;border:1px solid rgba(255,84,113,.6);border-radius:11px;background:linear-gradient(135deg,#ff3157,#d7298e);color:#fff;font-size:12px;font-weight:800;box-shadow:0 10px 24px rgba(255,35,83,.18)}.wsm-settings-page footer button:disabled{opacity:.55;cursor:wait}

.wsm-account-home{max-width:100%!important}.wsm-account-page{max-width:760px;margin:0 auto}.wsm-account-page>header{margin-bottom:15px}.wsm-account-page>header>span{color:#ff506d;font-size:9px;font-weight:900;letter-spacing:.17em}.wsm-account-page>header h2{margin:4px 0 2px!important;color:#f8fafc!important;font-size:21px!important}.wsm-account-page>header p{margin:0;color:#7f8b9d;font-size:11.5px}
.wsm-account-card{overflow:hidden;border:1px solid rgba(148,163,184,.17);border-radius:15px;background:#0c1421;box-shadow:0 15px 38px rgba(0,0,0,.18)}.wsm-account-cover{height:96px;background-position:center!important;background-size:cover!important;background-color:#1d2940}.wsm-account-person{position:relative;min-height:72px;display:flex;align-items:center;gap:12px;padding:0 15px 0 91px;border-bottom:1px solid rgba(148,163,184,.13)}.wsm-account-person>img{position:absolute;left:17px;top:-35px;width:62px;height:62px;object-fit:cover;border:4px solid #0c1421;border-radius:50%;background:#111c2c;box-shadow:0 0 0 2px #ff365c}.wsm-account-person>div{display:grid;gap:2px}.wsm-account-person strong{color:#f8fafc;font-size:15px}.wsm-account-person span{color:#8490a3;font-size:10px}.wsm-account-person>button{margin-left:auto;min-height:31px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:1px solid rgba(148,163,184,.23);border-radius:8px;background:#17202f;color:#dce3ed;font-size:10px;font-weight:700}.wsm-account-person>button:hover,.wsm-account-rows button:hover{border-color:rgba(255,54,92,.45);color:#fff}
.wsm-account-rows{padding:7px 15px 10px}.wsm-account-rows>div{min-height:42px;display:grid;grid-template-columns:20px 115px minmax(0,1fr) 72px;align-items:center;gap:8px;border-bottom:1px solid rgba(148,163,184,.1)}.wsm-account-rows>div:last-child{border-bottom:0}.wsm-account-rows i{color:#97a3b5;font-size:16px}.wsm-account-rows span{color:#8490a2;font-size:10.5px}.wsm-account-rows strong{overflow:hidden;color:#d7dfea;font-size:10.5px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.wsm-account-rows button{height:27px;border:1px solid rgba(148,163,184,.2);border-radius:7px;background:#17202f;color:#cbd4e1;font-size:9.5px;font-weight:700}
.wsm-security-section{margin-top:17px}.wsm-security-section>h3{margin:0 0 9px!important;color:#f8fafc!important;font-size:13px!important}.wsm-security-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.wsm-security-grid>article{min-width:0;min-height:150px;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 31px;gap:10px;padding:13px;border:1px solid rgba(148,163,184,.16);border-radius:13px;background:#0d1522}.wsm-security-grid>article>i{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(39,210,156,.32);border-radius:50%;background:rgba(39,210,156,.08);color:#31dca5;font-size:20px}.wsm-security-grid>article:nth-child(2)>i{border-color:rgba(60,150,255,.35);background:rgba(60,150,255,.09);color:#58a8ff}.wsm-security-grid>article:nth-child(3)>i{border-color:rgba(169,93,255,.35);background:rgba(169,93,255,.09);color:#af74ff}.wsm-security-grid article>div{min-width:0;display:grid;align-content:start;gap:2px}.wsm-security-grid span{color:#f0f4fa;font-size:10.5px;font-weight:700}.wsm-security-grid strong{color:#a875ff;font-size:10px}.wsm-security-grid strong.is-good{color:#35d7a2}.wsm-security-grid strong.is-warn{color:#f7a84b}.wsm-security-grid small{margin-top:4px;color:#6e7b8e;font-size:8.5px;line-height:1.35}.wsm-security-grid button{grid-column:1/-1;height:31px;border:1px solid rgba(148,163,184,.17);border-radius:7px;background:#17202f;color:#d5dde9;font-size:9.5px;font-weight:700}

@media(max-width:900px){.wsm-shell{padding:0}.wsm-dialog{width:100vw;height:100dvh;border:0;border-radius:0;grid-template-rows:64px minmax(0,1fr)}.wsm-body{grid-template-columns:230px minmax(0,1fr)}.wsm-shell #v-profile-tabContent{padding:18px!important}.wsm-security-grid{grid-template-columns:1fr}.wsm-account-rows>div{grid-template-columns:20px 95px minmax(0,1fr) 64px}}
@media(max-width:680px){.wsm-body{grid-template-columns:1fr}.wsm-shell .sidebar-profile{position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:min(82vw,300px)!important;z-index:4!important;box-shadow:22px 0 60px rgba(0,0,0,.45)!important}.wsm-shell #v-profile-tabContent{padding:14px!important}.wsm-header{padding:0 14px}.wsm-header strong{font-size:15px}.wsm-setting-row,.wsm-setting-control{align-items:flex-start;gap:12px;flex-wrap:wrap}.wsm-setting-control>select,.wsm-setting-control>div{width:100%}.wsm-settings-page header h2{font-size:20px!important}}

.wsm-body{grid-template-columns:224px minmax(0,1fr)}.wsm-shell .sidebar-profile{background:#0d111b!important}.wsm-shell .sidebar-profile #v-profile-tab{padding:13px 10px 14px;gap:0}.wsm-nav-label{margin-top:8px;padding:10px 8px 5px;border-top:1px solid rgba(148,163,184,.11);color:#727b8c;font-size:8px;font-weight:700;letter-spacing:.07em}.wsm-nav-label:first-child{margin-top:0;padding-top:1px;border-top:0}.wsm-shell .sidebar-profile .v-profile-tab-item{min-height:29px!important;gap:7px!important;padding:5px 8px!important;border-radius:6px!important;color:#a9adb7!important;font-size:11px!important;font-weight:500!important}.wsm-shell .sidebar-profile .v-profile-tab-item i{width:14px!important;min-width:14px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#aeb2bc!important;font-size:14px!important}.wsm-shell .sidebar-profile .v-profile-tab-item:hover{border-color:transparent!important;background:rgba(255,255,255,.045)!important;color:#fff!important}.wsm-shell .sidebar-profile .v-profile-tab-item.active{border-color:#f23861!important;background:linear-gradient(90deg,rgba(173,34,52,.82),rgba(107,23,77,.76))!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,65,104,.12),0 5px 16px rgba(231,31,71,.16)!important}.wsm-shell .sidebar-profile .v-profile-tab-item.active i{color:#fff!important}.wsm-shell .sidebar-profile .wsm-logout{min-height:40px!important;margin-top:10px!important;padding:10px 8px 5px!important;border-top:1px solid rgba(148,163,184,.12)!important;color:#ff625f!important}.wsm-shell .sidebar-profile .wsm-logout i{color:#ff625f!important}

body{--whitoo-user-font-scale:1}body.whitoo-user-compact .disc-cat-row,body.whitoo-user-compact .user-row{min-height:40px!important}body.whitoo-user-spacious .disc-cat-row,body.whitoo-user-spacious .user-row{min-height:62px!important}body.whitoo-reduce-motion *,body.whitoo-reduce-motion *::before,body.whitoo-reduce-motion *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}body.whitoo-high-contrast{filter:contrast(1.12)}body.whitoo-underline-links a:not(.btn){text-decoration:underline!important}body[data-color-filter="protanopia"]{filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeColorMatrix values='.567 .433 0 0 0 .558 .442 0 0 0 0 .242 .758 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E%23p")}body[data-color-filter="deuteranopia"]{filter:saturate(.72) hue-rotate(-8deg)}body[data-color-filter="tritanopia"]{filter:saturate(.72) hue-rotate(18deg)}

/* Settings sidebar: legacy profile rules must never turn this into a horizontal rail. */
body.incallx .wsm-shell .sidebar-profile{overflow:hidden!important}
body.incallx .wsm-shell .sidebar-profile .disc-cat-list{overflow:hidden!important}
body.incallx .wsm-shell .sidebar-profile #v-profile-tab{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:100%!important;height:100%!important;margin:0!important;padding:12px 10px 14px!important;overflow-x:hidden!important;overflow-y:auto!important;white-space:normal!important;scrollbar-width:thin!important}
body.incallx .wsm-shell .sidebar-profile .wsm-nav-label{width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:8px 0 0!important;padding:9px 8px 4px!important;white-space:nowrap!important}
body.incallx .wsm-shell .sidebar-profile .wsm-nav-label:first-child{margin-top:0!important;padding-top:1px!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item{position:relative!important;left:auto!important;right:auto!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:28px!important;height:28px!important;margin:0!important;padding:4px 7px!important;overflow:hidden!important;gap:7px!important;border-radius:6px!important;box-sizing:border-box!important;font-size:10px!important;line-height:1!important;transform:none!important;white-space:nowrap!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item i{width:14px!important;min-width:14px!important;height:14px!important;min-height:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;line-height:1!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item span{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.incallx .wsm-shell .sidebar-profile .wsm-logout{height:36px!important;min-height:36px!important;margin-top:9px!important;padding-top:8px!important}

/* Final reference lock: dimensions, colors and density match the approved mockup. */
body.incallx .wsm-shell .wsm-dialog{width:min(1180px,calc(100vw - 28px))!important;height:min(840px,calc(100vh - 20px))!important;grid-template-rows:70px minmax(0,1fr)!important;border-radius:15px!important}
body.incallx .wsm-shell .wsm-header{padding:0 23px!important}
body.incallx .wsm-shell .wsm-header>img{width:48px!important;height:48px!important;border-radius:50%!important}
body.incallx .wsm-shell .wsm-header strong{font-size:17px!important}
body.incallx .wsm-shell .wsm-header span{font-size:11px!important}
body.incallx .wsm-shell .wsm-body{grid-template-columns:275px minmax(0,1fr)!important}
body.incallx .wsm-shell .sidebar-profile #v-profile-tab{padding:15px 16px 13px!important}
body.incallx .wsm-shell .sidebar-profile .wsm-nav-label{margin-top:8px!important;padding:10px 9px 5px!important;font-size:9px!important;line-height:1!important;color:#818897!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item{height:32px!important;min-height:32px!important;padding:5px 9px!important;gap:9px!important;border-radius:7px!important;font-size:12px!important;font-weight:500!important;color:#b7bbc5!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item i,body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item i::before{width:16px!important;min-width:16px!important;height:16px!important;color:#aeb3bf!important;font-size:15px!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item.active{border:1px solid #ff365f!important;background:linear-gradient(90deg,rgba(157,30,42,.82),rgba(113,22,76,.8))!important;color:#fff!important;box-shadow:0 0 15px rgba(255,45,89,.22),inset 0 0 16px rgba(255,68,105,.08)!important}
body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item.active i,body.incallx .wsm-shell .sidebar-profile .v-profile-tab-item.active i::before{color:#fff!important}
body.incallx .wsm-shell .sidebar-profile .wsm-logout{height:44px!important;min-height:44px!important;margin-top:8px!important;padding:10px 9px!important;font-size:12px!important}
body.incallx .wsm-shell #v-profile-tabContent{padding:23px 22px 0!important}
body.incallx .wsm-shell .wsm-account-page{max-width:880px!important;min-height:100%!important;display:flex!important;flex-direction:column!important;margin:0 auto!important}
body.incallx .wsm-shell .wsm-account-page>header{margin-bottom:16px!important}
body.incallx .wsm-shell .wsm-account-page>header>span{display:none!important}
body.incallx .wsm-shell .wsm-account-page>header h2{font-size:22px!important}
body.incallx .wsm-shell .wsm-account-page>header p{font-size:12px!important}
body.incallx .wsm-shell .wsm-account-cover{height:115px!important;background-color:#222c46!important;background-image:linear-gradient(110deg,#8c214e 0%,#f45d8e 24%,#f5c493 48%,#5b80aa 100%)}
body.incallx .wsm-shell .wsm-account-person{min-height:78px!important;padding-left:112px!important}
body.incallx .wsm-shell .wsm-account-person>img{left:21px!important;top:-42px!important;width:78px!important;height:78px!important;border-width:5px!important}
body.incallx .wsm-shell .wsm-account-person strong{font-size:17px!important}
body.incallx .wsm-shell .wsm-account-person span{font-size:11px!important}
body.incallx .wsm-shell .wsm-account-rows>div{min-height:46px!important;grid-template-columns:22px 130px minmax(0,1fr) 86px!important}
body.incallx .wsm-shell .wsm-account-rows span,body.incallx .wsm-shell .wsm-account-rows strong{font-size:11.5px!important}
body.incallx .wsm-shell .wsm-account-rows button{height:30px!important}
body.incallx .wsm-shell .wsm-security-section{margin-top:20px!important}
body.incallx .wsm-shell .wsm-security-section>h3{font-size:14px!important}
body.incallx .wsm-shell .wsm-security-grid{gap:12px!important}
body.incallx .wsm-shell .wsm-security-grid>article{min-height:160px!important;padding:15px!important}
body.incallx .wsm-shell .wsm-account-footer{display:flex!important;justify-content:flex-end!important;margin-top:auto!important;padding:15px 0!important;border-top:1px solid rgba(148,163,184,.12)!important}
body.incallx .wsm-shell .wsm-account-footer button{min-height:40px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;padding:0 16px!important;border:1px solid rgba(255,74,107,.65)!important;border-radius:8px!important;background:linear-gradient(135deg,#ef2d4f,#c52a91)!important;color:#fff!important;font-size:11px!important;font-weight:700!important;box-shadow:0 9px 22px rgba(224,36,79,.2)!important}

/* Keep the enlarged dialog geometrically centered inside the visible viewport. */
body.incallx .wsm-shell{width:100vw!important;height:100dvh!important;box-sizing:border-box!important;padding:16px!important;place-items:center!important;overflow:hidden!important}
body.incallx .wsm-shell .wsm-dialog{width:min(1180px,calc(100vw - 32px))!important;height:min(840px,calc(100dvh - 32px))!important;max-height:calc(100dvh - 32px)!important;margin:0!important;align-self:center!important;justify-self:center!important}
body.incallx .wsm-shell .wsm-body,body.incallx .wsm-shell #main-profile,body.incallx .wsm-shell #main-profile>.page-content-wrapper{height:100%!important;min-height:0!important;overflow:hidden!important}
body.incallx .wsm-shell #v-profile-tabContent{height:100%!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important}
/* Connected accounts */
.wsm-connections-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.wsm-connection-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:linear-gradient(150deg,rgba(18,26,43,.96),rgba(10,15,27,.98));box-shadow:0 18px 42px rgba(0,0,0,.18)}.wsm-connection-card.is-spotify{--connection:#1ed760}.wsm-connection-card.is-github{--connection:#f8fafc}.wsm-connection-card.is-google{--connection:#ff334f}.wsm-connection-brand,.wsm-connection-account{display:flex;align-items:center;gap:11px}.wsm-connection-brand>i{width:46px;height:46px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--connection) 36%,transparent);border-radius:14px;background:color-mix(in srgb,var(--connection) 10%,transparent);color:var(--connection);font-size:25px}.wsm-connection-brand div,.wsm-connection-account div,.wsm-connection-activity span{min-width:0}.wsm-connection-brand strong,.wsm-connection-account strong{display:block;overflow:hidden;color:#f8fafc;text-overflow:ellipsis;white-space:nowrap}.wsm-connection-brand span,.wsm-connection-account span{display:block;overflow:hidden;margin-top:2px;color:#94a3b8;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.wsm-connection-account{padding:10px;border-radius:13px;background:rgba(255,255,255,.035)}.wsm-connection-account img{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover}.wsm-connection-activity{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(148,163,184,.1);border-radius:13px;color:inherit;text-decoration:none}.wsm-connection-activity>img,.wsm-connection-activity>i{width:45px;height:45px;flex:0 0 45px;border-radius:10px;object-fit:cover}.wsm-connection-activity>i{display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--connection);font-size:21px}.wsm-connection-activity small,.wsm-connection-activity strong,.wsm-connection-activity em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wsm-connection-activity small{color:var(--connection);font-size:9px;font-weight:900;letter-spacing:.08em}.wsm-connection-activity strong{color:#f8fafc;font-size:12px}.wsm-connection-activity em{color:#94a3b8;font-size:11px;font-style:normal}.wsm-connection-switches{display:grid;gap:9px}.wsm-connection-switches label{display:flex;align-items:center;gap:8px;color:#cbd5e1;font-size:12px}.wsm-connection-switches input{accent-color:var(--connection)}.wsm-connection-connect,.wsm-connection-remove{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:40px;margin-top:auto;border:0;border-radius:12px;font-weight:800;text-decoration:none}.wsm-connection-connect{background:var(--connection);color:#071019}.wsm-connection-connect.is-disabled{cursor:not-allowed;filter:grayscale(1);opacity:.42}.wsm-connection-remove{background:rgba(244,63,94,.1);color:#fda4af}.wsm-connections-loading,.wsm-connections-error{grid-column:1/-1;padding:34px;color:#94a3b8;text-align:center}.wsm-connections-loading i{margin-right:8px;animation:wsmConnectionSpin 1s linear infinite}@keyframes wsmConnectionSpin{to{transform:rotate(360deg)}}
@media(max-width:960px){.wsm-connections-grid{grid-template-columns:1fr}}
.wsm-settings-page.is-connections-page{--connect-accent:#ff3158;position:relative;overflow:auto;padding:38px 42px 30px;background:radial-gradient(circle at 12% 0,rgba(255,49,88,.12),transparent 30%),radial-gradient(circle at 92% 8%,rgba(32,224,196,.08),transparent 28%),linear-gradient(145deg,#0b0d17,#08111d 62%,#07101a)}.wsm-settings-page.is-connections-page:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 65%)}.wsm-settings-page.is-connections-page>header,.wsm-settings-page.is-connections-page>.wsm-connections-grid,.wsm-settings-page.is-connections-page>footer{position:relative;z-index:1}.wsm-settings-page.is-connections-page>header{display:flex;align-items:center;gap:18px;margin-bottom:26px;padding:0}.wsm-settings-page.is-connections-page .wsm-page-icon{width:64px;height:64px;display:grid;place-items:center;flex:0 0 64px;border:1px solid rgba(255,49,88,.5);border-radius:20px;background:linear-gradient(145deg,rgba(255,49,88,.18),rgba(255,49,88,.04));box-shadow:0 16px 40px rgba(255,49,88,.13),inset 0 1px rgba(255,255,255,.08);color:#ff4267;font-size:29px}.wsm-settings-page.is-connections-page>header span{color:#ff4267;font-size:10px;font-weight:900;letter-spacing:.22em}.wsm-settings-page.is-connections-page>header h2{margin:4px 0 3px;color:#fff;font-size:29px;font-weight:950;letter-spacing:-.03em}.wsm-settings-page.is-connections-page>header p{margin:0;color:#94a3b8;font-size:13px}.is-connections-page .wsm-connections-grid{grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px}.is-connections-page .wsm-connection-card{position:relative;overflow:hidden;min-height:285px;padding:20px;border-color:color-mix(in srgb,var(--connection) 18%,rgba(148,163,184,.14));border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--connection) 5%,#121826),#0a0f1a 70%);box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.is-connections-page .wsm-connection-card:before{content:"";position:absolute;top:-80px;right:-75px;width:180px;height:180px;border-radius:50%;background:var(--connection);filter:blur(55px);opacity:.07;pointer-events:none}.is-connections-page .wsm-connection-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--connection) 40%,transparent);box-shadow:0 28px 65px rgba(0,0,0,.36),0 0 28px color-mix(in srgb,var(--connection) 8%,transparent)}.is-connections-page .wsm-connection-brand{position:relative}.is-connections-page .wsm-connection-brand>i{width:54px;height:54px;border-radius:17px;font-size:28px;box-shadow:0 12px 28px color-mix(in srgb,var(--connection) 10%,transparent)}.is-connections-page .wsm-connection-brand strong{font-size:17px}.is-connections-page .wsm-connection-brand span{display:inline-flex;width:auto;margin-top:5px;padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.08);font-size:10px;font-weight:750}.is-connections-page .wsm-connection-card.is-connected .wsm-connection-brand span{background:color-mix(in srgb,var(--connection) 12%,transparent);color:var(--connection)}.is-connections-page .wsm-connection-connect,.is-connections-page .wsm-connection-remove{min-height:46px;border-radius:14px;transition:filter .18s ease,transform .18s ease}.is-connections-page .wsm-connection-connect:hover,.is-connections-page .wsm-connection-remove:hover{filter:brightness(1.1);transform:translateY(-1px)}.wsm-settings-page.is-connections-page>footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;padding:17px 18px;border:1px solid rgba(148,163,184,.1);border-radius:17px;background:rgba(255,255,255,.025)}.wsm-settings-page.is-connections-page>footer>span{color:#94a3b8;font-size:12px}.wsm-settings-page.is-connections-page>footer>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:0 17px;border:1px solid rgba(255,49,88,.35);border-radius:13px;background:linear-gradient(135deg,#ff3158,#d91f63);box-shadow:0 12px 28px rgba(217,31,99,.2);color:#fff;font-weight:850}.wsm-settings-page.is-connections-page>footer>button:disabled{opacity:.55}
@media(max-width:1100px){.is-connections-page .wsm-connections-grid{grid-template-columns:1fr}.is-connections-page .wsm-connection-card{min-height:230px}}@media(max-width:680px){.wsm-settings-page.is-connections-page{padding:24px 17px}.wsm-settings-page.is-connections-page>header{align-items:flex-start}.wsm-settings-page.is-connections-page .wsm-page-icon{width:52px;height:52px;flex-basis:52px;border-radius:16px}.wsm-settings-page.is-connections-page>header h2{font-size:24px}.wsm-settings-page.is-connections-page>footer{align-items:stretch;flex-direction:column}.wsm-settings-page.is-connections-page>footer>button{width:100%}}
body.whitoo-no-animations *,body.whitoo-reduce-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body.whitoo-underline-links a{text-decoration:underline!important;text-underline-offset:2px}
body.whitoo-low-data video,body.whitoo-low-data .video-message,body.whitoo-low-data [class*="animated"]{display:none!important}
body.whitoo-hide-member-list #rightbar-wrapper{display:none!important}
body.whitoo-no-link-previews .link-preview,body.whitoo-no-link-previews [class*="link-preview"]{display:none!important}
.wsm-commerce-list{display:grid;gap:10px}.wsm-commerce-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}.wsm-commerce-row>i{font-size:22px;color:#ff2868}.wsm-commerce-row>div{display:flex;flex:1;min-width:0;flex-direction:column}.wsm-commerce-row span{font-size:12px;opacity:.65}.wsm-commerce-row em{font-style:normal;font-size:11px;padding:5px 9px;border-radius:99px;background:rgba(35,209,139,.12);color:#41dda5}.wsm-commerce-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.wsm-commerce-empty i{font-size:36px;color:#ff2868}.wsm-commerce-empty span{opacity:.6}
body[data-user-theme="light"]{filter:none!important;background:#edf1f7!important;color:#172033!important}body[data-user-theme="light"] #wrapper,body[data-user-theme="light"] .main-content,body[data-user-theme="light"] #sidebar-wrapper,body[data-user-theme="light"] #rightbar-wrapper{background:#f7f9fc!important;color:#172033!important}body[data-user-theme="system"]{color-scheme:dark light}@media(prefers-color-scheme:light){body[data-user-theme="system"]{background:#edf1f7!important;color:#172033!important}}

/* --- /@me ILK ACILIS DUZELTMESI ---
   chatnet.css tum .sidebar-* ogelerini display:none yapiyor, JS sonradan aciyor.
   O ana kadar nav bir grid ogesi OLMADIGI icin icerik 275px'lik ilk kolona
   dusup eziliyor, ikinci kolon bos kaliyordu. Nav'i modal icinde kalici
   gorunur yapip icerigi 2. kolona sabitliyoruz. Mobil (<=680px) drawer
   davranisi bozulmasin diye tumu min-width:681px icinde. */
@media(min-width:681px){
  /* nav'i inline style="display:none" + body.incallx[style].channel-bar kurali
     kilitliyor; ozgullugu yukseltiyoruz. Modal KAPALIYKEN .wsm-shell zaten
     display:none oldugu icin bu kural disari sizmaz. */
  body.incallx .wsm-shell .wsm-body>.sidebar-profile,
  .wsm-shell .wsm-body>.sidebar-profile{display:flex!important}
  .wsm-shell .wsm-body>*{grid-column:2}
  .wsm-shell .wsm-body>.sidebar-profile{grid-column:1}
}

/* ================= MOBIL AYARLAR PANELI (<=680px) =================
   SORUN 1: Menu, icerigin uzerini kaplayan bir katmandi ve kapatan bir
   kontrol yoktu; kullanici sikisip kaliyordu.
   SORUN 2: Yukaridaki `body.incallx .wsm-shell ...` kurallari (satir 79/84/
   103/115) medya sorgusu DISINDA ve !important. Ozgullukleri (0,3,1) oldugu
   icin mobil kurallari eziyor, menu 275px'te sabit kaliyor, sagda bos alan
   olusuyor ve satir dugmeleri kesiliyordu.
   COZUM: seviye 1 = baslik listesi, seviye 2 = sayfa + Geri dugmesi; ve tum
   mobil kurallar `body.incallx` onekiyle AYNI ozgullukte, dosyanin SONUNDA
   yazilarak kazanacak sekilde tanimlandi. Masaustu duzeni degismez. */
.wsm-back{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border:0;border-radius:11px;background:rgba(148,163,184,.14);color:#e2e8f0;font-size:18px;line-height:1;cursor:pointer;transition:background .15s}
.wsm-back:hover{background:rgba(148,163,184,.26)}

@media(max-width:680px){

  /* --- Tam ekran, kenar boslugu ve yuvarlak kose yok --- */
  body .wsm-shell,
  body.incallx .wsm-shell{padding:0!important;width:100vw!important;height:100dvh!important;place-items:stretch!important}
  body .wsm-shell .wsm-dialog,
  body.incallx .wsm-shell .wsm-dialog{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;grid-template-rows:54px minmax(0,1fr)!important}

  /* --- Tek kolon: ayni anda ya liste ya sayfa --- */
  body .wsm-shell .wsm-body,
  body.incallx .wsm-shell .wsm-body{grid-template-columns:minmax(0,1fr)!important;position:relative}
  body .wsm-shell .sidebar-profile,
  body.incallx .wsm-shell .sidebar-profile{position:static!important;left:auto!important;top:auto!important;bottom:auto!important;width:auto!important;min-width:0!important;max-width:none!important;grid-column:1!important;z-index:auto!important;box-shadow:none!important;border-right:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  body .wsm-shell #main-profile,
  body.incallx .wsm-shell #main-profile{grid-column:1!important;max-width:100%!important;overflow-x:hidden!important}

  /* --- Seviye gecisi (JS .wsm-mobile-page sinifini ekler/kaldirir) --- */
  .wsm-shell #main-profile{display:none!important}
  .wsm-shell.wsm-mobile-page .sidebar-profile{display:none!important}
  .wsm-shell.wsm-mobile-page #main-profile{display:block!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  .wsm-shell.wsm-mobile-page .wsm-back{display:inline-flex!important}
  .wsm-shell:not(.wsm-mobile-page) .wsm-back{display:none!important}

  /* --- Kompakt baslik --- */
  body .wsm-shell .wsm-header,
  body.incallx .wsm-shell .wsm-header{padding:0 10px!important;gap:9px!important}
  body .wsm-shell .wsm-header img,
  body.incallx .wsm-shell .wsm-header img{width:31px!important;height:31px!important}
  body .wsm-shell .wsm-header strong,
  body.incallx .wsm-shell .wsm-header strong{font-size:14px!important}
  body .wsm-shell .wsm-header span,
  body.incallx .wsm-shell .wsm-header span{font-size:11px!important}

  /* --- Kompakt icerik --- */
  body .wsm-shell #v-profile-tabContent,
  body.incallx .wsm-shell #v-profile-tabContent{padding:12px!important}
  body .wsm-shell .wsm-settings-page,
  body.incallx .wsm-shell .wsm-settings-page{padding:14px 12px!important}
  body .wsm-shell .wsm-settings-page header h2,
  body.incallx .wsm-shell .wsm-settings-page header h2{font-size:19px!important}

  /* --- Hesap satirlari: dugme sutunu artik KESILMIYOR ---
     Sabit 130px etiket + 86px dugme dar ekrana sigmiyordu; etiket ve dugme
     artik iceriklerine gore olculuyor, deger sutunu esneyip kisaliyor. */
  body .wsm-shell .wsm-account-rows,
  body.incallx .wsm-shell .wsm-account-rows{padding:6px 10px 8px!important}
  body .wsm-shell .wsm-account-rows>div,
  body.incallx .wsm-shell .wsm-account-rows>div{min-height:42px!important;grid-template-columns:18px auto minmax(0,1fr) auto!important;gap:8px!important}
  body .wsm-shell .wsm-account-rows>div>*{min-width:0!important}

  /* --- Dokunma hedefleri --- */
  body .wsm-shell #v-profile-tab .v-profile-tab-item,
  body.incallx .wsm-shell #v-profile-tab .v-profile-tab-item{min-height:44px!important}

  /* --- Yatay tasma olmasin --- */
  body .wsm-shell .wsm-dialog,
  body.incallx .wsm-shell .wsm-dialog{overflow-x:hidden!important}
}

/* ===== whitoo-channels-2026.css ===== */
/* ==========================================================================
   Whitoo — Sunucu kanal listesi (2026 tasarim)
   Hedef: "KANALLAR" basligi, kategori adlari kucuk-buyuk harf etiketleri,
   # metin kanallari, aktif kanalda kirmizi degrade hap, ses kanallarinda
   sagda canli katilimci sayaci.
   En son yuklenen sayfa: onceki sayfalari (whitoo-refresh / room-2026) ezer.
   ========================================================================== */

/* ---------- Ust baslik: KANALLAR + yeni kanal ---------- */
html body.incallx .sidebar-room .wch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 10px 8px;
    padding: 0 2px;
}

html body.incallx .sidebar-room .wch-head strong {
    color: rgba(226, 232, 240, .92);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

html body.incallx .sidebar-room .wch-head button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(148, 163, 184, .8);
    font-size: 16px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

html body.incallx .sidebar-room .wch-head button:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* ---------- Kategori satiri: METIN KANALLARI / SES KANALLARI ---------- */
html body.incallx .channel-list .channel-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    margin: 10px 10px 2px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: rgba(148, 163, 184, .72);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    cursor: pointer;
}

html body.incallx .channel-list .channel-cat:hover {
    color: rgba(226, 232, 240, .95);
}

/* Buyuk dolu chevron yerine ince, sadece acilis yonunu belli eden ok */
html body.incallx .channel-list .channel-cat > i.ti {
    margin: 0 !important;
    color: rgba(148, 163, 184, .55);
    font-size: 12px;
    transition: transform .18s ease;
}

html body.incallx .channel-list .channel-cat[aria-expanded="true"] > i.ti {
    transform: rotate(90deg);
}

html body.incallx .channel-list .channel-cat .cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.incallx .channel-list .channel-cat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .16s ease;
}

html body.incallx .channel-list .channel-cat:hover .channel-cat-actions {
    opacity: 1;
}

html body.incallx .channel-list .channel-cat-actions span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: rgba(203, 213, 225, .8);
    font-size: 14px;
    transition: background .16s ease, color .16s ease;
}

html body.incallx .channel-list .channel-cat-actions span:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ---------- Kanal satiri ---------- */
html body.incallx .channel-list .channel-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 33px;
    margin: 1px 8px;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    color: rgba(148, 163, 184, .88);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

html body.incallx .channel-list .channel-item:hover {
    background: rgba(255, 255, 255, .045) !important;
    color: rgba(241, 245, 249, .98);
}

html body.incallx .channel-list .channel-item .channel-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: rgba(148, 163, 184, .72);
    font-size: 16px;
}

html body.incallx .channel-list .channel-item .channel-icon i {
    margin: 0 !important;
}

html body.incallx .channel-list .channel-item .channel-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

/* Okunmamis mesaj: kanal adi beyaz + kalin */
html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item .channel-name {
    color: #fff;
    font-weight: 800;
}

/* ---------- Aktif kanal: kirmizi degrade hap ---------- */
html body.incallx .channel-list .channel-item.active,
html body.incallx .channel-list .channel-main.active .channel-item {
    background: linear-gradient(90deg, rgba(230, 18, 43, .95), rgba(120, 14, 30, .55)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(230, 18, 43, .18);
}

html body.incallx .channel-list .channel-item.active .channel-icon,
html body.incallx .channel-list .channel-main.active .channel-item .channel-icon {
    color: rgba(255, 255, 255, .92);
}

html body.incallx .channel-list .channel-item.active .channel-name,
html body.incallx .channel-list .channel-main.active .channel-item .channel-name {
    color: #fff;
    font-weight: 800;
}

/* ---------- Sag taraftaki aksiyonlar (uc nokta) ---------- */
html body.incallx .channel-list .channel-item .channel-actions {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .16s ease;
}

html body.incallx .channel-list .channel-item:hover .channel-actions,
html body.incallx .channel-list .channel-item.active .channel-actions,
html body.incallx .channel-list .channel-main.active .channel-item .channel-actions {
    opacity: 1;
}

html body.incallx .channel-list .channel-item .channel-options {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    transition: background .16s ease, color .16s ease;
}

html body.incallx .channel-list .channel-item .channel-options:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ---------- Ses kanali: sagda canli katilimci sayaci ---------- */
html body.incallx .channel-list .wch-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 6px;
    color: rgba(148, 163, 184, .62);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

/* Mobile account dock: avatar and controls share one exact, unclipped row. */
@media (max-width: 768px) {
  html body.incallx #rightbar-wrapper.rightbar-wrapper {
    display:none!important;
    position:absolute!important;
    right:0!important;
    width:min(320px,calc(100vw - 72px))!important;
    min-width:0!important;
    margin-right:0!important;
    z-index:2147483000!important;
  }
  html body.incallx.sb-rightnav-toggled #wrapper #rightbar-wrapper.rightbar-wrapper {
    display:flex!important;
  }
  html body.incallx .lt-account-dock.channel-list-bottom {
    box-sizing:border-box!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    padding:8px 10px!important;
    gap:6px!important;
    align-items:center!important;
  }
  html body.incallx .lt-account-dock .user-bottom-menu {
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
  }
  html body.incallx .lt-account-dock .user-bottom-trigger {
    box-sizing:border-box!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:4px!important;
    gap:0!important;
    justify-content:center!important;
  }
  html body.incallx .lt-account-dock .username-bottom {
    display:none!important;
  }
  html body.incallx .lt-account-dock-actions {
    flex:1 1 auto!important;
    min-width:0!important;
    margin-left:auto!important;
    justify-content:flex-end!important;
    gap:4px!important;
  }
}

html body.incallx .channel-list .wch-count.is-live {
    color: #5df0dd;
}

html body.incallx .channel-list .channel-item.active .wch-count,
html body.incallx .channel-list .channel-main.active .channel-item .wch-count {
    color: rgba(255, 255, 255, .88);
}

/* Sayac varken uc nokta menusu onu itmesin */
html body.incallx .channel-list .channel-item .channel-actions {
    margin-left: 4px;
}

/* ---------- Ses kanalindaki uyeler ---------- */
html body.incallx .channel-list .voice-member-list {
    margin: 2px 8px 6px 26px;
}

html body.incallx .channel-list .voice-member {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 7px;
    border-radius: 7px;
    color: rgba(203, 213, 225, .86);
    font-size: 12.5px;
    font-weight: 600;
}

html body.incallx .channel-list .voice-member:hover {
    background: rgba(255, 255, 255, .04);
}

html body.incallx .channel-list .voice-member .voice-avatar {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    object-fit: cover;
}

/* ==========================================================================
   DUZELTME — satirlar ortalanmis geliyordu.
   Sebep: whitoo-room-2026.css .channel-main'i "display:flex + align-items:center"
   yapiyor, chatnet.css'te de "flex-direction:column; justify-content:center" var.
   Ikisi birlesince kanal satiri icerigi kadar daralip ORTAYA hizalaniyordu.
   Cozum: .channel-main duz blok kapsayici olsun, gorsel hap SADECE .channel-item
   uzerinde kalsin, satirlar sola dayali ve tam genislikte aksin.
   ========================================================================== */
html body.incallx .btn-toggle-nav .channel-main,
html body.incallx .channel-list .channel-main {
    display: block !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .btn-toggle-nav .channel-main:hover,
html body.incallx .channel-list .channel-main:hover,
html body.incallx .btn-toggle-nav .channel-main.active,
html body.incallx .btn-toggle-nav .channel-main.selected-channel {
    background: transparent !important;
    box-shadow: none !important;
}

/* Satirin kendisi: tam genislik, sola dayali, dikey ortali */
html body.incallx .channel-list .channel-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-height: 33px !important;
    gap: 7px !important;
    margin: 1px 8px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

html body.incallx .channel-list .channel-item .channel-name {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: left !important;
}

html body.incallx .channel-list .channel-item .channel-icon {
    flex: 0 0 auto !important;
    width: 18px;
    justify-content: center;
}

/* Bos mute-icon kutusu bosluk yapmasin */
html body.incallx .channel-list .channel-item .mute-icon:empty {
    display: none !important;
}

/* Okunmamis noktasi: sol kenarda ince beyaz cizgi (Discord benzeri), itmesin */
html body.incallx .channel-list .channel-main > .unread-indicator {
    position: absolute !important;
    left: 0;
    top: 50%;
    width: 4px !important;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    background: #fff !important;
    transform: translateY(-50%);
    transition: height .16s ease;
}

html body.incallx .channel-list .channel-main > .unread-indicator.active {
    height: 16px !important;
}

/* Kategori govdesi: fazladan ic bosluk olmasin */
html body.incallx .channel-list .btn-toggle-nav {
    padding-bottom: 2px !important;
}

/* ==========================================================================
   CILA — daha profesyonel his: net tipografi ritmi, sakin renk hiyerarsisi,
   aktif kanalda derinlik, ses uyelerinde kilavuz cizgi, ince kaydirma cubugu.
   ========================================================================== */

/* Kolonun kendisi: kenarlarda nefes payi */
html body.incallx .sidebar-room .channel-list {
    padding: 2px 0 10px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .28) transparent;
}

html body.incallx .sidebar-room .channel-list::-webkit-scrollbar {
    width: 8px;
}

html body.incallx .sidebar-room .channel-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(148, 163, 184, .26);
    background-clip: content-box;
}

html body.incallx .sidebar-room .channel-list::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .45);
    background-clip: content-box;
}

/* Kategori: daha sakin, daha net hiyerarsi + ustunde ince ayirici */
html body.incallx .channel-list > .mb-1 + .mb-1 > .channel-cat {
    margin-top: 14px !important;
}

html body.incallx .channel-list .channel-cat {
    margin: 12px 12px 3px !important;
    color: rgba(139, 152, 170, .78) !important;
    font-size: 10px !important;
    letter-spacing: 1.25px !important;
}

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

/* Kanal satiri: ritim ve okunabilirlik */
html body.incallx .channel-list .channel-item {
    min-height: 32px !important;
    margin: 1px 10px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    color: rgba(160, 172, 189, .92) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
}

html body.incallx .channel-list .channel-item .channel-icon {
    color: rgba(139, 152, 170, .62) !important;
    font-size: 15px !important;
}

html body.incallx .channel-list .channel-item:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #e8edf4 !important;
}

html body.incallx .channel-list .channel-item:hover .channel-icon {
    color: rgba(226, 232, 240, .85) !important;
}

/* Aktif kanal: derinlikli kirmizi hap + ust kenarda ince isik */
html body.incallx .channel-list .channel-item.active,
html body.incallx .channel-list .channel-main.active .channel-item {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%),
        linear-gradient(90deg, #d81230 0%, #a5122a 55%, #6f0f1e 100%) !important;
    box-shadow:
        0 8px 20px rgba(196, 18, 44, .22),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html body.incallx .channel-list .channel-item.active .channel-icon {
    color: rgba(255, 255, 255, .95) !important;
}

/* Okunmamis: sol kenardaki isaret inceltildi, yazi netlesti */
html body.incallx .channel-list .channel-main > .unread-indicator {
    left: 2px;
    width: 3px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
}

html body.incallx .channel-list .channel-main > .unread-indicator.active {
    height: 15px !important;
}

html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item {
    color: #f4f7fb !important;
}

html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item .channel-name {
    font-weight: 750 !important;
}

/* Aktif satirda okunmamis isareti gereksiz */
html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item.active {
    color: #fff !important;
}

/* Ses kanalindaki uyeler: solda kilavuz cizgi (kanala ait oldugu belli olsun) */
html body.incallx .channel-list .voice-member-list {
    position: relative;
    margin: 1px 10px 4px 26px !important;
    padding-left: 10px;
}

html body.incallx .channel-list .voice-member-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
}

html body.incallx .channel-list .voice-member {
    min-height: 26px !important;
    font-size: 12px !important;
    color: rgba(176, 187, 202, .9) !important;
}

html body.incallx .channel-list .voice-member .voice-avatar {
    width: 19px !important;
    height: 19px !important;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, .9);
}

/* Sayac: sakin, aktif satirda beyaz */
html body.incallx .channel-list .wch-count {
    font-size: 10.5px !important;
    color: rgba(139, 152, 170, .55) !important;
}

html body.incallx .channel-list .wch-count.is-live {
    color: rgba(93, 240, 221, .95) !important;
}

/* Ust baslik: kolon kenar boslugu ile hizali */
html body.incallx .sidebar-room .wch-head {
    margin: 6px 12px 6px !important;
}

html body.incallx .sidebar-room .wch-head strong {
    color: rgba(226, 232, 240, .88) !important;
    font-size: 10.5px !important;
    letter-spacing: 1.4px !important;
}

/* ==========================================================================
   REFERANS UYUMU — satir sagindaki hizli ikonlar (davet + ayar), kapasite
   sayaci her ses kanalinda gorunur, sol kenardaki okunmamis cubugu kaldirildi
   (okunmamis artik sadece yazinin beyaz/kalin olmasiyla belli olur).
   ========================================================================== */

/* Sol kenar cubugu yok -> referanstaki gibi temiz kolon */
html body.incallx .channel-list .channel-main > .unread-indicator,
html body.incallx .channel-list .channel-main > .unread-indicator.active {
    display: none !important;
}

html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item {
    color: #f2f5f9 !important;
}

html body.incallx .channel-list .channel-main .unread-indicator.active ~ .channel-item .channel-icon {
    color: rgba(226, 232, 240, .8) !important;
}

/* Hizli ikonlar: normalde gizli, satir uzerine gelince ve aktif satirda gorunur */
html body.incallx .channel-list .channel-item .channel-quick {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    border-radius: 6px;
    color: rgba(226, 232, 240, .72);
    font-size: 15px;
    opacity: 0;
    cursor: pointer;
    transition: opacity .14s ease, background .14s ease, color .14s ease;
}

html body.incallx .channel-list .channel-item:hover .channel-quick,
html body.incallx .channel-list .channel-item.active .channel-quick {
    opacity: 1;
}

html body.incallx .channel-list .channel-item .channel-quick:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

html body.incallx .channel-list .channel-item.active .channel-quick {
    color: rgba(255, 255, 255, .9);
}

/* Uc nokta menusu: sadece satir uzerine gelince (aktif satirda ikonlar yeter) */
html body.incallx .channel-list .channel-item .channel-actions {
    opacity: 0 !important;
    margin-left: 2px !important;
}

html body.incallx .channel-list .channel-item:hover .channel-actions {
    opacity: 1 !important;
}

/* Kapasite sayaci: sagda sabit, sadece ikonlar cikinca yer acar */
html body.incallx .channel-list .wch-count {
    margin-left: auto !important;
    padding-left: 8px;
    opacity: 1;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(139, 152, 170, .6) !important;
}

html body.incallx .channel-list .channel-item:hover .wch-count {
    color: rgba(203, 213, 225, .75) !important;
}

/* Metin kanallarinda ikonlar sagda toplansin */
html body.incallx .channel-list .channel-item .channel-name {
    margin-right: auto;
}

/* ==========================================================================
   SADELESTIRME — uc ikon sikisikti, kirmizi fazla neondu.
   Artik satirda en fazla IKI ikon var (davet + menu), kirmizi derin bordoya
   cekildi, ikonlar kucuk ve sakin.
   ========================================================================== */

/* Aktif hap: neon kirmizi yerine derin, oturmus bordo degrade */
html body.incallx .channel-list .channel-item.active,
html body.incallx .channel-list .channel-main.active .channel-item {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, #b3122a 0%, #8e0f22 58%, #5f0a17 100%) !important;
    box-shadow: 0 4px 14px rgba(120, 12, 28, .28) !important;
    border-radius: 8px !important;
}

/* Ikonlar: daha kucuk kutu, daha ince glif, daha sakin renk */
html body.incallx .channel-list .channel-item .channel-quick,
html body.incallx .channel-list .channel-item .channel-options {
    width: 20px !important;
    height: 20px !important;
    margin-left: 1px !important;
    border-radius: 5px !important;
    font-size: 13.5px !important;
    color: rgba(203, 213, 225, .55) !important;
}

html body.incallx .channel-list .channel-item .channel-quick:hover,
html body.incallx .channel-list .channel-item .channel-options:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

html body.incallx .channel-list .channel-item.active .channel-quick,
html body.incallx .channel-list .channel-item.active .channel-options {
    color: rgba(255, 255, 255, .72) !important;
}

html body.incallx .channel-list .channel-item.active .channel-quick:hover,
html body.incallx .channel-list .channel-item.active .channel-options:hover {
    background: rgba(0, 0, 0, .22) !important;
    color: #fff !important;
}

/* Hover'da hafif, aktifken sakin bir zemin — parlak beyaz kutu hissi gitsin */
html body.incallx .channel-list .channel-item:hover {
    background: rgba(255, 255, 255, .035) !important;
}

/* Isim ile ikonlar arasinda nefes payi */
html body.incallx .channel-list .channel-item .channel-name {
    padding-right: 6px;
}

/* Metin kanalinda sayac yok -> ikonlar sagda toplansin */
html body.incallx .channel-list .channel-item .channel-quick:first-of-type {
    margin-left: 4px !important;
}

/* ==========================================================================
   ISIM KIRPILMASI DUZELTMESI
   Sebep: gizli ikonlar opacity:0 ile duruyordu -> yer kaplamaya devam edip
   kanal adini "oyu..." diye kirpiyordu. Artik gizliyken DOM akisindan cikiyorlar;
   sadece satirin uzerine gelince (veya aktif satirda) yer aciliyor.
   ========================================================================== */
html body.incallx .channel-list .channel-item .channel-quick,
html body.incallx .channel-list .channel-item .channel-actions {
    display: none !important;
    opacity: 1 !important;
}

html body.incallx .channel-list .channel-item:hover .channel-quick,
html body.incallx .channel-list .channel-item.active .channel-quick {
    display: grid !important;
}

html body.incallx .channel-list .channel-item:hover .channel-actions {
    display: block !important;
}

/* Ad: kalan tum genisligi alsin, gereksiz otomatik bosluk olmasin */
html body.incallx .channel-list .channel-item .channel-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    padding-right: 6px;
}

/* Sayac: her zaman sagda, sabit genislikte, adi daraltmasin */
html body.incallx .channel-list .wch-count {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    padding-left: 6px !important;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MESAJ SAATI KIRILMASIN — 2026-08-11

   Belirti: saat kutuya sigmayinca satira boluniyordu. Kisa mesajlarda
   "07:" / "06" iki satir, gonderilen mesajlarda "10:45" harf harf alt alta
   ("1","0","4","5") gorunuyordu.

   Iki sebep birlikte calisiyordu:
     1. .message-meta esnek bir kapsayicidaydi ve daralinca SIKISIYORDU,
     2. baloncuk uzun kelimeleri kirmak icin word-break/overflow-wrap
        kullaniyor; bu kural saate de MIRAS kaliyor ve saati harf harf
        boluyordu.

   Cozum: saat kutusu hic kucultulmez (flex:none), asla kirilmaz (nowrap) ve
   baloncuktan gelen kelime kirma kurallari saatte SIFIRLANIR. Mesajin
   uzunlugu ya da kalinligi ne olursa olsun saat tek parca kalir.
   ============================================================ */
.message-meta{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  min-width:0!important;
}
.message-meta,
.message-time,
.message-status,
.lt-edited-label{
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
.message-time{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  letter-spacing:normal!important;
  font-variant-numeric:tabular-nums;   /* rakamlar esit genislik -> saat zipla­maz */
}
/* Sesli mesaj ve yanit onizlemesindeki saatler de ayni kurala tabi. */
.whitoo-audio-time,
.res-chat-time{
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

/* ===== whitoo-scrollbar-2026.css ===== */
/* ==========================================================================
   WHITOO — KAYDIRMA CUBUKLARI (2026-08-28)
   Amac: her yerde ayni, ince, sessiz bir cubuk. Kaba/parlak cubuklar gitsin.

   ONEMLI TEKNIK NOT
   -----------------
   Chrome 121'den beri `scrollbar-width` VEYA `scrollbar-color` atanmis bir
   elemanda `::-webkit-scrollbar` pseudo-elemanlari TAMAMEN YOK SAYILIYOR.
   Projede 27 ayri yerde `scrollbar-width: thin` yaziliydi; bu yuzden ayni
   dosyalardaki `::-webkit-scrollbar { width: 7px }` kurallarinin hicbiri
   calismiyordu ve tarayicinin kendi kalin cubugu ciziliyordu.

   Cozum:
   1) Webkit tarayicilarda cubugu pseudo-elemanlarla ciziyoruz (gercek kontrol).
   2) `scrollbar-width: thin` yazan kaplari `auto`ya cevirip pseudo-elemanlarin
      devreye girmesini sagliyoruz - AMA cubugu bilerek GIZLEYEN kaplara
      (`scrollbar-width: none`) dokunmuyoruz.
   3) Firefox'ta pseudo-eleman yok; oraya standart ozelliklerle ayni gorunumu
      veriyoruz (`@supports not selector(...)` blogu).

   Bu dosya EN SON yuklenmeli.
   ========================================================================== */

/* ---------- 1) Webkit: ince, sessiz, yuvarlak ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Ok dugmeleri kalkti - referans uygulamalarda yok, kaba duruyor. */
::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/*  Gorunen kalinlik 4px: 10px'lik olugun 3px'i her iki yanda seffaf kenarlik.
    Boylece cubuk icerige yapismaz, kagit uzerinde ince bir cizgi gibi durur. */
::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .24);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    transition: background-color .16s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, .44);
}

/* Surukleerken markanin kirmizisi - nerede oldugun belli olsun. */
::-webkit-scrollbar-thumb:active {
    background-color: rgba(239, 43, 82, .62);
}

/* ---------- 2) `scrollbar-width: thin` yazan kaplari serbest birak ----------
   Asagidaki liste projede gercekten `thin` atanan kaplardan olusuyor.
   Cubugu BILEREK gizleyenler (.room-list, .whitoo-category-filter-scroll,
   .woo-cinema-tabs, .room-bar, .wlive-*, chip seritleri) LISTEDE YOK -
   onlarin gizli kalmasi gerekiyor. */
#cnemoji-show,
#room-manage-tab,
#v-profile-tab,
#v-profile-tabContent,
.chat-scroll,
.channel-container,
.channel-list,
.height-scroll,
.height-scroll-rpanel,
.height-scroll-rpanelx,
.messages,
.radio-station-list,
.rightbar-wrapper,
.room-users,
.room-users-row,
.screen-rail,
.sidebar-height-fix,
.woo-cinema-chat-list,
.woo-effect-grid {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

/* ---------- 3) Firefox: pseudo-eleman yok, standart ozelliklerle ayni his ---------- */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, .34) transparent;
    }
    /* gizli kalmasi gerekenler gizli kalsin */
    .room-list,
    .room-bar,
    .woo-cinema-tabs,
    .wlive-categories,
    .wlive-mode-nav,
    .wx26-cat-chips,
    .whitoo-category-filter-scroll,
    .whitoo-explore-category-chips,
    .looai-hero-chips {
        scrollbar-width: none;
    }
}

/* ---------- 4) ID tasiyan kurallarin ustune cikma ----------
   whitoo-rightpanel.css icindeki kurallar `body.incallx #rightbar-wrapper *`
   bicimindeydi; ID onceligi tasidiklari icin yukaridaki sinif secicileri
   onlari gecemiyordu. Ayni bicimi `html` onekiyle tekrarlayip asiyoruz. */
html body.incallx #rightbar-wrapper .height-scroll-rpanelx,
html body.incallx #rightbar-wrapper .height-scroll-rpanel,
html body.incallx #rightbar-wrapper .room-users,
html body.incallx #rightbar-wrapper .room-users-row,
html body.incallx #rightbar-wrapper .tab-pane,
html body.incallx #rightbar-wrapper .rightbar-wrapper,
html body.incallx #rpanel-user-info > .height-scroll-rpanelx,
html body.incallx .right-panel > #rpanel-tabContent > .tab-pane > .height-scroll-rpanelx,
html body.incallx #sidebar-wrapper .channel-container,
html body.incallx #sidebar-wrapper .channel-list,
html body.incallx .wsm-shell .sidebar-profile #v-profile-tab,
html body.incallx .wsm-shell #v-profile-tabContent {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

/* Sag panelin kendi 7px'lik webkit kurallari da ayni olcuye gelsin. */
html body.incallx #rightbar-wrapper *::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
}
html body.incallx #rightbar-wrapper *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .24) !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
}
html body.incallx #rightbar-wrapper *::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .44) !important;
}
html body.incallx #rightbar-wrapper *::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ---------- 5) Eski parlak cubuklari kapat ----------
   whitoo-brand.css:580 GLOBAL bir `::-webkit-scrollbar-thumb` icinde
   `linear-gradient(180deg,#bfc2ca,var(--whitoo-red-2)) !important` tasiyordu -
   sitedeki kalin beyaz-kirmizi cubuk buydu. whitoo-refresh.css de sohbet ve
   sag panel icin turkuaz-kirmizi gradyanlar koymustu. Ikisini de sondurup
   tek bir sessiz gri cubuga indiriyoruz. */
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .24) !important;
    background-clip: padding-box !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .44) !important;
    background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:active {
    background: rgba(239, 43, 82, .62) !important;
    background-clip: padding-box !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* refresh.css'in daha ozel gradyan kurallari */
html body.incallx .chat-scroll::-webkit-scrollbar-thumb,
html body.incallx #main-private .messages.chats::-webkit-scrollbar-thumb,
html body.incallx .messages.chats::-webkit-scrollbar-thumb,
html body.incallx .rightbar-wrapper::-webkit-scrollbar-thumb,
html body.incallx .height-scroll::-webkit-scrollbar-thumb,
html body.incallx .height-scroll-rpanel::-webkit-scrollbar-thumb,
html body.incallx .height-scroll-rpanelx::-webkit-scrollbar-thumb,
html body.incallx .channel-container::-webkit-scrollbar-thumb,
html body.incallx .sidebar-room .channel-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .24) !important;
    background-clip: padding-box !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
}
html body.incallx .chat-scroll::-webkit-scrollbar-thumb:hover,
html body.incallx #main-private .messages.chats::-webkit-scrollbar-thumb:hover,
html body.incallx .messages.chats::-webkit-scrollbar-thumb:hover,
html body.incallx .rightbar-wrapper::-webkit-scrollbar-thumb:hover,
html body.incallx .height-scroll::-webkit-scrollbar-thumb:hover,
html body.incallx .height-scroll-rpanel::-webkit-scrollbar-thumb:hover,
html body.incallx .height-scroll-rpanelx::-webkit-scrollbar-thumb:hover,
html body.incallx .channel-container::-webkit-scrollbar-thumb:hover,
html body.incallx .sidebar-room .channel-list::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .44) !important;
    background-clip: padding-box !important;
}