/* Live-room polish: media, canvas framing, safe-area offsets and transport retain their own rules. */
.vp-single-live-stage .vp-live-room-header {
    margin-right: 10px;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(17, 24, 36, .72), rgba(17, 24, 36, .25));
    box-sizing: border-box;
}
.vp-single-live-stage .vp-live-room-header .header-controls-inner {
    width: 100%;
    min-width: 0;
    row-gap: 6px;
    grid-template-columns: minmax(0, 1fr);
}
.vp-single-live-stage .vp-live-room-header .vp-live-room-title {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(17px, 2.2vw, 22px) !important;
    font-weight: 700;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.vp-single-live-stage .vp-live-room-header .header-controls-row {
    width: max-content;
    min-width: 100%;
    gap: 6px;
    padding: 1px 2px 3px;
    box-sizing: border-box;
}
.vp-single-live-stage .vp-live-room-header .header-controls-scroll {
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
    overscroll-behavior-x: contain;
}
.vp-single-live-stage .vp-live-room-header .header-controls-scroll::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(255, 255, 255, .5);
}
.vp-single-live-stage .vp-live-room-header .cast-info {
    top: 0 !important;
    margin-left: 4px;
}
.vp-single-live-stage .vp-live-room-header #liveviewers { top: 0 !important; }
.vp-single-live-stage .vp-live-room-header .button-design,
.vp-single-live-stage .vp-live-room-header .button-design2,
.vp-single-live-stage .vp-live-room-header .button-design3 {
    min-height: 36px;
    box-sizing: border-box;
}
.vp-single-live-stage .vp-live-room-header .vp-live-room-flag {
    width: clamp(78px, 18vw, 120px) !important;
    margin-left: 8px;
    vertical-align: middle;
}
.vp-single-live-stage :is(button, input, textarea, a, [tabindex]):focus-visible {
    outline: 2px solid #ffe29b !important;
    outline-offset: 3px;
}
/* A single live composer owns the bottom edge. Site navigation opens on demand. */
body.voicepa-product-ui.vp-live-room-page {
    --vp-live-composer-h: 60px;
    --vp-live-keyboard-inset: 0px;
    --vp-live-nav-h: 0px;
    --vp-live-progress-h: 0px;
    --vp-live-dock-gap: 12px;
    --vp-live-dock-top: calc(var(--vp-live-composer-h) + var(--vp-live-keyboard-inset) + var(--vp-live-dock-gap));
    --vp-live-floating-bottom: calc(var(--vp-live-dock-top) + var(--vp-live-nav-h) + var(--vp-live-progress-h) + 12px);
    --vp-dock-clearance: calc(var(--vp-live-floating-bottom) + 8px);
    padding-bottom: calc(var(--vp-live-composer-h) + var(--vp-live-dock-gap));
}
body.vp-live-room-page .vp-single-live-stage [data-vp-live-stage] {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--vp-live-stage-height, calc(100svh - 164px)) !important;
    min-height: 220px;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}
.vp-single-live-stage [data-vp-live-stage] :is(#localVideo, .host) { height: 100% !important; max-height: 100% !important; }
body.vp-live-room-page .vp-single-live-stage [data-vp-live-composer] {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: auto !important;
    bottom: calc(var(--vp-live-keyboard-inset) + var(--vp-live-dock-gap)) !important;
    width: auto !important;
    max-width: 840px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* No transform/filter: gift dialogs inside must remain fixed to the viewport. */
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box;
    z-index: 1001;
}
.vp-single-live-stage [data-vp-live-composer] > .contents.input {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid #e4d8df;
    border-radius: 16px;
    background: #fff !important;
    box-shadow: 0 5px 24px #21152426;
}
.vp-single-live-stage [data-vp-live-composer] .chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px 56px;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.vp-single-live-stage [data-vp-live-composer] .chat-form > .msg {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none !important;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #e1dce0;
    border-radius: 10px;
    background: #f8f6f8;
    color: #342a35;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
}
.vp-single-live-stage [data-vp-live-composer] .chat-form > :is(#sendButton, .cracker-live-gift, .vp-live-menu-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f8eef4;
    color: #903469;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.vp-single-live-stage [data-vp-live-composer] .chat-form > #sendButton { grid-column: 2; background: #98386e; color: #fff; }
.vp-single-live-stage [data-vp-live-composer] .chat-form > .cracker-live-gift { grid-column: 3; }
.vp-single-live-stage [data-vp-live-composer] .chat-form > .vp-live-menu-toggle { grid-column: 4; flex-direction: column; gap: 2px; font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1.2; }
.vp-single-live-stage [data-vp-live-composer] .vp-live-menu-toggle .vp-ui-icon { width: 20px; height: 20px; }
.vp-single-live-stage [data-vp-live-composer] .vp-live-menu-toggle[aria-expanded="true"] { background: #eed9e6; color: #76234f; }
.vp-single-live-stage [data-vp-live-composer] #sendButton .triangle { display: block; float: none; margin: 0; padding: 0; transform: none; line-height: 1; }
.vp-single-live-stage [data-vp-live-composer] .cracker-live-gift .cracker-front { position: static; width: 30px; max-width: 30px; height: 30px; object-fit: contain; margin: 0; }
.vp-single-live-stage [data-vp-live-composer] .cracker-live-status { grid-column: 1 / -1; grid-row: 2; max-width: none; min-width: 0; color: #6a5363; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.vp-single-live-stage [data-vp-live-composer] .cracker-live-status:empty { display: none; }
.vp-single-live-stage [data-vp-live-composer] :is(button, input):focus-visible { outline: 2px solid #91396d !important; outline-offset: -3px; }
body.voicepa-product-ui.vp-live-room-page #footer-menu.vp-bottom-nav {
    display: none !important;
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: auto !important;
    bottom: calc(var(--vp-live-dock-top) + var(--vp-live-progress-h) + 8px) !important;
    width: auto !important;
    max-width: 620px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 4px 6px !important;
    border: 1px solid #eadde5;
    border-radius: 14px;
    transform: none !important;
    z-index: 1002 !important;
}
body.voicepa-product-ui.vp-live-room-page.vp-live-menu-open #footer-menu.vp-bottom-nav { display: block !important; }
body.voicepa-product-ui.vp-live-room-page:has(#expanded-menu.vp-create-sheet:not([hidden])) #footer-menu.vp-bottom-nav { z-index: 10050 !important; }
body.vp-live-room-page .vp-single-live-stage #progress-container {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    top: auto !important;
    bottom: var(--vp-live-dock-top) !important;
    width: auto !important;
    max-width: 840px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    z-index: 1002;
}
body.vp-live-room-page .buc__chat-launcher { bottom: var(--vp-live-floating-bottom) !important; }
body.vp-live-room-page #voicepa-moc6-status-panel {
    bottom: var(--vp-live-floating-bottom) !important;
    max-height: calc(100dvh - var(--vp-live-floating-bottom) - 16px) !important;
    z-index: 1005 !important;
}
body.vp-live-room-page #voicepa-moc6-status-button { position: static !important; flex: 0 0 auto; }
.vp-single-live-stage #chat {
    max-width: 640px;
    max-height: min(38svh, 320px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: #bcb3bf66 transparent;
}
.vp-single-live-stage #chat:not(:empty) { padding: 8px 10px; border-radius: 10px; background: #19172488; }
.vp-single-live-stage .popup { width: min(500px, calc(100vw - 40px)); box-sizing: border-box; }
@media (max-width: 900px) {
    body.voicepa-product-ui.vp-live-room-page { --vp-live-dock-gap: 0px; }
    body.vp-live-room-page .vp-single-live-stage [data-vp-live-composer] { left: 0 !important; right: 0 !important; max-width: none !important; }
    .vp-single-live-stage [data-vp-live-composer] > .contents.input {
        padding: 7px max(7px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px)) !important;
        border-inline: 0;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
    }
    .vp-single-live-stage [data-vp-live-composer] .chat-form { grid-template-columns: minmax(0, 1fr) 40px 40px 48px; gap: 4px; }
}
@media (max-width: 360px) {
    .vp-single-live-stage [data-vp-live-composer] .chat-form { grid-template-columns: minmax(0, 1fr) 36px 36px 44px; gap: 3px; }
    .vp-single-live-stage [data-vp-live-composer] .chat-form > .msg { padding-inline: 8px; }
}

/* Keep both live shells full width and join the related section to the stage. */
body.voicepa-product-ui #page2.vp-single-live-stage {
    display: flow-root;
    float: none;
    clear: both;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}
body.voicepa-product-ui #page2.vp-single-live-stage > #content.article1,
body.voicepa-product-ui #page2.vp-single-live-stage > #content.article1 > article {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.voicepa-product-ui #page.vp-single-live-related {
    position: relative;
    inset: auto;
    float: none;
    clear: both;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 10px 0;
    border-radius: 0;
    background: #f5f6f7;
}
.vp-single-live-related > .vp-live-related-content {
    flex: 1 1 0;
    float: none;
    width: auto !important;
    min-width: 0;
    box-sizing: border-box;
}
.vp-single-live-related > .vp-live-related-sidebar { flex: 0 0 300px; min-width: 0; }
.vp-single-live-related .vp-live-related-sidebar .sidebar {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.vp-single-live-related .vp-live-related-section { margin: 0 0 18px; }
.vp-single-live-related .vp-live-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
    margin: 0 0 9px;
}
.vp-single-live-related .vp-live-section-heading h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #263747;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.vp-single-live-related .vp-live-profile-link {
    color: #176b92;
    font-size: 12px;
    line-height: 1.6;
}
.vp-single-live-related .vp-live-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.vp-single-live-related .vp-live-related-card {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e0e6ec;
    border-radius: 10px;
    background: #fff;
    color: #263747;
    box-shadow: 0 2px 6px rgba(20, 39, 61, .04);
}
.vp-single-live-related .vp-live-related-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #edf1f5;
}
.vp-single-live-related .vp-live-related-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.vp-single-live-related .vp-live-related-type {
    position: absolute;
    inset: 6px auto auto 6px;
    width: auto;
    max-width: calc(100% - 12px);
    height: auto;
    padding: 3px 7px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
}
.vp-single-live-related .vp-live-related-type.indexribbon { background: #76655c; }
.vp-single-live-related .vp-live-related-type.indexribbon-admin { color: #503b07; }
.vp-single-live-related .vp-live-related-type::before,
.vp-single-live-related .vp-live-related-type::after { content: none; }
.vp-single-live-related .vp-live-related-copy { padding: 8px; }
.vp-single-live-related .vp-live-related-copy h3 {
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.vp-single-live-related .vp-live-related-copy h3 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #263747;
}
.vp-single-live-related .vp-live-related-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    color: #617184;
    font-size: 11px;
    line-height: 1.5;
}
.vp-single-live-related .vp-live-related-meta > a {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-single-live-related .vp-live-related-meta > span { flex: 0 0 auto; }
.vp-single-live-related .vp-live-related-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #617184;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.vp-single-live-related .vp-live-related-excerpt p { margin: 0 0 6px; padding: 0; }
.vp-single-live-related .vp-live-product-purchase { margin-top: 8px; overflow-wrap: anywhere; }
.vp-single-live-related .vp-live-product-purchase :is(a, button, input) { max-width: 100%; box-sizing: border-box; }
.vp-single-live-related .vp-live-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed #d5dfe7;
    border-radius: 8px;
    background: #f8fafc;
    color: #617184;
    font-size: 13px;
    line-height: 1.6;
}
@media (max-width: 900px) {
    .vp-single-live-related .vp-live-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.voicepa-product-ui #page.vp-single-live-related { padding: 12px 8px 0; }
}
@media (max-width: 480px) {
    .vp-single-live-stage .vp-live-room-header { margin-right: 6px; padding: 7px 6px !important; }
    .vp-single-live-stage .vp-live-room-header .vp-live-room-flag { width: 74px !important; margin-left: 5px; }
    .vp-single-live-related .vp-live-related-grid { gap: 8px; }
    .vp-single-live-related .vp-live-related-copy { padding: 7px; }
}