/**
 * Button 组件 — .btn / .btn-primary / .btn-success 等。
 *
 * 来源:从 assets/css/style.css 复制(P1.4 第一刀,行 796-884)。仅复制不删原。
 * 后续:.btn-small / .btn-icon / .btn-xs / .btn-icon-only 散在 style.css 各处,
 * 留待 P2 再合到这里。
 */

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--motion-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-weight: 500;
}

/* SVG 在按钮/菜单项/工具栏中的统一对齐 */
.btn svg,
.toolbar-menu-item svg,
.mobile-more-item svg,
.sidebar-footer-btn svg,
.btn-icon svg,
.modal-header h3 svg {
    flex-shrink: 0;
    display: block;
}

/* 图标按钮(无文字) */
.btn-icon-only {
    padding: 8px 10px;
}

.btn-primary {
    background-color: var(--brand-primary);
    color: var(--text-on-brand);
}

.btn-primary:hover {
    background-color: var(--brand-hover);
}

.btn-success {
    background-color: var(--token-color-success-500);
    color: var(--token-color-ink-0);
}

.btn-success:hover {
    background-color: var(--token-color-success-600);
}

.btn-danger {
    background-color: var(--token-color-danger-500);
    color: var(--token-color-ink-0);
}

.btn-danger:hover {
    background-color: var(--token-color-danger-600);
}

/* btn-ai 走 --color-ai token(--token-color-ai-500 紫,跟 brand 蓝拉开 — 看到紫就是 AI 动作) */
.btn-ai {
    background-color: var(--color-ai);
    color: var(--token-color-ink-0);
}

.btn-ai:hover {
    background-color: var(--color-ai-hover);
}

.btn-secondary {
    background-color: var(--fill-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--fill-active);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* 统一按钮点击反馈 */
.btn:active {
    transform: scale(0.96);
    transition: transform var(--motion-fast);
}

/* 保存按钮无变更时的视觉淡化 */
.btn-disabled {
    opacity: 0.5;
    pointer-events: auto;
}

.btn-full-width {
    width: 100%;
    justify-content: center;
}