/* ============================================================
   顶部导航栏 一体式胶囊检索 (custom inject)
   - 常态: 一个圆角胶囊，内含放大镜图标(+提示文字)。
     背景为轻量毛玻璃，无任何光晕/遮罩装饰(用户要求简洁)。
   - 点击胶囊 → 输入区在图标右侧平滑滑出(宽度非线性展开)，
     图标保持在胶囊内左侧 = "搜索栏把图标包起来"。
   - 无输入时不下拉任何提示浮层；只有检索产生内容
     (结果 / 无结果 / 索引失败) 时才显示结果浮层。
   - 再次点击胶囊 / Esc / 点击空白处收起。
   ============================================================ */

/* ---- 容器: 放 #menus 内最右 ---- */
#nav .nav-search {
  position: relative;
  margin-left: auto;
  margin-right: 0;      /* 贴导航最右缘 */
  order: 10;
  z-index: 1002;
  display: flex;
  align-items: center;
}

/* ---- 一体胶囊本体(图标 + 输入同盒) ----
   常态只显示图标(输入区宽度0, overflow裁掉)。
   展开态 .nav-search-open: 输入区 width 0→290px, 图标仍居左。
   收起是同一胶囊: 不占位不遮挡, 不推挤菜单项(绝对定位外层无, 由
   #menus flex 提供; 胶囊自身宽度会变, 但胶囊在最右, 左侧是空白区)。 */
#nav .nav-search-bar {
  position: relative;      /* 供跑马灯/marquee absolute 定位 */
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0;
  height: 38px;
  padding: 0 11px;        /* 左右对称, 默认图标水平居中 */
  border-radius: 999px;
  cursor: pointer;
  /* 与顶部导航栏统一的 macOS 毛玻璃语言 */
  background: linear-gradient(150deg, rgba(246, 248, 252, .50), rgba(232, 238, 248, .40));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .60);   /* 导航同款白边框 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 2px 8px rgba(40, 54, 88, .08);
  /* 收起态: 只容纳图标+对称padding */
  transition:
    background-color .2s ease,
    border-color .2s ease;
}

/* ---- 边框流光跑马灯(conic-gradient 旋转), 仅展开态显示 ----
   用户要求: 检索栏边框加跑马灯, 颜色取大背景的颜色; 默认态不显示。
   原理: ::before 覆盖整个胶囊, background 用 conic-gradient 取大背景
   主色渐变并随 --angle 旋转(流光); 用 mask 裁出"外缘 1.5px 环带"
   (content-box 挖空中心), 只在边框处显色 → 沿胶囊圆角边缘流动的光。
   @property 注册 --angle 让 conic 渐变角度可动画(Chrome/Edge 支持)。 */
@property --nav-flow {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes nav-flow-rotate {
  to { --nav-flow: 360deg }
}
/* 弹性过渡: 展开态淡入, 收起态淡出(默认态不显示) */
#nav .nav-search-bar::before {
  content: '';
  position: absolute;
  inset: -1px;            /* 盖住 1px 边框区域 */
  border-radius: 999px;
  z-index: 1;            /* 盖在 bar 背景之上; 中心由 mask 排除, 不遮挡内容 */
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  /* light: 取 .bg-liquid 冷雾蓝主色做角向流光 */
  background: conic-gradient(
    from var(--nav-flow),
    rgba(95, 130, 200, 0) 0%,
    rgba(120, 150, 220, .85) 18%,
    rgba(160, 178, 212, .95) 32%,
    rgba(70, 95, 170, .85) 50%,
    rgba(160, 178, 212, .95) 68%,
    rgba(120, 150, 220, .85) 82%,
    rgba(95, 130, 200, 0) 100%
  );
  /* 裁出外缘 1.5px 环带: content-box 显示, padding-box 之外露出 */
  padding: 1.5px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: nav-flow-rotate 6s linear infinite;
}
#nav .nav-search-open .nav-search-bar::before {
  opacity: 1;
}

/* dark: 边框流光取深色玻璃主色 */
html[data-theme='dark'] #nav .nav-search-bar::before {
  background: conic-gradient(
    from var(--nav-flow),
    rgba(90, 135, 240, 0) 0%,
    rgba(120, 160, 250, .85) 18%,
    rgba(180, 120, 245, .88) 32%,
    rgba(60, 200, 180, .80) 50%,
    rgba(245, 145, 82, .78) 68%,
    rgba(120, 160, 250, .85) 82%,
    rgba(90, 135, 240, 0) 100%
  );
}
#nav .nav-search-bar:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .22));
}

/* 放大镜图标: 固定在胶囊右侧(最右), 展开时不移动 */
#nav .nav-search-ico {
  flex: 0 0 auto;
  order: 3;                     /* 放最右 */
  color: rgba(70, 84, 116, .85);
  font-size: 15px;
  line-height: 1;
  transition: color .2s ease;
}
#nav .nav-search-open .nav-search-ico,
#nav .nav-search-bar:hover .nav-search-ico {
  color: var(--theme-color, #49b1f5);
}

/* 输入框: 常态宽0不可见; 展开后从图标左侧向左滑出 */
#nav .nav-search-input {
  order: 1;                     /* 放图标左侧 */
  width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(40, 44, 60, .92);
  font-size: 13.5px;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  cursor: text;
  /* 非线性滑出: 先慢后快的缓入, 视觉上平滑"从右向左生长" */
  transition:
    width .4s cubic-bezier(.3, 1.25, .3, 1),
    opacity .28s ease .06s,
    padding .28s ease .06s;
}
#nav .nav-search-open .nav-search-input {
  width: 290px;
  padding: 0 30px 0 10px;   /* 右 padding 30px 给绝对定位的清除按钮留位, 避免文字穿到×下 */
  opacity: 1;
  pointer-events: auto;
}
#nav .nav-search-input::placeholder {
  color: rgba(90, 100, 130, .72);
}
/* 原生清除按钮已弃用(type=text), 隐藏任何残留 */
#nav .nav-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
#nav .nav-search-input::-ms-clear {
  display: none;
}

/* ---- 检索栏提示文字(静止, 不走马灯) ----
   未输入时显示一段静态提示; 输入后隐藏。
   颜色取大背景主色(实色, 避免渐变文字降级出黑)。 */
#nav .nav-search-marquee {
  position: absolute;
  left: 30px;              /* 右移避开输入框文字起点/光标区(闪烁条) */
  right: 48px;             /* 给清除按钮/图标留位 */
  height: 100%;
  display: none;           /* 仅展开态显示, 常态(只剩图标)不出现 */
  align-items: center;
  overflow: hidden;
  pointer-events: none;    /* 不拦截输入框点击 */
  white-space: nowrap;
  /* 用明确实色(取大背景冷雾蓝主色), 不用 background-clip:text 渐变,
     避免 color:transparent 在降级时渲染成黑色伪影 */
  color: rgba(108, 130, 175, .95);
}
#nav .nav-search-open .nav-search-marquee {
  display: flex;
}
#nav .nav-search-marquee span {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .88;
}
#nav .nav-search-marquee.hidden {
  display: none;           /* 有输入时覆盖展开态, 隐藏提示文字 */
}

/* ---- 清除按钮: 真实可点击, 有输入才显示 ----
   用绝对定位锚在输入框右侧/图标左侧, 不参与 flex 布局,
   这样输入前后胶囊宽度恒定(不因出现清除按钮而变宽)。 */
#nav .nav-search-clear {
  position: absolute;
  right: 42px;             /* 图标宽18.8 + bar右padding 11 ~ 30, 取42避图标 */
  top: 50%;
  transform: translateY(-50%);
  order: 2;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(90, 104, 140, .80);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
#nav .nav-search-clear.show {
  display: flex;
}
#nav .nav-search-clear:hover {
  color: var(--theme-color, #49b1f5);
  background: rgba(120, 170, 255, .16);
}

/* ---- dark 跑马灯: 取深色玻璃主色(实色) ---- */
html[data-theme='dark'] #nav .nav-search-marquee {
  color: rgba(150, 175, 235, .88);
}

/* ---- 结果浮层(仅检索有内容才出现) ----
   毛玻璃冷雾面板, 默认隐藏; 展开且输入有效才显示 */
#nav .nav-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 400px;
  max-width: min(88vw, 400px);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(250, 252, 255, .82), rgba(230, 236, 248, .76));
  -webkit-backdrop-filter: blur(38px) saturate(180%) brightness(1.02);
  backdrop-filter: blur(38px) saturate(180%) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, .60);
  box-shadow:
    0 24px 56px rgba(40, 54, 88, .24),
    0 6px 16px rgba(40, 54, 88, .10),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transition:
    opacity .26s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1),
    visibility .26s;
  text-align: left;
}
#nav .nav-search.show-panel .nav-search-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* 状态(loading/无结果/错误) */
#nav .nav-search-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 22px 18px;
  color: rgba(60, 70, 96, .85);
  font-size: 13px;
  line-height: 1.6;
}
#nav .nav-search-status .nav-s-ico {
  color: rgba(120, 150, 210, .7);
  font-size: 15px;
}
#nav .nav-search-status b {
  color: rgba(38, 44, 60, .95);
  font-weight: 600;
}
#nav .nav-search-loading { color: rgba(90, 110, 150, .8) }
#nav .nav-search-loading .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(120, 170, 255, .75);
  animation: nav-search-bounce .9s ease-in-out infinite;
}
#nav .nav-search-loading .dot:nth-child(2) { animation-delay: .15s }
#nav .nav-search-loading .dot:nth-child(3) { animation-delay: .3s }
#nav .nav-search-loading .ns-text { margin-left: 4px; font-size: 12.5px; color: rgba(90,110,150,.8) }
@keyframes nav-search-bounce {
  0%, 100% { transform: translateY(0); opacity: .45 }
  50% { transform: translateY(-4px); opacity: 1 }
}

/* 结果列表 */
#nav .nav-search-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 170, 255, .45) rgba(120, 170, 255, .08);
}
#nav .nav-search-results::-webkit-scrollbar { width: 6px }
#nav .nav-search-results::-webkit-scrollbar-track { background: rgba(120, 170, 255, .06); border-radius: 999px }
#nav .nav-search-results::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(130, 185, 255, .5), rgba(100, 160, 255, .4));
  border-radius: 999px;
}
#nav .nav-search-item a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .18s ease;
}
#nav .nav-search-item a:hover {
  background: linear-gradient(150deg, rgba(120, 180, 250, .20), rgba(160, 210, 255, .13));
}
#nav .nav-search-item .ns-title {
  display: block;
  color: rgba(31, 45, 61, .96);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nav .nav-search-item .ns-meta {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(90, 100, 130, .85);
}
#nav .nav-search-item .ns-meta time,
#nav .nav-search-item .ns-meta .ns-cat,
#nav .nav-search-item .ns-meta .ns-tags { margin-right: 8px }
#nav .nav-search-item .ns-excerpt {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(70, 80, 110, .85);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nav .nav-search-item mark,
#nav .nav-search-status mark {
  background: rgba(120, 180, 255, .30);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* ---- dark ---- */
html[data-theme='dark'] #nav .nav-search-bar {
  /* 与顶部导航栏 dark 风格统一：同系深色毛玻璃 */
  background: linear-gradient(150deg, rgba(36, 42, 60, .55), rgba(20, 24, 36, .52));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border-color: rgba(255, 255, 255, .12);   /* 导航同款细白边 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .3);
}
html[data-theme='dark'] #nav .nav-search-bar:hover {
  background: linear-gradient(150deg, rgba(44, 52, 74, .58), rgba(26, 32, 46, .55));
  border-color: rgba(255, 255, 255, .16);
}
html[data-theme='dark'] #nav .nav-search-ico { color: rgba(200, 212, 235, .85) }
html[data-theme='dark'] #nav .nav-search-input { color: rgba(255, 255, 255, .9) }
html[data-theme='dark'] #nav .nav-search-input::placeholder { color: rgba(190, 200, 225, .58) }
html[data-theme='dark'] #nav .nav-search-panel {
  background: linear-gradient(160deg, rgba(40, 46, 64, .9), rgba(18, 22, 34, .88));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .10);
}
html[data-theme='dark'] #nav .nav-search-status { color: rgba(205, 214, 235, .85) }
html[data-theme='dark'] #nav .nav-search-status b { color: rgba(255, 255, 255, .95) }
html[data-theme='dark'] #nav .nav-search-item .ns-title { color: rgba(255, 255, 255, .92) }
html[data-theme='dark'] #nav .nav-search-item .ns-meta { color: rgba(170, 180, 205, .8) }
html[data-theme='dark'] #nav .nav-search-item .ns-excerpt { color: rgba(180, 190, 215, .8) }
html[data-theme='dark'] #nav .nav-search-item a:hover {
  background: linear-gradient(150deg, rgba(90, 150, 255, .24), rgba(70, 110, 200, .13));
}

/* ---- 移动端 ---- */
@media (max-width: 768px) {
  #nav .nav-search-bar { height: 34px; padding: 0 8px 0 10px }
  #nav .nav-search-open .nav-search-input { width: min(56vw, 210px) }
  #nav .nav-search-panel {
    position: fixed;
    top: 62px;
    right: 12px;
    width: calc(100vw - 24px);
    max-width: none;
  }
}