/* Live-Raum (Demo) */
.lv { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .lv { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); align-items: stretch; } }
.lv-stage { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); padding: var(--s5); background-position: center; }
@media (min-width: 1024px) { .lv-stage { min-height: 460px; } }
.lv-stage__mid { display: grid; place-items: center; }
.lv-play { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink);
  box-shadow: var(--shadow-2); transition: transform var(--dur-press) var(--ease); }
.lv-play .ic { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 4px; }
.lv-play:active { transform: scale(.95); }

.lv-side { display: flex; flex-direction: column; }
.lv-qs { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); max-height: 320px; overflow-y: auto; flex: 1; align-content: start; }
.lv-q { display: flex; gap: var(--s3); align-items: flex-start; }
.lv-q > span:last-child { display: grid; gap: 2px; }
.lv-q--mine .avatar { background: var(--ink); color: var(--bg); }