/* ===== 角色聊天 - 创建界面 ===== */
#char-setup-screen {
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
}
.setup-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 16px; padding: 24px;
    max-width: 520px; width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: 90dvh;
    overflow: hidden; display: flex; flex-direction: column; gap: 0;
}
.setup-card > *:first-child { flex-shrink: 0; }
.setup-card > h2 { margin-bottom: 0; }
.setup-card .subtitle { margin-bottom: 4px; }
.setup-card > p { margin-bottom: 0; flex-shrink: 0; }
.setup-card .form-wrapper {
    flex: 1; display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; padding-right: 4px; min-height: 0;
}
.setup-card .form-wrapper::-webkit-scrollbar { width: 4px; }
.setup-card .form-wrapper::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 2px;
}
.setup-card .form-wrapper .form-group:last-of-type { flex-shrink: 0; }
.setup-card .form-wrapper textarea#story-prompt {
    flex: 1; min-height: 80px; resize: none;
}
.setup-card .form-wrapper .btn { flex-shrink: 0; margin-top: 4px; }
.setup-card > .btn-primary { flex-shrink: 0; margin-top: 4px; }

.form-group { margin-bottom: 0; }
.form-group label {
    display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 12px; background: var(--bg3);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    font-size: 0.9rem; outline: none; transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
}
.form-group textarea { resize: none; }

/* API Key 输入框带清除按钮 */
.api-key-group { position: relative; }
.api-key-group input { padding-right: 36px; }
.api-key-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: var(--bg); border: 1px solid var(--border); color: var(--text-dim);
    cursor: pointer; font-size: 0.75rem; width: 50px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; line-height: 1; opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s; padding: 0 4px;
}
.api-key-clear:hover {
    opacity: 1 !important; color: var(--danger);
    background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3);
}
.api-key-group input:not(:placeholder-shown) ~ .api-key-clear { opacity: 0.6 !important; }
.api-key-group input:focus:not(:placeholder-shown) ~ .api-key-clear { opacity: 0.6 !important; }

/* 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 0.9rem; font-weight: 600; transition: all 0.2s; min-height: 36px;
}
.btn-primary { background: var(--primary); color: #fff; width: 100%; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; min-height: 28px; }
.btn-outline {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
}
.btn-outline:hover { border-color: var(--primary); color: var(--text); }

/* 玩家性别单选框 */
.gender-radio-group {
    display: flex; gap: 16px;
}
.gender-option {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 0.9rem; color: var(--text);
    padding: 8px 16px; border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.gender-option:hover { border-color: var(--primary); }
.gender-option input[type="radio"] {
    accent-color: var(--primary);
    width: 16px; height: 16px;
}
.gender-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.15);
}