/* ==============================================================================
   Tushly Live Room — Master Modern UI & Action Bar Stylesheet
   Architecture: Clean modular sections, robust specificity, zero redundancy.
   ============================================================================== */

/* ==============================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ============================================================================== */
:root {
    --tushly-bg: #0f1115;
    --tushly-panel: #161822;
    --tushly-border: rgba(255, 255, 255, 0.12);
    --tushly-pink-grad: linear-gradient(135deg, #ff2d55 0%, #ff5277 100%);
    --tushly-pink-glow: 0 4px 14px rgba(255, 45, 85, 0.4);
    --tushly-gold-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --tushly-gold-glow: 0 4px 14px rgba(217, 119, 6, 0.4);
    --tushly-purple-grad: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --tushly-purple-glow: 0 4px 14px rgba(139, 92, 246, 0.4);
    --tushly-red-grad: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --tushly-red-glow: 0 4px 14px rgba(239, 68, 68, 0.4);
    --tushly-dark-btn: #1f232e;
    --tushly-dark-hover: #292e3c;
    --tushly-text: #f9fafb;
    --tushly-text-muted: #9ca3af;
}

/* ==============================================================================
   2. GLOBAL PURGE: WATERMARKS & STRAY UNSTYLED ARTIFACTS
   ============================================================================== */
#tushly-wm-host,
.tushly-userwm,
.tushly-userwm-item,
[data-tushly-user-watermark] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide legacy unstyled floating avatars and stray logos */
html body #bio2 .profilePic,
html body .profilePic,
html body #bio2 .videoContainer > .profilePic,
html body #bio2 .container > .profilePic,
html body #bio2 .videoOptions img[src*="logo"],
html body #bio2 #loggedOutButtons img,
html body #bio2 .tushly-bottom-badge,
html body #bio2 .mian-div-username {
    display: none !important;
}

/* ==============================================================================
   3. VIDEO PLAYER CONTAINER & FLOATING CONTROL OVERLAYS
   ============================================================================== */
html body #bio2 .videoContainer {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #000 !important;
}

html body #bio2 #streamerVideo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Soften offline video background poster */
html body #bio2 #backgroundVideo,
html body #bio2 .videoContainer img#backgroundVideo {
    filter: brightness(0.68) contrast(1.08) !important;
    object-fit: contain !important;
}

/* Unified circular frosted-glass video control buttons (Exit, Expand, Mute/Volume) */
html body #bio2 a.exit,
html body #bio2 a.expand,
html body #bio2 .videoOptions a.volume,
html body #bio2 .videoOptions a.mute {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(15, 17, 23, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 50% !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.15s ease !important;
    z-index: 25 !important;
}

html body #bio2 a.exit:hover,
html body #bio2 a.expand:hover,
html body #bio2 .videoOptions a.volume:hover,
html body #bio2 .videoOptions a.mute:hover {
    background: rgba(255, 46, 179, 0.25) !important;
    border-color: #ff2eb3 !important;
    color: #ff2eb3 !important;
    transform: scale(1.06) !important;
}

html body #bio2 a.exit i,
html body #bio2 a.expand svg,
html body #bio2 .videoOptions a.volume i,
html body #bio2 .videoOptions a.mute i {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Floating volume / mute toggle pinned at top right */
html body #bio2 a.mute,
html body #bio2 a.volume {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 35 !important;
}

/* Floating Join Free badge on desktop */
html body #bio2 .cta-badge,
html body .cta-badge {
    position: absolute !important;
    bottom: 68px !important;
    right: 16px !important;
    width: 76px !important;
    height: 76px !important;
    z-index: 35 !important;
}

/* ==============================================================================
   4. DESKTOP DOCKED ACTION BAR & BUTTON LAYOUT
   ============================================================================== */
html body #bio2 .videoOptions,
html body #bio2 div#loggedOutButtons.videoOptions {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: rgba(15, 17, 22, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Flatten nested Bootstrap wrapper divs */
html body #bio2 .custom-btn,
html body #bio2 #loggedOutButtonsWidth,
html body #bio2 .left-seciton-livechat {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    position: static !important;
    height: 100% !important;
}

html body #bio2 .custom-btn > .my-chat-room-classes,
html body #bio2 .custom-btn > .left-seciton-livechat,
html body #bio2 .custom-btn .text-extenston,
html body #bio2 .custom-btn .row,
html body #bio2 .custom-btn [class*="col-"],
html body #bio2 #loggedOutButtonsWidth > div,
html body #bio2 #loggedOutButtonsWidth [class*="col-"] {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body #bio2 #loggedOutButtonsWidth a {
    margin-right: 0 !important;
}

/* Hide broadcaster controls in viewer room */
html body #bio2 .videoOptions .video-controles,
html body #bio2 .video-controles a.mic,
html body #bio2 .video-controles a.cam,
html body #bio2 .video-controles a.mute,
html body #bio2 .video-controles .tooltip-right-container,
html body #bio2 .video-controles .endSpecChat {
    display: none !important;
}

/* ==============================================================================
   5. ACTION BUTTON PILLS: BASE GEOMETRY & COLOR HIERARCHY
   ============================================================================== */

/* Base Pill Button */
html body #bio2 .videoOptions a,
html body #bio2 .custom-btn a,
html body #bio2 #loggedOutButtonsWidth a,
html body #bio2 #loggedOutButtonsWidth > a,
html body #tushlyMobileBar a,
html body #bio2 a#tushlyTipMenuBtn,
html body #tushlyMobileBar a#tushlyTipMenuBtn,
html body #bio2 a#tushlyDmBtn,
html body #tushlyMobileBar a#tushlyDmBtn {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    height: 36px !important;
    min-width: max-content !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 999px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    outline: none !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    float: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}

/* Icons & SVGs inside buttons */
html body #bio2 .videoOptions a i, html body #bio2 .videoOptions a svg,
html body #bio2 .custom-btn a i, html body #bio2 .custom-btn a svg,
html body #bio2 #loggedOutButtonsWidth a i, html body #bio2 #loggedOutButtonsWidth a svg,
html body #tushlyMobileBar a i, html body #tushlyMobileBar a svg {
    width: 15px !important;
    height: 15px !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* 1. Send Gift -> VIBRANT PINK GRADIENT */
html body #bio2 a.tip,
html body #bio2 a[data-tooltip*="Gift"],
html body #bio2 a[data-tooltip*="gift"],
html body #tushlyMobileBar a.tip,
html body #tushlyMobileBar a[data-tooltip*="Gift"],
html body #tushlyMobileBar a[data-tooltip*="gift"] {
    background: var(--tushly-pink-grad) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: var(--tushly-pink-glow) !important;
}
html body #bio2 a.tip:hover,
html body #bio2 a[data-tooltip*="Gift"]:hover,
html body #tushlyMobileBar a.tip:hover,
html body #tushlyMobileBar a[data-tooltip*="Gift"]:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(255, 45, 85, 0.6) !important;
    filter: brightness(1.1) !important;
}
html body #bio2 a[data-tooltip*="Gift"] svg,
html body #bio2 a.tip svg,
html body #tushlyMobileBar a[data-tooltip*="Gift"] svg {
    fill: #fff !important;
}

/* 2. Go Private -> RICH AMBER / GOLD GRADIENT */
html body #bio2 a.requestPrivateChat,
html body #bio2 a[data-tooltip*="Private"]:not(.endPrivateChat),
html body #bio2 a[data-tooltip*="private"]:not(.endPrivateChat),
html body #tushlyMobileBar a.requestPrivateChat,
html body #tushlyMobileBar a[data-tooltip*="Private"]:not(.endPrivateChat),
html body #tushlyMobileBar a[data-tooltip*="private"]:not(.endPrivateChat) {
    background: var(--tushly-gold-grad) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: var(--tushly-gold-glow) !important;
}
html body #bio2 a.requestPrivateChat:hover,
html body #bio2 a[data-tooltip*="Private"]:hover,
html body #tushlyMobileBar a.requestPrivateChat:hover,
html body #tushlyMobileBar a[data-tooltip*="Private"]:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.6) !important;
    filter: brightness(1.1) !important;
}
html body #bio2 a[data-tooltip*="Private"] svg,
html body #bio2 a.requestPrivateChat svg,
html body #tushlyMobileBar a[data-tooltip*="Private"] svg {
    fill: #fff !important;
}

/* 3. Tip Menu -> PURPLE / VIOLET GRADIENT */
html body #bio2 a#tushlyTipMenuBtn,
html body #tushlyMobileBar a#tushlyTipMenuBtn {
    background: var(--tushly-purple-grad) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: var(--tushly-purple-glow) !important;
}
html body #bio2 a#tushlyTipMenuBtn:hover,
html body #tushlyMobileBar a#tushlyTipMenuBtn:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.6) !important;
    filter: brightness(1.1) !important;
}
html body #bio2 a#tushlyTipMenuBtn i,
html body #tushlyMobileBar a#tushlyTipMenuBtn i {
    color: #fff !important;
}

/* 4. Direct Message -> SLEEK DARK SLATE */
html body #bio2 a#tushlyDmBtn,
html body #tushlyMobileBar a#tushlyDmBtn {
    background: var(--tushly-dark-btn) !important;
    color: var(--tushly-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}
html body #bio2 a#tushlyDmBtn:hover,
html body #tushlyMobileBar a#tushlyDmBtn:hover {
    background: var(--tushly-dark-hover) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}
html body #bio2 a#tushlyDmBtn i,
html body #tushlyMobileBar a#tushlyDmBtn i {
    color: var(--tushly-text) !important;
}

/* 5. Follow Room -> DARK SLATE WITH GOLD STAR & TEXT */
html body #bio2 a[data-tooltip*="Follow"],
html body #bio2 a.biochatroomfollow:not([data-tooltip*="Private"]):not([data-tooltip*="Gift"]):not([data-tooltip*="gift"]):not(#tushlyTipMenuBtn),
html body #tushlyMobileBar a[data-tooltip*="Follow"],
html body #tushlyMobileBar a.biochatroomfollow:not([data-tooltip*="Private"]):not([data-tooltip*="Gift"]):not([data-tooltip*="gift"]):not(#tushlyTipMenuBtn) {
    background: var(--tushly-dark-btn) !important;
    color: var(--tushly-follow-text, #fbbf24) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: none !important;
}
html body #bio2 a[data-tooltip*="Follow"]:hover,
html body #tushlyMobileBar a[data-tooltip*="Follow"]:hover {
    background: var(--tushly-dark-hover) !important;
    border-color: rgba(251, 191, 36, 0.6) !important;
    transform: translateY(-1px) !important;
}
html body #bio2 a[data-tooltip*="Follow"] svg,
html body #tushlyMobileBar a[data-tooltip*="Follow"] svg {
    fill: var(--tushly-follow-text, #fbbf24) !important;
}

/* 6. Get Tokens -> VIBRANT PINK ACCENT */
html body #bio2 a[data-tooltip*="Tokens"],
html body #bio2 a.biochatroom[data-tooltip*="Tokens"],
html body #tushlyMobileBar a[data-tooltip*="Tokens"],
html body #tushlyMobileBar a.biochatroom[data-tooltip*="Tokens"] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
}
html body #bio2 a[data-tooltip*="Tokens"]:hover,
html body #tushlyMobileBar a[data-tooltip*="Tokens"]:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.6) !important;
}
html body #bio2 a[data-tooltip*="Tokens"] svg,
html body #tushlyMobileBar a[data-tooltip*="Tokens"] svg {
    fill: #fff !important;
}

/* 7. Exit Private Chat -> CRIMSON RED */
html body #bio2 a.endPrivateChat,
html body #tushlyMobileBar a.endPrivateChat {
    background: var(--tushly-red-grad) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: var(--tushly-red-glow) !important;
}
html body #bio2 a.endPrivateChat:hover,
html body #tushlyMobileBar a.endPrivateChat:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.6) !important;
}
html body #bio2 a.endPrivateChat.hidden,
html body #tushlyMobileBar a.endPrivateChat.hidden {
    display: none !important;
}

/* Header profile & fan club pills */
html body .modelsHeaderName a.topProfileBtn,
html body .modelsHeaderName a.fanClubBtn,
.topProfileBtn,
.fanClubBtn {
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

/* ==============================================================================
   6. CHAT WINDOW, HEADER, MESSAGES & COMPOSER
   ============================================================================== */

/* Luxury dark glass Chat Header (.chatLabel) */
html body #bio2 .chatWindow .chatLabel,
html body .chatLabel {
    background: rgba(15, 17, 23, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 38px !important;
}

html body #bio2 #user-count,
html body #user-count {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    background: transparent !important;
    color: #f9fafb !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html body #bio2 .chat-toggle-buttons,
html body .chat-toggle-buttons {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

html body #bio2 .chat-toggle-buttons button,
html body .chat-toggle-buttons button {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    width: 32px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

html body #bio2 .chat-toggle-buttons button.active,
html body #bio2 .chat-toggle-buttons button:hover,
html body .chat-toggle-buttons button.active,
html body .chat-toggle-buttons button:hover {
    background: rgba(255, 46, 179, 0.2) !important;
    border-color: #ff2eb3 !important;
    color: #ff2eb3 !important;
}

html body #bio2 .perMinuteFee,
html body .perMinuteFee {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #bio2 .cpmTop,
html body .cpmTop {
    background: rgba(255, 46, 179, 0.15) !important;
    border: 1px solid rgba(255, 46, 179, 0.35) !important;
    color: #ff2eb3 !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Chat Room & Messages flow */
html body #bio2 .chatRoom,
html body .chatRoom {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

html body #bio2 .chatWindow .chatRoom #messages,
html body div#bio2 .chatWindow .chatRoom #messages,
html body #messages {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 8px 12px 100px 12px !important;
    height: auto !important;
    max-height: calc(100vh - 460px) !important;
    color: #cbd5e1 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow-y: auto !important;
}

html body #bio2 .chatWindow .chatRoom #welcomeText,
html body #welcomeText {
    position: static !important;
    top: auto !important;
    margin: 4px 0 8px 0 !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

html body #bio2 #welcomeText a,
html body #welcomeText a {
    color: #ff2eb3 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Goal Progress Bar */
html body #bio2 .goal-bar-container,
html body .goal-bar-container {
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    clear: both !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-sizing: border-box !important;
}

html body #bio2 .goal-bar-fill {
    background: linear-gradient(90deg, #ff2eb3, #ec4899) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 999px !important;
    opacity: 0.45 !important;
}

/* ==============================================================================
   7. INTERACTIVE DEVICE CONTROLS (LOVENSE)
   ============================================================================== */
html body .loggedOutLovense:not(.tushly-lovense-on),
html body .lovense-widget:not(.tushly-lovense-on) {
    display: none !important;
}

html body .loggedOutLovense.tushly-lovense-on,
html body .lovense-widget.tushly-lovense-on {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px auto !important;
    padding: 6px 14px !important;
    background: rgba(18, 20, 28, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    z-index: 10 !important;
}

html body .loggedOutLovense.tushly-lovense-on .tip-buttonsOFF,
html body .lovense-widget.tushly-lovense-on .tip-buttonsOFF,
html body .tip-buttonsOFF.tushly-lovense-on,
html body .tip-buttons.tushly-lovense-on {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .tip-buttonsOFF.tushly-lovense-on a,
html body .tip-buttons.tushly-lovense-on a,
html body .loveHover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    transition: transform 0.15s ease !important;
}
html body .loveHover:hover {
    transform: scale(1.08) !important;
}

/* ==============================================================================
   8. MODALS & POPUPS (OFFLINE, GIFT, TIP MENU)
   ============================================================================== */

/* Modal Stacking & Background Isolation */
html body.tushly-gift-open a.exit,
html body.tushly-gift-open a.expand,
html body.tushly-gift-open a.volume,
html body.tushly-gift-open a.mute,
html body.tushly-gift-open #bio2 a.exit,
html body.tushly-gift-open #bio2 a.expand,
html body.tushly-gift-open #bio2 a.volume,
html body.tushly-gift-open #bio2 a.mute,
html body.tushly-gift-open #bio2 div.videoOptions a.exit,
html body.tushly-gift-open #bio2 div.videoOptions a.expand,
html body.tushly-gift-open #bio2 div.videoOptions a.volume,
html body.tushly-gift-open #bio2 div.videoOptions a.mute,
html body.tushly-profile-open a.mute,
html body.tushly-profile-open a.volume,
html body.tushly-profile-open a.exit,
html body.tushly-profile-open a.expand,
html body.tushly-profile-open #tushly-wm-host,
html body.tushly-profile-open .cta-badge,
html body.tushly-profile-open #tushlyMobileBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Model Offline Modal */
html body #offlinePopup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, 92vw) !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: 85vh !important;
    background: #161822 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85) !important;
    z-index: 99999 !important;
    display: block;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow-y: auto !important;
}

html body #offlinePopup h2 {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 12px 0 6px !important;
    letter-spacing: 0.3px !important;
}

html body #offlinePopup p {
    color: #9ca3af !important;
    font-size: 14px !important;
    margin: 0 0 16px !important;
}

html body #offlinePopup .model-thumbnail {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #ff2d55 !important;
    margin: 0 auto !important;
    display: block !important;
}

html body #offlinePopup .close-offline-popup {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    color: #9ca3af !important;
    font-size: 24px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
}

html body #offlinePopup .close-offline-popup:hover {
    color: #fff !important;
}

html body #offlinePopup .notification-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
}

html body #offlinePopup .notification-section p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #d1d5db !important;
}

html body #offlinePopup .button-group {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 12px !important;
}

html body #offlinePopup .button-group button {
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

html body #offlinePopup .btn-profile {
    background: #2a2e3d !important;
    color: #fff !important;
}
html body #offlinePopup .btn-profile:hover {
    background: #373d50 !important;
}

html body #offlinePopup .btn-ok {
    background: var(--tushly-pink-grad) !important;
    color: #fff !important;
    box-shadow: var(--tushly-pink-glow) !important;
}
html body #offlinePopup .btn-ok:hover {
    filter: brightness(1.1) !important;
}

/* Gift Selection Modal */
html body #giftPopup,
html body .gift-selection {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95% !important;
    max-width: 460px !important;
    height: auto !important;
    max-height: 85vh !important;
    background: rgba(14, 14, 18, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 16px 18px 84px 18px !important;
    box-sizing: border-box !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85) !important;
    z-index: 20000 !important;
    color: #fff !important;
    overflow: hidden !important;
}

html body #giftPopup .gift-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

html body #giftPopup h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    width: 100% !important;
    line-height: 1.2 !important;
}

html body #giftPopup p {
    font-size: 13px !important;
    color: #a1a1aa !important;
    margin: 4px 0 12px 0 !important;
    text-align: left !important;
}

html body #giftPopup #closePopup,
html body #giftPopup h2 #closePopup,
html body #giftPopup .gift-popup-header #closePopup {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
    z-index: 20002 !important;
    flex-shrink: 0 !important;
    float: none !important;
}

html body #giftPopup #closePopup:hover,
html body #giftPopup #closePopup:active {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

html body #giftPopup #closePopup i {
    font-size: 18px !important;
    line-height: 1 !important;
    color: #fff !important;
    pointer-events: none !important;
}

html body #giftPopup #gift-container {
    height: 240px !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 6px 2px !important;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
}

html body #giftPopup .gift-item {
    flex: 0 0 calc(25% - 8px) !important;
    width: calc(25% - 8px) !important;
    max-width: calc(25% - 8px) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #e4e4e7 !important;
}

html body #giftPopup .gift-item img {
    width: 48px !important;
    height: 48px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    cursor: pointer !important;
    padding: 3px !important;
    border-radius: 10px !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

html body #giftPopup .gift-item img:hover {
    transform: scale(1.08) !important;
}

html body #giftPopup .gift-item img.selectionBorder {
    border: 2px solid #ec4899 !important;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.6) !important;
    background: rgba(236, 72, 153, 0.15) !important;
}

html body #giftPopup #sendGiftBar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 10px 14px 14px 14px !important;
    text-align: center !important;
    background: rgba(14, 14, 18, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    z-index: 20001 !important;
}

html body #giftPopup #aboutToSend {
    font-size: 11px !important;
    color: #a1a1aa !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

html body #giftPopup #selectedAmount {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #fff !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
}

html body #giftPopup #sendGiftButton {
    padding: 8px 22px !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    background: var(--tushly-pink-grad) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: var(--tushly-pink-glow) !important;
    vertical-align: middle !important;
    transition: opacity 0.15s ease, transform 0.1s ease !important;
}

html body #giftPopup #sendGiftButton:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

html body #giftPopup #sendGiftButton:not(:disabled):hover {
    filter: brightness(1.1) !important;
    transform: scale(1.03) !important;
}

/* Tip Popup (Lovense tips) */
html body #tipPopup {
    z-index: 20000 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* ==============================================================================
   9. PROFILE MEDIA TABS (live-profile.php)
   ============================================================================== */
html body .tabs,
.tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 14px !important;
}

html body .tab,
.tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 38px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

html body .tab:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html body .tab.active {
    background: rgba(255, 46, 179, 0.2) !important;
    border-color: #ff2eb3 !important;
    color: #ff2eb3 !important;
    box-shadow: 0 0 12px rgba(255, 46, 179, 0.3) !important;
}

html body .tab-count,
.tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    padding: 2px 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: inherit !important;
    line-height: 1 !important;
}

/* ==============================================================================
   10. MOBILE RESPONSIVE ARCHITECTURE (< 1120px)
   ============================================================================== */
@media (max-width: 1120px) {
    /* 16:9 Aspect Ratio Video Player at Top */
    html body #bio2 .videoContainer {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    /* On mobile, completely hide the desktop .videoOptions docked bar */
    html body #bio2 .videoOptions,
    html body #bio2 div#loggedOutButtons.videoOptions {
        display: none !important;
    }

    /* Mobile horizontal scrollable action pill bar: docked cleanly above bottom composer */
    #tushlyMobileBar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 10px !important;
        background: rgba(15, 17, 22, 0.96) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4) !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 48px !important;
        z-index: 10030 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
    #tushlyMobileBar::-webkit-scrollbar {
        display: none !important;
    }

    #tushlyMobileBar a {
        height: 32px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        gap: 5px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* On mobile live stream, hide floating CTA badge to prevent overlapping chat & buttons */
    html body #bio2 .cta-badge,
    html body .cta-badge {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    html body #bio2 .cta-badge img,
    html body .cta-badge img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Fixed Composer Bar above safe-area */
    html body #bio2 .chatWindow .chatRoom .message {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #111318 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 10035 !important;
        height: 48px !important;
        box-sizing: border-box !important;
    }

    /* Chat Messages Stream with clean bottom inset so messages NEVER hide under action bar */
    html body #bio2 #messages,
    html body #messages {
        padding-bottom: 110px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* System notice card in messages: sleek dark glass */
    html body #bio2 #messages li.system,
    html body #messages li.system {
        background: rgba(22, 24, 34, 0.88) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        margin: 6px 0 !important;
        color: #d1d5db !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    html body #bio2 #messages li.system a,
    html body #messages li.system a {
        color: #ff2d55 !important;
        font-weight: 700 !important;
        text-decoration: underline !important;
    }
}

/* ===================================================================== */
/* Issue #1 — Custom dark thin scrollbar for live chat messages          */
/* ===================================================================== */
#messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
#messages::-webkit-scrollbar {
    width: 4px;
}
#messages::-webkit-scrollbar-track {
    background: transparent;
}
#messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
#messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ===================================================================== */
/* Issue #3 — Tactile micro-interactions & active-scale on action buttons */
/* Selectors cover both the spec classes and the real markup in use       */
/* (#tushlyMobileBar anchors, .tushly-action-btn, tip/dm buttons).         */
/* ===================================================================== */
#tushlyMobileBar .btn,
#tushlyMobileBar a,
.action-btn,
.tushly-action-btn,
.btn-gift,
.btn-tipmenu,
.btn-goprivate,
a#tushlyTipMenuBtn,
a#tushlyDmBtn {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
#tushlyMobileBar .btn:active,
#tushlyMobileBar a:active,
.action-btn:active,
.tushly-action-btn:active,
.btn-gift:active,
.btn-tipmenu:active,
.btn-goprivate:active,
a#tushlyTipMenuBtn:active,
a#tushlyDmBtn:active {
    transform: scale(0.95);
    filter: brightness(1.15);
}
@media (prefers-reduced-motion: reduce) {
    #tushlyMobileBar .btn,
    #tushlyMobileBar a,
    .action-btn,
    .tushly-action-btn,
    .btn-gift,
    .btn-tipmenu,
    .btn-goprivate,
    a#tushlyTipMenuBtn,
    a#tushlyDmBtn {
        transition: none;
    }
}

/* ===================================================================== */
/* Issue #4 — Adaptive aspect ratios & vertical 9:16 mobile stream layout */
/* Classes toggled by rtc/whep-player.js applyAspect() on the <video> and  */
/* its #bio2 container. Landscape keeps 16:9; portrait fills without bars. */
/* ===================================================================== */
#streamerVideo.is-landscape-stream,
video.mainVideo.is-landscape-stream {
    object-fit: contain;
}
#streamerVideo.is-portrait-stream,
video.mainVideo.is-portrait-stream {
    object-fit: cover;          /* fill height, trim sides instead of pillarboxing */
    object-position: center;
}
#bio2.is-portrait-stream video.mainVideo,
#bio2.is-portrait-stream #streamerVideo {
    max-height: 100%;
    margin-inline: auto;
}

/* Optional TikTok/Reels-style full-screen mode: add class `tushly-reels`   */
/* to <body> (or #bio2) to let the video fill the screen with chat layered  */
/* over the bottom-left behind a gradient mask.                             */
body.tushly-reels #bio2,
#bio2.tushly-reels {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
}
body.tushly-reels #bio2 video.mainVideo,
#bio2.tushly-reels video.mainVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.tushly-reels #messages,
#bio2.tushly-reels #messages {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: min(92%, 520px);
    max-height: 42vh;
    padding: 12px 14px 90px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%);
    mask-image: linear-gradient(to top, #000 70%, transparent 100%);
    pointer-events: auto;
}
@media (max-width: 767px) {
    #bio2.is-portrait-stream video.mainVideo,
    #bio2.is-portrait-stream #streamerVideo {
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
    }
}

/* Current client brief: real wallet balance, optional device side panel. */
html body #tushlyWallet {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 16px;
}
html body #tushlyWallet .tokensHeaderBtn,
html body #tushlyWallet a.bal {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    height: 36px !important;
    width: auto !important;
    padding: 0 10px !important;
    color: #f9fafb !important;
    font-size: 13px !important;
    background: #1f232e !important;
    border-radius: 8px !important;
}
html body #tushlyWallet a.bal i {
    display: inline !important;
    font: inherit !important;
    font-variant-numeric: tabular-nums;
}
html body #bio2 .chatWindow:has(#tushlyLovensePanel) {
    display: flex !important;
    flex-direction: column !important;
}
html body #bio2 .chatWindow:has(#tushlyLovensePanel) .chatRoom {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
html body #tushlyLovensePanel {
    flex: 0 0 auto;
    position: relative;
    background: #161822;
    color: #f9fafb;
    border-block: 1px solid rgba(255,255,255,.1);
    font: 13px/1.5 Arial, sans-serif;
}
html body #tushlyLovensePanel > summary {
    cursor: pointer;
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-weight: 700;
}
html body #tushlyLovensePanel > summary:focus-visible {
    outline: 2px solid #ff5277;
    outline-offset: -3px;
}
html body #tushlyLovensePanel .tushly-lovense-content {
    padding: 0 12px 12px;
    max-height: 220px;
    overflow: auto;
}
html body #tushlyLovensePanel .loggedOutLovense,
html body #tushlyLovensePanel .lovense-widget,
html body #tushlyLovensePanel .tip-buttonsOFF,
html body #tushlyLovensePanel .tip-buttons {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !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;
    visibility: visible !important;
    overflow: visible !important;
}
html body #tushlyLovensePanel [id^="lovenseScroller"] {
    position: static !important;
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100%;
    min-width: 0;
    padding-block: 6px;
}
@media (max-width: 1120px) {
    html body #tushlyWallet { padding-right: 8px; gap: 4px; }
    html body #tushlyLovensePanel .tushly-lovense-content { max-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    html body #bio2 *, html body #tushlyMobileBar * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Quiet chrome keeps the stream, chat and primary actions in focus. */
html body .chatHeader:has(#tushlyWallet) {
    display: flex !important;
    align-items: center !important;
    background: #11131a !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2d38 !important;
    box-shadow: none !important;
}
html body:has(#bio2) .modelsHeaderName {
    background: #191b25 !important;
    background-image: none !important;
    border-bottom: 1px solid #2a2d38 !important;
    min-height: 44px;
    box-sizing: border-box;
}
html body:has(#bio2) .modelsHeaderName a {
    background: transparent !important;
    color: #c8cbd5 !important;
    box-shadow: none !important;
}
html body #bio2 .chatWindow {
    background: #11131a !important;
    border: 1px solid #2a2d38 !important;
    border-radius: 12px;
    overflow: hidden;
}
html body #bio2 .chatWindow .chatRoom { background: #11131a !important; }
html body #bio2 .videoOptions a { box-shadow: none !important; }
html body #bio2 #streamerDiv:has(> video) { isolation: isolate; }
html body #bio2 .videoContainer .tushly-watermark { bottom: 64px !important; }
@media (max-width: 1120px) {
    html body #bio2 .videoContainer .tushly-watermark { bottom: 12px !important; }
    html body #bio2 .chatWindow { border-radius: 0; }
}
html body #offlinePopup button.close-offline-popup {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #252835 !important;
    color: #fff !important;
    line-height: 1 !important;
}
html body #offlinePopup button.close-offline-popup:focus-visible {
    outline: 2px solid #ff5277;
    outline-offset: 2px;
}
html body:has(#bio2) .modelChatHeader {
    background: #191b25 !important;
    background-image: none !important;
}
html body #tushlyLovensePanel summary { list-style: none; }
html body #tushlyLovensePanel summary::after { content: '+'; float: right; color: #aab0c0; }
html body #tushlyLovensePanel[open] summary::after { content: '−'; }
html body #tushlyLovensePanel [id^="lovenseScroller"] { max-width: none !important; width: 100% !important; }
@media (max-width: 1120px) and (orientation: portrait) {
    html body:has(#bio2) { background: #0f1115 !important; }
    html body .chatHeader:has(#tushlyWallet) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 48px !important;
        z-index: 10100 !important;
    }
    html body:has(#bio2) .modelChatHeader {
        display: flex !important;
        align-items: center !important;
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        width: 100% !important;
        height: 40px !important;
        z-index: 10099 !important;
    }
    html body:has(#bio2) .modelsHeaderName {
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        width: calc(100% - 56px) !important;
        min-height: 40px;
        margin: 0 0 0 56px !important;
        white-space: nowrap;
        overflow-x: auto;
    }
    html body:has(#bio2) .modelsHeaderName a { padding: 0 6px !important; }
    html body:has(#bio2) .modelsHeaderName .textScroller { display: none !important; }
    html body #bio2.vdchat-overlay {
        position: fixed !important;
        top: 88px !important;
        bottom: calc(108px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }
    html body #bio2.vdchat-overlay > .container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #bio2.vdchat-overlay > .container > .col-lg {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #bio2.vdchat-overlay .videoContainer {
        height: clamp(150px, 27vh, 260px) !important;
        min-height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #bio2.vdchat-overlay > .container > .col-sm {
        position: relative !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #bio2.vdchat-overlay .chatWindow {
        position: static !important;
        height: 100% !important;
        min-height: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    html body #bio2.vdchat-overlay .chatLabel {
        position: static !important;
        height: 38px !important;
        min-height: 38px !important;
        flex: 0 0 auto !important;
    }
    html body #bio2.vdchat-overlay .chatRoom {
        position: relative !important;
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    html body #bio2.vdchat-overlay .chatRoom #messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 8px 12px !important;
    }
    html body #bio2.vdchat-overlay .chatRoom .message {
        position: fixed !important;
        bottom: env(safe-area-inset-bottom) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
    }
    html body #tushlyMobileBar { bottom: calc(52px + env(safe-area-inset-bottom)) !important; }
    html body #bio2.vdchat-overlay a.exit { top: 8px !important; right: 8px !important; }
    html body #bio2 .videoContainer #backgroundVideo {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    html body #bio2 .perMinuteFee { flex: 0 0 auto; }
}
html body div#bio2 div.videoOptions a.requestPrivateChat {
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding-block: 0 !important;
}
html body #bio2 a.endSpecChat.hidden { display: none !important; }
html body #bio2 .videoOptions a.bio { display: none !important; }
/* Room ranking remains readable without covering users or chat controls. */
html body #bio2 .chatLabel .refreshKing {
    position: static !important;
    flex: 0 1 100%;
    width: 100% !important;
    margin: 0 !important;
}
html body #bio2 .chatLabel .king {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 2px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    text-align: left !important;
}
html body #bio2 .videoContainer > img#backgroundVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    z-index: 0 !important;
}
html body #bio2 .videoContainer .tushly-watermark { z-index: 25 !important; }
html body #bio2 .cta-badge { bottom: 100px !important; }
@media (max-width: 1120px) and (orientation: portrait) {
    html body:has(#bio2) .modelChatHeader {
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body #bio2 { background: #0f1115 !important; }
}
html body:has(#bio2) { background: #0f1115 !important; background-image: none !important; }
html body #bio2 .videoContainer .tushly-watermark {
    opacity: .65 !important;
    filter: drop-shadow(0 1px 2px #000);
    background: rgba(0,0,0,.3);
    padding: 4px 6px;
    border-radius: 5px;
}
html body #bio2 .tushly-room-ranking,
html body #bio2 .tushly-room-ranking * {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    background: transparent !important;
    color: #aab0c0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    transform: none !important;
}
html body #bio2 .tushly-room-ranking { flex: 0 0 auto; padding: 8px 12px !important; }
html body #bio2 .videoContainer .tushly-watermark { z-index: 999 !important; }
html body #tushlyWallet a.bal i.balBG { color: #f9fafb !important; background: transparent !important; }
@media (max-width: 1120px) and (orientation: portrait) {
    html:has(#bio2), html body:has(#bio2) { overflow: hidden !important; height: 100% !important; }
    html body #bio2 .chatWindow { transform: none !important; filter: none !important; backdrop-filter: none !important; }
}
@media (max-width: 1120px) and (orientation: portrait) {
    html body #bio2.vdchat-overlay > .container > .col-lg {
        height: clamp(150px, 27vh, 260px) !important;
        min-height: clamp(150px, 27vh, 260px) !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    html body #bio2.vdchat-overlay .videoContainer { height: 100% !important; }
    html body #bio2 #backgroundVideo {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        transform: none !important;
        object-fit: contain !important;
    }
    html body #bio2.vdchat-overlay > .container > .clear { display: none !important; }
}
@media (max-width: 1120px) and (orientation: portrait) {
    html body #bio2.vdchat-overlay > .container > .col-sm,
    html body #bio2.vdchat-overlay .chatWindow {
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}