/* ============================================================================
 * Mira 觅画 · Library Drawer v1
 *
 * 次级导航 — 作品库 / 资产库 / 约束库
 * 主 nav 只放生成动作（创作/广告/宠物/Pro），库走 drawer 解耦
 *
 * 设计依据 (ui-ux-pro-max 99 UX 准则):
 *   - nav-hierarchy   主/次 nav 必须分开
 *   - drawer-usage    drawer 是 secondary navigation 标准位
 *   - modal-vs-navigation  库是辅助流，drawer 不抢主屏
 *   - persistent-nav  drawer 触发按钮顶部固定
 *   - spring-physics + duration 320ms 自然动效
 *
 * 必须在 tokens.css 之后加载。
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 顶部 cluster (库入口按钮)
 * --------------------------------------------------------------------------- */
.header-cluster {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    /* 5/15：badge 已嵌入 cluster 末尾且 margin-left:auto 推到最右；删老的 padding-right:120px（fixed 模式遗留） */
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-out);
}
.header-icon-btn:hover {
    color: var(--accent-base);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}
.header-icon-btn:active {
    transform: scale(0.97);
}
.header-icon-btn .ico {
    width: 14px;
    height: 14px;
}
.header-icon-btn .header-icon-label {
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Drawer 容器
 * --------------------------------------------------------------------------- */
.lib-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    visibility: hidden;
}
.lib-drawer.open {
    pointer-events: auto;
    visibility: visible;
}

.lib-drawer-overlay {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.lib-drawer.open .lib-drawer-overlay {
    opacity: 1;
}

.lib-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 92vw);
    background: var(--surface-card);
    box-shadow: -8px 0 32px rgba(80,60,40,.18);
    border-left: 1px solid var(--accent-line);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--motion-slow) var(--ease-spring);
    /* 印社风：右侧抽屉带桑皮纸暗纹 */
    background-image: radial-gradient(circle at 1px 1px, rgba(80,60,40,.03) 1px, transparent 0);
    background-size: 20px 20px;
}
.lib-drawer.open .lib-drawer-panel {
    transform: translateX(0);
}

/* ---------------------------------------------------------------------------
 * Drawer Header
 * --------------------------------------------------------------------------- */
.lib-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);
    flex-shrink: 0;
}

.lib-drawer-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}
.lib-drawer-title .ico {
    color: var(--accent-base);
    width: 18px;
    height: 18px;
}

.lib-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-out);
}
.lib-drawer-close:hover {
    color: var(--accent-base);
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

/* ---------------------------------------------------------------------------
 * Segmented control (作品 / 资产 / 约束 chip 切换)
 * --------------------------------------------------------------------------- */
.lib-drawer-segments {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--paper-50);
    flex-shrink: 0;
}

.lib-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-out);
}
.lib-seg-btn:hover:not(.active) {
    color: var(--accent-base);
    border-color: var(--accent-line);
}
.lib-seg-btn.active {
    background: var(--accent-base);
    color: var(--text-inverse);
    border-color: var(--accent-base);
    box-shadow: 0 2px 0 var(--gold-500);
}
.lib-seg-btn .ico {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------------
 * Drawer Body — 内嵌 view 容器 (galleryView / assetView / constraintsView)
 * --------------------------------------------------------------------------- */
.lib-drawer-body {
    flex: 1;
    overflow-y: auto;
    background: var(--surface-base);
    -webkit-overflow-scrolling: touch;
}
/* 内部 view 接管全宽 */
.lib-drawer-body .gallery-view,
.lib-drawer-body .asset-view,
.lib-drawer-body .kb-view {
    padding: var(--space-4);
    background: transparent;
}
/* 内嵌后头部 toolbar 改成单列纵向（drawer 较窄）*/
.lib-drawer-body .gallery-header,
.lib-drawer-body .asset-header,
.lib-drawer-body .kb-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}
.lib-drawer-body .gallery-header h2,
.lib-drawer-body .asset-header h2 {
    font-size: var(--text-2xl);
}
.lib-drawer-body .gallery-grid,
.lib-drawer-body .asset-grid,
.lib-drawer-body .kb-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * 响应式 — 窄屏 drawer 改全屏
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .lib-drawer-panel {
        width: 100%;
    }
    .header-cluster {
        padding-right: 8px;
    }
}