/* ==========================================================================
   站内搜索 + 微信分享（第三轮模块 B）
   --------------------------------------------------------------------------
   1) 搜索页：.qx-search-* / .qx-sg / .qx-sr
   2) 全站搜索面板：.qx-so-*（DOM 见 partials/search_overlay.php）
   3) 内容页分享条/分享面板：.qx-share-*（DOM 见 partials/share.php）
   --------------------------------------------------------------------------
   约定：
   - 只使用 site.css / skins.css 已定义的语义令牌（--surface / --ink / --brand /
     --line / --radius* / --shadow* / --bg-*），三套皮肤（deepblue/verdant/dark）
     自动跟随；个别反色场景在文末 [data-skin="dark"] 块里补充。
   - 所有新组件统一 qx- 前缀，避免与既有 .search/.tabs/.card 等组件冲突。
   - 移动端断点与 site.css 对齐：960px / 640px / 400px。
   ========================================================================== */

/* ==========================================================================
   一、搜索结果页
   ========================================================================== */

.qx-search-page { max-width: 980px; }

.page-head .qx-search-form { max-width: 640px; margin: 18px 0 0; }
.qx-search-form .search-box { margin: 0; }

.qx-search-hint { font-size: 12px; margin: 0 0 14px; }

/* 类型 tabs：复用 .tabs 结构，仅补计数角标与间距 */
.qx-search-tabs { margin-bottom: 22px; }
.qx-search-tabs a small {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-mute);
  color: var(--ink-3);
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
}
.qx-search-tabs a.on small {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand-700);
}

/* 全部模式：按类型分组的卡片 */
.qx-sg {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.qx-sg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.qx-sg-head h2 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qx-sg-count { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.qx-sg-list { display: flex; flex-direction: column; }

/* 单条结果 */
.qx-sr {
  padding: 12px 2px;
  border-bottom: 1px dashed var(--line);
}
.qx-sr:last-child { border-bottom: 0; padding-bottom: 2px; }
.qx-sg-list .qx-sr:first-child { padding-top: 10px; }
.qx-sr-title {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.qx-sr-title:hover { color: var(--brand); }
.qx-sr-title mark,
.qx-sr-summary mark {
  background: color-mix(in srgb, var(--warn) 26%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
  font-weight: 700;
}
.qx-sr-summary {
  margin: 4px 0 6px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.qx-sr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3);
}
.qx-sr-meta > span { display: inline-flex; align-items: center; gap: 4px; }

.qx-sr-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 6px 20px;
}

/* 空结果 / 搜索指引 */
.qx-search-empty { padding: 40px 24px; }
.qx-search-empty p { margin: 0 0 8px; }
.qx-search-empty .muted { font-size: 13px; }
.qx-search-empty-acts {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.qx-search-guide-title { font-size: 20px; margin: 0 0 6px; }
.qx-search-guide > .muted { font-size: 13px; margin: 0; }

.qx-search-hot { margin: 22px 0; }
.qx-search-hot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.qx-search-hot-head .ico { color: var(--brand); }
.qx-search-hot .chips { margin-bottom: 0; }

.qx-search-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.qx-search-col { display: flex; flex-direction: column; }
.qx-search-col h3 {
  font-size: 16px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qx-search-col p {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 10px;
  min-height: 42px;
}
.qx-search-col .more { font-size: 13px; margin-top: auto; }
.qx-search-cols-sm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.qx-search-col-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
}
.qx-search-col-link:hover { border-color: var(--brand-300); color: var(--brand); }

/* AI 提问引导条 */
.qx-search-ai-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--brand-50), var(--surface) 82%);
}
.qx-search-ai-cta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.qx-search-ai-cta > span .ico { color: var(--brand); }

/* ==========================================================================
   二、全站搜索面板
   ========================================================================== */

.qx-so {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
}
.qx-so.is-open { display: flex; }
.qx-so [hidden] { display: none !important; }

.qx-so-mask {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 32, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: qx-fade .16s ease-out;
}

.qx-so-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  padding: 24px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: qx-pop .18s var(--ease);
}

.qx-so-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qx-so-close:hover { color: var(--brand); border-color: var(--brand-300); }

.qx-so-title {
  margin: 0 0 4px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qx-so-title .ico { color: var(--brand); }
.qx-so-sub { margin: 0 0 16px; font-size: 13px; color: var(--ink-2); }

.qx-so-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--ring-brand);
}
.qx-so-field-i { color: var(--ink-3); font-size: 18px; }
.qx-so-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
}
.qx-so-input::placeholder { color: var(--ink-4); }
.qx-so-submit { height: 42px; padding: 0 18px; }

.qx-so-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.qx-so-radio { position: relative; display: inline-flex; }
.qx-so-radio input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.qx-so-radio span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.qx-so-radio input:checked + span {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.qx-so-radio input:focus-visible + span {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

.qx-so-hot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.qx-so-hot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.qx-so-hot-head .ico { color: var(--brand); }
.qx-so-hot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qx-so-hot-word {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.qx-so-hot-word:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand);
}

.qx-so-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-3);
}
.qx-so-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--brand);
}
.qx-so-ai:hover { color: var(--brand-700); }
.qx-so-hint { color: var(--ink-3); }

body.qx-so-open { overflow: hidden; }

/* ==========================================================================
   三、内容页分享条 / 分享面板
   ========================================================================== */

.qx-share {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.qx-share [hidden] { display: none !important; }

.qx-share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.qx-share-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-3);
}
.qx-share-label .ico { font-size: 14px; }
.qx-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.qx-share-btn .ico { font-size: 14px; }
.qx-share-btn:hover {
  color: var(--brand);
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.qx-share-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 90;
  display: none;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.qx-share-panel.is-open { display: block; animation: qx-pop .16s var(--ease); }

.qx-share-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}
.qx-share-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
}
.qx-share-close:hover { color: var(--brand); border-color: var(--brand-300); }

.qx-share-qr { text-align: center; }
.qx-share-qr-box {
  width: 168px;
  height: 168px;
  margin: 4px auto 8px;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #0a1722;
}
.qx-share-qr-box svg { display: block; width: 100%; height: 100%; }
.qx-share-qr-loading { font-size: 12px; color: #7e8c98; }
.qx-share-qr-fallback { font-size: 12px; line-height: 1.6; text-align: center; color: #44535f; }
.qx-share-qr-tip { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); }

.qx-share-wx {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--brand-100);
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--ink-2);
  font-size: 13px;
}
.qx-share-wx .ico { color: var(--brand); font-size: 18px; margin-top: 1px; }
.qx-share-wx p { margin: 0; line-height: 1.6; }

.qx-share-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.qx-share-copy-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--ink-2);
}
.qx-share-toast { max-width: calc(100vw - 32px); }

/* ==========================================================================
   四、动画
   ========================================================================== */

@keyframes qx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qx-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   五、暗色皮肤微调（其余颜色全部走语义令牌，自动跟随）
   ========================================================================== */

[data-skin="dark"] .qx-so-mask { background: rgba(2, 8, 14, .76); }
[data-skin="dark"] .qx-so-radio input:checked + span {
  background: color-mix(in srgb, var(--brand) 24%, transparent);
  border-color: var(--brand-400);
  color: var(--brand-300);
}
[data-skin="dark"] .qx-search-tabs a.on small {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--brand-300);
}
[data-skin="dark"] .qx-sr-title mark,
[data-skin="dark"] .qx-sr-summary mark {
  background: color-mix(in srgb, var(--warn) 32%, transparent);
  color: #fff;
}
[data-skin="dark"] .qx-search-ai-cta { background: linear-gradient(90deg, var(--brand-50), var(--surface) 82%); }
[data-skin="dark"] .qx-share-qr-box { border-color: var(--line-strong); }

/* ==========================================================================
   六、移动端
   ========================================================================== */

@media (max-width: 960px) {
  .qx-search-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .qx-search-cols { grid-template-columns: 1fr; gap: 10px; }
  .qx-search-col p { min-height: 0; }
  .qx-search-ai-cta { flex-direction: column; align-items: flex-start; }
  .qx-sg { padding: 14px; }
  .qx-sr-title { font-size: 15px; }
  .qx-sr-list { padding: 4px 14px; }

  /* 搜索面板：移动端为底部抽屉，最大化输入区域 */
  .qx-so { padding: 0; align-items: flex-end; }
  .qx-so-dialog {
    max-width: none;
    max-height: 92vh;
    overflow: auto;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: qx-sheet .2s var(--ease);
  }
  .qx-so-sub { font-size: 12px; }
  .qx-so-field { padding-left: 10px; }
  .qx-so-input { font-size: 16px; } /* 避免 iOS 聚焦自动放大 */

  /* 分享面板：移动端改成底部浮层，避免被 inline-flex 容器裁剪 */
  .qx-share-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-width: none;
    z-index: 150;
  }
  .qx-share-qr-box { width: 150px; height: 150px; }
}
@keyframes qx-sheet {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 400px) {
  .qx-so-submit { padding: 0 14px; font-size: 14px; }
  .qx-share-bar .qx-share-label { display: none; }
  .qx-search-empty-acts .btn { width: 100%; }
  .qx-search-empty-acts { flex-direction: column; }
}

/* 尊重「减少动态效果」系统设置 */
@media (prefers-reduced-motion: reduce) {
  .qx-so-mask,
  .qx-so-dialog,
  .qx-share-panel { animation: none !important; }
  .qx-share-btn,
  .qx-so-hot-word,
  .qx-so-radio span { transition: none !important; }
}