/* ==========================================================================
 * Urban Chat — chat-room.css
 *
 * RoomOS chat-room composition. Loads last in the stack so it owns the
 * chat-room surface without editing the layered legacy rules in member.css.
 *
 * Layout follows the RoomOS slot contract: the hero states what the room is,
 * `#roomos-slot-main` stacks module cards, `#roomos-slot-rail` holds the
 * roster plus whatever the recipe mounted (steward / guest slots).
 *
 * Palette stays Urban Chat: deep red hero into gold over themed module cards.
 * Every room-local token resolves through the theme so Heat gets near-black
 * plates and Classic keeps paper — no fixed greys live in this file.
 * ==========================================================================
 */

#page-chat-room {
	/* Fills. */
	--uc-room-red: var(--uc-primary);
	--uc-room-red-deep: var(--uc-primary-darker);
	--uc-room-gold: var(--uc-gold);
	--uc-room-gold-deep: var(--uc-gold-dim);
	/* Ink. Red type on a themed card must use the ink ramp, not the fill red,
	   or Heat renders dark maroon on near-black. */
	--uc-room-red-ink: var(--uc-primary-ink);
	--uc-room-ink: var(--uc-text);
	--uc-room-muted: var(--uc-text-muted);
	--uc-room-line: var(--uc-border);
	--uc-room-wash: var(--uc-surface-sunken);
	--uc-room-card-radius: var(--uc-dna-card-radius);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
/* Outer shell is transparent so module DNA cards sit on the page canvas
   (same modular read as lobby Always On / Member). The hero is its own card. */

#page-chat-room .uc-chat-room-shell {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}

#page-chat-room .uc-chat-room-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 2px solid var(--uc-dna-border-strong) !important;
	border-radius: var(--uc-dna-card-radius) !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.18) !important;
	background: linear-gradient(118deg, var(--uc-room-red) 0%, var(--uc-room-red-deep) 48%, var(--uc-room-gold-deep) 100%);
	border-bottom: 3px solid var(--uc-room-gold) !important;
}

#page-chat-room .uc-chat-room-hero.has-cover {
	min-height: clamp(148px, 32vw, 248px);
	background: var(--uc-chrome);
	border-bottom-width: 2px !important;
	border-bottom-color: var(--uc-gold-dim) !important;
	box-shadow:
		var(--uc-dna-shadow-hard),
		0 0 0 1px rgba(255, 223, 0, 0.18),
		inset 0 -2px 0 var(--uc-gold) !important;
}

#page-chat-room .uc-chat-room-topbar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: 18px;
	min-height: inherit;
	padding: 22px 24px 20px !important;
	background: transparent !important;
	border-bottom: 0 !important;
	color: var(--uc-text-on-primary);
}

#page-chat-room .uc-chat-room-hero:not(.has-cover) .uc-chat-room-topbar {
	background: transparent !important;
}

#page-chat-room .uc-chat-room-hero.has-cover .uc-chat-room-topbar {
	background:
		linear-gradient(180deg, var(--uc-scrim) 0%, color-mix(in srgb, var(--uc-primary-darker) 55%, transparent) 45%, var(--uc-scrim-strong) 100%) !important;
}

#page-chat-room .uc-chat-room-topbar-primary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

#page-chat-room .uc-chat-room-topbar-left {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	flex: 1 1 auto;
}

#page-chat-room .uc-chat-room-topbar-copy {
	min-width: 0;
}

#page-chat-room .uc-chat-room-topbar-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
	margin-top: 2px;
}

#page-chat-room .uc-chat-room-challenge-btn {
	/* Icon-only — keep the same height as sibling text pills via shared padding. */
	min-width: 0;
}

#page-chat-room .uc-chat-room-share-btn,
#page-chat-room .uc-chat-room-exit-btn {
	flex-shrink: 0;
}

#page-chat-room .uc-chat-room-topbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px !important;
}

#page-chat-room .uc-chat-room-presence-dot {
	width: 10px !important;
	height: 10px !important;
	margin-top: 8px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--uc-success);
	box-shadow: 0 0 12px var(--uc-success) !important;
	animation: uc-room-live-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes uc-room-live-pulse {
	0%,
	100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(1.25); }
}

#page-chat-room .uc-chat-room-kicker {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

#page-chat-room .uc-chat-room-label {
	display: block;
	margin: 3px 0 0;
	font-size: 30px !important;
	font-style: normal !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--uc-text-on-primary);
	overflow-wrap: anywhere;
}

#page-chat-room .uc-chat-room-meta {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: var(--uc-text-on-primary);
}

#page-chat-room .uc-chat-room-topic {
	margin: 0;
	max-width: 42rem;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.88);
	text-transform: none;
}

#page-chat-room .uc-chat-room-chip {
	padding: 4px 11px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	border: 1px solid var(--uc-veil-strong);
	border-radius: 999px;
	background: var(--uc-veil-soft);
	color: var(--uc-text-on-primary);
	text-transform: uppercase;
}

#page-chat-room .uc-chat-room-chip:first-child {
	background: rgba(15, 23, 42, 0.72);
	border-color: rgba(15, 23, 42, 0.72);
}

/* Challenge / Share / Exit — same size + glass pill look as the old Neighborhood chip.
   !important beats legacy member.css exit-btn overrides scoped to #page-chat-room. */
#page-chat-room .uc-chat-room-topbar-pill,
#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-exit-btn,
#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-share-btn,
#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-challenge-btn {
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 4px 11px !important;
	border: 1px solid var(--uc-veil-strong) !important;
	border-radius: 999px !important;
	background: var(--uc-veil-soft) !important;
	color: var(--uc-text-on-primary) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	cursor: pointer;
	box-shadow: none !important;
}

#page-chat-room .uc-chat-room-topbar-pill:hover {
	background: var(--uc-veil-strong) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}

#page-chat-room .uc-chat-room-challenge-btn.uc-chat-room-topbar-pill {
	padding-left: 10px !important;
	padding-right: 10px !important;
	font-size: 12px !important;
	letter-spacing: 0 !important;
}

#page-chat-room .uc-chat-room-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

#page-chat-room .uc-chat-room-hero-btn--gold {
	background: var(--uc-room-gold, var(--uc-gold));
	color: var(--uc-text-on-gold);
	box-shadow: 0 6px 16px var(--uc-shadow-ink-soft, rgba(15, 23, 42, 0.25));
}

#page-chat-room .uc-chat-room-hero-btn--gold:hover {
	background: var(--uc-gold);
}

#page-chat-room .uc-chat-room-active-chip {
	border-radius: 999px !important;
	border: 1px solid var(--uc-veil-strong) !important;
	background: rgba(15, 23, 42, 0.34) !important;
	padding: 8px 14px !important;
	font-size: 10px !important;
	letter-spacing: 0.12em !important;
}

#page-chat-room .uc-chat-room-cover {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	pointer-events: none;
	background-color: transparent;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.25s ease;
}

#page-chat-room .uc-chat-room-cover.has-cover {
	opacity: 1;
	min-height: 0 !important;
	border-bottom: 0 !important;
}

#page-chat-room .uc-chat-room-hero.has-cover .uc-chat-room-topbar-primary {
	margin-top: 0;
}

/* ── Slot grid ─────────────────────────────────────────────────────────── */

#page-chat-room .uc-chat-room-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 18px 0 0;
	background: transparent !important;
	align-items: start;
}

@media (min-width: 1024px) {
	#page-chat-room .uc-chat-room-content {
		grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
	}
}

#page-chat-room .uc-chat-feed-shell,
#page-chat-room .uc-chat-members-shell {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	padding: 0;
}

/* Optional strip sits under the thread for chat; onair uses stage + strip as studio stack. */
#page-chat-room .uc-chat-feed-shell > .uc-roomos-stage-host { order: 0; }
#page-chat-room .uc-chat-feed-shell > .uc-roomos-strip-host { order: 2; }
#page-chat-room .uc-chat-feed-shell > .uc-room-card--thread { order: 1; }
#page-chat-room .uc-chat-room-shell[data-roomos-mode="onair"] .uc-chat-feed-shell > .uc-roomos-stage-host {
	order: 0;
	display: block !important;
}
#page-chat-room .uc-chat-room-shell[data-roomos-mode="onair"] .uc-chat-feed-shell > .uc-roomos-strip-host { order: 1; }
#page-chat-room .uc-chat-room-shell[data-roomos-mode="onair"] .uc-chat-feed-shell > .uc-room-card--thread { order: 2; }

/* ── Live studio (Broadcast parity on RoomOS live.v1) ───────────────────── */
#page-chat-room .uc-chat-room-shell.is-live-studio {
	--uc-live-studio-ink: var(--uc-text);
	--uc-live-studio-panel: var(--uc-surface);
	--uc-live-studio-red: var(--uc-primary);
	display: flex;
	flex-direction: column;
	/* Shared gutter: hero + stage + chat aligned to the same column width */
	gap: 12px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-content {
	/* Mobile used to pad only this block (14px), making stage/chat narrower
	   than the full-bleed hero above — strip side inset so columns match. */
	padding: 0 !important;
	gap: 12px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-hero {
	/* Same frame language as stage / thread cards */
	border: 2px solid var(--uc-dna-border-strong) !important;
	border-radius: 14px !important;
	border-bottom: 2px solid var(--uc-dna-border-strong) !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
	background: linear-gradient(180deg, var(--uc-primary-darker) 0%, var(--uc-primary) 55%, #450a0a 100%);
	width: 100%;
	box-sizing: border-box;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-label,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-kicker,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-meta,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-topic {
	color: var(--uc-text-on-primary) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-shell {
	gap: 0;
	width: 100%;
	min-width: 0;
}
#page-chat-room .uc-live-studio-stage {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	background: #000 !important;
	padding: 0 !important;
}
#page-chat-room .uc-live-studio-player {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 280px;
	aspect-ratio: 16 / 9;
	max-height: min(58vh, 560px);
	background:
		radial-gradient(ellipse at 50% 18%, rgba(185, 28, 28, 0.38), transparent 55%),
		linear-gradient(165deg, var(--uc-chrome) 0%, var(--uc-chrome) 55%, var(--uc-chrome) 100%);
}
#page-chat-room .uc-live-studio-stage-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.88) 70%);
	color: var(--uc-text-on-primary);
	pointer-events: none;
}
#page-chat-room .uc-live-studio-stage-meta__kicker {
	display: block;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--uc-gold);
}
#page-chat-room .uc-live-studio-stage-meta__host strong {
	display: block;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: -0.01em;
}
#page-chat-room .uc-live-studio-stage-meta__handle {
	font-size: 11px;
	font-weight: 800;
	color: rgba(248, 250, 252, 0.75);
}
#page-chat-room .uc-live-studio-stage-meta__watchers {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-primary-ink);
}
#page-chat-room .uc-live-studio-strip {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--uc-surface-muted);
	border-bottom: 1px solid var(--uc-border);
}
#page-chat-room .uc-live-studio-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap;
	padding: 10px 12px;
	background: var(--uc-surface);
	border-bottom: 1px solid var(--uc-border);
}
#page-chat-room .uc-live-studio-controls__left,
#page-chat-room .uc-live-studio-controls__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
#page-chat-room .uc-live-studio-controls__seats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
#page-chat-room .uc-live-studio-seat-box {
	appearance: none;
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	width: 72px;
	aspect-ratio: 1;
	border: 2px dashed var(--uc-gray-300);
	border-radius: 12px;
	background: var(--uc-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 4px;
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#page-chat-room .uc-live-studio-seat-box:active:not(:disabled) {
	transform: scale(0.96);
}
#page-chat-room .uc-live-studio-seat-box:disabled {
	cursor: default;
}
#page-chat-room .uc-live-studio-seat-box.is-open {
	border-color: var(--uc-border);
	background: var(--uc-surface-raised);
}
#page-chat-room .uc-live-studio-seat-box.is-open:not(:disabled):hover {
	border-color: var(--uc-primary);
	background: var(--uc-surface);
}
#page-chat-room .uc-live-studio-seat-box.is-pending {
	border-style: dashed;
	border-color: var(--uc-warning);
	background: var(--uc-warning-surface);
	padding: 0;
	justify-content: flex-end;
}
#page-chat-room .uc-live-studio-seat-box__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
}
#page-chat-room .uc-live-studio-seat-box.is-pending .uc-live-studio-seat-box__avatar {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	font-size: 22px;
}
#page-chat-room .uc-live-studio-seat-box.is-pending .uc-live-studio-seat-box__avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
#page-chat-room .uc-live-studio-seat-box__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 5px 2px 6px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold, #1a0a0a);
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
}
#page-chat-room .uc-live-studio-seat-box.is-pending .uc-live-studio-seat-box__name {
	position: relative;
	z-index: 2;
	margin-bottom: 22px;
	color: var(--uc-text-on-primary);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#page-chat-room .uc-live-studio-seat-box.is-occupied {
	border-style: solid;
	border-color: var(--uc-success);
	background: var(--uc-chrome);
}
#page-chat-room .uc-live-studio-seat-box__plus {
	font-size: 18px;
	line-height: 1;
	color: var(--uc-text-secondary);
}
#page-chat-room .uc-live-studio-seat-box__label {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-text-primary);
}
#page-chat-room .uc-live-studio-seat-box__avatar {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--uc-chrome);
	color: var(--uc-text-on-primary);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 900;
}
#page-chat-room .uc-live-studio-seat-box.is-pending .uc-live-studio-seat-box__avatar {
	background: var(--uc-warning-surface);
	color: var(--uc-warning-text);
}
#page-chat-room .uc-live-studio-seat-box__avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
#page-chat-room .uc-live-studio-seat-box__name,
#page-chat-room .uc-live-studio-seat-box__tag {
	position: relative;
	z-index: 1;
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 900;
	text-transform: uppercase;
}
#page-chat-room .uc-live-studio-seat-box__name {
	font-size: 8px;
	letter-spacing: 0.04em;
	color: var(--uc-success-text);
}
#page-chat-room .uc-live-studio-seat-box__tag {
	font-size: 7px;
	letter-spacing: 0.1em;
	color: var(--uc-success-text);
}
#page-chat-room .uc-live-studio-seat-box.is-occupied .uc-live-studio-seat-box__name,
#page-chat-room .uc-live-studio-seat-box.is-occupied .uc-live-studio-seat-box__tag {
	color: var(--uc-text-on-primary);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
/* Host phone: unmistakable raised-hand chips under the control bar. */
#page-chat-room .uc-live-studio-hand-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px 0;
}
#page-chat-room .uc-live-studio-hand-banner__chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	border: 1px solid var(--uc-warning);
	border-radius: 999px;
	background: var(--uc-warning-surface);
	color: var(--uc-warning-text);
	padding: 6px 12px 6px 6px;
	cursor: pointer;
	font: inherit;
}
#page-chat-room .uc-live-studio-hand-banner__chip:active {
	transform: scale(0.98);
}
#page-chat-room .uc-live-studio-hand-banner__face {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid var(--uc-border-strong);
	background: var(--uc-chrome);
}
#page-chat-room .uc-live-studio-hand-banner__avatar,
#page-chat-room .uc-live-studio-hand-banner__initial {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page-chat-room .uc-live-studio-hand-banner__initial {
	display: grid;
	place-items: center;
	color: var(--uc-text-on-primary);
	font-size: 14px;
	font-weight: 900;
}
#page-chat-room .uc-live-studio-hand-banner__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 0 4px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold, #1a0a0a);
	font-size: 6px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
}
#page-chat-room .uc-live-studio-hand-banner__name {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#page-chat-room .uc-live-studio-btn {
	appearance: none;
	border: 1px solid var(--uc-gray-300);
	background: var(--uc-surface);
	color: var(--uc-text);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 36px;
}
#page-chat-room .uc-live-studio-btn--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	letter-spacing: 0;
	text-transform: none;
}
#page-chat-room .uc-live-studio-btn__glyph {
	display: block;
	flex-shrink: 0;
}
/* Mic: show unmuted glyph by default; muted glyph when .is-off */
#page-chat-room .uc-live-studio-btn__glyph--mic-off,
#page-chat-room .uc-live-studio-btn.is-off .uc-live-studio-btn__glyph--mic {
	display: none;
}
#page-chat-room .uc-live-studio-btn.is-off .uc-live-studio-btn__glyph--mic-off {
	display: block;
}
/* Cam: show off glyph by default; on glyph when .is-on */
#page-chat-room .uc-live-studio-btn__glyph--cam,
#page-chat-room .uc-live-studio-btn:not(.is-on) .uc-live-studio-btn__glyph--cam {
	display: none;
}
#page-chat-room .uc-live-studio-btn.is-on .uc-live-studio-btn__glyph--cam {
	display: block;
}
#page-chat-room .uc-live-studio-btn.is-on .uc-live-studio-btn__glyph--cam-off {
	display: none;
}
#page-chat-room .uc-live-studio-btn:not(.is-on) .uc-live-studio-btn__glyph--cam-off {
	display: block;
}
#page-chat-room .uc-live-studio-btn--primary {
	background: var(--uc-primary);
	border-color: var(--uc-primary-darker);
	color: var(--uc-text-on-primary);
}
#page-chat-room .uc-live-studio-controls__meta {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-text-secondary);
}
#page-chat-room .uc-live-studio-guests {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 10px 12px;
	-webkit-overflow-scrolling: touch;
}
#page-chat-room .uc-live-studio-guests .uc-live-studio-guest-tile {
	flex: 0 0 auto;
	width: 112px;
	aspect-ratio: 16 / 10;
}

/* Stage-composited seat grid — the host (auto-seated) plus up to MAX_ONAIR_SPEAKERS accepted
   guests fill the main video area itself (host UI redesign), so on-cam faces read as the primary
   content. Only ever renders tiles for who's actually on stage (data-live-seat-count = exact
   occupied count, 1-4) — no empty placeholder cells, so every tile in a row is the same even size.
   Sits above the LIVE badge / watcher pill's stacking context but below nothing else — those
   float on top via their own z-index, never behind the grid (fixes the old meta-bar collision). */
#page-chat-room .uc-live-studio-stage-grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	gap: 4px;
	padding: 4px;
}
#page-chat-room .uc-live-studio-stage-grid[data-live-seat-count="1"] {
	grid-template-columns: 1fr;
}
#page-chat-room .uc-live-studio-stage-grid[data-live-seat-count="2"] {
	grid-template-columns: repeat(2, 1fr);
}
#page-chat-room .uc-live-studio-stage-grid[data-live-seat-count="3"] {
	grid-template-columns: repeat(3, 1fr);
}
#page-chat-room .uc-live-studio-stage-grid[data-live-seat-count="4"] {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
#page-chat-room .uc-live-studio-stage-grid .uc-live-studio-guest-tile {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 10px;
}

#page-chat-room .uc-live-studio-guest-tile {
	border: 2px dashed var(--uc-gray-300);
	border-radius: 12px;
	background: var(--uc-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.12s ease;
}
#page-chat-room .uc-live-studio-guest-tile:active {
	transform: scale(0.96);
}
#page-chat-room .uc-live-studio-guest-tile.is-occupied {
	border-style: solid;
	border-color: var(--uc-success);
	background: var(--uc-chrome);
}
/* Host manages their own presence via Mic/Cam/End live, not by tapping their own tile. */
#page-chat-room .uc-live-studio-guest-tile.is-host {
	cursor: default;
}
#page-chat-room .uc-live-studio-guest-tile.is-host:active {
	transform: none;
}
/* Pending raise-hand request — small square outside the stage until the host pulls them up. */
#page-chat-room .uc-live-studio-guest-tile.is-pending {
	border-style: dashed;
	border-color: var(--uc-warning);
	background: var(--uc-warning-surface);
}
#page-chat-room .uc-live-studio-guest-tile.is-pending .uc-live-studio-guest-tile__avatar {
	background: var(--uc-warning-surface);
	color: var(--uc-warning-text);
}
#page-chat-room .uc-live-studio-guest-tile.is-pending .uc-live-studio-guest-tile__name {
	color: var(--uc-warning-text);
}
#page-chat-room .uc-live-studio-guest-tile.is-pending .uc-live-studio-guest-tile__tag {
	color: var(--uc-warning-text);
}
#page-chat-room .uc-live-studio-guest-tile.is-pending:disabled {
	cursor: default;
	opacity: 0.85;
}
#page-chat-room .uc-live-studio-guest-tile.is-pending:not(:disabled):hover {
	background: var(--uc-warning-surface);
}
#page-chat-room .uc-live-studio-guest-tile__avatar {
	width: 30%;
	height: 30%;
	max-width: 56px;
	max-height: 56px;
	border-radius: 999px;
	background: var(--uc-chrome);
	color: var(--uc-text-on-primary);
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 900;
}
#page-chat-room .uc-live-studio-guest-tile__avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
#page-chat-room .uc-live-studio-guest-tile__host-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--uc-primary);
	border: 1px solid var(--uc-primary-darker);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	color: var(--uc-text-on-primary);
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.12em;
}
#page-chat-room .uc-live-studio-guest-tile.is-occupied .uc-live-studio-guest-tile__name {
	position: absolute;
	left: 10px;
	bottom: 22px;
	z-index: 1;
	color: var(--uc-text-on-primary);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	max-width: calc(100% - 20px);
	text-align: left;
}
#page-chat-room .uc-live-studio-guest-tile__name {
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--uc-success-text);
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#page-chat-room .uc-live-studio-guest-tile.is-occupied .uc-live-studio-guest-tile__tag {
	position: absolute;
	left: 10px;
	bottom: 9px;
	z-index: 1;
	color: #4ade80;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	text-align: left;
}
#page-chat-room .uc-live-studio-guest-tile__tag {
	font-size: 8px;
	font-weight: 900;
	color: #16a34a;
	letter-spacing: 0.14em;
}
#page-chat-room .uc-live-studio-hands {
	padding: 10px 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-muted);
	border-top: 1px solid var(--uc-border);
}
#page-chat-room .uc-live-studio-hands__label {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-text-muted);
	flex: 0 0 100%;
}
/* Pending-requester squares sit in the strip, sized like the old occupied-slot tiles. */
#page-chat-room .uc-live-studio-hands .uc-live-studio-guest-tile {
	flex: 0 0 auto;
	width: 76px;
	aspect-ratio: 16 / 12;
}
#page-chat-room .uc-live-studio-guest-tile {
	position: relative;
	overflow: hidden;
}
#page-chat-room .uc-live-studio-guest-tile__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Above avatar-img (DOM order paints img last); hide until track attached. */
	z-index: 1;
	background: #000;
	opacity: 0;
	pointer-events: none;
}
#page-chat-room .uc-live-studio-guest-tile.has-video .uc-live-studio-guest-tile__video {
	opacity: 1;
}
/* Mirror self-cam so on-stage preview matches what hosts expect in mirrors. */
#page-chat-room .uc-live-studio-guest-tile__video.is-local-preview {
	transform: scaleX(-1);
}
#page-chat-room .uc-live-studio-guest-tile.has-video .uc-live-studio-guest-tile__avatar,
#page-chat-room .uc-live-studio-guest-tile.has-video .uc-live-studio-guest-tile__avatar-img {
	/* Hide hard — opacity:0 still stacked and won over zero-size video on some phones. */
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	z-index: 0;
}
#page-chat-room .uc-live-studio-guest-tile.has-video .uc-live-studio-guest-tile__name,
#page-chat-room .uc-live-studio-guest-tile.has-video .uc-live-studio-guest-tile__tag {
	z-index: 2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#page-chat-room .uc-live-studio-btn.is-off {
	opacity: 0.7;
	color: var(--uc-text-muted);
	border-color: var(--uc-border);
}
#page-chat-room .uc-live-studio-btn.is-on {
	border-color: var(--uc-primary);
	color: var(--uc-primary);
	background: var(--uc-danger-surface);
}
#page-chat-room .uc-live-studio-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
/* Studio stage + control strip stack as one broadcast block, then chat card below */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-roomos-stage-host.uc-live-studio-stage {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-width: 0 !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-roomos-strip-host:not([hidden]) {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	margin-top: 0 !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-roomos-stage-host.uc-live-studio-stage::after {
	/* footer bar moves to the strip so stage + strip read as one module */
	display: none !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-shell {
	gap: 12px;
}
/* Chat / Members / Play / About — framed DNA card (do not strip borders) */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-room-card--thread {
	border: 2px solid var(--uc-dna-border-strong) !important;
	border-radius: 14px !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
	/* visible so sticky tab chrome can pin under the site topbar while reading chat */
	overflow: visible !important;
	background: var(--uc-dna-card-surface) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-title {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-members-shell {
	border: 2px solid var(--uc-dna-border-strong) !important;
	border-radius: 14px !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
	overflow: hidden;
	background: var(--uc-dna-card-surface) !important;
}

/* Theme morph (onair only): shared modules feel like Broadcast studio */
#page-chat-room .uc-chat-room-shell.is-live-studio {
	--uc-live-studio-border: var(--uc-border);
	--uc-live-studio-muted: var(--uc-text-muted);
	--uc-live-studio-surface: var(--uc-surface-raised);
	--uc-live-tab-rail: color-mix(in srgb, var(--uc-primary-darker) 92%, #000 8%);
}

/* Header = full-width equal tabs, hang tools on row 2 (chat only) */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-header,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-feed-header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0 !important;
	/* Own chrome so tabs are not transparent over mixed stackers */
	background: linear-gradient(180deg, var(--uc-primary) 0%, var(--uc-live-tab-rail) 100%) !important;
	border-bottom: 0 !important;
	box-shadow: inset 0 -2px 0 var(--uc-gold) !important;
	/* Keep Chat / Members / Play / About under the fixed topbar while you scroll the chat */
	position: sticky;
	top: 61px;
	z-index: 30;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-title-wrap {
	display: none !important;
}
#page-chat-room .uc-live-studio-tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	flex: 0 0 auto;
	min-width: 0;
	order: 1;
	overflow: hidden;
	scrollbar-width: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	border-bottom: 0;
}
#page-chat-room .uc-live-studio-tabs::-webkit-scrollbar {
	display: none;
}
#page-chat-room .uc-live-studio-tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	padding: 13px 6px 11px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 48px;
	min-width: 0;
	margin: 0;
	/* Equal columns — stops Chat/Members/Play/About reading as a ragged rail */
	flex: 1 1 0;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
#page-chat-room .uc-live-studio-tab:last-child {
	border-right: 0;
}
#page-chat-room .uc-live-studio-tab:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
#page-chat-room .uc-live-studio-tab.is-active {
	background: rgba(0, 0, 0, 0.22);
	color: var(--uc-gold);
	border-bottom-color: var(--uc-gold);
}
#page-chat-room .uc-live-studio-tab:focus-visible {
	outline: 2px solid var(--uc-gold);
	outline-offset: -3px;
	z-index: 1;
}
#page-chat-room .uc-live-studio-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.15rem;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
#page-chat-room .uc-live-studio-tab.is-active .uc-live-studio-tab__count {
	color: var(--uc-chrome);
	background: var(--uc-gold);
	border-color: var(--uc-gold-dim);
}
/* Hang tools under tabs — only visible on Chat */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools {
	display: none;
	order: 2;
	width: 100%;
	margin: 0;
	padding: 6px 10px !important;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	background: var(--uc-surface-sunken) !important;
	border-bottom: 1px solid var(--uc-border) !important;
	box-shadow: none !important;
	flex-shrink: 0;
	min-height: 0;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-roomos-head-actions {
	/* Button cluster only — don't stretch empty rail across the full header */
	margin-left: auto;
	max-width: none;
	width: auto;
}
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-chat .uc-chat-feed-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-chat .uc-live-studio-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio:not([data-live-studio-tab]) .uc-chat-feed-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio[data-live-studio-tab="chat"] .uc-chat-feed-tools {
	display: flex;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-roomos-head-actions {
	display: flex;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-roomos-head-actions-trigger {
	display: none; /* icon rail always open on live hang */
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-game-chip-hidden {
	display: none !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-online {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--uc-live-studio-muted);
}

/* Play tab panel (Quick Play) */
#page-chat-room .uc-live-studio-play {
	padding: 14px 12px 18px;
	background: linear-gradient(180deg, var(--uc-warning-surface) 0%, var(--uc-surface) 55%);
	min-height: 200px;
}
#page-chat-room .uc-live-studio-play[hidden],
#page-chat-room .uc-live-studio-about[hidden],
#page-chat-room #chat-room-chat-panel[hidden] {
	display: none !important;
}
#page-chat-room .uc-live-studio-play__head {
	margin-bottom: 12px;
}
#page-chat-room .uc-live-studio-play__kicker {
	display: block;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uc-gold);
	margin-bottom: 4px;
}
#page-chat-room .uc-live-studio-play__head strong {
	display: block;
	font-size: 15px;
	font-weight: 900;
	color: var(--uc-text);
}
#page-chat-room .uc-live-studio-play__head p {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--uc-text-secondary);
}
#page-chat-room .uc-live-studio-play__empty {
	padding: 20px 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-secondary);
	text-align: center;
}
#page-chat-room .uc-live-studio-play__faces {
	margin-top: 12px;
}
/* legacy strip host no longer used on studio */
#page-chat-room .uc-live-studio-play-host {
	display: none !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-tools {
	display: flex;
	align-items: center;
	gap: 6px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-attach,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-voice,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-emoji {
	display: inline-flex !important;
}
#page-chat-room .uc-live-studio-about {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--uc-surface);
	min-height: 180px;
}
#page-chat-room .uc-live-studio-about__label {
	display: block;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uc-live-studio-muted);
	margin-bottom: 4px;
}
#page-chat-room .uc-live-studio-about__block strong,
#page-chat-room .uc-live-studio-about__block p {
	font-size: 13px;
	font-weight: 700;
	color: var(--uc-text);
	margin: 0;
}
#page-chat-room .uc-live-studio-about__rules {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--uc-text-secondary);
}
#page-chat-room .uc-live-studio-gifts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px 4px;
	background: linear-gradient(180deg, var(--uc-surface-sunken) 0%, var(--uc-surface) 70%);
	border-top: 1px solid var(--uc-border);
	position: sticky;
	bottom: 0;
	z-index: 2;
}
#page-chat-room .uc-live-studio-gifts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
#page-chat-room .uc-live-studio-gifts__title {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uc-gold);
}
#page-chat-room .uc-live-studio-gifts__recharge {
	appearance: none;
	border: 1px solid var(--uc-gold-dim);
	background: var(--uc-surface-raised);
	color: var(--uc-primary-ink);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
#page-chat-room .uc-live-studio-gifts__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
#page-chat-room .uc-live-studio-gift {
	flex: 0 0 auto;
	width: 64px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 12px;
	background: var(--uc-surface-raised);
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.12s ease;
}
#page-chat-room .uc-live-studio-gift:active {
	transform: scale(0.94);
}
#page-chat-room .uc-live-studio-gift__emoji {
	font-size: 20px;
	line-height: 1;
}
#page-chat-room .uc-live-studio-gift__cost {
	font-size: 9px;
	font-weight: 900;
	color: var(--uc-gold);
	letter-spacing: 0.06em;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer {
	border-radius: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	background: var(--uc-surface) !important;
	border-top: 1px solid var(--uc-live-studio-border);
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-note {
	padding: 6px 12px 12px;
	color: var(--uc-live-studio-muted);
	font-size: 11px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-members-header-title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-room-card--roster {
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* About / Play always replace chat — these panels have no persistent sidebar
   equivalent, so they must swap in on every breakpoint. */
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-about .uc-chat-feed-shell > .uc-room-card--thread #chat-room-chat-panel,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-play .uc-chat-feed-shell > .uc-room-card--thread #chat-room-chat-panel,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-about .uc-chat-feed-shell > .uc-room-card--thread [data-live-studio-play],
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-play .uc-chat-feed-shell > .uc-room-card--thread [data-live-studio-about] {
	display: none !important;
}
/* Members only replaces chat when the roster has actually been tabbed into the
   main column (single-column layouts below 1024px, see .is-live-studio-rail-tabbed
   in paint.js). On >=1024px the roster already renders in the persistent
   right-hand rail, so leave chat visible instead of blanking the main pane.
   IMPORTANT: never hide `.uc-room-card--thread` itself — the sticky tab bar lives
   in `.uc-chat-feed-header` inside that card; blanking the card removes all tabs. */
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell > .uc-room-card--thread #chat-room-chat-panel,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell > .uc-room-card--thread [data-live-studio-about],
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell > .uc-room-card--thread [data-live-studio-play],
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell > .uc-room-card--thread #chat-room-attachments-panel {
	display: none !important;
}
@media (max-width: 1023px) {
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed .uc-chat-members-shell {
		display: none;
	}
	/* Members tab: keep thread shell for tab chrome; roster owns the column body. */
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell > .uc-room-card--thread {
		/* Header/tabs only — no empty DNA body under the bar */
		flex: 0 0 auto;
		min-height: 0;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-content,
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-room-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		align-items: stretch;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-feed-shell {
		width: 100%;
		max-width: 100%;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members #roomos-slot-rail,
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-members-shell {
		display: flex;
		flex-direction: column;
		order: 3;
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto;
		min-width: 0;
		align-self: stretch;
		grid-column: 1 / -1;
		margin: 0;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-room-card--roster {
		width: 100%;
		max-width: 100%;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: min(52vh, 420px);
		border-radius: 14px !important;
		box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.16) !important;
		border: 2px solid var(--uc-dna-border-strong) !important;
		background: var(--uc-dna-card-surface) !important;
		overflow: hidden;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-members-list {
		max-height: none !important;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-studio-rail-tabbed.is-live-tab-members .uc-chat-members-header {
		width: 100%;
	}
}
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-about .uc-chat-feed-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-play .uc-chat-feed-tools,
#page-chat-room .uc-chat-room-shell.is-live-studio.is-live-tab-members .uc-chat-feed-tools {
	display: none !important;
}

/* Onair: stage reads as a broadcast player, not another white module card. */
#page-chat-room .uc-roomos-onair-stage {
	border-color: var(--uc-primary-darker) !important;
	background: var(--uc-chrome) !important;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22) !important;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-onair-stage .uc-roomos-card-head {
	border-bottom-color: var(--uc-veil-soft) !important;
	background: linear-gradient(90deg, var(--uc-primary-darker) 0%, var(--uc-primary) 55%, var(--uc-chrome) 100%) !important;
}

#page-chat-room .uc-roomos-onair-stage .uc-roomos-card-title,
#page-chat-room .uc-roomos-onair-stage .uc-roomos-card-note {
	color: var(--uc-text-on-primary) !important;
}

#page-chat-room .uc-roomos-onair-stage .uc-roomos-card-note {
	color: var(--uc-gold) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 800;
}

#page-chat-room .uc-roomos-onair-player {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 220px;
	aspect-ratio: 16 / 9;
	max-height: min(52vh, 420px);
	margin: 0;
	background:
		radial-gradient(ellipse at 50% 20%, rgba(185, 28, 28, 0.35), transparent 55%),
		linear-gradient(160deg, var(--uc-chrome) 0%, var(--uc-chrome) 55%, var(--uc-chrome) 100%);
	overflow: hidden;
}

#page-chat-room .uc-roomos-onair-live-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--uc-primary);
	border: 1px solid var(--uc-primary-darker);
	/* Soft lift only — hard offset DNA shadows read as a second red chip. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	color: var(--uc-text-on-primary);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.16em;
	filter: none;
}
#page-chat-room .uc-roomos-onair-live-badge[hidden],
#page-chat-room .uc-roomos-onair-empty[hidden] {
	/* Some global display rules clobber UA [hidden]; force off so empty copy
	   cannot inflate the stage player wider than the feed column on mobile. */
	display: none !important;
}

#page-chat-room .uc-roomos-onair-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--uc-surface);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: uc-room-live-pulse 1.4s ease-in-out infinite;
}

/* Grid mode has no bottom meta bar (seat tiles self-label with name + HOST badge), so the
   watcher count moves to a small top-right pill instead — keeps it out of the tile grid. */
#page-chat-room .uc-roomos-onair-viewer-pill {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid var(--uc-veil-soft);
	color: var(--uc-text-on-primary);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#page-chat-room .uc-roomos-onair-empty {
	display: grid;
	gap: 8px;
	padding: 28px 24px;
	text-align: center;
	width: 100%;
	max-width: min(28rem, 100%);
	box-sizing: border-box;
	min-width: 0;
}

#page-chat-room .uc-roomos-onair-empty strong {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--uc-text-on-primary);
}

#page-chat-room .uc-roomos-onair-empty p {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-onair-frame {
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

#page-chat-room .uc-chat-room-kicker.is-onair {
	color: var(--uc-primary-ink);
}

#page-chat-room .uc-chat-room-active-chip.is-onair {
	background: var(--uc-primary) !important;
	border-color: var(--uc-danger-border) !important;
	color: var(--uc-text-on-primary) !important;
	box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.35);
}

#page-chat-room .uc-chat-room-shell.is-onair .uc-chat-room-live-dot {
	background: #f87171;
	box-shadow: 0 0 14px rgba(248, 113, 113, 0.95) !important;
}

/* Host tools half-screen sheet — appended to <body> (outside #page-chat-room) so it's
   never clipped by a scroll container. Covers the bottom half only; no full backdrop,
   so the stage (and the host's own on-cam tile) stays visible while it's open. */
.uc-live-host-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	max-height: 50vh;
	background: var(--uc-surface-soft);
	border-top: 2px solid var(--uc-border-strong);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.28);
	transform: translateY(100%);
	transition: transform 0.22s ease;
	overflow: hidden;
}
.uc-live-host-sheet[hidden] {
	display: none;
}
.uc-live-host-sheet:not([hidden]) {
	display: flex;
	flex-direction: column;
}
.uc-live-host-sheet.is-open {
	transform: translateY(0);
}
.uc-live-host-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--uc-chrome);
	color: var(--uc-text-on-primary);
	border-bottom: 2px solid var(--uc-border-strong);
	flex: 0 0 auto;
}
.uc-live-host-sheet__head strong {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.uc-live-host-sheet__close {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: var(--uc-text-on-primary);
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.uc-live-host-sheet__close:hover {
	background: var(--uc-veil-soft);
}
.uc-live-host-sheet__body {
	padding: 14px;
	overflow-y: auto;
	flex: 1 1 auto;
}
/* Sheet lives on <body>, outside #page-chat-room, so it can't inherit that scope's
   --uc-room-* custom properties or the #page-chat-room-scoped steward button rules —
   restate the same look here with literal values. */
.uc-live-host-sheet .uc-roomos-steward-subtitle {
	font-size: 12px;
	color: var(--uc-text-muted);
	margin: 0 0 10px;
}
.uc-live-host-sheet .uc-roomos-steward-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.uc-live-host-sheet .uc-roomos-steward-btn {
	appearance: none;
	border: 1px solid var(--uc-surface-sunken);
	border-radius: 999px;
	background: var(--uc-surface);
	color: var(--uc-text-secondary);
	padding: 8px 15px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.uc-live-host-sheet .uc-roomos-steward-btn--people {
	flex: 1 1 100%;
	border-radius: 12px;
	background: var(--uc-primary);
	border-color: var(--uc-primary-darker);
	color: var(--uc-text-on-primary);
	padding: 12px 16px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.uc-live-host-sheet .uc-roomos-steward-btn.is-danger {
	border-color: color-mix(in srgb, var(--uc-primary) 50%, var(--uc-border));
	color: var(--uc-primary);
}
.uc-live-host-sheet .uc-roomos-steward-btn:hover {
	border-color: var(--uc-border);
	background: var(--uc-surface-muted);
}
.uc-live-host-sheet .uc-roomos-steward-btn--people:hover {
	background: var(--uc-primary-darker);
	border-color: var(--uc-primary-darker);
	color: var(--uc-text-on-primary);
}
.uc-live-host-sheet .uc-roomos-steward-empty {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1px solid var(--uc-surface-sunken);
	border-radius: 12px;
	background: var(--uc-surface);
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

/* ── Module card chrome — signature DNA (match lobby Always On / Member) ── */

#page-chat-room .uc-room-card,
#page-chat-room .uc-roomos-stage-host,
#page-chat-room .uc-roomos-strip-host,
#page-chat-room .uc-roomos-steward-host {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	border: 2px solid var(--uc-dna-border-strong) !important;
	border-radius: var(--uc-dna-card-radius) !important;
	background: var(--uc-dna-card-surface) !important;
	box-shadow: var(--uc-dna-shadow-hard), 0 0 0 1px rgba(255, 223, 0, 0.18) !important;
	overflow: hidden;
	color: var(--uc-text);
}

/* Thin red footer bar + dual-gold rail (same language as uc-card-bottom-banner). */
#page-chat-room .uc-room-card::after,
#page-chat-room .uc-roomos-stage-host:not([hidden])::after,
#page-chat-room .uc-roomos-strip-host:not([hidden])::after,
#page-chat-room .uc-roomos-steward-host:not([hidden])::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	min-height: 6px;
	border-top: 2px solid var(--uc-gold-dim);
	box-shadow: inset 0 2px 0 var(--uc-gold);
	background: var(--uc-dna-header-red);
	pointer-events: none;
}

#page-chat-room .uc-room-card-head,
#page-chat-room .uc-roomos-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px !important;
	border-bottom: 2px solid var(--uc-gold-dim) !important;
	box-shadow: inset 0 -2px 0 var(--uc-gold) !important;
	background: linear-gradient(90deg, var(--uc-primary) 0%, var(--uc-primary-darker) 55%, var(--uc-primary) 100%) !important;
	color: var(--uc-text-on-primary);
	overflow: visible;
}

#page-chat-room .uc-chat-feed-title,
#page-chat-room .uc-chat-members-header-title,
#page-chat-room .uc-roomos-card-title {
	font-size: 11px !important;
	font-weight: 900;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: var(--uc-text-on-primary) !important;
	line-height: 1.2;
}

#page-chat-room .uc-chat-feed-title-icon,
#page-chat-room .uc-chat-members-header-icon {
	color: var(--uc-gold) !important;
	font-size: 14px !important;
	text-shadow: 0 1px 0 var(--uc-scrim-soft);
}

#page-chat-room .uc-chat-feed-note,
#page-chat-room .uc-roomos-card-note {
	color: rgba(255, 255, 255, 0.78) !important;
}

#page-chat-room .uc-chat-member-count-chip {
	border: 1px solid var(--uc-gold-dim) !important;
	background: var(--uc-scrim-strong) !important;
	color: var(--uc-gold) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 223, 0, 0.12);
}

#page-chat-room .uc-chat-feed-tools {
	gap: 8px;
	align-items: center;
}

#page-chat-room .uc-roomos-card-head-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 0 1 auto;
	justify-content: flex-end;
}

#page-chat-room .uc-roomos-card-head-right.is-empty {
	display: none;
}

#page-chat-room .uc-roomos-card-head-left {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Head chips / tools sit on red DNA header — use raised surfaces + gold hover. */
#page-chat-room .uc-roomos-head-chip,
#page-chat-room .uc-chat-feed-tool-btn {
	background: var(--uc-scrim-strong) !important;
	border-color: var(--uc-gold-dim) !important;
	color: var(--uc-text-on-primary) !important;
}

#page-chat-room .uc-roomos-head-chip:hover,
#page-chat-room .uc-roomos-head-chip.is-open,
#page-chat-room .uc-chat-feed-tool-btn:hover {
	background: var(--uc-chrome) !important;
	border-color: var(--uc-gold) !important;
	color: var(--uc-gold) !important;
}

/*
 * Live studio thread header is tab chrome (red DNA), not a secondary title row.
 * Hang tools sit on a surface plate under the tabs so chips stay readable.
 */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-header.uc-live-studio-feed-header,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-feed-header {
	padding: 0 !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tabs {
	border-bottom: 0;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tab {
	color: rgba(255, 255, 255, 0.78) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tab.is-active {
	color: var(--uc-gold) !important;
	border-bottom-color: var(--uc-gold);
	background: rgba(0, 0, 0, 0.22) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools {
	background: var(--uc-surface-sunken) !important;
	border-bottom: 1px solid var(--uc-border) !important;
	box-shadow: none !important;
	padding: 6px 10px !important;
	min-height: 0 !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-chat-feed-tool-btn,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-roomos-head-chip {
	background: var(--uc-surface-raised) !important;
	border-color: var(--uc-border-strong) !important;
	color: var(--uc-text) !important;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
	min-width: 36px !important;
	min-height: 34px !important;
	width: 36px !important;
	height: 34px !important;
	padding: 0 !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-chat-feed-tool-btn:hover,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-roomos-head-chip:hover,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-tools .uc-roomos-head-chip.is-open {
	background: var(--uc-chrome) !important;
	border-color: var(--uc-gold) !important;
	color: var(--uc-gold) !important;
}

/* Chat body + composer read as one easy surface under the tab chrome */
#page-chat-room .uc-chat-room-shell.is-live-studio #chat-room-chat-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--uc-surface-sunken);
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-stream {
	/* Room for a few messages — not a tall empty void that hides tabs after scroll. */
	min-height: 120px;
	max-height: min(28vh, 240px) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: color-mix(in srgb, var(--uc-surface-sunken) 88%, #000 12%) !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-shell,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-wrap,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer {
	border-radius: 0 !important;
	box-shadow: none !important;
	border-left: 0 !important;
	border-right: 0 !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer {
	border-top: 1px solid var(--uc-border) !important;
	background: var(--uc-surface) !important;
	/* Keep input + send on one row; tools stay compact icon chips under it */
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	grid-template-areas:
		"avatar field send"
		"tools tools tools" !important;
	gap: 8px !important;
	padding: 10px 12px 10px !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-tools {
	justify-content: flex-start !important;
	gap: 8px !important;
	width: 100%;
	padding-left: 0 !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-attach,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-voice,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-emoji {
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	padding: 0 !important;
	border-radius: 10px !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-gifts {
	border-top: 1px solid var(--uc-border);
	background: linear-gradient(180deg, var(--uc-surface) 0%, var(--uc-surface-sunken) 100%);
	padding: 10px 12px 12px;
	position: static;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-gift {
	border: 1.5px solid var(--uc-border-strong);
	border-radius: 12px;
	background: var(--uc-surface-raised);
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
	min-width: 64px;
	padding: 8px 6px;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-about {
	padding: 14px 14px 18px;
	background: var(--uc-surface-sunken);
	min-height: 160px;
}
/* Quiet the hanging footer blurb inside the live interaction card */
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-composer-note,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-room-card--thread > .uc-chat-room-footer-meta,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-feed-footer {
	display: none !important;
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-about__label {
	color: var(--uc-gold);
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-about__block strong,
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-live-studio-about__block p {
	color: var(--uc-text);
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-member-name {
	color: var(--uc-primary-ink);
}
#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-member-status {
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-roomos-head-actions-trigger {
	background: var(--uc-chrome) !important;
	color: var(--uc-gold) !important;
	border-color: var(--uc-gold-dim) !important;
}

#page-chat-room .uc-roomos-head-actions-trigger:hover,
#page-chat-room .uc-roomos-head-actions-trigger.is-open {
	background: var(--uc-gold) !important;
	color: var(--uc-text-on-gold) !important;
	border-color: var(--uc-border-strong) !important;
}

#page-chat-room .uc-roomos-card-body {
	padding: 14px 16px;
	background: var(--uc-surface-sunken);
	color: var(--uc-text);
}

/* Stage / strip hosts mount heads into themselves — body fill. */
#page-chat-room .uc-roomos-stage-host > .uc-roomos-card-body,
#page-chat-room .uc-roomos-strip-host > .uc-roomos-card-body,
#page-chat-room .uc-roomos-steward-host > .uc-roomos-card-body {
	flex: 1 1 auto;
}

#page-chat-room .uc-chat-members-list,
#page-chat-room .uc-chat-feed-stream,
#page-chat-room .uc-room-thread {
	background: var(--uc-surface-sunken) !important;
}

#page-chat-room .uc-roomos-head-actions {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: min(26rem, 72vw);
}

#page-chat-room .uc-roomos-head-actions[hidden] {
	display: none !important;
}

#page-chat-room .uc-roomos-head-chips {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

#page-chat-room .uc-roomos-head-chip,
#page-chat-room .uc-roomos-head-chip.uc-chat-feed-tool-btn,
#page-chat-room .uc-roomos-head-chip.uc-chat-attachments-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 28px;
	padding: 3px 8px;
	border: 1px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-surface);
	color: var(--uc-text);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
}

#page-chat-room .uc-roomos-head-chip:hover,
#page-chat-room .uc-roomos-head-chip.is-open {
	border-color: var(--uc-room-red, var(--uc-primary));
	color: var(--uc-room-red-ink, var(--uc-primary-ink));
}

#page-chat-room .uc-roomos-head-chip-icon {
	font-size: 12px;
	line-height: 1;
}

#page-chat-room .uc-roomos-head-chip-label {
	line-height: 1;
}

/* Icon-only rail on red DNA header — scrim + gold, same hard offset as compose. */
#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip,
#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip.uc-chat-feed-tool-btn,
#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip.uc-chat-attachments-chip {
	min-width: 36px;
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 2px solid var(--uc-gold-dim) !important;
	border-radius: 6px;
	background: var(--uc-scrim-strong) !important;
	color: var(--uc-text-on-primary) !important;
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong);
	letter-spacing: 0;
	text-transform: none;
}

#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip:hover,
#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip.is-open {
	background: var(--uc-chrome) !important;
	border-color: var(--uc-gold) !important;
	color: var(--uc-gold) !important;
	filter: none;
}

#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip-icon {
	font-size: 15px;
}

#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-roomos-head-chip-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#page-chat-room .uc-roomos-head-chip-badge,
#page-chat-room .uc-roomos-head-actions.is-icon-rail #chat-room-attachments-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border: 1.5px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-room-red, var(--uc-primary));
	color: var(--uc-text-on-primary);
	font-size: 9px;
	font-weight: 900;
	line-height: 13px;
	text-align: center;
	box-shadow: 1px 1px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-roomos-head-actions.is-icon-rail .uc-chat-attachments-chip.is-empty #chat-room-attachments-count {
	display: none;
}

#page-chat-room .uc-roomos-head-actions-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-chrome);
	color: var(--uc-gold);
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-roomos-head-actions-trigger:hover,
#page-chat-room .uc-roomos-head-actions-trigger.is-open {
	background: var(--uc-primary);
	border-color: var(--uc-border-strong);
	color: var(--uc-text-on-primary);
	filter: none;
}

#page-chat-room .uc-roomos-head-actions-trigger-glyph {
	font-size: 15px;
	line-height: 1;
	font-weight: 900;
}

/* member.css sets `display: flex` on the wrap, which outranks Tailwind's .hidden. */
#page-chat-room .uc-chat-search-wrap.hidden {
	display: none !important;
}

#page-chat-room .uc-chat-search-wrap {
	border-radius: 999px !important;
	border-color: var(--uc-room-line) !important;
	background: var(--uc-surface-raised) !important;
	padding: 2px 10px !important;
}

#page-chat-room .uc-chat-feed-tool-btn {
	font-size: 15px !important;
}

#page-chat-room .uc-chat-feed-tool-btn:hover {
	color: var(--uc-gold) !important;
}

/* ── The Room Thread ───────────────────────────────────────────────────── */

#page-chat-room .uc-chat-feed-title-stack {
	display: grid;
	gap: 2px;
	min-width: 0;
}

#page-chat-room .uc-chat-feed-note {
	font-size: 10px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
}

#page-chat-room .uc-chat-feed-stream,
#page-chat-room .uc-room-thread {
	display: grid !important;
	padding: 14px 16px !important;
	gap: 10px !important;
	min-height: 320px !important;
	max-height: 420px !important;
	overflow-y: auto !important;
}

#page-chat-room .uc-chat-msg {
	display: grid !important;
	grid-template-columns: 48px minmax(0, 1fr) !important;
	gap: 10px !important;
	align-items: start;
}

/* RoomOS presence notices (joined / left) */
#page-chat-room .uc-chat-msg.uc-chat-msg--system {
	display: flex !important;
	grid-template-columns: none !important;
	justify-content: center;
	align-items: center;
	padding: 2px 8px;
}

#page-chat-room .uc-chat-system-line {
	max-width: min(100%, 28rem);
	text-align: center;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--uc-text-secondary);
	line-height: 1.35;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--uc-surface-sunken);
	border: 1px solid var(--uc-border);
}

#page-chat-room .uc-chat-msg.uc-list-item-enter,
#page-chat-room .uc-chat-member-row.uc-list-item-enter {
	opacity: 1 !important;
	animation: none !important;
}

#page-chat-room .uc-chat-self-avatar {
	overflow: hidden;
	display: grid;
	place-items: center;
}

#page-chat-room .uc-chat-msg-avatar {
	width: 48px !important;
	height: 48px !important;
	border: 2px solid var(--uc-border-strong) !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 900;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--uc-surface-raised);
}

#page-chat-room .uc-chat-msg-avatar .uc-chat-avatar-img,
#page-chat-room .uc-chat-member-avatar .uc-chat-avatar-img,
#page-chat-room .uc-chat-self-avatar .uc-chat-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

#page-chat-room .uc-chat-msg-body {
	min-width: 0;
	max-width: 100%;
}

/* Keep bubbles visible — do not inherit opacity-0 stagger that hides text/voice. */
#page-chat-room .uc-chat-msg-bubble,
#page-chat-room .uc-chat-msg-bubble.uc-button-stagger {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* `.uc-chat-tone-dynamic` also carries !important tone colors from member.css. */
#page-chat-room .uc-chat-msg-bubble,
#page-chat-room .uc-chat-msg-bubble.uc-chat-tone-dynamic {
	margin-top: 0 !important;
	border: 2px solid var(--uc-border-strong) !important;
	border-left: 2px solid var(--uc-border-strong) !important;
	border-radius: 10px !important;
	background: var(--uc-surface) !important;
	padding: 8px 10px !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--uc-text) !important;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft) !important;
}

#page-chat-room .uc-chat-msg-bubble-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 3px;
}

#page-chat-room .uc-chat-msg-text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--uc-text);
	word-break: break-word;
}

#page-chat-room .uc-chat-msg-author {
	font-size: 11px !important;
	font-weight: 900 !important;
	text-transform: none;
	letter-spacing: 0;
	color: var(--uc-text) !important;
}

#page-chat-room .uc-chat-msg-time {
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em;
	color: var(--uc-text-muted) !important;
}

#page-chat-room .uc-chat-msg-status {
	font-size: 10px;
	font-weight: 800;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-chat-msg.is-self {
	grid-template-columns: 48px minmax(0, 1fr) !important;
}

#page-chat-room .uc-chat-msg.is-self .uc-chat-msg-bubble,
#page-chat-room .uc-chat-msg.is-self .uc-chat-msg-bubble.uc-chat-tone-dynamic {
	border-radius: 10px !important;
	background: var(--uc-warning-surface) !important;
	border-color: var(--uc-border-strong) !important;
	border-left-color: var(--uc-border-strong) !important;
}

#page-chat-room .uc-chat-msg.is-self .uc-chat-msg-reactions {
	justify-content: flex-start;
}

#page-chat-room .uc-chat-voice-chip {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border: 1px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-success-surface);
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uc-success-text);
}

#page-chat-room .uc-chat-voice {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 8px;
	border: 2px dashed var(--uc-border-strong);
	border-radius: 8px;
	background: var(--uc-surface-soft);
}

#page-chat-room .uc-chat-voice.is-redacted {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-muted);
	background: var(--uc-surface-raised);
}

#page-chat-room .uc-chat-voice-play {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 2px solid var(--uc-border-strong);
	background: var(--uc-room-red);
	color: var(--uc-text-on-primary);
	font-size: 11px;
	font-weight: 900;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-voice-play:hover {
	filter: brightness(1.05);
}

#page-chat-room .uc-chat-voice-wave {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 26px;
	min-width: 0;
}

#page-chat-room .uc-chat-voice-wave i {
	display: block;
	width: 3px;
	background: var(--uc-success);
	border-radius: 2px;
	opacity: 0.45;
	transform-origin: bottom center;
}

#page-chat-room .uc-chat-voice-wave.is-playing i {
	animation: uc-room-voice-bounce 900ms ease-in-out infinite;
	opacity: 1;
}

@keyframes uc-room-voice-bounce {
	0%, 100% { transform: scaleY(0.55); }
	50% { transform: scaleY(1); }
}

#page-chat-room .uc-chat-voice-time {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.06em;
	color: var(--uc-success-text);
	white-space: nowrap;
}

#page-chat-room .uc-chat-voice-player {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#page-chat-room .uc-chat-msg-delete {
	margin-left: auto;
	border: 1px solid var(--uc-border-strong);
	border-radius: 4px;
	background: var(--uc-surface);
	color: var(--uc-primary-ink);
	font-size: 11px;
	line-height: 1;
	padding: 2px 5px;
	cursor: pointer;
}

#page-chat-room .uc-chat-msg-delete:hover {
	background: var(--uc-danger-surface);
}

#page-chat-room .uc-chat-msg-image-preview,
#page-chat-room .uc-chat-msg-video {
	margin-top: 6px;
	max-width: min(100%, 280px);
	border: 1px solid var(--uc-border-strong);
	border-radius: 8px;
	overflow: hidden;
	background: var(--uc-chrome);
}

#page-chat-room .uc-chat-msg-image-preview img,
#page-chat-room .uc-chat-msg-video-player {
	display: block;
	width: 100%;
	height: auto;
	max-height: 240px;
	object-fit: cover;
	background: var(--uc-chrome);
}

#page-chat-room .uc-chat-attachments-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 28px;
	padding: 2px 8px;
	border: 1px solid var(--uc-room-line);
	border-radius: 999px;
	background: var(--uc-surface);
	color: var(--uc-text-secondary);
	font-size: 10px;
	font-weight: 800;
	cursor: pointer;
}

#page-chat-room .uc-chat-attachments-chip.is-open,
#page-chat-room .uc-chat-attachments-chip:hover {
	border-color: var(--uc-border-strong);
	color: var(--uc-room-red-ink, var(--uc-primary-ink));
	background: var(--uc-surface-soft);
}

#page-chat-room .uc-chat-attachments-chip.is-empty {
	opacity: 0.72;
}

/* Attachments tab surface (RoomStamp feed-tab parity) */
#page-chat-room .uc-chat-chat-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
}

#page-chat-room .uc-chat-chat-panel[hidden] {
	display: none !important;
}

#page-chat-room .uc-room-card--thread[data-room-surface="attachments"] .uc-chat-attachments-panel {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-height: none;
	min-height: 0;
	background: var(--uc-surface-soft);
}

#page-chat-room .uc-chat-attachments-panel {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--uc-surface-soft);
	box-shadow: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#page-chat-room .uc-chat-attachments-panel[hidden] {
	display: none !important;
}

#page-chat-room .uc-chat-attachments-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 2px solid var(--uc-border-strong);
	background: var(--uc-surface);
}

#page-chat-room .uc-chat-attachments-panel-title-wrap {
	display: grid;
	gap: 1px;
	min-width: 0;
}

#page-chat-room .uc-chat-attachments-panel-kicker {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-chat-attachments-panel-title {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text);
}

#page-chat-room .uc-chat-attachments-panel-close {
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-surface);
	color: var(--uc-text);
	cursor: pointer;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 10px;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-attachments-panel-close:hover {
	background: var(--uc-surface-soft);
	color: var(--uc-room-red-ink, var(--uc-primary-ink));
}

/* Compact shelf: max 2 rows, scroll sideways for the rest. */
#page-chat-room .uc-chat-attachments-list {
	--uc-attach-card-w: 8.75rem;
	padding: 12px 14px 14px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, minmax(0, auto));
	grid-auto-columns: var(--uc-attach-card-w);
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 0 0 auto;
	max-height: 22.5rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

#page-chat-room .uc-chat-attachments-list:has(> :only-child),
#page-chat-room .uc-chat-attachments-list:not(:has(> :nth-child(2))) {
	grid-template-rows: auto;
	max-height: none;
}

#page-chat-room .uc-chat-attachments-empty {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	padding: 8px 2px 4px;
	font-size: 11px;
	color: var(--uc-text-muted);
	width: min(22rem, 70vw);
}

#page-chat-room .uc-chat-attachment-card {
	border: 2px solid var(--uc-border-strong);
	border-radius: 8px;
	background: var(--uc-surface);
	padding: 6px;
	display: grid;
	gap: 5px;
	min-width: 0;
	width: var(--uc-attach-card-w);
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
	transition: transform 0.12s ease;
	scroll-snap-align: start;
}

#page-chat-room .uc-chat-attachment-card:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-attachment-preview {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: var(--uc-chrome);
	display: grid;
	place-items: center;
	color: var(--uc-text-muted);
	font-size: 22px;
}

#page-chat-room .uc-chat-attachment-preview img,
#page-chat-room .uc-chat-attachment-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#page-chat-room .uc-chat-attachment-preview.is-voice {
	background: var(--uc-success-surface);
	color: var(--uc-success-text);
}

#page-chat-room .uc-chat-attachment-kind {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 1px 5px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.72);
	color: var(--uc-text-on-primary);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#page-chat-room .uc-chat-attachment-meta {
	display: grid;
	gap: 1px;
	min-width: 0;
}

#page-chat-room .uc-chat-attachment-author {
	font-size: 11px;
	font-weight: 800;
	color: var(--uc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page-chat-room .uc-chat-attachment-time {
	font-size: 9px;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-chat-attachment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

#page-chat-room .uc-chat-attachment-open,
#page-chat-room .uc-chat-attachment-delete {
	border: 1px solid var(--uc-border-strong);
	border-radius: 4px;
	background: var(--uc-surface);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 6px;
	cursor: pointer;
}

#page-chat-room .uc-chat-attachment-delete {
	color: var(--uc-primary-ink);
	background: var(--uc-danger-surface);
}

#page-chat-room .uc-chat-history-marker {
	padding: 14px 0 !important;
	font-size: 9px !important;
	color: var(--uc-text-muted) !important;
	background: var(--uc-surface) !important;
}

/* ── Composer (Room Thread) ────────────────────────────────────────────── */

#page-chat-room .uc-chat-composer {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"avatar field tools send";
	margin: 0 !important;
	padding: 12px 16px !important;
	gap: 8px !important;
	border: 0 !important;
	border-top: 1px dashed var(--uc-room-line) !important;
	border-radius: 0 !important;
	background: var(--uc-surface) !important;
	box-shadow: none !important;
	align-items: center;
}

#page-chat-room .uc-chat-self-avatar {
	grid-area: avatar;
	width: 48px !important;
	height: 48px !important;
	border: 2px solid var(--uc-border-strong) !important;
	font-size: 15px !important;
	font-weight: 900;
	background: linear-gradient(135deg, var(--uc-primary), var(--uc-primary-darker)) !important;
	color: var(--uc-text-on-primary) !important;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-composer-field {
	grid-area: field;
	flex: 1 1 auto;
	min-width: 0;
}

#page-chat-room .uc-chat-composer-tools {
	grid-area: tools;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

#page-chat-room .uc-chat-composer-actions {
	grid-area: send;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

#page-chat-room .uc-chat-composer-input {
	border: 2px solid var(--uc-border-strong) !important;
	border-radius: 6px !important;
	background: var(--uc-surface) !important;
	padding: 9px 11px !important;
	/* Keep >=16px so iOS does not zoom the page on focus. */
	font-size: 16px !important;
}

#page-chat-room .uc-chat-composer-input:focus {
	border-color: var(--uc-border-strong) !important;
	box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.18) !important;
	background: var(--uc-surface) !important;
}

#page-chat-room .uc-chat-composer-attach,
#page-chat-room .uc-chat-composer-voice,
#page-chat-room .uc-chat-composer-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	width: 40px;
	height: 40px;
	border: 2px solid var(--uc-border-strong) !important;
	border-radius: 6px !important;
	background: var(--uc-chrome) !important;
	color: var(--uc-gold) !important;
	font-size: 14px !important;
	padding: 0 !important;
	box-shadow: 3px 3px 0 var(--uc-scrim) !important;
	cursor: pointer;
}

#page-chat-room .uc-chat-composer-attach,
#page-chat-room .uc-chat-composer-emoji {
	background: var(--uc-surface) !important;
	color: var(--uc-text) !important;
}

#page-chat-room .uc-chat-composer-field .uc-chat-composer-input {
	width: 100%;
}

#page-chat-room .uc-chat-composer-voice:hover,
#page-chat-room .uc-chat-composer-emoji:hover {
	filter: brightness(1.05);
}

@media (max-width: 720px) {
	#page-chat-room .uc-chat-composer {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"avatar field send"
			"tools tools tools";
		gap: 10px 8px !important;
		padding: 12px 12px 10px !important;
		align-items: stretch;
	}

	#page-chat-room .uc-chat-self-avatar {
		width: 40px !important;
		height: 40px !important;
		font-size: 13px !important;
		align-self: center;
	}

	#page-chat-room .uc-chat-composer-field {
		align-self: center;
	}

	#page-chat-room .uc-chat-composer-input {
		min-height: 42px;
		padding: 10px 12px !important;
		font-size: 16px !important;
	}

	#page-chat-room .uc-chat-composer-tools {
		justify-content: flex-start;
		gap: 8px;
		padding-left: 48px; /* align under field, past avatar */
	}

	#page-chat-room .uc-chat-composer-actions {
		align-self: center;
	}

	#page-chat-room .uc-chat-send-btn {
		min-width: 64px;
		padding: 10px 12px !important;
		font-size: 11px !important;
		line-height: 1.15;
	}

	#page-chat-room .uc-chat-composer-note {
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 10px !important;
	}
}

@media (max-width: 420px) {
	#page-chat-room .uc-chat-composer-tools {
		padding-left: 0;
		width: 100%;
		justify-content: space-between;
	}

	#page-chat-room .uc-chat-composer-attach,
	#page-chat-room .uc-chat-composer-voice,
	#page-chat-room .uc-chat-composer-emoji {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: none;
	}
}

/* UC sticker picker (composer) */
#page-chat-room .uc-chat-sticker-picker {
	margin: 0 0 10px;
	padding: 12px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--uc-surface) 0%, var(--uc-surface-raised) 100%);
	box-shadow: 4px 4px 0 var(--uc-shadow-ink-soft);
}

#page-chat-room .uc-chat-sticker-picker[hidden] {
	display: none !important;
}

#page-chat-room .uc-chat-sticker-picker-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

#page-chat-room .uc-chat-sticker-picker-kicker {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uc-primary);
}

#page-chat-room .uc-chat-sticker-picker-note {
	font-size: 10px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-chat-sticker-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 640px) {
	#page-chat-room .uc-chat-sticker-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

#page-chat-room .uc-chat-sticker-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 64px;
	padding: 8px 4px;
	border: 1.5px solid var(--uc-surface-sunken);
	border-radius: 12px;
	background: var(--uc-surface);
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

#page-chat-room .uc-chat-sticker-tile:hover {
	transform: translateY(-2px);
	border-color: var(--uc-border-strong);
	box-shadow: 2px 2px 0 var(--uc-border-strong);
}

#page-chat-room .uc-chat-sticker-tile-glyph {
	font-size: 22px;
	line-height: 1;
}

#page-chat-room .uc-chat-sticker-tile-label {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-chat-sticker-tile.tone-red { border-left: 3px solid var(--uc-primary); }
#page-chat-room .uc-chat-sticker-tile.tone-gold { border-left: 3px solid var(--uc-gold-dim); }
#page-chat-room .uc-chat-sticker-tile.tone-blue { border-left: 3px solid #1d4ed8; }
#page-chat-room .uc-chat-sticker-tile.tone-amber { border-left: 3px solid #b45309; }
#page-chat-room .uc-chat-sticker-tile.tone-rose { border-left: 3px solid #e11d48; }
#page-chat-room .uc-chat-sticker-tile.tone-emerald { border-left: 3px solid #047857; }
#page-chat-room .uc-chat-sticker-tile.tone-purple { border-left: 3px solid #7e22ce; }
#page-chat-room .uc-chat-sticker-tile.tone-indigo { border-left: 3px solid #4338ca; }
#page-chat-room .uc-chat-sticker-tile.tone-slate { border-left: 3px solid var(--uc-slate-600); }

/* In-message branded stickers */
#page-chat-room .uc-chat-sticker {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 3px;
	padding: 3px 8px 3px 6px;
	border: 1.5px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-surface);
	vertical-align: middle;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
	line-height: 1.2;
}

#page-chat-room .uc-chat-sticker-glyph {
	font-size: 14px;
	line-height: 1;
}

#page-chat-room .uc-chat-sticker-label {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uc-text);
}

#page-chat-room .uc-chat-sticker.tone-red { background: var(--uc-surface-soft); }
#page-chat-room .uc-chat-sticker.tone-gold { background: var(--uc-warning-surface); }
#page-chat-room .uc-chat-sticker.tone-blue { background: var(--uc-info-surface); }
#page-chat-room .uc-chat-sticker.tone-amber { background: var(--uc-surface-soft); }
#page-chat-room .uc-chat-sticker.tone-rose { background: var(--uc-surface-soft); }
#page-chat-room .uc-chat-sticker.tone-emerald { background: var(--uc-success-surface); }
#page-chat-room .uc-chat-sticker.tone-purple { background: var(--uc-surface-muted); }
#page-chat-room .uc-chat-sticker.tone-indigo { background: var(--uc-surface-sunken); }
#page-chat-room .uc-chat-sticker.tone-slate { background: var(--uc-surface-raised); }

#page-chat-room .uc-chat-reaction-chip.is-sticker {
	gap: 4px;
	padding-right: 8px;
}

#page-chat-room .uc-chat-reaction-label {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-chat-reaction-picker--stickers {
	flex-wrap: wrap;
	max-width: min(320px, 80vw);
	gap: 6px;
	padding: 8px;
}

#page-chat-room .uc-chat-sticker-react {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 44px;
	padding: 4px 6px !important;
	font-size: 18px !important;
}

#page-chat-room .uc-chat-sticker-react-label {
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-chat-composer-voice.is-recording {
	background: var(--uc-primary) !important;
	color: var(--uc-text-on-primary) !important;
	border-color: var(--uc-gold) !important;
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong) !important;
	filter: none;
}

#page-chat-room .uc-chat-composer-voice-overlay {
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-success-surface);
}

#page-chat-room .uc-chat-send-btn {
	border: 2px solid var(--uc-border-strong) !important;
	border-radius: 6px !important;
	background: var(--uc-room-red) !important;
	color: var(--uc-text-on-primary) !important;
	padding: 9px 14px !important;
	font-size: 11px !important;
	font-weight: 900;
	letter-spacing: 0.04em !important;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 var(--uc-scrim) !important;
}

#page-chat-room .uc-chat-send-btn:hover {
	background: var(--uc-primary-darker) !important;
}

#page-chat-room .uc-chat-composer-note {
	padding: 0 16px 12px !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.02em !important;
	text-transform: none;
	color: var(--uc-text-muted) !important;
}

#page-chat-room .uc-chat-composer-note-dot {
	display: none;
}

/* ── Media viewer (RoomStamp rs-feed-viewer port) ─────────────────────── */

#page-chat-room .uc-chat-media-viewer {
	position: fixed;
	inset: 0;
	z-index: 7920;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

#page-chat-room .uc-chat-media-viewer[hidden] {
	display: none !important;
}

#page-chat-room .uc-chat-media-viewer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
}

#page-chat-room .uc-chat-media-viewer-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 40rem);
	max-height: min(90vh, 40rem);
	overflow: auto;
	border: 2px solid var(--uc-border-strong);
	border-radius: 12px;
	background: var(--uc-surface-soft);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 6px 6px 0 var(--uc-scrim);
}

#page-chat-room .uc-chat-media-viewer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

#page-chat-room .uc-chat-media-viewer-meta {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-chat-media-viewer-close {
	width: 34px;
	height: 34px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-surface);
	color: var(--uc-text);
	font-size: 14px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-media-viewer-body {
	display: grid;
	place-items: center;
	min-height: 10rem;
	background: var(--uc-chrome);
	border: 2px solid var(--uc-border-strong);
	border-radius: 8px;
	overflow: hidden;
	padding: 8px;
}

#page-chat-room .uc-chat-media-viewer-image,
#page-chat-room .uc-chat-media-viewer-video {
	display: block;
	width: 100%;
	max-height: min(70vh, 32rem);
	object-fit: contain;
	background: var(--uc-chrome);
}

#page-chat-room .uc-chat-media-viewer-audio {
	width: min(100%, 28rem);
}

#page-chat-room .uc-chat-media-viewer-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 14px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-room-red, var(--uc-primary));
	color: var(--uc-text-on-primary);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--uc-shadow-ink-strong);
}

#page-chat-room .uc-chat-msg-media-expand {
	margin-top: 6px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 6px;
	background: var(--uc-surface);
	color: var(--uc-text);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-strong);
}

body.uc-chat-media-viewer-open {
	overflow: hidden;
}

#page-chat-room .uc-chat-scroll-btn {
	position: absolute;
	left: 50%;
	bottom: 96px;
	transform: translateX(-50%);
	z-index: 5;
	border-radius: 999px !important;
	padding: 7px 16px !important;
	font-size: 10px !important;
}

#page-chat-room .uc-chat-scroll-btn.is-hidden {
	display: none;
}

/* ── Roster rail ───────────────────────────────────────────────────────── */

#page-chat-room .uc-chat-member-count-chip {
	border-radius: 999px;
	border: 1px solid var(--uc-gold-dim) !important;
	background: var(--uc-scrim-strong) !important;
	padding: 3px 9px;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.1em;
	color: var(--uc-gold) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 223, 0, 0.12);
}

#page-chat-room .uc-chat-members-list {
	padding: 12px !important;
	gap: 8px !important;
	max-height: 420px !important;
}

#page-chat-room .uc-chat-member-row {
	padding: 8px 10px !important;
	border: 1px solid var(--uc-room-line) !important;
	border-radius: 14px !important;
	background: var(--uc-surface) !important;
}

#page-chat-room .uc-chat-member-row.is-on-cam {
	border-color: color-mix(in srgb, var(--uc-success, #16a34a) 45%, var(--uc-room-line)) !important;
}
#page-chat-room .uc-chat-member-row.is-host .uc-chat-member-status {
	color: var(--uc-primary, #b91c1c) !important;
	font-weight: 800;
}

#page-chat-room .uc-chat-member-avatar {
	width: 44px !important;
	height: 44px !important;
	border: 2px solid var(--uc-border-strong) !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	overflow: hidden;
	display: grid;
	place-items: center;
	position: relative;
	background: var(--uc-surface-raised);
}

#page-chat-room .uc-chat-member-pullup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	appearance: none;
	border: 0;
	margin: 0;
	padding: 5px 0 6px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold, #1a0a0a);
	font-size: 6px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

#page-chat-room .uc-chat-member-pullup:active {
	filter: brightness(0.92);
}

#page-chat-room .uc-chat-member-dot {
	width: 10px !important;
	height: 10px !important;
}

#page-chat-room .uc-chat-member-name {
	font-size: 12px !important;
	text-transform: none;
	letter-spacing: 0;
}

#page-chat-room .uc-chat-member-status {
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--uc-text-muted) !important;
}

#page-chat-room .uc-chat-member-pull {
	border-radius: 999px !important;
	border: 1px solid var(--uc-room-line) !important;
	background: var(--uc-surface-raised) !important;
	color: var(--uc-room-muted) !important;
	padding: 4px 11px !important;
	font-size: 9px !important;
}

#page-chat-room .uc-chat-members-note {
	display: none !important;
}

/* ── RoomOS strip + steward hosts (card chrome owned by module-card block) ── */

/* Host tools live in the side rail for hang rooms; on live studio they move to the
 * gear sheet — never leave an empty DNA frame under "In This Room". */
#page-chat-room .uc-roomos-steward-host[hidden],
#page-chat-room .uc-chat-room-shell.is-live-studio #roomos-slot-steward {
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
}

#page-chat-room .uc-roomos-stage-meta {
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-muted);
	margin-bottom: 10px;
	letter-spacing: 0.01em;
}

#page-chat-room .uc-roomos-stage-meta.is-live {
	color: var(--uc-success-text);
}

#page-chat-room .uc-roomos-stage-stub {
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-warning-text);
	background: var(--uc-warning-surface);
	border: 1px solid var(--uc-warning-border);
	border-radius: 12px;
	padding: 8px 10px;
	margin-bottom: 10px;
}

/* Mic failures (blocked permission, insecure origin) — the seat still shows
   live server-side, so the reason has to stay on the card. */
#page-chat-room .uc-roomos-stage-notice {
	font-size: 11px;
	font-weight: 800;
	color: var(--uc-danger-text);
	background: var(--uc-danger-surface);
	border: 1px solid var(--uc-danger-border);
	border-radius: 12px;
	padding: 8px 10px;
	margin-bottom: 10px;
}

/* Compact dock — gen-z chip row instead of a wall of uppercase buttons */
#page-chat-room .uc-roomos-stage-dock,
#page-chat-room .uc-roomos-stage-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

#page-chat-room .uc-roomos-stage-chip,
#page-chat-room .uc-roomos-stage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px solid var(--uc-border-strong);
	background: var(--uc-surface);
	color: var(--uc-text);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 9px 14px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
	box-shadow: 2px 2px 0 var(--uc-wash-soft);
	transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	-webkit-tap-highlight-color: transparent;
}

#page-chat-room .uc-roomos-stage-chip:active,
#page-chat-room .uc-roomos-stage-btn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 var(--uc-wash-soft);
}

#page-chat-room .uc-roomos-stage-chip:hover,
#page-chat-room .uc-roomos-stage-btn:hover {
	background: var(--uc-surface-soft);
	border-color: var(--uc-gold);
}

#page-chat-room .uc-roomos-stage-chip.is-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 16px;
}

/* Room audio toggle: default quiet, green when sound is on */
#page-chat-room .uc-roomos-stage-chip.is-listen {
	background: var(--uc-surface-raised);
	border-color: var(--uc-border);
	box-shadow: none;
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-roomos-stage-chip.is-listen:hover {
	background: var(--uc-surface-sunken);
	border-color: var(--uc-border);
}

#page-chat-room .uc-roomos-stage-chip.is-listen.is-on,
#page-chat-room .uc-roomos-stage-chip.is-listen.is-active {
	background: var(--uc-success-surface);
	border-color: var(--uc-success);
	color: var(--uc-success-text);
	box-shadow: 0 0 0 2px var(--uc-success-border);
}

/* Someone is on mic while this listener is silenced — pull the eye to the
   toggle instead of letting the room read as broken audio. */
#page-chat-room .uc-roomos-stage-chip.is-listen.is-attention {
	border-color: var(--uc-gold);
	color: var(--uc-gold);
	animation: uc-talk-pulse 1.6s ease-in-out infinite;
}

#page-chat-room .uc-roomos-stage-chip.is-primary {
	background: var(--uc-gold);
	color: var(--uc-text-on-gold);
	border-color: var(--uc-border-strong);
}

#page-chat-room .uc-roomos-stage-chip.is-primary:hover {
	background: var(--uc-gold);
}

#page-chat-room .uc-roomos-stage-chip.is-primary.is-active {
	background: var(--uc-chrome);
	color: var(--uc-gold);
}

/* Mute chip (and other toggles) go rose when active — not the room-audio control */
#page-chat-room .uc-roomos-stage-chip.is-active:not(.is-primary):not(.is-listen) {
	background: var(--uc-surface-soft);
	border-color: var(--uc-primary);
	color: var(--uc-primary-ink);
	box-shadow: 2px 2px 0 var(--uc-shadow-ink-soft);
}

#page-chat-room .uc-roomos-stage-chip-icon {
	font-size: 15px;
	line-height: 1;
}

#page-chat-room .uc-roomos-stage-chip-label {
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

#page-chat-room .uc-roomos-stage-chip.is-compact,
#page-chat-room .uc-roomos-stage-btn.is-compact {
	padding: 5px 10px;
	font-size: 11px;
	box-shadow: 1px 1px 0 var(--uc-wash-soft);
}

#page-chat-room .uc-roomos-stage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: 8px;
}

#page-chat-room .uc-roomos-stage-seat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px 10px;
	border-radius: 16px;
	border: 1.5px solid var(--uc-border);
	background: var(--uc-surface-raised);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#page-chat-room .uc-roomos-stage-seat.is-speaker {
	border-color: var(--uc-success);
	background: var(--uc-success-surface);
}

#page-chat-room .uc-roomos-stage-seat.is-raised {
	border-color: var(--uc-gold);
	background: var(--uc-warning-surface);
}

#page-chat-room .uc-roomos-stage-seat.is-you {
	box-shadow: 0 0 0 2px var(--uc-wash-soft);
}

#page-chat-room .uc-roomos-stage-avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 16px;
	background: linear-gradient(145deg, var(--uc-warning) 0%, var(--uc-danger) 70%);
	color: var(--uc-text-on-primary);
	border: 2px solid var(--uc-border-strong);
}

#page-chat-room .uc-roomos-stage-name {
	font-size: 11px;
	font-weight: 800;
	color: var(--uc-text);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page-chat-room .uc-roomos-stage-status {
	font-size: 10px;
	font-weight: 800;
	text-transform: lowercase;
	letter-spacing: 0.02em;
	color: var(--uc-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#page-chat-room .uc-roomos-stage-empty {
	font-size: 13px;
	font-weight: 700;
	color: var(--uc-text-muted);
	padding: 6px 2px 2px;
}

/* Talk Engine — live talk-back indicators */
#page-chat-room .uc-roomos-stage-seat.is-speaker.is-live {
	border-color: var(--uc-success);
	box-shadow: 0 0 0 2px var(--uc-success-border);
}

#page-chat-room .uc-roomos-stage-seat.is-speaker.is-muted {
	border-color: var(--uc-border);
	background: linear-gradient(180deg, var(--uc-surface-raised) 0%, var(--uc-surface-sunken) 100%);
}

#page-chat-room .uc-roomos-stage-live-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--uc-success);
	box-shadow: 0 0 6px var(--uc-success);
	animation: uc-talk-pulse 1.4s ease-in-out infinite;
}

@keyframes uc-talk-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

#page-chat-room .uc-roomos-stage-stub.is-off {
	color: var(--uc-text-secondary);
	background: var(--uc-surface-muted);
	border-color: var(--uc-border);
}

#page-chat-room .uc-roomos-stage-btn.is-speaking {
	background: var(--uc-success);
	color: var(--uc-text-on-primary);
	border-color: var(--uc-success-border);
}

#page-chat-room .uc-roomos-stage-btn.is-muted {
	background: var(--uc-surface-muted);
	color: var(--uc-text-secondary);
	border-color: var(--uc-border);
}

#page-chat-room .uc-roomos-stage-card-shell {
	border-radius: 14px;
	padding: 12px;
	border: 1px solid var(--uc-surface-sunken);
	background: var(--uc-surface);
}

#page-chat-room .uc-roomos-stage-card-shell[data-uc-talk-live="1"] {
	border-color: var(--uc-success);
	box-shadow: 0 0 0 2px var(--uc-success-border);
}

#page-chat-room .uc-roomos-stage-card-shell[data-uc-talk-live="0"] {
	border-color: var(--uc-border);
	background: var(--uc-surface-raised);
}

#page-chat-room .uc-roomos-stage-card-shell {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Title/note layout metrics — chrome colors owned by signature DNA head rules. */
#page-chat-room .uc-roomos-card-title {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.2;
}

#page-chat-room .uc-roomos-card-note {
	font-size: 10px;
	font-weight: 700;
}

#page-chat-room .uc-roomos-strip {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

#page-chat-room .uc-roomos-strip-title {
	display: none;
}

#page-chat-room .uc-roomos-strip-detail {
	font-size: 12px;
	color: var(--uc-room-muted);
}

/* Stoop board cards (room.here-for.v1) */
#page-chat-room .uc-roomos-stoop-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	#page-chat-room .uc-roomos-stoop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

#page-chat-room .uc-roomos-stoop-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid var(--uc-room-line);
	border-left: 4px solid var(--uc-room-gold-deep);
	border-radius: 12px;
	background: var(--uc-surface);
	padding: 11px 12px;
}

#page-chat-room .uc-roomos-stoop-card[data-stoop-tone="collab"] { border-left-color: var(--uc-primary); }
#page-chat-room .uc-roomos-stoop-card[data-stoop-tone="linkup"] { border-left-color: #1d4ed8; }
#page-chat-room .uc-roomos-stoop-card[data-stoop-tone="advice"] { border-left-color: #b45309; }
#page-chat-room .uc-roomos-stoop-card[data-stoop-tone="topic"] { border-left-color: #047857; }

#page-chat-room .uc-roomos-stoop-cat {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-stoop-text {
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--uc-text);
}

#page-chat-room .uc-roomos-stoop-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--uc-surface-muted);
	font-size: 10px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-stoop-empty {
	border: 1px dashed var(--uc-room-line);
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	font-size: 12px;
	color: var(--uc-room-muted);
}

/* Here-for intent rail */
#page-chat-room .uc-roomos-intent-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--uc-room-line);
}

#page-chat-room .uc-roomos-intent-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 1.5px solid var(--uc-room-line);
	border-radius: 999px;
	background: var(--uc-surface);
	color: var(--uc-text);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}

#page-chat-room .uc-roomos-intent-chip:hover {
	transform: translateY(-1px);
	border-color: var(--uc-border);
}

#page-chat-room .uc-roomos-intent-chip.is-active {
	background: var(--uc-surface-soft);
	border-color: var(--uc-warning);
	box-shadow: 2px 2px 0 var(--uc-border-strong);
}

#page-chat-room .uc-roomos-intent-chip.is-clear {
	color: var(--uc-text-muted);
	border-style: dashed;
	background: transparent;
}

/* Quick Play / Tonight's apps strip — shell-games structure, UC DNA */
#page-chat-room .uc-roomos-play-shell {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#page-chat-room .uc-roomos-play-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 4px 10px;
	border: 1.5px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-surface-soft);
	color: var(--uc-primary);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#page-chat-room .uc-roomos-play-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
	animation: uc-play-pulse 1.4s ease-in-out infinite;
}

@keyframes uc-play-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

#page-chat-room .uc-roomos-play-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Full games catalog now renders here (was a fixed 3-tile subset), so the
	   grid scrolls after ~3 rows instead of pushing the rest of the room's
	   main-slot cards (thread, roster, composer) far down the page. */
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 2px;
}

@media (max-width: 640px) {
	#page-chat-room .uc-roomos-play-grid {
		grid-template-columns: 1fr;
		max-height: 280px;
	}
}

#page-chat-room .uc-roomos-play-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 96px;
	padding: 14px 12px 12px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 14px;
	background: linear-gradient(165deg, var(--uc-surface) 0%, var(--uc-surface-soft) 100%);
	text-align: left;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--uc-border-strong);
	overflow: hidden;
	transition: transform 0.12s, box-shadow 0.12s;
}

#page-chat-room .uc-roomos-play-tile__accent {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 4px;
	background: var(--uc-primary);
}

#page-chat-room .uc-roomos-play-tile.is-accent-amber .uc-roomos-play-tile__accent {
	background: linear-gradient(90deg, var(--uc-warning), var(--uc-gold));
}

#page-chat-room .uc-roomos-play-tile.is-accent-gold .uc-roomos-play-tile__accent {
	background: linear-gradient(90deg, var(--uc-gold), var(--uc-gold-dim));
}

#page-chat-room .uc-roomos-play-tile.is-accent-red .uc-roomos-play-tile__accent {
	background: linear-gradient(90deg, var(--uc-primary), var(--uc-primary));
}

#page-chat-room .uc-roomos-play-tile:hover {
	transform: translateY(-2px);
	box-shadow: 4px 4px 0 var(--uc-border-strong);
}

#page-chat-room .uc-roomos-play-emoji {
	font-size: 22px;
	line-height: 1;
	margin-top: 2px;
}

#page-chat-room .uc-roomos-play-label {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: var(--uc-border-strong);
}

#page-chat-room .uc-roomos-play-blurb {
	font-size: 10px;
	font-weight: 700;
	color: var(--uc-text-muted);
	line-height: 1.35;
}

#page-chat-room .uc-roomos-play-faces {
	font-size: 10px;
	font-weight: 800;
	color: var(--uc-text-muted);
	letter-spacing: 0.02em;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round-host:not([hidden]) {
	display: block;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round {
	position: relative;
	margin-top: 4px;
	padding: 14px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 16px;
	background: #1a0f12;
	color: var(--uc-text-on-primary);
	box-shadow: 4px 4px 0 var(--uc-border-strong);
	overflow: hidden;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--uc-primary), var(--uc-gold));
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round.is-accent-amber::before {
	background: linear-gradient(90deg, var(--uc-warning), var(--uc-gold));
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round.is-accent-gold::before {
	background: linear-gradient(90deg, var(--uc-gold), var(--uc-gold-dim));
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__title {
	display: flex;
	align-items: center;
	gap: 10px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__emoji {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	border: 1.5px solid var(--uc-accent-wash-strong);
	background: rgba(250, 204, 21, 0.12);
	font-size: 20px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__name {
	margin: 0;
	font-size: 14px;
	font-weight: 900;
	color: var(--uc-text-on-primary);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__blurb {
	margin: 2px 0 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__close {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1.5px solid var(--uc-veil-strong);
	background: transparent;
	color: var(--uc-text-muted);
	font-size: 12px;
	cursor: pointer;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__timer-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--uc-veil-soft);
	overflow: hidden;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__bar-fill {
	display: block;
	height: 100%;
	background: var(--uc-gold);
	transition: width 1s linear;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__secs {
	min-width: 2.25rem;
	text-align: right;
	font-size: 12px;
	font-weight: 900;
	color: var(--uc-gold);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__question {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--uc-text-on-primary);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__options {
	display: grid;
	gap: 8px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 12px;
	border: 1.5px solid var(--uc-veil-soft);
	border-radius: 12px;
	background: var(--uc-veil-weak);
	color: var(--uc-text-on-primary);
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__option:hover:not(:disabled) {
	border-color: var(--uc-gold);
	background: rgba(250, 204, 21, 0.08);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__option.is-picked {
	border-color: var(--uc-gold);
	box-shadow: inset 0 0 0 1px var(--uc-gold);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__option:disabled {
	opacity: 0.7;
	cursor: default;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__option-mark {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	border: 1px solid var(--uc-veil-strong);
	font-size: 9px;
	color: var(--uc-gold);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result {
	margin-top: 12px;
	padding: 16px;
	border: 1.5px solid var(--uc-accent-wash-strong);
	border-radius: 14px;
	background: var(--uc-scrim);
	text-align: center;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-emoji {
	margin: 0;
	font-size: 28px;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-taunt {
	margin: 8px 0 4px;
	font-size: 14px;
	font-weight: 900;
	color: var(--uc-gold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-score {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-eyebrow {
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-note {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--uc-text-muted);
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__result-pick {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-muted);
	font-style: italic;
}

/* Full-screen room play (RoomStamp-style takeover) */
.uc-room-play-overlay {
	position: fixed;
	inset: 0;
	z-index: 14000;
	display: flex;
	flex-direction: column;
	background: rgba(10, 6, 8, 0.92);
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.uc-room-play-overlay.hidden {
	display: none !important;
}

body.uc-room-play-open {
	overflow: hidden;
}

.uc-room-play-overlay__panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	background: linear-gradient(180deg, #1a0f12 0%, var(--uc-chrome) 55%, var(--uc-chrome) 100%);
	border: 0;
}

.uc-room-play-overlay__chrome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 2px solid var(--uc-gold);
	background: linear-gradient(90deg, var(--uc-primary-darker) 0%, var(--uc-primary) 50%, var(--uc-primary-darker) 100%);
}

.uc-room-play-overlay__brand {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.uc-room-play-overlay__eyebrow {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

.uc-room-play-overlay__room {
	font-size: 11px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.75);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uc-room-play-overlay__leave {
	flex-shrink: 0;
	padding: 8px 14px;
	border: 2px solid var(--uc-border-strong);
	border-radius: 999px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--uc-border-strong);
}

.uc-room-play-overlay__stage {
	flex: 1;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 16px 28px;
	display: flex;
	flex-direction: column;
}

.uc-room-play-overlay__stage .uc-roomos-play-round,
.uc-room-play-overlay__stage .uc-roomos-play-session {
	max-width: 560px;
	width: 100%;
	margin: 0 auto;
	border: 2px solid var(--uc-border-strong);
	border-radius: 18px;
	background: rgba(26, 15, 18, 0.95);
	box-shadow: 5px 5px 0 var(--uc-border-strong);
	padding: 18px 16px 20px;
	position: relative;
	overflow: hidden;
}

/* Gameplay: edge-to-edge shell so arcade iframes fill the viewport */
.uc-room-play-overlay.is-gameplay {
	padding: 0;
	background: var(--uc-chrome);
	align-items: stretch;
	justify-content: stretch;
}

.uc-room-play-overlay.is-gameplay .uc-room-play-overlay__panel {
	width: 100%;
	max-width: none;
	max-height: none;
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

.uc-room-play-overlay.is-gameplay .uc-room-play-overlay__chrome {
	flex-shrink: 0;
}

.uc-room-play-overlay.is-gameplay .uc-room-play-overlay__stage {
	flex: 1;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.uc-room-play-overlay.is-gameplay .uc-roomos-play-session,
.uc-room-play-overlay.is-gameplay .uc-roomos-play-session.is-arcade {
	max-width: none;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	background: var(--uc-chrome);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.uc-room-play-overlay.is-gameplay .uc-roomos-play-session::before {
	display: none;
}

.uc-room-play-overlay .uc-roomos-play-arcade-mount {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.uc-room-play-overlay .uc-roomos-play-arcade-mount > * {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	width: 100%;
}

.uc-room-play-turn-rail {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: linear-gradient(180deg, var(--uc-chrome) 0%, var(--uc-chrome) 100%);
	border-bottom: 1px solid var(--uc-accent-wash-strong);
}

.uc-room-play-turn-rail__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

.uc-room-play-turn-rail.is-my-turn .uc-room-play-turn-rail__status {
	color: #4ade80;
}

.uc-room-play-turn-rail__pulse {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	animation: uc-play-turn-pulse 1.4s ease-out infinite;
}

@keyframes uc-play-turn-pulse {
	0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
	100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

.uc-room-play-turn-rail__seats {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.uc-room-play-turn-seat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 10px 6px 6px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: rgba(15, 23, 42, 0.9);
	color: var(--uc-text-muted);
	font-size: 11px;
	font-weight: 800;
}

.uc-room-play-turn-seat.is-me {
	border-color: rgba(74, 222, 128, 0.45);
}

.uc-room-play-turn-seat.is-turn {
	border-color: var(--uc-gold);
	box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35);
	background: rgba(250, 204, 21, 0.12);
}

.uc-room-play-turn-seat__av {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--uc-primary-darker);
	color: var(--uc-text-on-primary);
	font-size: 10px;
	font-weight: 900;
	overflow: hidden;
	flex-shrink: 0;
}

.uc-room-play-turn-seat__av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.uc-room-play-turn-seat__badge {
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uc-gold);
	font-weight: 900;
}

.uc-room-play-turn-seat__pts {
	margin-left: 2px;
	color: var(--uc-text-muted);
	font-variant-numeric: tabular-nums;
}

.uc-room-play-overlay.is-gameplay .uc-roomos-play-session.is-arcade {
	display: flex;
	flex-direction: column;
}

.uc-room-play-overlay__stage .uc-roomos-play-round::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--uc-primary), var(--uc-gold));
}

.uc-room-play-overlay__stage .uc-roomos-play-lobby__choices {
	display: grid;
	gap: 12px;
	margin-top: 8px;
}

.uc-room-play-overlay__stage .uc-roomos-play-lobby__choice {
	min-height: 88px;
}

.uc-room-play-overlay__stage .uc-roomos-play-round__question {
	font-size: 17px;
}

.uc-room-play-overlay__stage .uc-roomos-play-round__option {
	padding: 14px;
	font-size: 14px;
}

@media (min-width: 768px) {
	.uc-room-play-overlay:not(.is-gameplay) {
		padding: 24px;
		background: rgba(0, 0, 0, 0.72);
		align-items: center;
		justify-content: center;
	}

	.uc-room-play-overlay:not(.is-gameplay) .uc-room-play-overlay__panel {
		width: min(720px, 100%);
		max-height: min(92vh, 900px);
		border: 3px solid var(--uc-border-strong);
		border-radius: 20px;
		box-shadow: 8px 8px 0 var(--uc-border-strong);
		overflow: hidden;
	}
}

#page-chat-room .uc-roomos-play-round, .uc-room-play-overlay .uc-roomos-play-round__again {
	padding: 8px 14px;
	border: 2px solid var(--uc-gold);
	border-radius: 999px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.uc-room-play-overlay .uc-roomos-play-lobby__choices, .uc-game-shell__stage .uc-roomos-play-lobby__choices, #page-chat-room .uc-roomos-play-lobby__choices {
	display: grid;
	gap: 10px;
}

.uc-room-play-overlay .uc-roomos-play-lobby__choice, .uc-game-shell__stage .uc-roomos-play-lobby__choice, #page-chat-room .uc-roomos-play-lobby__choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 14px;
	border: 1.5px solid var(--uc-veil-soft);
	border-radius: 14px;
	background: var(--uc-veil-weak);
	color: var(--uc-text-on-primary);
	text-align: left;
	cursor: pointer;
}

.uc-room-play-overlay .uc-roomos-play-lobby__choice, .uc-game-shell__stage .uc-roomos-play-lobby__choice, #page-chat-room .uc-roomos-play-lobby__choice:hover {
	border-color: var(--uc-gold);
	background: rgba(250, 204, 21, 0.08);
}

.uc-room-play-overlay .uc-roomos-play-lobby__choice-emoji, .uc-game-shell__stage .uc-roomos-play-lobby__choice-emoji, #page-chat-room .uc-roomos-play-lobby__choice-emoji {
	font-size: 22px;
}

.uc-room-play-overlay .uc-roomos-play-lobby__choice-title, .uc-game-shell__stage .uc-roomos-play-lobby__choice-title, #page-chat-room .uc-roomos-play-lobby__choice-title {
	font-size: 14px;
	font-weight: 900;
}

.uc-room-play-overlay .uc-roomos-play-lobby__choice-sub, .uc-game-shell__stage .uc-roomos-play-lobby__choice-sub, #page-chat-room .uc-roomos-play-lobby__choice-sub {
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

.uc-room-play-overlay .uc-roomos-play-lobby__faces, .uc-game-shell__stage .uc-roomos-play-lobby__faces, #page-chat-room .uc-roomos-play-lobby__faces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.uc-room-play-overlay .uc-roomos-play-lobby__face, .uc-game-shell__stage .uc-roomos-play-lobby__face, #page-chat-room .uc-roomos-play-lobby__face {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1.5px solid var(--uc-veil-soft);
	border-radius: 999px;
	background: var(--uc-veil-weak);
	color: var(--uc-text-on-primary);
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
}

.uc-room-play-overlay .uc-roomos-play-lobby__face, .uc-game-shell__stage .uc-roomos-play-lobby__face, #page-chat-room .uc-roomos-play-lobby__face.is-selected {
	border-color: var(--uc-gold);
	background: var(--uc-accent-wash);
	color: var(--uc-gold);
}

.uc-room-play-overlay .uc-roomos-play-lobby__face-av,
#page-chat-room .uc-roomos-play-lobby__face-av {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--uc-primary-darker);
	font-size: 10px;
	font-weight: 900;
	overflow: hidden;
	flex-shrink: 0;
	color: var(--uc-text-on-primary);
}

.uc-room-play-overlay .uc-roomos-play-lobby__face-av img,
#page-chat-room .uc-roomos-play-lobby__face-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-face,
#page-chat-room .uc-roomos-play-lobby__roster-face {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.uc-room-play-overlay .uc-roomos-play-lobby__hint, .uc-game-shell__stage .uc-roomos-play-lobby__hint, #page-chat-room .uc-roomos-play-lobby__hint,
.uc-room-play-overlay .uc-roomos-play-lobby__empty, .uc-game-shell__stage .uc-roomos-play-lobby__empty, #page-chat-room .uc-roomos-play-lobby__empty {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-muted);
	line-height: 1.4;
}

.uc-room-play-overlay .uc-roomos-play-lobby__actions, .uc-game-shell__stage .uc-roomos-play-lobby__actions, #page-chat-room .uc-roomos-play-lobby__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.uc-room-play-overlay .uc-roomos-play-lobby__btn, .uc-game-shell__stage .uc-roomos-play-lobby__btn, #page-chat-room .uc-roomos-play-lobby__btn {
	padding: 8px 14px;
	border-radius: 999px;
	border: 2px solid var(--uc-gold);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.uc-room-play-overlay .uc-roomos-play-lobby__btn, .uc-game-shell__stage .uc-roomos-play-lobby__btn, #page-chat-room .uc-roomos-play-lobby__btn.is-ghost {
	background: transparent;
	color: var(--uc-gold);
}

.uc-room-play-overlay .uc-roomos-play-lobby__btn, .uc-game-shell__stage .uc-roomos-play-lobby__btn, #page-chat-room .uc-roomos-play-lobby__btn.is-primary {
	background: var(--uc-gold);
	color: var(--uc-text-on-gold);
}

.uc-room-play-overlay .uc-roomos-play-lobby__btn, .uc-game-shell__stage .uc-roomos-play-lobby__btn, #page-chat-room .uc-roomos-play-lobby__btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.uc-room-play-overlay .uc-roomos-play-lobby__wait-timer,
#page-chat-room .uc-roomos-play-lobby__wait-timer {
	margin: 12px 0 8px;
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: var(--uc-gold);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster,
#page-chat-room .uc-roomos-play-lobby__roster {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-row,
#page-chat-room .uc-roomos-play-lobby__roster-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid var(--uc-accent-wash);
	font-size: 12px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-status,
#page-chat-room .uc-roomos-play-lobby__roster-status {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--uc-text-muted);
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-row.is-accepted .uc-roomos-play-lobby__roster-status,
#page-chat-room .uc-roomos-play-lobby__roster-row.is-accepted .uc-roomos-play-lobby__roster-status {
	color: #4ade80;
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-row.is-declined .uc-roomos-play-lobby__roster-status,
#page-chat-room .uc-roomos-play-lobby__roster-row.is-declined .uc-roomos-play-lobby__roster-status {
	color: #f87171;
}

.uc-room-play-overlay .uc-roomos-play-lobby__roster-row.is-host .uc-roomos-play-lobby__roster-status,
#page-chat-room .uc-roomos-play-lobby__roster-row.is-host .uc-roomos-play-lobby__roster-status {
	color: var(--uc-gold);
}

.uc-room-play-invite {
	position: fixed;
	inset: auto 16px 96px 16px;
	z-index: 13000;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.uc-room-play-invite.hidden {
	display: none !important;
}

.uc-room-play-invite__card {
	pointer-events: auto;
	width: min(420px, 100%);
	border: 2px solid var(--uc-border-strong);
	border-radius: 18px;
	background: linear-gradient(165deg, #1a0f12 0%, var(--uc-chrome) 100%);
	color: var(--uc-text-on-primary);
	box-shadow: 5px 5px 0 var(--uc-border-strong);
	overflow: hidden;
}

.uc-room-play-invite__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-bottom: 1px solid var(--uc-accent-wash);
	background: rgba(250, 204, 21, 0.08);
}

.uc-room-play-invite__eyebrow {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--uc-gold);
}

.uc-room-play-invite__x {
	border: 0;
	background: transparent;
	color: var(--uc-text-muted);
	cursor: pointer;
	font-size: 14px;
}

.uc-room-play-invite__body {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px;
}

.uc-room-play-invite__emoji {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	border: 1.5px solid var(--uc-accent-wash-strong);
	background: rgba(250, 204, 21, 0.12);
	font-size: 24px;
}

.uc-room-play-invite__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

.uc-room-play-invite__game {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 900;
	color: var(--uc-gold);
}

.uc-room-play-invite__room {
	margin: 2px 0 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-muted);
}

.uc-room-play-invite__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0 14px 14px;
}

.uc-room-play-invite__btn {
	padding: 10px 12px;
	border-radius: 999px;
	border: 2px solid var(--uc-border-strong);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.uc-room-play-invite__btn.is-decline {
	background: var(--uc-surface);
	color: var(--uc-border-strong);
}

.uc-room-play-invite__btn.is-accept {
	background: var(--uc-gold);
	color: var(--uc-text-on-gold);
}

/* Reply composer bar + quote bubbles */
#page-chat-room .uc-chat-reply-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
	padding: 9px 12px;
	border: 1.5px solid var(--uc-gold);
	border-left: 4px solid var(--uc-warning);
	border-radius: 10px;
	background: var(--uc-warning-surface);
}

#page-chat-room .uc-chat-reply-bar[hidden] {
	display: none !important;
}

#page-chat-room .uc-chat-reply-bar-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#page-chat-room .uc-chat-reply-bar-kicker {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #b45309;
}

#page-chat-room .uc-chat-reply-bar-label {
	font-size: 12px;
	font-weight: 800;
	color: var(--uc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page-chat-room .uc-chat-reply-bar-cancel {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--uc-surface-sunken);
	border-radius: 8px;
	background: var(--uc-surface);
	color: var(--uc-text-muted);
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

#page-chat-room .uc-chat-reply-bar-cancel:hover {
	border-color: var(--uc-border-strong);
	color: var(--uc-text);
}

#page-chat-room .uc-chat-msg-quote {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 8px;
	padding: 7px 10px;
	border-left: 3px solid var(--uc-room-gold-deep, var(--uc-warning));
	border-radius: 0 8px 8px 0;
	background: var(--uc-wash-weak);
}

#page-chat-room .uc-chat-msg-quote-who {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b45309;
}

#page-chat-room .uc-chat-msg-quote-text {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--uc-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page-chat-room .uc-chat-msg-reply {
	display: inline-flex;
	align-items: center;
	margin-left: 2px;
	padding: 2px 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--uc-text-muted);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.12s, color 0.12s, background 0.12s;
}

#page-chat-room .uc-chat-msg:hover .uc-chat-msg-reply,
#page-chat-room .uc-chat-msg-reply:focus {
	opacity: 1;
}

#page-chat-room .uc-chat-msg-reply:hover {
	color: var(--uc-text);
	background: var(--uc-surface-muted);
}

#page-chat-room .uc-chat-reaction-count {
	min-width: 1.1em;
	font-size: 11px;
	font-weight: 900;
	color: var(--uc-text);
	font-variant-numeric: tabular-nums;
}

#page-chat-room .uc-chat-reaction-chip.is-hot {
	background: var(--uc-surface-soft);
	border-color: #fb923c;
	box-shadow: 2px 2px 0 #c2410c;
}

#page-chat-room .uc-chat-msg-reactions.is-vibe-pulse {
	animation: uc-room-vibe-pulse 1.1s ease-in-out infinite;
}

@keyframes uc-room-vibe-pulse {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); }
	50% { filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.55)); }
}

/* Steward + guest slot rail cards */
#page-chat-room .uc-roomos-steward-title {
	font-size: 11px !important;
	letter-spacing: 0.16em;
	color: var(--uc-room-red-ink);
}

#page-chat-room .uc-roomos-steward-subtitle {
	font-size: 11px !important;
	color: var(--uc-room-muted) !important;
	margin: 4px 0 10px !important;
}

#page-chat-room .uc-roomos-steward-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#page-chat-room .uc-roomos-steward-btn {
	border: 1px solid var(--uc-room-line) !important;
	border-radius: 999px !important;
	background: var(--uc-surface-raised) !important;
	color: var(--uc-text-secondary) !important;
	padding: 6px 13px !important;
	font-size: 10px !important;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: none;
	box-shadow: none !important;
}

#page-chat-room .uc-roomos-steward-btn:hover {
	border-color: var(--uc-border) !important;
	background: var(--uc-surface-muted) !important;
}

#page-chat-room .uc-roomos-steward-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 1px solid var(--uc-room-line);
	border-radius: 12px;
	background: var(--uc-surface);
	padding: 8px 11px;
	font-size: 11px;
	font-weight: 700;
	color: var(--uc-text-secondary);
}

#page-chat-room .uc-roomos-guests {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--uc-room-line);
}

#page-chat-room .uc-roomos-onair-stage {
	display: grid;
	gap: 4px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

#page-chat-room .uc-chat-room-footer {
	display: none !important;
}

@media (max-width: 1023px) {
	#page-chat-room .uc-chat-room-content {
		padding: 14px;
		gap: 14px;
		min-width: 0;
	}

	/* Live: content padding is killed above — keep hang lounge inset if needed */
	#page-chat-room .uc-chat-room-shell:not(.is-live-studio) .uc-chat-room-content {
		padding: 14px;
	}

	#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-content {
		padding: 0 !important;
		gap: 12px;
	}

	#page-chat-room .uc-chat-feed-shell,
	#page-chat-room .uc-chat-members-shell,
	#page-chat-room .uc-roomos-stage-host,
	#page-chat-room .uc-live-studio-stage {
		min-width: 0;
		max-width: 100%;
	}

	/* Compact cover hero on phone — cover band was min-height ~248px of first viewport */
	#page-chat-room .uc-chat-room-hero.has-cover {
		min-height: 0;
	}

	#page-chat-room .uc-chat-room-topbar {
		padding: 10px 12px 12px !important;
		gap: 8px;
		justify-content: flex-start;
	}

	/* Stack tools above the title so long room names get full width (was ~64px
	   beside Share + Exit, wrapping BLACKAFONGOD letter-by-letter). */
	#page-chat-room .uc-chat-room-topbar-primary {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	#page-chat-room .uc-chat-room-topbar-actions {
		order: -1;
		width: 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 6px;
	}

	#page-chat-room .uc-chat-room-topbar-left {
		width: 100%;
		align-items: flex-start;
	}

	#page-chat-room .uc-chat-room-topbar-copy {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}

	#page-chat-room .uc-chat-room-label {
		font-size: 18px !important;
		line-height: 1.18 !important;
		letter-spacing: -0.03em !important;
		/* Prefer whole-word wraps over mid-token shredding on narrow screens. */
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
	}

	#page-chat-room .uc-chat-room-shell.is-live-studio .uc-chat-room-label {
		font-size: 17px !important;
	}

	#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-share-btn,
	#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-exit-btn {
		padding: 5px 10px !important;
		letter-spacing: 0.06em !important;
	}

	#page-chat-room .uc-chat-room-topic {
		max-width: none;
		font-size: 12px;
	}

	/* Taller on-phone stage for single-host tile; still caps height for chat room. */
	#page-chat-room .uc-live-studio-player,
	#page-chat-room .uc-roomos-onair-player {
		aspect-ratio: 4 / 5;
		min-height: 240px;
		max-height: min(48vh, 400px);
	}

	#page-chat-room .uc-live-studio-controls {
		flex-wrap: wrap;
		row-gap: 8px;
		padding: 8px 10px;
	}

	#page-chat-room .uc-live-studio-controls__seats {
		order: 3;
		flex: 1 1 100%;
		justify-content: center;
	}

	#page-chat-room .uc-live-studio-controls__meta {
		font-size: 9px;
		letter-spacing: 0.04em;
	}

	#page-chat-room .uc-live-studio-seat-box {
		width: 64px;
	}

	#page-chat-room .uc-chat-feed-stream {
		max-height: 380px !important;
	}
}

@media (max-width: 420px) {
	#page-chat-room .uc-chat-room-label {
		font-size: 16px !important;
	}

	#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-exit-btn .uc-chat-room-exit-full {
		display: none;
	}

	#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-exit-btn .uc-chat-room-exit-short {
		display: inline;
	}

	#page-chat-room .uc-live-studio-controls__meta {
		display: none;
	}
}

#page-chat-room .uc-chat-room-topbar-pill.uc-chat-room-exit-btn .uc-chat-room-exit-short {
	display: none;
}

/* ── Host people overlay (RoomStamp-inspired picker) ─────────────────────── */
/* Mounted on body so it is not clipped by room scroll containers. */
.uc-people-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.uc-people-overlay.is-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}
.uc-people-overlay[hidden] {
	display: none !important;
}
.uc-people-overlay__backdrop {
	appearance: none;
	position: absolute;
	inset: 0;
	border: 0;
	margin: 0;
	padding: 0;
	background: rgba(15, 23, 42, 0.48);
	cursor: pointer;
}
.uc-people-overlay__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(100%, 440px);
	max-height: min(88vh, 640px);
	margin: 0;
	background: var(--uc-surface, #f8fafc);
	border: 2px solid var(--uc-border-strong, #0f172a);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.28);
	transform: translateY(18px);
	transition: transform 0.22s ease;
	overflow: hidden;
}
.uc-people-overlay.is-open .uc-people-overlay__panel {
	transform: translateY(0);
}
@media (min-width: 640px) {
	.uc-people-overlay {
		align-items: center;
		padding: 24px;
	}
	.uc-people-overlay__panel {
		border-radius: 18px;
		max-height: min(80vh, 620px);
	}
}
.uc-people-overlay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(180deg, var(--uc-primary, #b91c1c) 0%, color-mix(in srgb, var(--uc-primary-darker, #7f1d1d) 92%, #000 8%) 100%);
	color: var(--uc-text-on-primary, #fff);
	border-bottom: 2px solid var(--uc-border-strong, #0f172a);
	flex: 0 0 auto;
}
.uc-people-overlay__kicker {
	margin: 0;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}
.uc-people-overlay__title {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.02em;
}
.uc-people-overlay__close {
	appearance: none;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font-size: 15px;
	cursor: pointer;
}
.uc-people-overlay__body {
	padding: 14px 16px 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	background: var(--uc-surface, #f8fafc);
}
.uc-people-overlay__hint {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--uc-text-muted, #64748b);
	line-height: 1.4;
}
.uc-people-overlay__empty {
	border: 1px dashed var(--uc-border, #cbd5e1);
	border-radius: 14px;
	padding: 20px 16px;
	text-align: center;
	background: var(--uc-surface-raised, #fff);
}
.uc-people-overlay__empty strong {
	display: block;
	font-size: 14px;
	font-weight: 900;
	color: var(--uc-text, #0f172a);
	margin-bottom: 6px;
}
.uc-people-overlay__empty p {
	margin: 0;
	font-size: 12px;
	color: var(--uc-text-muted, #64748b);
	line-height: 1.45;
}
.uc-people-overlay__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.uc-people-overlay__row {
	appearance: none;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--uc-border, #cbd5e1);
	border-radius: 14px;
	background: var(--uc-surface-raised, #fff);
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.uc-people-overlay__row:active {
	transform: scale(0.99);
}
.uc-people-overlay__row:hover {
	border-color: var(--uc-primary, #b91c1c);
}
.uc-people-overlay__avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 2px solid var(--uc-border-strong, #0f172a);
	background: var(--uc-chrome, #0f172a);
	color: var(--uc-text-on-primary, #fff);
	display: grid;
	place-items: center;
	overflow: hidden;
	font-size: 15px;
	font-weight: 900;
	flex: 0 0 auto;
	position: relative;
}
.uc-people-overlay__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.uc-people-overlay__pullup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	appearance: none;
	border: 0;
	margin: 0;
	padding: 5px 0 6px;
	background: var(--uc-gold);
	color: var(--uc-text-on-gold, #1a0a0a);
	font-size: 7px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
.uc-people-overlay__avatar--lg .uc-people-overlay__pullup {
	font-size: 8px;
	padding: 6px 0 7px;
}
.uc-people-overlay__avatar--lg {
	width: 64px;
	height: 64px;
	font-size: 22px;
}
.uc-people-overlay__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.uc-people-overlay__name {
	font-size: 14px;
	font-weight: 800;
	color: var(--uc-text, #0f172a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uc-people-overlay__status {
	font-size: 11px;
	font-weight: 600;
	color: var(--uc-text-muted, #64748b);
}
.uc-people-overlay__chev {
	font-size: 20px;
	font-weight: 300;
	color: var(--uc-text-muted, #64748b);
}
.uc-people-overlay__back {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--uc-primary-ink, var(--uc-primary, #b91c1c));
	font-size: 12px;
	font-weight: 800;
	padding: 0 0 12px;
	cursor: pointer;
	text-align: left;
}
.uc-people-overlay__person-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"avatar copy"
		"chips chips";
	gap: 8px 14px;
	padding: 14px;
	border: 1px solid var(--uc-border, #cbd5e1);
	border-radius: 16px;
	background: var(--uc-surface-raised, #fff);
	margin-bottom: 14px;
}
.uc-people-overlay__person-card .uc-people-overlay__avatar {
	grid-area: avatar;
}
.uc-people-overlay__person-copy {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}
.uc-people-overlay__person-copy strong {
	font-size: 16px;
	font-weight: 900;
	color: var(--uc-text, #0f172a);
}
.uc-people-overlay__person-copy span {
	font-size: 12px;
	color: var(--uc-text-muted, #64748b);
	font-weight: 600;
}
.uc-people-overlay__chips {
	grid-area: chips;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.uc-people-overlay__chip {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--uc-surface-muted, #e2e8f0);
	color: var(--uc-text-secondary, #334155);
}
.uc-people-overlay__chip.is-live {
	background: color-mix(in srgb, var(--uc-success, #16a34a) 18%, #fff);
	color: var(--uc-success, #16a34a);
}
.uc-people-overlay__chip.is-wait {
	background: color-mix(in srgb, var(--uc-warning, #d97706) 18%, #fff);
	color: var(--uc-warning, #b45309);
}
.uc-people-overlay__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.uc-people-overlay__action {
	appearance: none;
	width: 100%;
	border: 1px solid var(--uc-border-strong, #0f172a);
	border-radius: 12px;
	background: var(--uc-surface-raised, #fff);
	color: var(--uc-text, #0f172a);
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-align: center;
}
.uc-people-overlay__action.is-primary {
	background: var(--uc-primary, #b91c1c);
	border-color: var(--uc-primary-darker, #7f1d1d);
	color: var(--uc-text-on-primary, #fff);
}
.uc-people-overlay__action.is-danger {
	border-color: color-mix(in srgb, var(--uc-primary, #b91c1c) 55%, #0f172a);
	color: var(--uc-primary, #b91c1c);
}
.uc-people-overlay__action.is-danger.is-primary {
	background: var(--uc-primary, #b91c1c);
	color: var(--uc-text-on-primary, #fff);
}
.uc-people-overlay__action.is-ghost {
	background: transparent;
	border-style: dashed;
	color: var(--uc-text-secondary, #334155);
}
.uc-people-overlay__action:disabled {
	opacity: 0.65;
	cursor: wait;
}
.uc-people-overlay__action:active:not(:disabled) {
	transform: scale(0.99);
}

/* Host pull menu on member rows — steward actions */
#page-chat-room .uc-chat-member-pull-menu {
	min-width: 176px;
	padding: 4px 0;
	border: 2px solid var(--uc-border-strong, #0f172a);
	border-radius: 12px;
	background: var(--uc-surface, #f8fafc);
	box-shadow: 4px 4px 0 #000;
	z-index: 20;
}
#page-chat-room .uc-chat-member-pull-menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--uc-border, #cbd5e1) 70%, transparent);
	background: transparent;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--uc-text-secondary, #334155);
}
#page-chat-room .uc-chat-member-pull-menu button:last-child {
	border-bottom: 0;
}
#page-chat-room .uc-chat-member-pull-menu button:hover {
	background: var(--uc-surface-muted, #e2e8f0);
}
#page-chat-room .uc-chat-member-pull-menu button.is-danger {
	color: var(--uc-primary, #b91c1c);
}
#page-chat-room .uc-chat-member-pull-menu button.is-host {
	color: var(--uc-primary-ink, var(--uc-primary, #b91c1c));
}

/* #566 — Live match banner. Discovery for spectating: sits above the thread
   while a match is running in this room, so people who arrive after the invite
   scrolled past can still find it. Removed when the session ends. */
.uc-room-live-match {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Fill the column regardless of what .uc-room-card sizes itself to. */
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 2px solid rgba(212, 160, 23, 0.55);
  background: linear-gradient(90deg, rgba(181, 22, 17, 0.18), rgba(26, 10, 8, 0.55));
}

.uc-room-live-match__badge {
  background: #b51611;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
  flex: 0 0 auto;
  /* Steady, not blinking — a pulsing badge beside live chat is a distraction. */
}

.uc-room-live-match__label {
  font-weight: 700;
  color: #f3e8d0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-room-live-match__game {
  color: rgba(243, 232, 208, 0.62);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-room-live-match__watch {
  flex: 0 0 auto;
  background: #d4a017;
  color: #1a0a08;
  font-weight: 800;
  border: 0;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  transition: transform 120ms ease;
}

.uc-room-live-match__watch:hover { transform: translateY(-1px); }
.uc-room-live-match__watch:active { transform: none; }
.uc-room-live-match__watch:focus-visible { outline: 2px solid #f3e8d0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .uc-room-live-match__watch { transition: none; }
}

@media (max-width: 520px) {
  .uc-room-live-match__game { display: none; }
}