/* CompactCSS source: /apps/broadcaster/style.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/** The Awtsmoos gathers shell and stage into one calm vessel; Awtsmoos.com keeps advanced power behind a quiet door. */

/* CompactCSS source: /apps/broadcaster/styles/shell.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/**
 * The Awtsmoos gathers the broadcaster shell from smaller ordered vessels;
 * Awtsmoos.com keeps the same cascade while no single file becomes a wall.
 */

/* CompactCSS source: /apps/broadcaster/styles/foundation.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/**
 * The Awtsmoos gives the broadcaster its calm outer vessel; Awtsmoos.com keeps
 * the first glance spacious, mobile-first, and ready for deeper controls later.
 */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: 0;
	min-height: 100%;
}

body {
	min-height: 100dvh;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	color: #ecf8ff;
	background:
		radial-gradient(circle at 18% 12%, rgba(48, 174, 255, .12), transparent 30%),
		radial-gradient(circle at 82% 18%, rgba(135, 89, 255, .1), transparent 32%),
		linear-gradient(160deg, #06101b, #02060d 70%);
}

.broadcast-shell {
	width: min(980px, 100%);
	margin: 0 auto;
	display: grid;
	gap: 14px;
}

.broadcast-header {
	max-width: 660px;
}

.bh-mark,
.eyebrow,
h1,
.lede,
#broadcast-status {
	margin: 0;
}

.bh-mark,
.eyebrow {
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8edcff;
}

h1 {
	margin-top: 4px;
	font-size: clamp(2rem, 8vw, 4.4rem);
	line-height: .94;
	letter-spacing: -.045em;
}

.lede {
	margin-top: 8px;
	max-width: 58ch;
	color: #9bb2c6;
}



/* CompactCSS source: /apps/broadcaster/styles/controls.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/**
 * The Awtsmoos gives every direct broadcast action a measured response;
 * Awtsmoos.com keeps press, hover, focus, disabled state, and status in one compact control vessel.
 */

/* CompactCSS source: /apps/broadcaster/styles/advanced-controls.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/**
 * The Awtsmoos keeps deeper broadcast choices folded until intention opens the door;
 * Awtsmoos.com gives that door a full touch vessel with calm hover, press, focus, and motion discipline.
 */
.advanced-panel {
	width: min(460px, 100%);
	padding: 8px 14px 12px;
	border: 1px solid rgba(143, 193, 225, .14);
	border-radius: 14px;
	background: rgba(9, 21, 34, .5);
}

.advanced-panel summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	border-radius: 9px;
	cursor: pointer;
	font-weight: 800;
	transition:
		color .16s ease,
		background .16s ease,
		transform .16s ease;
}

.advanced-panel summary:active {
	transform: translateY(1px);
	color: #dff6ff;
	background: rgba(130, 220, 255, .08);
}

.advanced-panel summary:focus-visible,
.toggle-row input:focus-visible {
	outline: 3px solid #82dcff;
	outline-offset: 3px;
}

.toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: #bed0dc;
}

.toggle-row input {
	accent-color: #82dcff;
}

kbd {
	padding: 2px 6px;
	border: 1px solid #3c5264;
	border-radius: 6px;
	background: #0a1622;
}

@media (hover: hover) and (pointer: fine) {
	.advanced-panel summary:hover {
		color: #dff6ff;
		background: rgba(130, 220, 255, .055);
	}
}

@media (prefers-reduced-motion: reduce) {
	.advanced-panel summary {
		transition: none;
	}
}



.broadcast-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.action {
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid rgba(154, 220, 255, .22);
	border-radius: 14px;
	background: rgba(14, 34, 54, .74);
	color: inherit;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	transition:
		transform .16s ease,
		border-color .16s ease,
		background .16s ease,
		opacity .16s ease;
}

.action.primary {
	background: linear-gradient(135deg, #087fc5, #6257d7);
}

.action.danger {
	border-color: rgba(255, 117, 117, .34);
	background: rgba(117, 29, 42, .74);
}

.action:active:not(:disabled) {
	transform: translateY(1px) scale(.98);
	border-color: rgba(154, 220, 255, .62);
	background: rgba(10, 27, 44, .96);
}

.action:disabled {
	cursor: progress;
	opacity: .52;
	transform: none;
}

.action:focus-visible {
	outline: 3px solid #82dcff;
	outline-offset: 3px;
}

.status-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	color: #a9bdcc;
}

.state-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #607587;
}

.state-dot[data-state="running"] {
	background: #46e398;
	box-shadow: 0 0 16px rgba(70, 227, 152, .45);
}

.state-dot[data-state="error"] {
	background: #ff7474;
}

[hidden] {
	display: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.action:hover:not(:disabled) {
		transform: translateY(-1px);
		border-color: rgba(154, 220, 255, .5);
		background: rgba(22, 52, 79, .88);
	}
}

@media (max-width: 520px) {
	.broadcast-controls .action {
		flex: 1 1 calc(50% - 4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.action {
		transition: none;
	}
}





/* CompactCSS source: /apps/broadcaster/styles/stage.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/** The Awtsmoos lets sound and image move without escaping their vessel; Awtsmoos.com keeps composition free but bounded. */
.broadcast-stage {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: clamp(380px, 56vw, 560px);
	overflow: hidden;
	border: 1px solid rgba(130, 205, 255, .16);
	border-radius: 22px;
	background:
		linear-gradient(rgba(82, 174, 237, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(82, 174, 237, .035) 1px, transparent 1px),
		radial-gradient(circle at center, rgba(44, 108, 160, .12), transparent 58%),
		#030a12;
	background-size: 28px 28px, 28px 28px, auto, auto;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 22px 60px rgba(0, 0, 0, .28);
}

.stage-empty {
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(78%, 430px);
	margin: 0;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #658096;
	font-size: .9rem;
	line-height: 1.5;
	pointer-events: none;
}

.broadcast-stage.has-media .stage-empty {
	display: none;
}

.broadcast-media {
	position: absolute;
	max-width: calc(100% - 24px);
	border: 1px solid rgba(162, 221, 255, .2);
	border-radius: 15px;
	background: #02060a;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
	cursor: grab;
	touch-action: none;
	user-select: none;
	translate: var(--drag-x, 0px) var(--drag-y, 0px);
}

.broadcast-media:active {
	cursor: grabbing;
}

.broadcast-video {
	inset: 12px auto auto 12px;
	width: min(360px, calc(100% - 24px));
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.broadcast-video.is-mirrored {
	transform: scaleX(-1);
}

.broadcast-visualizer {
	inset: auto 12px 12px auto;
	width: min(400px, calc(100% - 24px));
	height: auto;
	aspect-ratio: 2 / 1;
}

@media (max-width: 520px) {
	.broadcast-stage {
		min-height: min(68dvh, 500px);
		border-radius: 18px;
	}

	.broadcast-video,
	.broadcast-visualizer {
		width: calc(100% - 24px);
	}
}