/* New controls use the local design-system tokens. */
:root {
    --voice-bg: #fafafa;
    --voice-surface: #ffffff;
    --voice-border: #e4e4e7;
    --voice-text: #09090b;
    --voice-muted: #52525b;
    --voice-info: #3b82f6;
    --voice-gap: 8px;
}
.voice-settings { display: grid; gap: var(--voice-gap); margin: 16px 0; }
.voice-settings select {
    width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--voice-border); border-radius: 8px;
    background: var(--voice-surface); color: var(--voice-text);
    font: 400 14px/1.5 'Inter', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}
.voice-settings select:focus-visible { outline: 2px solid var(--voice-info); outline-offset: 4px; }
.voice-settings select:disabled { color: var(--voice-muted); }
.voice-preview-button {
    min-height: 48px; margin-top: 8px; padding: 8px 16px;
    border: 1px solid var(--voice-border); border-radius: 8px;
    background: var(--voice-surface); color: var(--voice-text);
    font: 500 14px/1.5 'Inter', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    cursor: pointer;
}
.voice-preview-button:hover { background: var(--voice-bg); }
.voice-preview-button:focus-visible { outline: 2px solid var(--voice-info); outline-offset: 4px; }
.voice-preview-button:disabled { color: var(--voice-muted); cursor: default; }
.voice-preview-audio { width: 100%; margin-top: 8px; }
.settings-note, .setup-data-notice { color: var(--voice-muted); font-size: 14px; line-height: 1.5; }
.setup-data-notice { margin-bottom: 24px; }
.provider-badge { padding: 4px 8px; border: 1px solid var(--voice-border); border-radius: 4px; color: var(--voice-muted); font-size: 12px; font-weight: 500; }
.live-audio-player { position: fixed; bottom: 16px; right: 16px; max-width: calc(100% - 32px); z-index: 20; }
.voice-settings .input-label { margin: 0; font-size: 14px; font-weight: 500; }
.privacy-notice-items span { line-height: 1.5; }
.conversation-export {
    background: var(--voice-surface); color: var(--voice-muted);
    border: 1px solid var(--voice-border); border-radius: 8px;
    padding: 8px 16px; margin: 8px;
    font: 500 14px/1.5 'Inter', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    cursor: pointer;
}
.conversation-export:hover { background: var(--voice-bg); }
.conversation-export:focus-visible { outline: 2px solid var(--voice-info); outline-offset: 4px; }
.local-launch-notice {
    margin: 16px 0; padding: 16px; text-align: left;
    background: var(--voice-surface); color: var(--voice-muted);
    border: 1px solid var(--voice-border); border-radius: 8px;
    font: 400 14px/1.5 'Inter', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}
.local-launch-notice p { margin: 0 0 8px; }
.local-launch-notice p:last-child { margin: 8px 0 0; }
.local-launch-notice a { color: var(--voice-text); text-decoration: underline; font-weight: 500; }
.local-launch-notice a:focus-visible { outline: 2px solid var(--voice-info); outline-offset: 4px; }
@media (max-width: 768px) { .provider-badge { font-size: 12px; } }