/* ============================================================================
 * ai-music-input.css — AI 音乐生成区块样式
 *   复用 ai-image-input.css 的双卡布局与基础控件, 仅补音乐页根变量和音频特化.
 * ========================================================================== */

.ai-music-input-root {
	--ai-surface: rgb(24 24 27);
	--ai-surface-2: rgb(39 39 42);
	--ai-surface-3: rgb(63 63 70);
	--ai-text: rgb(244 244 245);
	--ai-text-muted: rgb(161 161 170);
	--ai-text-dim: rgb(113 113 122);
	--ai-border: rgba(255, 255, 255, 0.08);
	--ai-border-strong: rgba(255, 255, 255, 0.16);
	--ai-accent: rgb(244 244 245);
	--ai-accent-fg: rgb(24 24 27);
	--ai-block-header-h: 80px;
	color: var(--ai-text);
}

.ai-music-input-root .ai-block-grid {
	height: calc(100vh - var(--ai-block-header-h) - 32px);
	min-height: 480px;
}

.ai-music-input-root .ai-music-prompt {
	width: 100%;
	min-height: 180px;
	resize: vertical;
	box-sizing: border-box;
	padding: 14px;
	border: 1px solid var(--ai-border);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.24);
	color: var(--ai-text);
	font-size: 14px;
	line-height: 1.6;
	outline: none;
}

.ai-music-input-root .ai-music-prompt:focus {
	border-color: rgba(255, 255, 255, 0.28);
}

.ai-music-input-root .ai-music-model-row { position: relative; }
.ai-music-input-root .ai-music-model-row .ai-block-select { width: 100%; }
.ai-music-input-root .ai-music-model-row .ai-block-select-btn { width: 100%; min-width: 0; height: 40px; }
.ai-music-input-root .ai-music-model-row .ai-block-select-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
}

/* 与 ai-video-input.template.html 的 With Audio 开关保持同款视觉。 */
.ai-music-input-root .ai-video-audio-toggle {
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--ai-surface-3);
	border: none;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 160ms ease;
}
.ai-music-input-root .ai-video-audio-toggle.is-on { background: var(--ai-text); }
.ai-music-input-root .ai-video-audio-toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 160ms ease, background 160ms ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ai-music-input-root .ai-video-audio-toggle.is-on .ai-video-audio-toggle-thumb {
	transform: translateX(18px);
	background: var(--ai-surface);
}

.ai-music-input-root .ai-music-result-audio {
	width: 50%;
}

.ai-music-input-root .ai-music-preview-list {
	display: grid;
	gap: 12px;
	width: 100%;
}

@media (max-width: 768px) {
	.ai-music-input-root .ai-block-grid {
		height: auto;
		min-height: 0;
	}

	.ai-music-input-root .ai-music-result-audio {
		width: 100%;
	}
}