/* ============================================================================
   wb-ui · web-search（联网搜索工具卡片）
   1:1 移植自 aicss.dev WebSearch.module.css（fetched 2026-08-13）。
   站点条目态：pending（虚线圈）→ loading（地球自转 + 标题 shimmer）→
   done（对勾，hover 出跳转箭头）。整卡 data-state：running（标签 shimmer）/
   ok（静态标签）/ error（danger 标签，降级形态）/ empty（不渲染）。
   真实数据无结构化结果列表（契约 2.3），接入时列表区降级为
   result_excerpt 文本行——.wbui-ws-excerpt。零裸色，全走 --wbui-*。
   ========================================================================== */

.wbui-web-search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 13px/1.4 var(--wbui-sans);
  color: var(--wbui-ws-text);
}

.wbui-ws-row { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.wbui-ws-row > svg { flex: none; color: var(--wbui-ws-muted); margin-left: -1px; }

.wbui-ws-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 550;               /* 上游原值 */
  color: var(--wbui-ws-text);
  white-space: nowrap;
  min-width: 0;
}
.wbui-ws-quote { overflow: hidden; text-overflow: ellipsis; }

.wbui-ws-shimmer {
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wbui-ws-text) 45%, transparent) 0%,
    var(--wbui-ws-text) 44%,
    color-mix(in srgb, var(--wbui-ws-text) 45%, transparent) 80%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wbui-ws-shimmer 2.7s linear infinite;
}
.wbui-web-search[data-state="ok"] .wbui-ws-shimmer,
.wbui-web-search[data-state="error"] .wbui-ws-shimmer {
  animation: none;
  background: none;
  -webkit-text-fill-color: var(--wbui-ws-text);
  color: var(--wbui-ws-text);
}
.wbui-web-search[data-state="error"] .wbui-ws-shimmer {
  -webkit-text-fill-color: var(--wbui-danger);
  color: var(--wbui-danger);
}
.wbui-web-search[data-state="empty"] { display: none; }

.wbui-ws-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--wbui-ws-subtle);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.16s var(--wbui-ws-ease), transform 0.28s var(--wbui-ws-ease);
}
.wbui-ws-chevron:hover { color: var(--wbui-ws-muted); }
.wbui-ws-chevron[aria-expanded="false"] { transform: rotate(180deg); }

.wbui-ws-collapsible {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s var(--wbui-ws-ease), opacity 0.22s var(--wbui-ws-ease);
}
.wbui-ws-collapsible.is-collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.wbui-ws-collapsible-inner { min-height: 0; overflow: hidden; }

.wbui-ws-results { position: relative; display: flex; gap: 6px; align-items: stretch; }
.wbui-ws-rail { flex: none; width: 1px; align-self: stretch; border-left: 1px solid var(--wbui-ws-border); margin-left: 5.5px; }
.wbui-ws-list { flex: 1; list-style: none; margin: 0; padding: 4px 0 2px 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.wbui-ws-site {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--wbui-ws-muted);
  min-width: 0;
  opacity: 0;
  transform: translateY(4px);
  animation: wbui-ws-enter 0.34s var(--wbui-ws-ease) forwards;
}
.wbui-ws-site[data-state="done"] { cursor: pointer; }

.wbui-ws-bullet { position: relative; width: 12px; height: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.wbui-ws-dots {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wbui-ws-subtle);
  opacity: 1;
  transition: opacity 0.32s var(--wbui-ws-ease);
  pointer-events: none;
}
.wbui-ws-dots svg, .wbui-ws-check svg { flex: none; }
.wbui-ws-site[data-state="loading"] .wbui-ws-dots,
.wbui-ws-site[data-state="done"] .wbui-ws-dots { opacity: 0; }
.wbui-ws-globe {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wbui-ws-subtle);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.32s var(--wbui-ws-ease), transform 0.36s var(--wbui-ws-ease);
}
.wbui-ws-site[data-state="loading"] .wbui-ws-globe { opacity: 1; transform: scale(1); }
.wbui-ws-site[data-state="done"] .wbui-ws-globe {
  opacity: 0;
  transform: scale(0.775);
  transition: opacity 0.22s var(--wbui-ws-ease), transform 0.26s var(--wbui-ws-ease);
}
.wbui-ws-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wbui-ws-success);
  opacity: 0;
  transform: scale(1.175);
  transition: opacity 0.24s var(--wbui-ws-ease) 0.06s, transform 0.28s var(--wbui-ws-ease) 0.06s;
}
.wbui-ws-site[data-state="done"] .wbui-ws-check { opacity: 1; transform: scale(1); }

.wbui-ws-title { color: var(--wbui-ws-text); font-weight: 450; white-space: nowrap; flex: none; }
.wbui-ws-site[data-state="pending"] .wbui-ws-title { color: var(--wbui-ws-muted); }
.wbui-ws-site[data-state="loading"] .wbui-ws-title {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wbui-ws-text) 50%, transparent) 0%,
    var(--wbui-ws-text) 44%,
    color-mix(in srgb, var(--wbui-ws-text) 50%, transparent) 80%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wbui-ws-shimmer 2.7s linear infinite;
}
.wbui-ws-sep { color: var(--wbui-ws-subtle); flex: none; }
.wbui-ws-url {
  color: var(--wbui-ws-muted);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.16s var(--wbui-ws-ease);
}
.wbui-ws-arrow {
  display: inline-flex;
  flex: none;
  color: var(--wbui-ws-subtle);
  margin-left: -2px;
  opacity: 0;
  transform: rotate(45deg) translate(0, 2px);
  transition: opacity 0.16s var(--wbui-ws-ease), transform 0.22s var(--wbui-ws-ease);
}
.wbui-ws-site[data-state="done"]:hover .wbui-ws-arrow { opacity: 1; transform: rotate(45deg) translate(0, 0); }
.wbui-ws-site[data-state="done"]:hover .wbui-ws-url { color: var(--wbui-ws-text); }

/* 真实数据降级形态：无结构化结果列表时，result_excerpt 以文本行呈现 */
.wbui-ws-excerpt {
  font-size: 12px;
  line-height: 18px;
  color: var(--wbui-ws-muted);
  white-space: pre-wrap;
  padding: 4px 0 2px 6px;
}

@keyframes wbui-ws-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes wbui-ws-enter { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .wbui-ws-shimmer,
  .wbui-ws-site[data-state="loading"] .wbui-ws-title {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--wbui-ws-text);
    color: var(--wbui-ws-text);
  }
  .wbui-ws-site { animation: none; opacity: 1; transform: none; }
}