/* AI 搜索组件样式 —— 语义类 + 令牌层，无原子类依赖。
 *
 * 设计取向（对照竞品 yhwjdz.com 的三处不足）：
 *   ① 竞品弹窗深色写死（#1a1a1e）→ 只配深色站。我们【跟站点主题色走】：
 *      强调色继承站点令牌 var(--color-theme-primary)，明/暗两套由 theme 一个 prop 切。
 *   ② 竞品移动端 `hidden sm:flex` —— 直接把按钮砍掉。我们移动端做【全屏 sheet】。
 *   ③ 竞品答案「1. 2. 3.」全挤进一个 <li> 糊成一坨。我们正经渲染有序/无序列表。
 *
 * 浮层用原生 <dialog> + showModal() → top layer：
 *   不受祖先 transform / filter / backdrop-filter 影响（站点页头 .site-header 往往就带
 *   backdrop-filter —— 浮层若用 position:fixed 放在它里面必然跑偏）。
 *   ::backdrop 里【不用 CSS 变量】（旧浏览器的 ::backdrop 不从原始元素继承），只用字面值。
 *
 * 改名约定（相对平台物料 style.css）：`.mw3-ais*` → `ais-*`，`:where(.<instanceScope>) .n-<nodeId>`
 * 那层实例作用域包装直接删掉（一个 React 实例一棵子树，作用域由组件的挂载点天然决定）。
 */

/* ── 令牌层：强调色跟站点主题走，取不到再回落到默认蓝 ── */
.ai-search {
  /* 三段回退：props 传的 --ais-accent（内联）→ 站点主题令牌 → 组件默认值。
     站点工程只要改了 --color-theme-primary，按钮/焦点圈/思考点会一起变。 */
  --ais-accent: var(--color-theme-primary, #2563eb);
  --ais-radius: 16px;
  --ais-surface: #ffffff;
  --ais-surface-2: #f4f5f7;
  --ais-text: #16181d;
  --ais-text-dim: #6b7280;
  --ais-line: rgba(0, 0, 0, 0.08);
  --ais-danger: #d14343;
  display: inline-flex;
  align-items: center;
}

/* ── 形态 ①：inline（推荐）—— 自然流内元素，挂在页头/导航里 ──
 *
 * 组件根没有默认定位：放进页头就是页头里的一个普通 inline-flex 元素，
 * 与相邻的语言切换器/导航项同一基线，尺寸由页头容器的 gap / align-items 决定。
 * **站点不需要为它写任何 CSS**（这正是「内联」的定义）。
 *
 * 为什么这是推荐形态：原物料（`ai-search@2` 及 domestic/gaoyuan/zhizao 三套官网模板）
 * 就是把入口【内联在页头】、紧挨语言切换器 —— 见 README §3.1。
 */
/* 内联时图标不参与基线对齐：SVG 是 inline 元素，默认基线是它的底边，
   会让"图标 + 文字"整体比隔壁纯文字元素低 1–2px。 */
.ai-search[data-variant='inline'] .ais-btn svg {
  vertical-align: middle;
}

/* ── 形态 ②：floating（可选）—— 视口右下角固定悬浮 ──
 *
 * 🔴 定位规则**只在 floating 下生效**（早期版本这里是裸的 .ai-search 规则，
 *    站点换个挂法就不听话；收进形态选择器后，谁挂哪儿由 prop 说了算）。
 * 悬浮形态自带**不透明底**：固定元素会压在任何页面内容上，透明底会与
 * 背后的正文糊在一起（inline 形态不需要，它在页头里，底色由页头给）。
 */
.ai-search[data-variant='floating'] {
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* 站点的"回到顶部"通常是 z-index 99（本项目 back-to-top 就是 99）：
     入口要比它高，否则两个圆钮叠在一起时 AI 搜索点不到。 */
  z-index: 120;
}
.ai-search[data-variant='floating'] .ais-btn {
  background: var(--ais-surface);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.ai-search[data-variant='floating'] .ais-btn:hover {
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.ai-search[data-theme='dark'] {
  --ais-surface: #17181c;
  --ais-surface-2: #232529;
  --ais-text: #f2f3f5;
  --ais-text-dim: #9aa1ab;
  --ais-line: rgba(255, 255, 255, 0.1);
  --ais-danger: #ff7b7b;
}

/* ── 入口按钮 ── */
.ais-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ais-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ais-btn:hover {
  border-color: var(--ais-accent);
  background: color-mix(in srgb, var(--ais-accent) 10%, transparent);
}
.ais-btn:active {
  transform: scale(0.97);
}
.ais-btn:focus-visible {
  outline: 2px solid var(--ais-accent);
  outline-offset: 2px;
}
.ais-btn svg {
  width: 16px;
  height: 16px;
  color: var(--ais-accent);
  flex: none;
}

/* ── 浮层（top layer）── */
.ais-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
  /* showModal 本身居中；上移一点视线更自然。不动 position —— 交给 top layer。 */
  margin: 10vh auto auto;
  overflow: visible;
}
.ais-dialog::backdrop {
  background: rgba(9, 11, 16, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ais-panel {
  background: var(--ais-surface);
  color: var(--ais-text);
  border: 1px solid var(--ais-line);
  border-radius: var(--ais-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.18),
    0 40px 80px -24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  /* 只动 transform / opacity —— 合成器友好。 */
  animation: ais-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ais-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── 输入条 ── */
.ais-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ais-line);
}
.ais-bar svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ais-accent);
}
.ais-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ais-text);
  font: inherit;
  font-size: 16px; /* 16px 是为了 iOS 聚焦时不自动放大页面 */
  line-height: 1.5;
  padding: 6px 0;
}
.ais-input::placeholder {
  color: var(--ais-text-dim);
}
.ais-close {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--ais-surface-2);
  color: var(--ais-text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.ais-close:hover {
  background: var(--ais-accent);
  color: #fff;
}
.ais-close:focus-visible {
  outline: 2px solid var(--ais-accent);
  outline-offset: 2px;
}

/* ── 推荐问法药丸 ── */
.ais-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}
/* 已经开始问了就把药丸收起来：屏幕小的时候留着它们会挤掉答案的位置。 */
.ai-search[data-status='thinking'] .ais-chips,
.ai-search[data-status='streaming'] .ais-chips,
.ai-search[data-status='done'] .ais-chips,
.ai-search[data-status='empty'] .ais-chips {
  display: none;
}
.ais-chip {
  padding: 7px 12px;
  border: 1px solid var(--ais-line);
  border-radius: 999px;
  background: var(--ais-surface-2);
  color: var(--ais-text-dim);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ais-chip:hover {
  color: var(--ais-accent);
  border-color: var(--ais-accent);
  transform: translateY(-1px);
}
.ais-chip:focus-visible {
  outline: 2px solid var(--ais-accent);
  outline-offset: 2px;
}

/* ── 内容区 ── */
.ais-body {
  padding: 4px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain; /* 滚到底不要把整页带着滚 */
}
.ai-search[data-status='idle'] .ais-body {
  padding-bottom: 4px;
}
.ais-hint {
  margin: 0 0 10px;
  color: var(--ais-text-dim);
  font-size: 12px;
}

.ais-answer {
  font-size: 15px;
  line-height: 1.75;
}
.ais-p {
  margin: 10px 0;
}
.ais-list {
  margin: 10px 0;
  padding-left: 22px;
}
.ais-list li {
  margin: 5px 0;
}
.ais-answer strong {
  font-weight: 600;
  color: var(--ais-text);
}

/* 思考中 / 错误：同一个 aria-live 容器，只有一个文案位。 */
.ais-state {
  color: var(--ais-text-dim);
  font-size: 14px;
}
.ais-state:empty {
  display: none;
}
.ai-search[data-status='thinking'] .ais-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
/* 呼吸点：只动 opacity / transform，动画关掉后仍有形状（不会变成"什么都没发生"）。 */
.ai-search[data-status='thinking'] .ais-state::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ais-accent);
  animation: ais-pulse 1s ease-in-out infinite;
}
@keyframes ais-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.ai-search[data-status='error'] .ais-state {
  margin: 10px 0;
  color: var(--ais-danger);
}
/* 空态（后端确实没查出东西）：复用同一个状态文案位。缺省 texts.emptyText='' ⇒ `:empty` 收掉整行，
   所以这条规则对"没配过文案"的老站点没有任何可见影响。 */
.ai-search[data-status='empty'] .ais-state {
  margin: 10px 0;
}

/* ── 来源卡（引用卡）── */
.ais-srchead {
  margin: 18px 0 10px;
  color: var(--ais-text-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.ais-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ais-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--ais-line);
  border-radius: 12px;
  background: var(--ais-surface-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* 只有真的可点（<a>）才有悬停反馈 —— 降级成 <div> 的卡片不该看起来像链接。 */
a.ais-card:hover {
  border-color: var(--ais-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.2);
}
a.ais-card:focus-visible {
  outline: 2px solid var(--ais-accent);
  outline-offset: 2px;
}
.ais-cover {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.ais-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.ais-ctitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ais-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ais-csum {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ais-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 移动端：全屏 sheet（竞品在这里直接把按钮隐藏了 —— 我们不）── */
@media (max-width: 640px) {
  .ais-dialog {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }
  .ais-panel {
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .ais-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 🔴 移动端只留图标（文案挤不下页头）—— 图标本身仍是可点区域，
     按钮因此退化成 34×34 的方块；两条形态（inline / floating）都吃这条。
     可读名字不靠这段文字：按钮的 aria 名字来自 README §4 的 `buttonText`
     传值规则（传空串请自己补 aria-label，见组件顶注）。 */
  .ais-btn-text {
    display: none;
  }
  .ais-btn {
    padding: 8px;
    /* 图标居中：去掉文案后按钮变方，flex 的 gap 不再有作用，靠这行保证不变形。 */
    justify-content: center;
    min-height: 34px;
  }
}

/* 康曌站页头红底动作区：保留官方组件结构，只调整入口视觉与断点尺寸。 */
.hd-ai-search {
  flex: none;
}

.hd-ai-search .ais-btn {
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--red, #e60013);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(230, 0, 19, 0.22);
}

.hd-ai-search .ais-btn:hover {
  background: var(--red-dk, #c90011);
  box-shadow: 0 10px 24px rgba(230, 0, 19, 0.3);
  transform: translateY(-1px);
}

.hd-ai-search .ais-btn svg {
  color: #fff;
}

@media (max-width: 1360px) {
  .hd-ai-search .ais-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }
}

@media (max-width: 1279px) {
  .hd-ai-search .ais-btn {
    height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
    gap: 6px;
  }
}

@media (max-width: 1023px) {
  .hd-ai-search .ais-btn {
    padding: 0 11px;
    font-size: 13px;
    gap: 5px;
  }
}

@media (max-width: 900px) {
  .hd-ai-search {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .hd-ai-search .ais-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    gap: 5px;
  }
}

/* ── 无障碍：尊重"减少动效" ── */
@media (prefers-reduced-motion: reduce) {
  .ais-panel {
    animation: none;
  }
  .ais-btn,
  .ais-chip,
  .ais-card {
    transition: none;
  }
  /* 关掉呼吸动画后给个静止的实心点：否则思考中会看起来像"卡住了"。 */
  .ai-search[data-status='thinking'] .ais-state::before {
    animation: none;
    opacity: 1;
  }
}