/**
 * NavAi 功能工具栏样式（排序 + 标签筛选）
 *
 * @package NavAi
 * @since  2.1.0
 */

.navai-sortbar {
    margin: 4px 0 16px;
}
.navai-sortbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gray-100, #f5f5f5);
    border: 1px solid var(--gray-200, #eee);
    border-radius: var(--radius-md, 8px);
}

/* 排序按钮组 */
.navai-sort-options {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.navai-sort-btn {
    border: none;
    background: transparent;
    color: var(--gray-600, #757575);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    transition: background 0.2s, color 0.2s;
}
.navai-sort-btn:hover {
    background: var(--gray-200, #eee);
    color: var(--gray-900, #212121);
}
.navai-sort-btn.active {
    background: var(--primary-color, #E53935);
    color: #fff;
    font-weight: 600;
}

/* 标签筛选 */
.navai-tag-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.navai-tag-icon {
    width: 15px;
    height: 15px;
    color: var(--gray-500, #9e9e9e);
    flex-shrink: 0;
}
.navai-tag-select {
    padding: 5px 30px 5px 10px;
    border: 1px solid var(--gray-300, #e0e0e0);
    border-radius: 6px;
    background: var(--white, #fff);
    color: var(--gray-800, #424242);
    font-size: 13px;
    max-width: 180px;
    cursor: pointer;
    appearance: auto;
}

/* 移动端 */
@media (max-width: 782px) {
    .navai-sortbar-inner {
        padding: 8px 10px;
    }
    .navai-tag-filter {
        margin-left: 0;
        width: 100%;
    }
    .navai-tag-select {
        max-width: none;
        flex: 1;
    }
}

/* #4 骨架屏占位：静态浅灰（去掉 shimmer 扫光，避免"虚影"晃眼），等真实内容到位后淡入替换 */
.skeleton-card {
    background: var(--gray-50, #fafafa);
    border-color: var(--gray-100, #f0f0f0);
    pointer-events: none;
    user-select: none;
}
/* 左侧图标占位：撑满卡片高度，避免与文字行挤在一起 */
.skeleton-card .ai-card-icon.skeleton-shimmer {
    height: 100%;
    min-height: 44px;
    width: 44px;
    flex-shrink: 0;
    background: var(--gray-200, #eee);
    border-radius: 8px;
}
/* 右侧文字行占位：每条有独立高度，模拟真实卡片排版 */
.skeleton-line {
    border-radius: 4px;
    background: var(--gray-100, #f0f0f0);
}
.skeleton-line-name {
    width: 60%;
    height: 15px;
    margin-bottom: 8px;
}
.skeleton-line-desc {
    width: 80%;
    height: 10px;
    margin-bottom: 8px;
}
.skeleton-line-short {
    width: 55%;
    margin-bottom: 0;
}
/* 让骨架卡片内容垂直撑满，与真实卡片一致 */
.skeleton-card .ai-card-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 占位底色（保留类名兼容，骨架屏已改为静态灰，不再叠加扫光） */
.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--gray-100, #f0f0f0);
}
/* #6 卡片区替换淡入：骨架/空态 -> 真实卡片时柔和过渡，避免生硬跳变（"糊在一起"视觉残留） */
.sites-grid.navai-cards-enter {
    animation: navai-cards-fade-in 0.28s ease-out both;
}
@keyframes navai-cards-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* #6 切换中在 Tab 行下方提示"加载中"，替代整屏骨架屏的晃眼 */
.navai-loading-hint {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray-400, #999);
    font-size: 13px;
    padding: 8px 0 4px;
    animation: navai-cards-fade-in 0.2s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer::after {
        animation: none;
    }
    .sites-grid.navai-cards-enter,
    .navai-loading-hint {
        animation: none;
    }
}