/* ============================================================================
 * Mira 觅画 · List Views v1
 *
 * 3 个管理 tab 视觉对齐（作品库 / 资产库 / 约束库 / 材料库 hidden）：
 *   - 共用 toolbar（标题 + 计数 + 搜索 + filter + 按钮）
 *   - 共用 grid（卡片网格）
 *   - 共用 empty state（空状态）
 *
 * 命名兼容现有 class:
 *   gallery-* / asset-* / kb-*
 *
 * 必须在 tokens.css 之后加载。
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. View 容器
 * ---------------------------------------------------------------------------- */
.gallery-view,
.asset-view,
.kb-view {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    background: var(--surface-base);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(80,60,40,.04) 1px, transparent 0);
    background-size: 24px 24px;
}

/* ----------------------------------------------------------------------------
 * 2. Header (标题 + 计数 + 工具栏)
 * ---------------------------------------------------------------------------- */
.gallery-header,
.asset-header,
.kb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.gallery-header h2,
.asset-header h2,
.kb-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.06em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.asset-header-left,
.kb-header-left {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.gallery-count,
.asset-count,
.kb-count {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--gold-500);
    font-weight: 500;
}
.gallery-count::before,
.asset-count::before,
.kb-count::before { content: "共 "; color: var(--text-muted); font-family: var(--font-display); }
.gallery-count::after,
.asset-count::after,
.kb-count::after { content: " 项"; color: var(--text-muted); font-family: var(--font-display); }

/* ----------------------------------------------------------------------------
 * 3. Toolbar (搜索框 + filter + 按钮)
 * ---------------------------------------------------------------------------- */
.asset-toolbar,
.kb-toolbar,
.gallery-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.asset-toolbar select,
.kb-toolbar select,
.asset-toolbar input[type="text"],
.kb-toolbar input[type="text"],
.kb-search {
    padding: 0 var(--space-3);
    height: 36px;
    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);
    min-width: 140px;
}
.asset-toolbar input:focus,
.asset-toolbar select:focus,
.kb-toolbar input:focus,
.kb-toolbar select:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}

.kb-search {
    flex: 1;
    min-width: 240px;
    padding-left: var(--space-4);
}

/* ----------------------------------------------------------------------------
 * 4. Grid (卡片网格)
 * ---------------------------------------------------------------------------- */
.gallery-grid,
.asset-grid,
.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

/* gallery 项偏大（视频缩略图） */
.gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* asset / kb 项偏小（图片+标签） */
.kb-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ----------------------------------------------------------------------------
 * 5. 卡片基础（兼容现有 .gallery-card / .asset-card / .kb-card 等）
 * ---------------------------------------------------------------------------- */
.gallery-card,
.asset-card,
.kb-card,
.cst-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--motion-base) var(--ease-out),
                box-shadow var(--motion-base) var(--ease-out),
                border-color var(--motion-base) var(--ease-out);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.gallery-card:hover,
.asset-card:hover,
.kb-card:hover,
.cst-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-line);
}

/* 卡片内媒体 */
.gallery-card video,
.gallery-card img,
.asset-card video,
.asset-card img,
.kb-card video,
.kb-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-sunken);
    display: block;
}
/* 资产/约束 卡片更方正些 */
.asset-card img,
.cst-card img {
    aspect-ratio: 4 / 3;
}

.gallery-card-info,
.asset-card-info,
.kb-card-info,
.cst-card-info {
    padding: var(--space-3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gallery-card-title,
.asset-card-title,
.kb-card-title,
.cst-card-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: var(--leading-tight);
    /* 双行截断 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-meta,
.asset-card-meta,
.kb-card-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
}

/* 积分流水显示（卡片内）*/
.gallery-card-credits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border-subtle);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}
.gallery-card-credits .credits-consumed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gold-500);
    font-weight: 500;
}
.gallery-card-credits .credits-refunded {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--jade-300);
    font-weight: 500;
}

/* 标签（tag-pill）*/
.asset-card-tags,
.kb-card-tags,
.cst-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.tag-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-soft);
    color: var(--accent-base);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 1.4;
    font-family: var(--font-body);
}

/* ----------------------------------------------------------------------------
 * 6. Empty state (空状态)
 * ---------------------------------------------------------------------------- */
.gallery-empty,
.asset-empty,
.kb-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--card-radius);
    font-size: var(--text-md);
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}
.gallery-empty::before,
.asset-empty::before,
.kb-empty::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    background: var(--text-disabled);
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18'/><path d='M9 21V9'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18'/><path d='M9 21V9'/></svg>");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* ----------------------------------------------------------------------------
 * 7. KB 详情抽屉（drawer）
 * ---------------------------------------------------------------------------- */
.kb-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}
.kb-drawer-mask {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.kb-drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(560px, 92vw);
    background: var(--card-bg);
    box-shadow: -4px 0 24px var(--paper-shadow);
    display: flex;
    flex-direction: column;
    animation: drawer-slide-in var(--motion-slow) var(--ease-spring);
}
@keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.kb-drawer-header {
    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);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
}
.kb-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}