/* ============ 搜索组件配色适配 ============
   PluginSearchWidget 自带弹框（shadow DOM）通过 --halo-search-widget-* 变量取色。
   此处全部挂到暗室变量上，使其随主题轮换色相，不写死任何色值。 */
/* 注意：插件自带的 [data-color-scheme='dark'] 暗色方案比 :root 更具体，
   会压过普通定义（实测弹窗底会变成它内置的 #15172a、圆角 6px），
   故此处用 !important 让暗室变量真正落地，并匹配 20px 圆角体系。 */
:root {
  --halo-search-widget-base-font-size: 15px !important;
  --halo-search-widget-base-font-family: inherit !important;
  --halo-search-widget-base-rounded: var(--radius) !important;
  --halo-search-widget-base-bg-color: hsl(var(--bg)) !important;
  --halo-search-widget-primary-color: hsl(var(--accent)) !important;
  --halo-search-widget-muted-color: hsl(var(--text-dim)) !important;
  --halo-search-widget-content-color: hsl(var(--text)) !important;
  --halo-search-widget-modal-bg-color: hsl(var(--bg-2)) !important;
  --halo-search-widget-modal-layer-color: rgba(0, 0, 0, 0.62) !important;
  --halo-search-widget-hit-bg-color: hsl(var(--surface)) !important;
  --halo-search-widget-divider-color: hsl(var(--border)) !important;
  --halo-search-widget-kbd-border-color: hsl(var(--border)) !important;
  --halo-search-widget-kbd-shadow: 0 2px 0 0 hsl(var(--accent) / 0.18) !important;
  /* 已废弃但仍被弹窗面板实际取用（面板圆角走的还是它） */
  --halo-search-widget-base-border-radius: var(--radius) !important;
}

/* ============ 暗室搜索弹窗 ============
   骨架复用站点看板的 .dash-modal / .dash-panel / .dash-mask / .dash-scroll，
   只在此处补充「输入框 + 结果列表」两块，保证与看板同源、不另起一套弹窗。 */

/* 搜索面板比看板窄一档，更像一个检索抽屉 */
.search-modal .dash-panel {
  width: min(760px, 100%);
}
.search-modal .dash-scroll {
  padding-top: clamp(24px, 3vw, 38px);
}

/* ---- 输入框 ---- */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  transition: border-color 0.22s var(--ease-smooth), box-shadow 0.22s var(--ease-smooth);
}
.search-field:focus-within {
  border-color: hsl(var(--accent) / 0.55);
  box-shadow: 0 0 0 4px hsl(var(--accent) / 0.14);
}
.search-field > svg {
  flex: none;
  color: hsl(var(--text-dim));
}
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: hsl(var(--text));
  font: inherit;
  font-size: 16px;
}
.search-field input::placeholder {
  color: hsl(var(--text-dim));
}
/* 清屏按钮：仅在有输入时出现 */
.search-clear {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: hsl(var(--surface));
  color: hsl(var(--text-dim));
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.search-clear.show {
  display: flex;
}
.search-clear:hover {
  color: hsl(var(--text));
  background: hsl(var(--accent) / 0.18);
}

/* ---- 状态行 ---- */
.search-meta {
  min-height: 18px;
  margin: 12px 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: hsl(var(--text-dim));
}

/* ---- 结果列表 ---- */
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sr-item {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--surface) / 0.5);
  transition: border-color 0.2s, background 0.2s;
}
.sr-item:hover,
.sr-item.is-on {
  border-color: hsl(var(--accent));
  background: hsl(var(--surface));
}
.sr-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--text));
}
.sr-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: hsl(var(--text-dim));
}
/* 命中的关键词：强调色实心字，不用黄底（黄底会跳出暗室色域） */
.sr-item mark {
  background: transparent;
  color: hsl(var(--accent));
  font-weight: 700;
}

/* ---- 空态 / 失败态 ---- */
.search-empty {
  padding: 34px 4px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: hsl(var(--text-dim));
}
.search-empty .hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .search-modal .dash-panel {
    width: 100%;
  }
  .search-field input {
    font-size: 15px;
  }
  .sr-title {
    font-size: 14px;
  }
}