@charset "utf-8";
/* ============================================================
   hb-ai-empty.css  —  「AI分析」空态重设计（2026-11-02）
   作用域：.hb-ai-panel.hb-ai-empty-mode
   只做视觉，不动 React 结构与业务逻辑
   ============================================================ */

/* ---------- 面板底色 ---------- */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-shell{
  background:transparent !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-body{
  padding:0 !important;
  gap:0 !important;
  border-radius:14px !important;
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(109,94,252,.075) 0%, rgba(59,130,246,.032) 45%, transparent 76%),
    linear-gradient(180deg,#fcfdff 0%,#f7faff 100%) !important;
}

/* ---------- 头部 ---------- */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head{
  margin:0 !important;
  padding:12px 14px !important;
  gap:10px !important;
  align-items:center !important;
  border-bottom:1px solid #edf2fa !important;
  background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  backdrop-filter:saturate(1.1) blur(8px);
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head > div:first-child{
  gap:9px !important;
  align-items:center !important;
}
/* 标题图标 → 紫蓝渐变胶囊 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head > div:first-child > svg{
  width:15px !important;height:15px !important;
  padding:7px !important;box-sizing:content-box !important;
  border-radius:10px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#8b7bff 0%,#6d5efc 42%,#3b82f6 100%) !important;
  box-shadow:0 6px 14px -3px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
  flex:none !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head > div:first-child > span:not(.inline-flex){
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:#0e1a31 !important;
}
/* 「未分析」胶囊 → 呼吸小圆点 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head span.inline-flex{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  height:20px !important;
  padding:0 9px 0 8px !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  color:#a8660a !important;
  background:#fff8ea !important;
  border:1px solid #fbe2b4 !important;
  box-shadow:none !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head span.inline-flex::before{
  content:"" !important;
  width:5px !important;height:5px !important;
  border-radius:50% !important;
  background:#f59e0b !important;
  box-shadow:0 0 0 0 rgba(245,158,11,.55);
  animation:hb-ai-pulse 1.9s ease-out infinite;
  flex:none;
}

/* 按钮 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button{
  height:30px !important;
  min-height:30px !important;
  padding:0 12px !important;
  border-radius:9px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  gap:5px !important;
  transition:transform .16s ease, box-shadow .2s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button svg{ width:13px !important;height:13px !important; }
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button:first-of-type{
  background:#fff !important;
  border:1px solid #e6ecf8 !important;
  color:#5b6b85 !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button:first-of-type:hover{
  color:#1d4ed8 !important;
  border-color:#c9d9f7 !important;
  background:#f8fbff !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button:last-of-type{
  background:linear-gradient(135deg,#8b7bff 0%,#6d5efc 45%,#3b82f6 100%) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 6px 16px -4px rgba(99,102,241,.55) !important;
}
.hb-ai-panel.hb-ai-empty-mode .hb-ai-head button:last-of-type:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -5px rgba(99,102,241,.62) !important;
}

/* ---------- 空态容器 ---------- */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty{
  position:relative !important;
  padding:30px 24px 26px !important;
  gap:0 !important;
  justify-content:center !important;
  overflow:hidden !important;
  isolation:isolate;
}
/* 背景：柔光 + 点阵 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 12%, rgba(124,108,255,.11) 0%, transparent 52%),
    radial-gradient(circle at 50% 88%, rgba(59,130,246,.085) 0%, transparent 58%),
    radial-gradient(rgba(15,23,42,.055) 1px, transparent 1.2px);
  background-size:auto, auto, 20px 20px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}

/* ---------- 主视觉：浮动光球 + 环形扫描 ---------- */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji{
  position:relative !important;
  z-index:1;
  width:156px !important;height:156px !important;
  margin:0 0 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  font-size:60px !important;
  line-height:1 !important;
  background-image:
    linear-gradient(180deg, rgba(124,108,255,0) 33%, rgba(124,108,255,.22) 50%, rgba(124,108,255,0) 67%),
    radial-gradient(circle at 50% 34%, #ffffff 0%, #f8faff 50%, #ecf1ff 100%) !important;
  background-size:100% 190%, 100% 100% !important;
  background-position:0 -140%, 50% 50% !important;
  background-repeat:no-repeat, no-repeat !important;
  outline:1px solid rgba(124,108,255,.13) !important;
  outline-offset:7px !important;
  box-shadow:
    0 0 0 1px rgba(124,108,255,.22),
    0 18px 40px -14px rgba(74,94,180,.38),
    inset 0 2px 0 #ffffff,
    inset 0 -14px 26px -18px rgba(99,102,241,.45) !important;
  animation:hb-ai-float 6.4s ease-in-out infinite, hb-ai-scan 3.6s ease-in-out infinite;
  filter:drop-shadow(0 10px 26px rgba(99,102,241,.16));
}
/* 旋转光环 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji::before{
  content:"" !important;
  position:absolute !important;
  inset:-14px !important;
  border-radius:50% !important;
  z-index:-1;
  background:conic-gradient(from 0deg,
    rgba(124,108,255,0) 0deg,
    rgba(124,108,255,.00) 32deg,
    rgba(124,108,255,.82) 108deg,
    rgba(59,130,246,.85) 176deg,
    rgba(124,108,255,.00) 252deg,
    rgba(124,108,255,0) 360deg) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:hb-ai-spin 5.2s linear infinite;
  opacity:.85;
  pointer-events:none;
}
/* 外发光 + 十字准星 */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji::after{
  content:"" !important;
  position:absolute !important;
  inset:-38px !important;
  border-radius:50% !important;
  z-index:-2;
  background:
    radial-gradient(circle, rgba(124,108,255,.14) 0%, rgba(59,130,246,.06) 46%, transparent 70%);
  pointer-events:none;
}

/* ---------- 文案 ---------- */
.hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-title{
  position:relative !important;
  z-index:1;
  margin:0 !important;
  font-size:16.5px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:#0e1a31 !important;
  text-align:center !important;
}
.hb-ai-empty-sub{
  position:relative;
  z-index:1;
  margin:9px 0 0 !important;
  max-width:330px;
  font-size:12px;
  line-height:1.75;
  color:#8593a8;
  text-align:center;
}

/* ---------- 能力卡片 2×2 ---------- */
.hb-ai-empty-feats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  max-width:372px;
  margin:22px 0 0 !important;
}
.hb-ai-empty-feat{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.86);
  border:1px solid #e9effb;
  box-shadow:0 1px 2px rgba(12,18,34,.035);
  text-align:left;
  transition:transform .18s ease, box-shadow .2s ease, border-color .18s ease, background .18s ease;
}
.hb-ai-empty-feat:hover{
  transform:translateY(-1px);
  border-color:#d8e3fb;
  background:#fff;
  box-shadow:0 8px 18px -8px rgba(74,94,180,.35);
}
.hb-ai-empty-feat-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px;height:26px;
  flex:none;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(124,108,255,.13), rgba(59,130,246,.11));
  color:#6d5efc;
}
.hb-ai-empty-feat-ico svg{ width:14px !important;height:14px !important; }
.hb-ai-empty-feat-txt{ min-width:0; }
.hb-ai-empty-feat-txt b{
  display:block;
  font-size:11.5px;
  font-weight:600;
  line-height:1.35;
  color:#22304a;
  white-space:nowrap;
}
.hb-ai-empty-feat-txt span{
  display:block;
  font-size:10px;
  line-height:1.4;
  color:#97a4b8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- 主按钮 ---------- */
.hb-ai-empty-cta{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:22px 0 0 !important;
  height:42px;
  min-width:196px;
  padding:0 24px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg,#8b7bff 0%,#6a5cfb 42%,#3b82f6 100%);
  box-shadow:
    0 12px 28px -10px rgba(91,108,249,.85),
    0 2px 6px rgba(91,108,249,.22),
    inset 0 1px 0 rgba(255,255,255,.30);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .22s ease, filter .2s ease;
}
.hb-ai-empty-cta::after{
  content:"";
  position:absolute;
  top:-10%;
  left:-70%;
  width:38%;
  height:120%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform:skewX(-18deg);
  animation:hb-ai-sheen 3.8s ease-in-out infinite;
  pointer-events:none;
}
.hb-ai-empty-cta:hover{
  transform:translateY(-1.5px);
  box-shadow:
    0 18px 34px -12px rgba(91,108,249,.9),
    0 3px 8px rgba(91,108,249,.25),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.hb-ai-empty-cta:active{
  transform:translateY(0) scale(.985);
}
.hb-ai-empty-cta[data-busy="1"]{
  filter:saturate(.8);
  opacity:.85;
  pointer-events:none;
}
.hb-ai-empty-cta svg{ flex:none; opacity:.95; }

.hb-ai-empty-hint{
  position:relative;
  z-index:1;
  margin:12px 0 0 !important;
  font-size:10.5px;
  color:#a6b2c4;
  letter-spacing:.01em;
  text-align:center;
}

/* ---------- 窄栏自适应 ---------- */
.hb-ai-panel.hb-ai-narrow.hb-ai-empty-mode .hb-ai-empty{ padding:24px 14px 22px !important; }
.hb-ai-panel.hb-ai-narrow.hb-ai-empty-mode .hb-ai-empty-emoji{ width:128px !important;height:128px !important;font-size:48px !important; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feats{ max-width:100%; gap:7px; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feat{ padding:8px 9px; gap:7px; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feat-ico{ width:22px;height:22px;border-radius:7px; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feat-ico svg{ width:12px !important;height:12px !important; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feat-txt b{ font-size:11px; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-feat-txt span{ font-size:9.5px; }
.hb-ai-panel.hb-ai-narrow .hb-ai-empty-hint{ font-size:10px; }

/* ---------- 极窄栏（1366 笔记本被挤到 ~120px）---------- */
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head{
  padding:8px 8px !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head > div:first-child{ gap:6px !important; }
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head > div:first-child > svg{
  width:12px !important;height:12px !important;padding:5px !important;border-radius:8px !important;
}
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head > div:first-child > span:not(.inline-flex){ font-size:12px !important; }
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head button{
  height:26px !important;min-height:26px !important;padding:0 8px !important;font-size:10.5px !important;
}
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-empty{ padding:18px 8px 16px !important; }
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-scroller{ overflow-x:hidden !important; }
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-head{ overflow:hidden !important; }
.hb-ai-panel.hb-ai-xxs.hb-ai-empty-mode .hb-ai-empty-emoji{
  width:88px !important;height:88px !important;font-size:34px !important;
  margin-bottom:14px !important;outline-offset:5px !important;
}
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-sub,
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-feats,
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-hint{ display:none !important; }
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-title{ font-size:12.5px !important;line-height:1.5 !important;padding:0 2px; }
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-cta{
  width:100% !important;min-width:0 !important;height:34px !important;
  padding:0 8px !important;margin-top:14px !important;gap:5px !important;
  font-size:11px !important;border-radius:10px !important;
}
.hb-ai-panel.hb-ai-xxs .hb-ai-empty-cta svg{ width:12px !important;height:12px !important; }

/* 更矮的窗口（<620px 高）压缩留白 */
@media (max-height:620px){
  .hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji{ width:112px !important;height:112px !important;font-size:38px !important;margin-bottom:16px !important; }
  .hb-ai-empty-feats{ margin-top:16px !important; }
  .hb-ai-empty-cta{ margin-top:16px !important; }
}

/* ---------- 动效 ---------- */
@keyframes hb-ai-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}
@keyframes hb-ai-spin{
  to{ transform:rotate(360deg); }
}
@keyframes hb-ai-scan{
  0%  { background-position:0 -140%, 50% 50%; }
  55% { background-position:0 140%, 50% 50%; }
  100%{ background-position:0 140%, 50% 50%; }
}
@keyframes hb-ai-sheen{
  0%  { left:-70%; }
  55% { left:130%; }
  100%{ left:130%; }
}
@keyframes hb-ai-pulse{
  0%  { box-shadow:0 0 0 0 rgba(245,158,11,.55); }
  70% { box-shadow:0 0 0 6px rgba(245,158,11,0); }
  100%{ box-shadow:0 0 0 0 rgba(245,158,11,0); }
}

@media (prefers-reduced-motion: reduce){
  .hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji,
  .hb-ai-panel.hb-ai-empty-mode .hb-ai-empty-emoji::before,
  .hb-ai-empty-cta::after,
  .hb-ai-panel.hb-ai-empty-mode .hb-ai-head span.inline-flex::before{
    animation:none !important;
  }
}