        <!-- 添加提供商模态框 -->
        <div v-if="showAddModal" class="modal-overlay" @click.self="closeAddModal">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-provider-modal-title">
                <div class="modal-title" id="add-provider-modal-title">{{ t('modal.providerAdd.title') }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.name') }}</label>
                    <input
                        v-model="newProvider.name"
                        :class="['form-input', { invalid: !!providerFieldError('add', 'name') }]"
                        :placeholder="t('placeholder.providerNameExample')"
                        autocomplete="off"
                        spellcheck="false"
                        @blur="normalizeProviderDraft('add')">
                    <div v-if="providerFieldError('add', 'name')" class="form-hint form-error">{{ providerFieldError('add', 'name') }}</div>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
                    <input
                        v-model="newProvider.url"
                        :class="['form-input', { invalid: !!providerFieldError('add', 'url') }]"
                        :placeholder="t('placeholder.apiEndpointExample')"
                        autocomplete="off"
                        spellcheck="false"
                        @blur="normalizeProviderDraft('add')">
                    <div v-if="providerFieldError('add', 'url')" class="form-hint form-error">{{ providerFieldError('add', 'url') }}</div>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.apiKey') }}</label>
                    <input v-model="newProvider.key" class="form-input" type="password" placeholder="sk-...">
                </div>
                <div class="form-group">
                    <label class="form-label">
                        <input type="checkbox" v-model="newProvider.useTransform">
                        {{ t('field.useBuiltinTransform') }}
                    </label>
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeAddModal">{{ t('common.cancel') }}</button>
                    <button class="btn btn-confirm" @click="addProvider" :disabled="!canSubmitProvider('add')">{{ t('common.add') }}</button>
                </div>
            </div>
        </div>

        <!-- 编辑提供商模态框 -->
        <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-provider-modal-title">
                <div class="modal-title" id="edit-provider-modal-title">{{ t('modal.providerEdit.title') }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.name') }}</label>
                    <input v-model="editingProvider.name" class="form-input" :placeholder="t('placeholder.providerName')" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
                    <input
                        v-model="editingProvider.url"
                        :class="['form-input', { invalid: !!providerFieldError('edit', 'url') }]"
                        :placeholder="t('placeholder.apiEndpointExample')"
                        autocomplete="off"
                        spellcheck="false"
                        @blur="normalizeProviderDraft('edit')">
                    <div v-if="providerFieldError('edit', 'url')" class="form-hint form-error">{{ providerFieldError('edit', 'url') }}</div>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.apiKey') }}</label>
                    <div class="input-with-toggle">
                        <input v-model="editingProvider.key" class="form-input" :type="showEditProviderKey ? 'text' : 'password'" placeholder="sk-..." autocomplete="off" spellcheck="false">
                        <button type="button" class="input-toggle-btn" @click="toggleEditProviderKey" :title="showEditProviderKey ? t('common.hide') : t('common.show')">
                            <svg v-if="!showEditProviderKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
                        </button>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeEditModal">{{ t('common.cancel') }}</button>
                    <button class="btn btn-confirm" @click="updateProvider" :disabled="!canSubmitProvider('edit')">{{ t('common.save') }}</button>
                </div>
            </div>
        </div>

        <!-- 添加模型模态框 -->
        <div v-if="showModelModal" class="modal-overlay" @click.self="closeModelModal">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-model-modal-title">
                <div class="modal-title" id="add-model-modal-title">{{ t('modal.modelAdd.title') }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.modelName') }}</label>
                    <input v-model="newModelName" class="form-input" :placeholder="t('placeholder.modelExample')">
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeModelModal">{{ t('common.cancel') }}</button>
                    <button class="btn btn-confirm" @click="addModel">{{ t('common.add') }}</button>
                </div>
            </div>
        </div>

        <!-- 模型列表模态框 -->
        <div v-if="showModelListModal" class="modal-overlay" @click.self="showModelListModal = false">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="manage-models-modal-title">
                <div class="modal-title" id="manage-models-modal-title">{{ t('modal.modelManage.title') }}</div>

                <div class="model-list">
                    <div v-for="model in models" :key="model" class="model-item">
                        <span>{{ model }}</span>
                        <button type="button" class="btn-remove-model" @click="removeModel(model)">{{ t('common.delete') }}</button>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-confirm" @click="showModelListModal = false">{{ t('common.close') }}</button>
                </div>
            </div>
        </div>

        <!-- 添加Claude配置模态框 -->
        <div v-if="showClaudeConfigModal" class="modal-overlay" @click.self="closeClaudeConfigModal">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-claude-config-modal-title">
                <div class="modal-title" id="add-claude-config-modal-title">{{ t('modal.claudeConfigAdd.title') }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.configName') }}</label>
                    <input v-model="newClaudeConfig.name" class="form-input" :placeholder="t('placeholder.configNameExample')">
                </div>
                <div class="form-group">
                    <label class="form-label">API Key</label>
                    <input v-model="newClaudeConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.baseUrl') }}</label>
                    <input v-model="newClaudeConfig.baseUrl" class="form-input" :placeholder="t('placeholder.baseUrlExampleClaude')">
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">{{ t('common.cancel') }}</button>
                    <button class="btn btn-confirm" @click="addClaudeConfig">{{ t('common.add') }}</button>
                </div>
            </div>
        </div>

        <!-- 编辑Claude配置模态框 -->
        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-claude-config-modal-title">
                <div class="modal-title" id="edit-claude-config-modal-title">{{ t('modal.claudeConfigEdit.title') }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.configName') }}</label>
                    <input v-model="editingConfig.name" class="form-input" :placeholder="t('field.configName')" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">API Key</label>
                    <div class="input-with-toggle">
                        <input v-model="editingConfig.apiKey" class="form-input" :type="showEditClaudeConfigKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
                        <button type="button" class="input-toggle-btn" @click="toggleEditClaudeConfigKey" :title="showEditClaudeConfigKey ? t('common.hide') : t('common.show')">
                            <svg v-if="!showEditClaudeConfigKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ t('field.baseUrl') }}</label>
                    <input v-model="editingConfig.baseUrl" class="form-input" :placeholder="t('placeholder.baseUrlExampleClaude')">
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeEditConfigModal">{{ t('common.cancel') }}</button>
                    <button class="btn btn-confirm" @click="saveAndApplyConfig">{{ t('common.saveApply') }}</button>
                </div>
            </div>
        </div>

        <!-- Codex 轮询池控制模态框 -->
        <div v-if="showCodexBridgePoolModal" class="modal-overlay" @click.self="showCodexBridgePoolModal = false">
            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="codex-bridge-pool-modal-title">
                <div class="modal-title" id="codex-bridge-pool-modal-title">
                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
                    轮询池设置
                </div>
                <div class="bridge-pool-modal-hint">勾选参与负载均衡的提供商</div>
                <div v-if="localBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
                    <span>暂无可用上游 provider，请先添加直连 provider</span>
                </div>
                <div v-else class="bridge-pool-list">
                    <label v-for="cp in localBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
                        <span class="bridge-pool-item-status" :class="{ active: !isLocalBridgeExcluded(cp.name) }">{{ isLocalBridgeExcluded(cp.name) ? '未启用' : '已启用' }}</span>
                        <input type="checkbox" :checked="!isLocalBridgeExcluded(cp.name)" @change="toggleLocalBridgeExcluded(cp.name)" />
                    </label>
                </div>
                <div class="btn-group">
                    <button class="btn btn-confirm" @click="showCodexBridgePoolModal = false">{{ t('common.close') }}</button>
                </div>
            </div>
        </div>

        <div v-if="showClaudeBridgePoolModal" class="modal-overlay" @click.self="showClaudeBridgePoolModal = false">
            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="claude-bridge-pool-modal-title">
                <div class="modal-title" id="claude-bridge-pool-modal-title">
                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
                    {{ t('claude.localBridge.poolTitle') }}
                </div>
                <div class="bridge-pool-modal-hint">{{ t('claude.localBridge.poolHint') }}</div>
                <div v-if="claudeLocalBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
                    <span>{{ t('claude.localBridge.noProviders') }}</span>
                </div>
                <div v-else class="bridge-pool-list">
                    <label v-for="cp in claudeLocalBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
                        <span class="bridge-pool-item-status" :class="{ active: !isClaudeLocalBridgeExcluded(cp.name) }">{{ isClaudeLocalBridgeExcluded(cp.name) ? t('claude.localBridge.disabled') : t('claude.localBridge.enabled') }}</span>
                        <input type="checkbox" :checked="!isClaudeLocalBridgeExcluded(cp.name)" @change="toggleClaudeLocalBridgeExcluded(cp.name)" />
                    </label>
                </div>
                <div class="btn-group">
                    <button class="btn btn-confirm" @click="showClaudeBridgePoolModal = false">{{ t('common.close') }}</button>
                </div>
            </div>
        </div>

