.live-card { position: relative; width: 100%; height: 100%; color: #fff; --card-footer-color: #d0d8dd; --attribution-secondary: #c6d1d5; }
.live-room { --sheet-surface: #f7f6fa; --sheet-ink: #303041; --sheet-muted: #a6b6c5; --sheet-control: #ffffff19; --sheet-control-ink: #fff; --sheet-focus: #ff7b97; --sheet-border: #ffffff15; }
/* Keep the media in one DOM host while the native dialog enters the top layer. */
.live-room:not([open]) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #202b35; color: #fff; touch-action: inherit; }
.live-room:not([open]) > .sheet__header, .live-room > .sheet__handle { display: none; }
.live-room__stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #202b35; color: #fff; }
.live-room:not([open]) .live-room__stage { width: 100%; height: 100%; }
.live-room__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.live-room__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0c172dcc 0%, #0c172d33 24%, transparent 48%, #121d30ba 73%, #121d30 100%); }
.live-card__tap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; touch-action: inherit; }
.live-card__preview { position: absolute; inset: 0; pointer-events: none; }
.live-card__top { position: absolute; top: var(--format-top); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; }
.live-card__badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 6px; background: #ef416c; font-size: 10px; font-weight: 750; letter-spacing: .05em; box-shadow: 0 3px 15px #ee416b33; }
.live-card__badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.live-card__demo { font-size: 9px; letter-spacing: .1em; font-weight: 650; opacity: .85; }
.live-card__provider { margin-left: auto; font-size: 10px; color: #dde3e9; }
.live-card__bottom { position: absolute; bottom: var(--content-bottom); left: max(var(--edge), env(safe-area-inset-left)); right: max(var(--edge), env(safe-area-inset-right)); }
.live-card__invitation { margin: 0 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #ffb4c6; }
.live-card__bottom .card-attribution__description { max-width: 34ch; margin-top: 12px; }
.live-card__enter { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 52px; width: 100%; padding: 12px 18px; margin: 20px 0 14px; border: 0; border-radius: 16px; background: #ff4f7a; color: #fff; font: inherit; font-size: 14px; font-weight: 650; pointer-events: auto; box-shadow: 0 8px 25px #ff386023; }
.live-card__enter:hover { background: #ff668d; }
.live-room__caption { position: absolute; margin: 0; bottom: 290px; left: var(--edge); right: var(--edge); text-align: center; font-size: 13px; line-height: 1.5; text-wrap: balance; text-shadow: 0 1px 5px #000, 0 2px 10px #000; pointer-events: none; }
.live-room__status { position: absolute; left: 12px; right: 12px; top: 34%; margin: 0; padding: 12px; border-radius: 12px; background: #152231e8; font-size: 12px; line-height: 1.4; pointer-events: none; }
.live-room:not([open]) .live-room__controls, .live-room:not([open]) .live-room__chat { display: none; }
.live-room[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(240px, 39%); inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; background: #202b35; animation: live-room-enter 240ms ease-out; }
.live-room[open] > .sheet__header { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); color: #fff; gap: 12px; }
.live-room[open] > .sheet__header p { color: #ff99b1; font-size: 9px; margin-bottom: 5px; }
.live-room[open] > .sheet__header h2 { font-size: 16px; }
.live-room[open] .live-card__preview, .live-room[open] .live-card__tap { display: none; }
.live-room[open] .live-room__media { object-position: center 43%; }
.live-room[open] .live-room__shade { background: linear-gradient(transparent 50%, #14202ba1); }
.live-room[open] .live-room__caption { bottom: 72px; font-size: 12px; }
.live-room__controls { position: absolute; bottom: 14px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.live-room__control { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #132234a8; color: #fff; backdrop-filter: blur(8px); }
.live-room__control svg { width: 20px; height: 20px; }
.live-room__speaker { margin-left: auto; padding: 8px 10px; border-radius: 8px; background: #132234a8; font-size: 11px; }
.live-room__chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sheet-surface); color: var(--sheet-ink); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.live-room__chat-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 14px 12px; flex: none; border-bottom: 1px solid #e5e3eb; }
.live-room__chat-heading h3 { margin: 0; font-size: 14px; letter-spacing: -.02em; }
.live-room__chat-heading > span { color: #7a798b; font-size: 9px; }
.live-room__messages { flex: 1; min-height: 0; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; user-select: text; }
.live-room__messages:focus-visible { outline: 2px solid #858399; outline-offset: -3px; }
.live-room__message { display: flex; gap: 9px; align-items: start; margin-bottom: 14px; }
.live-room__message:last-child { margin-bottom: 0; }
.live-room__avatar { width: 29px; height: 29px; flex: none; display: grid; place-items: center; background: #e3dff0; color: #656079; border-radius: 50%; font-size: 11px; font-weight: 600; }
.live-room__message:nth-child(2n) .live-room__avatar { background: #f5dce3; color: #976776; }
.live-room__message.is-own .live-room__avatar { background: #303b4c; color: #fff; }
.live-room__message-body { min-width: 0; }
.live-room__message strong { font-size: 10px; font-weight: 650; color: #767187; }
.live-room__message p { font-size: 12px; line-height: 1.45; margin: 3px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.live-room__composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; flex: none; border-top: 1px solid #e5e3eb; }
.live-room__input { width: 100%; min-width: 0; height: 44px; border: 1px solid #e1dee8; border-radius: 24px; background: #fff; padding: 0 14px; font: inherit; font-size: 16px; color: #303041; }
.live-room__input::placeholder { font-size: 12px; color: #878395; }
.live-room__input:focus { outline: 2px solid #cb94a5; outline-offset: 1px; }
.live-room__send { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #ef416c; color: #fff; }
.live-room__send:disabled { background: #e9e5ed; color: #aaa4b5; cursor: default; }
.live-room__local-note { margin: 7px 12px 10px; flex: none; font-size: 9px; color: #827c90; text-align: center; }
@keyframes live-room-enter { from { opacity: .4; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .live-room[open] { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); grid-template-rows: auto minmax(0, 1fr); }
  .live-room[open] > .sheet__header { grid-column: 1 / -1; }
  .live-room__chat { border-radius: 0; }
  .live-room[open] .live-room__media { object-fit: contain; }
  .live-room[open] .live-room__stage { background: radial-gradient(ellipse at center, #45605c, #172730); }
  .live-card__bottom { max-width: 460px; }
  .live-room:not([open]) .live-room__caption { right: auto; width: min(460px, calc(100% - 2 * var(--edge))); }
}
@media (max-height: 620px) and (orientation: portrait) {
  .live-card__invitation { margin-bottom: 8px; }
  .live-card__enter { margin: 12px 0; min-height: 46px; }
  .live-room:not([open]) .live-room__caption { bottom: 255px; font-size: 11px; }
  .live-room[open] { grid-template-rows: auto minmax(0, 1fr) 235px; }
  .live-room__chat-heading { padding-block: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .live-card__badge::before { animation: live-pulse 1.8s ease-in-out infinite; }
  @keyframes live-pulse { 50% { opacity: .4; } }
}
@media (prefers-reduced-motion: reduce) { .live-room[open] { animation: none; } }