/* ============================================================================
 * Mira 觅画 · Modal/Dialog 统一外壳 v1
 *
 * 现有 4+ 套散装 modal:
 *   - .modal-overlay + .modal           (projectModal/distLoginModal/settingsModal)
 *   - .kb-dialog + .kb-dialog-card      (材料库)
 *   - .asset-dialog + .asset-dialog-card (资产库 + 约束库)
 *
 * 这一层用同一套视觉规范覆盖全部 — 不动 HTML 结构（保留 JS 显示/隐藏逻辑）。
 *
 * 必须在 tokens.css 之后加载。
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. Overlay (背景遮罩) — 统一所有 modal 的背景色 / 模糊 / 居中
 * ---------------------------------------------------------------------------- */
.modal-overlay,
.kb-dialog,
.asset-dialog,
.modal-mask,
.overlay-mask {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-5);
    animation: modal-overlay-in var(--motion-base) var(--ease-out);
}
@keyframes modal-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----------------------------------------------------------------------------
 * 2. Card (modal 内容容器) — 统一背景 / radius / shadow / 入场动画
 * ---------------------------------------------------------------------------- */
.modal,
.modal-content,
.kb-dialog-card,
.asset-dialog-card {
    background: var(--modal-bg);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    border: 1px solid var(--border-subtle);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - var(--space-7) * 2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-card-in var(--motion-slow) var(--ease-spring);
    position: relative;
}
@keyframes modal-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 大尺寸 */
.modal-wide {
    max-width: 880px;
}
.modal-narrow {
    max-width: 420px;
}

/* ----------------------------------------------------------------------------
 * 3. Header (标题 + 关闭按钮)
 * ---------------------------------------------------------------------------- */
.modal-header,
.kb-dialog-card > .kb-dialog-title:first-child,
.asset-dialog-card > .asset-dialog-title:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--paper-50);
    flex-shrink: 0;
}

.modal-title,
.kb-dialog-title,
.asset-dialog-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
}

/* 关闭按钮（统一为右上角图标按钮）*/
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-md);
    line-height: 1;
    padding: 0;
    transition: all var(--motion-fast) var(--ease-out);
}
.modal-close:hover {
    background: var(--accent-soft);
    color: var(--accent-base);
    border-color: var(--accent-line);
}

/* ----------------------------------------------------------------------------
 * 4. Body (内容区 — 滚动)
 * ---------------------------------------------------------------------------- */
.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1 1 auto;
    color: var(--text-primary);
    line-height: var(--leading-normal);
}

/* kb / asset dialog 没有独立 body，整个 card 就是 body */
.kb-dialog-card,
.asset-dialog-card {
    padding: var(--space-5);
    gap: var(--space-3);
}
.kb-dialog-card > .kb-dialog-title:first-child,
.asset-dialog-card > .asset-dialog-title:first-child {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3);
    padding: var(--space-4) var(--space-5);
}

/* ----------------------------------------------------------------------------
 * 5. Row (表单行 — 统一)
 * ---------------------------------------------------------------------------- */
.kb-dialog-row,
.asset-dialog-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    flex-wrap: wrap;
}
.kb-dialog-row label,
.asset-dialog-row label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    min-width: 64px;
    flex-shrink: 0;
}
.kb-dialog-row input[type="text"],
.kb-dialog-row input[type="number"],
.kb-dialog-row select,
.asset-dialog-row input[type="text"],
.asset-dialog-row input[type="number"],
.asset-dialog-row select,
.asset-dialog-row textarea {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-fg);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.kb-dialog-row input:focus,
.kb-dialog-row select:focus,
.asset-dialog-row input:focus,
.asset-dialog-row select:focus,
.asset-dialog-row textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}

/* textarea 单独 */
.kb-dialog-card textarea,
.asset-dialog-card textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-fg);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
    min-height: 80px;
    resize: vertical;
}
.kb-dialog-card textarea:focus,
.asset-dialog-card textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}

/* ----------------------------------------------------------------------------
 * 6. Footer / Actions (按钮区)
 * ---------------------------------------------------------------------------- */
.modal-footer,
.kb-dialog-actions,
.asset-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--paper-50);
    flex-shrink: 0;
    margin-top: auto;
}

/* kb / asset dialog 的 actions 在 card 内部，独立处理 */
.kb-dialog-card .kb-dialog-actions,
.asset-dialog-card .asset-dialog-actions {
    margin: var(--space-3) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-4) var(--space-5);
}

/* ----------------------------------------------------------------------------
 * 7. Status / Progress / Inline 提示
 * ---------------------------------------------------------------------------- */
.asset-dialog-status,
.kb-progress {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-raised);
    border-left: 3px solid var(--accent-base);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

/* ----------------------------------------------------------------------------
 * 响应式（窄屏全屏 modal）
 * ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .modal-overlay,
    .kb-dialog,
    .asset-dialog {
        padding: 0;
        align-items: flex-end;
    }
    .modal,
    .kb-dialog-card,
    .asset-dialog-card {
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 90vh;
        animation: modal-card-in-mobile var(--motion-slow) var(--ease-out);
    }
    @keyframes modal-card-in-mobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}