.mlc-live-surface{display:flex;align-items:center;gap:12px;width:min(1180px,calc(100% - 24px));margin:12px auto;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#15111d,#3b1021);color:#fff;box-shadow:0 14px 40px rgba(16,8,20,.22);position:relative;z-index:8}.mlc-live-surface.is-global{position:fixed;right:16px;bottom:96px;width:min(430px,calc(100% - 32px));margin:0;z-index:1037}.mlc-live-pulse{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.1);position:relative;flex:0 0 auto}.mlc-live-live .mlc-live-pulse span{position:absolute;inset:7px;border-radius:50%;border:2px solid #ff5c75;animation:mlcLivePulse 1.6s infinite}.mlc-live-copy{min-width:0;display:flex;flex:1;flex-direction:column;line-height:1.2}.mlc-live-copy strong{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#ff9aac}.mlc-live-copy span{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mlc-live-copy small{opacity:.82;margin-top:4px}.mlc-live-actions{display:flex;gap:7px;flex:0 0 auto}.mlc-live-actions .btn{display:inline-flex;align-items:center;gap:4px}.mlc-live-upcoming{background:linear-gradient(135deg,#14263c,#164e63)}.mlc-live-replay{background:linear-gradient(135deg,#172b20,#20583a)}@keyframes mlcLivePulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.4);opacity:0}}@media(max-width:575.98px){.mlc-live-surface{align-items:flex-start}.mlc-live-surface.is-global{left:12px;right:12px;bottom:88px;width:auto}.mlc-live-actions{flex-direction:column}.mlc-live-actions .btn span{display:none}.mlc-live-copy span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mlc-live-surface:not(.is-global){width:calc(100% - 20px);margin:10px auto}}.userpanel-theme-dark .mlc-live-surface{border:1px solid rgba(255,255,255,.14)}

/* 2026-08-23: user-panel live surface belongs to document flow, never the viewport. */
.context-userpanel.mlc-live-surface{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:100%;max-width:none;margin:0 0 1.15rem;padding:14px 16px;border-radius:22px;z-index:2;box-shadow:0 14px 32px rgba(16,8,20,.14)}
.context-userpanel.mlc-live-surface.is-global{position:relative!important;inset:auto!important;width:100%!important;margin:0 0 1.15rem!important}
.context-userpanel .mlc-live-copy span{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.context-userpanel .mlc-live-actions{align-self:center}
@media(max-width:575.98px){.context-userpanel.mlc-live-surface{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 12px;border-radius:20px}.context-userpanel .mlc-live-pulse{width:46px;height:46px}.context-userpanel .mlc-live-copy strong{font-size:.73rem}.context-userpanel .mlc-live-copy span{font-size:.98rem;line-height:1.25}.context-userpanel .mlc-live-copy small{font-size:.82rem;line-height:1.25}.context-userpanel .mlc-live-actions{display:grid;grid-template-columns:1fr;gap:6px}.context-userpanel .mlc-live-actions .btn{width:44px;height:44px;padding:0;justify-content:center}.context-userpanel .mlc-live-actions .btn span{display:none}}

/* 2026-08-23: user-panel uses the exact same Phase 21 surface presentation as the public home page. */
.content-frame>.context-home.mlc-live-surface{display:flex!important;align-items:center!important;gap:12px!important;width:min(1180px,calc(100% - 24px))!important;max-width:none!important;margin:12px auto!important;padding:12px 14px!important;border-radius:18px!important;position:relative!important;inset:auto!important;z-index:8!important;min-height:0!important;height:auto!important}
.content-frame>.context-home .mlc-live-pulse{width:42px!important;height:42px!important;border-radius:14px!important;flex:0 0 42px!important}
.content-frame>.context-home .mlc-live-copy{min-width:0!important;display:flex!important;flex:1 1 auto!important;flex-direction:column!important;line-height:1.2!important}
.content-frame>.context-home .mlc-live-copy strong{font-size:.78rem!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#ff9aac!important;line-height:1.2!important}
.content-frame>.context-home .mlc-live-copy span{font-weight:800!important;color:#fff!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2!important}
.content-frame>.context-home .mlc-live-copy small{color:rgba(255,255,255,.82)!important;opacity:1!important;margin-top:4px!important;line-height:1.25!important}
.content-frame>.context-home .mlc-live-actions{display:flex!important;flex-direction:row!important;align-items:center!important;align-self:center!important;gap:7px!important;flex:0 0 auto!important;height:auto!important}
.content-frame>.context-home .mlc-live-actions .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;padding:.25rem .5rem!important;border-radius:50rem!important;line-height:1.5!important}
@media(max-width:575.98px){.content-frame>.context-home.mlc-live-surface{align-items:flex-start!important;width:calc(100% - 20px)!important;margin:10px auto!important;display:flex!important;grid-template-columns:none!important}.content-frame>.context-home .mlc-live-copy span{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.content-frame>.context-home .mlc-live-actions{display:flex!important;flex-direction:column!important;gap:7px!important}.content-frame>.context-home .mlc-live-actions .btn{width:auto!important;height:auto!important;padding:.25rem .5rem!important}.content-frame>.context-home .mlc-live-actions .btn span{display:none!important}}
