/* Customer phone readability and a compact composer above the native keyboard. */
/* Black/white interface chrome; live video, product photography and authored emoji retain their colors. */
.mobile-live #liveModalBackdrop .v-product-banner{background:#fff}
.mobile-live #liveModalBackdrop .vp-info{color:#222}
.mobile-live #liveModalBackdrop .vp-status{color:#666}
.mobile-live #liveModalBackdrop .vp-price{color:#222}
.mobile-live #liveModalBackdrop .vp-dot-green{background:#555}
.mobile-live #liveModalBackdrop .vp-add-btn{background:#222;color:#fff}
.mobile-live .mobile-round-action.mobile-shop-action{background:#222;color:#fff}
.mobile-live .mobile-round-action .mobile-bag-count{color:#222}
.mobile-live #viewerChatPanel .el-emoji-trigger .el-emoji-image{display:none}
.mobile-live #viewerChatPanel .el-emoji-trigger:before{content:'';display:block;width:24px;height:24px;margin:auto;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 3 4 3 4-3 4-3'/%3E%3Cpath d='M8 9h.01M16 9h.01' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mobile-live #viewerShopPanel .mobile-bag-line span{color:#222}
.mobile-chat-history-toggle,.mobile-send-label{display:none}
.chat-send-icon svg{display:block;width:20px;height:20px}
.mobile-live #liveModalBackdrop .v-brand-name{font-size:18px;line-height:1.4}
.mobile-live #liveModalBackdrop .v-session-title{font-size:16px;line-height:1.4}
.mobile-live #liveModalBackdrop .v-live-badge{font-size:14px;max-width:110px}
.mobile-live #liveModalBackdrop .v-icon-top-btn{width:44px;height:44px;min-width:44px}
.mobile-live #liveModalBackdrop .v-top-bar{padding-right:58px}
.mobile-live #liveModalBackdrop .mobile-phone-close{width:44px;height:44px;font-size:20px}
.mobile-live #liveModalBackdrop .v-top-left{min-width:0;flex:1}
.mobile-live #liveModalBackdrop .v-brand-copy{min-width:0}
.mobile-live #liveModalBackdrop .v-brand-name,.mobile-live #liveModalBackdrop .v-session-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-live #liveModalBackdrop .vf-meta{font-size:16px;color:#ffffffd9;line-height:1.4}
.mobile-live #liveModalBackdrop .vf-body{font-size:22px;line-height:1.5;-webkit-line-clamp:3}
.mobile-live #videoFloatingChatList .chat-reply-button{font-size:16px;min-height:44px;padding:4px 10px}
.mobile-live #liveModalBackdrop .vf-body .el-emoji-image{width:28px;height:28px}
.mobile-live #liveModalBackdrop .vf-msg{background:#191919b3!important;padding:7px 10px!important}
.mobile-live #liveModalBackdrop #videoPinnedChat{font-size:18px;line-height:1.5;max-height:80px;background:#232323d9}
.mobile-live #liveModalBackdrop .v-floating-messages{max-height:230px}

.mobile-live #liveModalBackdrop .v-mid-interactive{width:calc(100% - 172px)}
.mobile-live #liveModalBackdrop .v-product-banner{width:140px}
.mobile-live #liveModalBackdrop .vp-title{font-size:16px;line-height:1.5}
.mobile-live #liveModalBackdrop .vp-price{font-size:20px}
.mobile-live #liveModalBackdrop .vp-status{font-size:14px;line-height:1.5}
.mobile-live #liveModalBackdrop .vp-add-btn{min-height:48px;font-size:18px;line-height:1.4}
.mobile-live #liveModalBackdrop .vp-close{width:44px;height:44px}
.mobile-live .mobile-comment-open{height:52px;font-size:18px;color:#ffffffe6}
.mobile-live .mobile-round-action{width:48px;height:52px}
.mobile-live .mobile-round-action svg{width:28px;height:28px}
.mobile-live .mobile-phone-bar{gap:6px!important}
.mobile-live #liveModalBackdrop .viewer-player-tools button{min-height:48px;font-size:16px}
/* The existing editor, identity, quote draft and send handling are reused in place. */
.mobile-live #liveModalBackdrop #viewerChatPanel{height:auto;min-height:0;max-height:calc(var(--mobile-visible-height,100dvh) - 70px);border-radius:18px 18px 0 0;background:#fff;color:#242424;box-shadow:0 -4px 22px #0002;overflow:auto;overscroll-behavior:contain}
.mobile-live #viewerChatPanel .panel-top-header{min-height:44px;padding:0 10px 0 16px;gap:8px;border:0;background:#fff}
.mobile-live #viewerChatPanel .panel-top-header>span{display:none}
.mobile-live #mobileChatHistory{display:block;min-height:44px;margin-right:auto;padding:8px 0;border:0;background:transparent;color:#333333;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.mobile-live #mobileChatClose{width:44px;height:44px;background:transparent;color:#666666;font-size:25px}
.mobile-live #viewerChatPanel :is(#desktopChatList,#desktopChatLatest,#desktopPinnedChat,#chatCountdown,#desktopInteractions,#desktopSpotlight){display:none!important}
.mobile-live.mobile-chat-history #viewerChatPanel #desktopChatList{display:block!important;flex:none;height:min(32dvh,180px);max-height:max(72px,calc(var(--mobile-visible-height,100dvh) - 260px));padding:4px 16px 12px;border-bottom:1px solid #e7e7e7}
.mobile-live.mobile-chat-history #viewerChatPanel #desktopChatLatest:not([hidden]){display:block!important;flex:none;margin:0 auto;min-height:44px;font-size:14px}
.mobile-live #viewerChatPanel .cw-input-footer{flex:none;padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff}
.mobile-live #viewerChatPanel .el-chat-identity{padding:0 4px;font-size:13px;color:#646464}
.mobile-live #viewerChatPanel .el-chat-identity button{min-height:36px;font-size:13px;color:#333333}
.mobile-live #viewerChatPanel .cw-input-box{min-height:50px;padding:2px 4px;gap:4px;border:1px solid #e6e6e6;border-radius:27px;background:#f5f5f5;align-items:center}
.mobile-live #viewerChatPanel .cw-input-box :is(input,.el-emoji-editor){min-width:0;font-size:20px;line-height:1.5;background:transparent;color:#242424;max-height:90px}
.mobile-live #viewerChatPanel .cw-input-box:focus-within{outline:2px solid #222222;outline-offset:2px}
.mobile-live #viewerChatPanel .el-emoji-editor:focus-visible{outline:0}
.mobile-live #viewerChatPanel .el-emoji-trigger{width:44px;height:44px;flex:none;font-size:24px;border:0;background:transparent}
.mobile-live #viewerChatPanel .cw-send-btn{width:auto;min-width:56px;min-height:44px;flex:none;border:0;border-radius:24px;padding:8px 12px;background:#222222;color:#fff;font:inherit;font-size:18px;font-weight:600}
.mobile-live #viewerChatPanel .cw-send-btn:disabled{background:#e2e2e2;color:#737373}
.mobile-live .mobile-send-label{display:inline}.mobile-live .chat-send-icon{display:none}
.mobile-live #viewerChatPanel .chat-reply-draft{font-size:14px;line-height:1.5;max-height:72px}
.mobile-live #viewerChatPanel .chat-reply-draft button{min-width:44px;min-height:44px}
.mobile-live #viewerChatPanel .chat-send-state{font-size:13px;line-height:1.5}
.mobile-live #viewerChatPanel .cw-bubble{font-size:22px;line-height:1.5}
.mobile-live #viewerChatPanel .cw-meta{font-size:16px;line-height:1.5}
.mobile-live #viewerChatPanel .chat-reply-button{min-height:44px;font-size:16px}
.mobile-live.mobile-chat-open #liveModalBackdrop .mobile-phone-bar{visibility:hidden;pointer-events:none}
.mobile-live.mobile-chat-open #liveModalBackdrop .v-bottom-area{bottom:calc(var(--mobile-keyboard-gap,0px) + var(--mobile-composer-height,130px) + 10px);height:auto;max-height:calc(var(--mobile-visible-height,100dvh) - var(--mobile-composer-height,130px) - 70px)}
.mobile-live.mobile-chat-open #liveModalBackdrop .v-mid-interactive{position:relative;left:12px;bottom:auto;width:calc(100% - 24px);max-height:inherit}
.mobile-live.mobile-chat-open #liveModalBackdrop #videoPinnedChat{max-height:52px;font-size:14px}
.mobile-live.mobile-chat-open #liveModalBackdrop .v-floating-messages{max-height:min(150px,max(64px,calc(var(--mobile-visible-height,100dvh) - var(--mobile-composer-height,130px) - 200px)))}

.mobile-live.mobile-chat-open #videoFloatingChatList .chat-reply-button{display:none}
.mobile-live.mobile-short-viewport.mobile-chat-open #liveModalBackdrop #videoPinnedChat{display:none}

.mobile-live.mobile-short-viewport.mobile-chat-open #liveModalBackdrop .vf-body{-webkit-line-clamp:2}
.mobile-live.mobile-short-viewport.mobile-chat-open #liveModalBackdrop .vf-meta{display:none}
.mobile-live.mobile-chat-open .viewer-sound-hint{visibility:hidden;pointer-events:none}
.mobile-live.mobile-chat-open #liveModalBackdrop .v-product-banner{visibility:hidden;pointer-events:none}
.mobile-live.mobile-chat-history #liveModalBackdrop .v-mid-interactive{visibility:hidden;pointer-events:none}
.mobile-live #viewerShopPanel #mobileShopTabs button,.mobile-live #desktopShopGrid .sgc-title{font-size:18px}
.mobile-live #desktopShopGrid .sgc-price{font-size:20px}
.mobile-live #quickSheetBackdrop .qsc-title{font-size:20px}
.mobile-live .qsc-option-label{font-size:18px}.mobile-live .qsc-buybar button{font-size:18px}
.mobile-live .mobile-bag-line strong,.mobile-live .mobile-bag-line span{font-size:15px;line-height:1.5}
.mobile-live .mobile-bag-line small{font-size:13px}.mobile-live .mobile-bag-line button{width:44px;height:44px}
.mobile-live #viewerNameDialog p{font-size:16px;line-height:1.6}.mobile-live #viewerNameDialog button{min-height:44px;font-size:16px}
.mobile-live #viewerChatPanel button:focus-visible{outline:2px solid #111111;outline-offset:2px}
@media(max-width:360px){.mobile-live #liveModalBackdrop .v-brand-avatar{display:none}.mobile-live #liveModalBackdrop .v-live-badge{max-width:100px;font-size:14px}.mobile-live #liveModalBackdrop .v-brand-name{font-size:18px}.mobile-live .mobile-comment-open{padding:0 10px}.mobile-live #liveModalBackdrop .v-product-banner{width:132px}.mobile-live #liveModalBackdrop .v-mid-interactive{width:calc(100% - 164px)}}
@media(max-height:500px){.mobile-live #liveModalBackdrop .v-top-bar{padding-top:8px}.mobile-live #liveModalBackdrop .mobile-phone-close{top:8px}.mobile-live #liveModalBackdrop .vp-add-btn{min-height:44px}.mobile-live.mobile-chat-open #viewerChatPanel .el-chat-identity{display:none}.mobile-live #viewerChatPanel .cw-input-box :is(input,.el-emoji-editor){max-height:54px}}

/* Larger default reading sizes; never reduce them at narrow phone widths. */
.mobile-live #liveModalBackdrop .vf-msg{flex:none}
.mobile-live #liveModalBackdrop .v-floating-messages{max-height:260px}
.mobile-live #liveModalBackdrop .v-bottom-area:has(.v-product-banner[hidden]) .v-mid-interactive,
.mobile-live #liveModalBackdrop .v-bottom-area:has(.v-product-banner.hidden-card) .v-mid-interactive{width:calc(100% - 24px)}
.mobile-live #liveModalBackdrop .mobile-phone-bar{padding-left:10px;padding-right:10px;gap:4px!important}
.mobile-live .mobile-comment-open svg{flex:none;width:22px;height:22px}
.mobile-live .mobile-comment-open span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-live .mobile-phone-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mobile-live #viewerChatPanel .cw-input-box:has(.el-emoji-editor){gap:2px}
.mobile-live #mobileChatHistory{font-size:16px}
.mobile-live #viewerChatPanel .el-chat-identity,.mobile-live #viewerChatPanel .el-chat-identity button{font-size:15px}
.mobile-live #viewerChatPanel .el-chat-identity button{min-height:44px}
.mobile-live #quickSheetBackdrop .qsc-option-label select{font-size:20px}
.mobile-live #liveModalBackdrop .v-top-bar .v-live-badge{max-width:110px;white-space:normal;line-height:1.3}
.mobile-live #viewerVideoStage .playback-recovery{font-size:20px;line-height:1.6;background:linear-gradient(#222,#111)}
.mobile-live #viewerVideoStage .playback-recovery strong{color:#fff}
.mobile-live #viewerVideoStage .playback-recovery small{font-size:16px}
.mobile-live #viewerVideoStage .session-reconnect{font-size:20px}
.mobile-live #liveModalBackdrop .v-top-bar .v-live-badge{position:absolute;left:12px;top:calc(66px + env(safe-area-inset-top,0px))}

/* Read the retained ten comments without moving the video or forcing a reader to latest. */
.mobile-live #liveModalBackdrop .v-floating-messages{overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.video-chat-latest{display:block;margin:6px 0 0 auto;min-height:36px;padding:5px 12px;border:1px solid #fff5;border-radius:20px;background:#111c;color:#fff;font:inherit;font-size:14px;cursor:pointer;touch-action:manipulation}
.video-chat-latest[hidden]{display:none}

.mobile-background-button{display:none}
.mobile-live #liveModalBackdrop .mobile-background-button{display:grid;place-items:center}
.mobile-background-button svg{width:23px;height:23px}
.mobile-background-button:disabled{opacity:.45}

.mobile-live #liveModalBackdrop .vf-bag-activity .vf-body{display:block;-webkit-line-clamp:unset}