/* realtime-openai-components.css — OpenAI Realtimeページ スタイル Part 2: RVC・モデル選択 */

.controls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle-label { font-size: 12px; color: var(--text-muted); user-select: none; }
.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 22px; transition: background 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: var(--text-muted); border-radius: 50%; transition: transform 0.2s, background 0.2s; }
.toggle input:checked + .toggle-slider { background: var(--openai-dim); border: 1px solid var(--openai-border); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--openai); }
.toggle-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--openai-dim); color: var(--openai); border: 1px solid var(--openai-border); }
.rvc-status { font-size: 11px; color: var(--text-dim); text-align: center; min-height: 16px; transition: color 0.2s; }
.rvc-status.active { color: var(--openai); }
.rvc-model-wrap { display: flex; align-items: center; gap: 8px; }
.rvc-model-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; user-select: none; }
.rvc-model-select { background: var(--card2); color: var(--text); border: 1px solid var(--openai-border); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none; min-width: 120px; max-width: 180px; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2310a37f'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; }
.rvc-model-select:focus { border-color: var(--openai); box-shadow: 0 0 0 2px var(--openai-dim); }
.rvc-model-select option { background: #1a1a2e; color: var(--text); }
.gpu-status { font-size: 11px; margin-left: 12px; white-space: nowrap; }
.rvc-unavail-msg { font-size: 11px; color: var(--red); opacity: 0.8; white-space: nowrap; }