* { box-sizing: border-box; }
:root {
	--bg: #0b0d10;
	--bg-soft: #13161b;
	--text: #e6ebf0;
	--muted: #9aa6b2;
	--primary: #5b9cff;
	--accent: #8b5bff;
	--danger: #ff5b7f;
	--ok: #4be1a0;
}
html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
#app { height: 100%; display: flex; flex-direction: column; }

/* Header minimal */
.app-header.minimal { display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 14px 10px 14px; background: transparent; }
.app-header.minimal .brand { font-weight: 600; opacity: 0.8; }
.app-header.minimal .icon { background: transparent; border: 1px solid #2a313b; color: var(--text); padding: 6px 8px; border-radius: 8px; cursor: pointer; }

/* Stage fullscreen */
.stage.full { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(1000px 600px at 50% 50%, #0e1220 0%, #0a0c0f 60%, #080a0d 100%); overflow: hidden; }
#three-container { position: absolute; inset: 0; }

/* Mic button at bottom-right */
.mic-btn { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 2; width: 64px; height: 64px; border-radius: 999px; border: 1px solid #2a313b; background: #121722aa; color: var(--text); font-size: 28px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 30px rgba(0,0,0,0.4); }
.mic-btn.on { border-color: #244b3a; background: #132019cc; color: var(--ok); }

/* Debug info */
.debug-info { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 2; padding: 8px 12px; border-radius: 8px; background: #0f1318cc; border: 1px solid #2a313b; color: var(--muted); font-size: 12px; backdrop-filter: blur(6px); }
.debug-info div { margin: 2px 0; }
.test-btn { margin-top: 8px; padding: 4px 8px; border-radius: 4px; border: 1px solid #2a313b; background: #1a1f2e; color: var(--text); font-size: 11px; cursor: pointer; }
.test-btn:hover { background: #252b34; }

/* Overlays */
.overlay { position: absolute; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; pointer-events: none; z-index: 2; }
.overlay.top { top: 16px; }
.overlay.bottom { bottom: 20px; flex-direction: column; align-items: center; }
.chip { padding: 6px 10px; border-radius: 999px; background: #252b34aa; border: 1px solid #2a313b; color: var(--muted); font-size: 12px; }
.chip.on { color: var(--ok); background: #1b2430aa; border-color: #244b3a; }

.bubble { max-width: min(90vw, 800px); padding: 10px 12px; border-radius: 14px; border: 1px solid #2a313b; background: #0f1318cc; backdrop-filter: blur(6px); }
.bubble + .bubble { margin-top: 10px; }
.bubble.user { color: var(--text); opacity: 0.9; }
.bubble.ai { color: var(--text); border-color: #3b73d9; }

/* Speaking capsule and subtitles */
.speaking-capsule { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; z-index: 2; pointer-events: none; }
.speaking-capsule .capsule-inner { max-width: min(92vw, 720px); padding: 10px 14px; border-radius: 999px; background: #0f1318cc; border: 1px solid #2a313b; color: var(--text); backdrop-filter: blur(6px); box-shadow: 0 10px 40px rgba(0,0,0,0.25); font-size: clamp(12px, 1.8vw, 16px); }
.center-subtitles { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 24px; font-size: clamp(14px, 2.6vw, 20px); color: #e7ecf4; text-shadow: 0 2px 10px rgba(0,0,0,0.35); pointer-events: none; z-index: 1; }

/* Speech transcription */
.speech-transcription {
	position: absolute;
	bottom: 120px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(15, 19, 24, 0.9);
	border: 1px solid #2a313b;
	border-radius: 12px;
	padding: 12px 16px;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	z-index: 2;
	max-width: min(90vw, 600px);
}

.transcription-text {
	color: var(--text);
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 400;
	line-height: 1.4;
}

.typing-cursor {
	color: var(--primary);
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 300;
	animation: blink 1s infinite;
}

.typing-cursor.blink {
	animation: blink 0.8s infinite;
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: grid; place-items: center; z-index: 3; padding: 12px; }
.modal { width: min(94vw, 520px); background: var(--bg-soft); color: var(--text); border: 1px solid #1d2229; border-radius: 12px; padding: 16px; }
.modal h3 { margin: 0 0 10px 0; font-size: 14px; }
.modal label { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.modal input { width: 100%; background: #0f1318; color: var(--text); border: 1px solid #2a313b; border-radius: 8px; padding: 8px; }
.modal .row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.modal .row.end { justify-content: flex-end; }
.modal button { background: #1b2330; color: var(--text); border: 1px solid #2a313b; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.modal button.primary { background: var(--primary); border-color: #3b73d9; }
.modal .help-text { font-size: 11px; color: var(--muted); margin: 4px 0 8px 0; line-height: 1.3; }

/* Voice selector */
.voice-selector { display: flex; align-items: center; gap: 8px; width: 100%; }
.voice-selector select { flex: 1; background: #0f1318; color: var(--text); border: 1px solid #2a313b; border-radius: 8px; padding: 8px; font-size: 12px; }
.voice-selector select optgroup { color: var(--primary); font-weight: 600; }
.voice-selector select option { color: var(--text); padding: 4px; }
.preview-btn { background: #1b2330; color: var(--text); border: 1px solid #2a313b; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.preview-btn:hover { background: #252b34; }
.checkbox-label { font-size: 12px; color: var(--text); margin-left: 8px; cursor: pointer; }
input[type="checkbox"] { margin: 0; }
.status-connected { color: var(--ok); font-weight: 500; }
.status-disconnected { color: var(--muted); font-weight: 500; }

/* Light theme */
.light { --bg: #f7f8fa; --bg-soft: #ffffff; --text: #0e1116; --muted: #4e5a67; --primary: #2a6df6; --accent: #6a2af6; --danger: #e12d5a; --ok: #0abf80; }

/* State Chips */
.state-chips-container {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 3;
	pointer-events: none;
	max-width: 90vw;
}

.state-chip {
	background: rgba(15, 19, 24, 0.8);
	border: 1px solid #2a313b;
	border-radius: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	pointer-events: auto;
	backdrop-filter: blur(6px);
}

.state-chip:hover {
	border-color: #3b73d9;
	background: rgba(26, 31, 42, 0.9);
	transform: scale(1.1);
}

.state-chip.active {
	border-color: var(--primary);
	background: rgba(26, 42, 58, 0.9);
	box-shadow: 0 0 0 1px var(--primary);
}

.chip-icon {
	font-size: 16px;
	line-height: 1;
}

/* Small screens adjustments */
@media (max-width: 480px) {
	.mic-btn { width:56px; height:56px; font-size:24px; }
	.center-subtitles { padding: 0 16px; }
	.state-chips-container {
		top: 16px;
		gap: 6px;
	}
	.state-chip {
		width: 36px;
		height: 36px;
	}
	.chip-icon {
		font-size: 14px;
	}
}