.room{overflow:clip}.entry-notice{display:block;box-sizing:border-box;max-width:100%;padding:8px 9px;margin:4px 0 5px;background:#1c253b8c;border-radius:12px;color:#8de8f5;font-size:13px;line-height:1.5;font-weight:500;overflow-wrap:anywhere;white-space:pre-wrap}.room>.chat:has(.entry-notice){max-height:38%;mask-image:none}.room>footer>.cart{position:relative;width:38px!important;height:42px!important;background:none!important}.room>footer>.cart>svg{display:none!important}.room>footer>.cart:before{content:'';display:block;position:absolute;inset:-3px;background:url('/admin-assets/images/reference-cart-small.png') center/contain no-repeat;pointer-events:none}.room>footer>.like{width:36px!important;height:42px!important;position:relative;font-size:0!important;background:url('/admin-assets/images/reference-like-small.png') center/contain no-repeat}.room>footer>.like>small{position:absolute;bottom:-4px;left:0;right:0;font-size:9px!important}.heart.reference-particle{width:38px;height:38px;background:var(--particle-image) center/contain no-repeat;font-size:0!important}@media(prefers-reduced-motion:reduce){.heart.reference-particle{animation:none!important;display:none}.like-pop{animation:none!important}}.room>footer>.like{border-radius:50%;background-color:#20202944!important}
/* At 390px: 32px host avatar, compact header, 13px chat and a 30% product card. */
.room>header{left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));gap:8px}.room>header .host{padding:3px;gap:6px;max-width:calc(100% - 115px);min-width:0;background:#24222966;backdrop-filter:blur(5px)}.room>header .host>.avatar{width:32px;height:32px;flex:0 0 32px;font-size:17px;overflow:hidden}.room>header .host>div:nth-child(2){min-width:0}.room>header .host strong{display:block;max-width:98px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:550;line-height:16px}.room>header .host small{margin-top:2px;font-size:9px;line-height:12px;white-space:nowrap}.room>header .host>button{flex:none;font-size:11px;padding:7px 10px;margin-left:1px;border-radius:18px}.room>header>.close{flex:none;width:29px;height:29px;line-height:27px;font-size:24px}.room>.status{top:calc(18px + env(safe-area-inset-top));right:49px;left:auto;font-size:9px;gap:3px;padding:6px 7px;border-radius:18px;background:#29262b66}.room>.status .divider{margin:0 1px}.room>.status .live-dot{width:4px;height:4px}.room>.notice{top:calc(61px + env(safe-area-inset-top));left:12px;max-width:calc(100% - 24px);font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.room>footer{left:12px;right:12px;gap:10px}.room>footer form{padding:4px;min-height:41px}.room>footer input{font-size:13px;padding:7px 6px}.room>footer>.more{min-width:24px;min-height:36px;font-size:18px}.room>.chat:not(.assistant-chat){left:12px;right:calc(30% + 23px);font-weight:400}.room>.chat .message{line-height:1.5!important;padding:3px 7px!important;border-radius:11px!important;margin:3px 0!important}.room>.chat .message span{color:#8de3e9;margin-right:4px}.room>.entry-notice,.room>.chat>.entry-notice{line-height:1.5;font-size:inherit;padding:7px 8px;border-radius:12px}@media(max-width:350px){.room>header .host strong{max-width:67px}.room>header .host>button{padding:7px}.room>.status{font-size:8px;gap:2px;right:46px;padding:6px 5px}.room>footer{gap:7px}.room>.chat:not(.assistant-chat){right:calc(30% + 18px)}}
.room>header>.viewer-audience{display:flex;align-items:center;position:absolute;right:33px;top:0;height:33px;max-width:76px;pointer-events:none}.room>header>.viewer-audience[hidden]{display:none}.viewer-audience>img{width:27px;height:27px;object-fit:cover;border-radius:50%;background:#fff1dc;border:1px solid #ffffffb3;margin-left:-7px}.room>header:has(.viewer-audience:not([hidden]))+.status{top:calc(51px + env(safe-area-inset-top));right:12px;font-size:9px;padding:5px 7px}.room>header:has(.viewer-audience:not([hidden])) .host{max-width:calc(100% - 116px)}