/* ==========================================================================
   AI 产品导航条 —— 全站复用组件
   --------------------------------------------------------------------------
   用途：在 /collections/*/index.html（2561 个产品页）与 5 个品牌页
        （onlyoffice / devexpress / think-cell / aspose / dhtmlx）
        的 header 下方统一插入「AI 工具」横向导航条。

   来源：改写自 /ai-tools/css/style.css 的 .product-tabs* 系列。
        原文依赖 --brand / --brand-soft 等变量，而 collections 与品牌页
        只有 --brand-red 体系，故此处全部改为字面量，保证两套模板下外观一致。

   使用方只需：
     <link rel="stylesheet" href="/static/assets/css/ai-nav.css">
     <div class="ai-nav-wrap"><div class="container ai-nav-inner">…</div></div>

   维护：本文件由 _inject_ai_nav.py 引用；修改样式只需改这里，全站生效。
   ========================================================================== */

.ai-nav-wrap {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
}

.ai-nav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ai-nav-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6B7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}

.ai-nav-tabs::-webkit-scrollbar { display: none; }

.ai-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #374151;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ai-nav-tab:hover {
  background: #F3F4F6;
  color: #111827;
  text-decoration: none;
}

/* 激活态：Cursor 品牌蓝（与 ai-tools/cursor 页 --brand 保持一致） */
.ai-nav-tab.active {
  background: #007ACC;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.22);
}

.ai-nav-logo {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .ai-nav-inner { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .ai-nav-label { display: none; }
  .ai-nav-tab { padding: 6px 12px; font-size: 0.8rem; }
  .ai-nav-logo { width: 18px; height: 18px; }
}