/* ===== 模型标识 / 按钮 ===== */
/* ===== 当前模型标注 ===== */
.model-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 10px;
    background: rgba(25, 200, 185, 0.08);
    border: 1px dashed rgba(25, 200, 185, 0.4);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #5d4a32);
}
.model-indicator .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19c8b9;
    box-shadow: 0 0 0 3px rgba(25, 200, 185, 0.18);
    flex-shrink: 0;
}
.model-indicator b {
    color: #12a396;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
}

/* ===== 按钮 ===== */

/* 主按钮 - 动森 3D 像素堆叠风格 */
.btn-generate {
    width: 100%;
    padding: 14px 0;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 3D 像素堆叠阴影 */
    box-shadow: 0 5px 0 0 var(--primary-3d);
    transform: translateY(0);
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.btn-generate:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 0 0 var(--primary-3d);
    transform: translateY(-1px);
}

.btn-generate:active {
    box-shadow: 0 1px 0 0 var(--primary-3d);
    transform: translateY(4px);
    background: var(--primary-active);
}

.btn-generate:disabled {
    background: #a8e4df;
    box-shadow: 0 3px 0 0 #8ab8b5;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

.btn-generate:disabled:active {
    transform: none;
    box-shadow: 0 3px 0 0 #8ab8b5;
}

.btn-generate:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* 次要按钮 */
.btn-outline {
    padding: 8px 16px;
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: var(--transition);
    box-shadow: 0 2px 4px 0 var(--shadow-btn);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 3px 10px 0 var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 var(--shadow-btn);
}

/* spinner */
.spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* 叶子加载动画 */
.leaf-spinner {
    animation: leafBounce 0.6s ease-in-out infinite alternate;
}

@keyframes leafBounce {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-4px) rotate(5deg); }
}
/* Desktop account engines reuse the existing generation controls. */
.local-provider-select {
    max-width: 200px;
    padding: 7px 10px;
    /* 变量名此前写成了 --bg-card / --border-color / --text-primary，项目中并不存在，
       于是永远落到浅色回退值，深色模式下会露出一块白底。 */
    border: 1px solid var(--border, #d8e2df);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text, #223c35);
    font-size: 12px;
}
.local-engine-settings { color: inherit; text-decoration: none; font-size: 20px; }
.header-right:has(.local-provider-select) #modelIndicator { display: none; }
@media (max-width: 768px) {
    .local-provider-select { max-width: 120px; padding: 6px; }
    .header-right:has(.local-provider-select) { gap: 6px; }
    .header-inner:has(.local-provider-select) .logo-text { display: none; }
    .header-inner:has(.local-provider-select) #bindPhoneText { display: none; }
    .header-inner:has(.local-provider-select) .local-engine-settings { min-width: 36px; text-align: center; }
}