/* th-home.css V6 — 图书馆大厅空间 + 可旋转星球 */

/* ===== Container ===== */
#tab-home {
  background: #2a2520 !important;
  overflow: hidden !important;
  position: relative !important;
  height: calc(100vh - 112px) !important;
  min-height: 500px !important;
}
#tab-home .home-content,
#tab-home .welcome-banner,
#tab-home .section-title,
#tab-home .agent-grid,
#tab-home .agent-card,
#tab-home .usage-card { display: none !important; }

.th-container { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* ===== BG Image ===== */
.th-bg-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  background: url('library-bg-v2.jpg') center/cover no-repeat;
  filter: brightness(1.3);
}
.th-bg-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  background: rgba(15,12,8,0.18);
}
#th-bg-canvas { display: none; }

/* Warm lights */
.th-wl { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.th-wl-a { top: -8%; left: 50%; transform: translateX(-50%); width: 90vw; height: 50vh; background: radial-gradient(ellipse at 50% 0%, rgba(255,220,160,.12), transparent 60%); animation: thWlP 5s ease-in-out infinite alternate; }
.th-wl-b { top: 15%; left: -5%; width: 30vw; height: 30vh; background: radial-gradient(circle, rgba(180,140,80,.06), transparent 65%); animation: thWlP 7s ease-in-out infinite alternate-reverse; }
.th-wl-c { top: 15%; right: -5%; width: 30vw; height: 30vh; background: radial-gradient(circle, rgba(200,160,100,.06), transparent 65%); animation: thWlP 6s ease-in-out infinite alternate; }
@keyframes thWlP { 0% { opacity: .4; } 100% { opacity: 1; } }

/* Lanterns */
.th-lantern { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; animation: thLG 3s ease-in-out infinite alternate; }
.th-lantern-a { width: 16px; height: 16px; top: 6%; left: 30%; background: radial-gradient(circle, rgba(255,200,100,.5), rgba(255,180,80,.08) 55%, transparent); }
.th-lantern-b { width: 14px; height: 14px; top: 7%; right: 30%; background: radial-gradient(circle, rgba(255,200,100,.45), rgba(255,180,80,.06) 55%, transparent); animation-delay: 1.2s; }
.th-lantern-c { width: 10px; height: 10px; top: 4%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,210,120,.55), rgba(255,180,80,.1) 55%, transparent); animation-delay: .5s; }
@keyframes thLG { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 1; } }

/* Dust canvas */
#th-dust-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* Orbit ring */
#th-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(212,165,116,.03); z-index: 3; pointer-events: none; }

/* SVG lines */
#th-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.th-conn { stroke: rgba(212,165,116,.025); stroke-width: 1; stroke-dasharray: 3 5; }

/* ===== CENTER ===== */
.th-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; pointer-events: none; }
.th-av-wrap { position: relative; display: inline-block; margin-bottom: 8px; pointer-events: auto; cursor: pointer; }
.th-av-circle { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #6b4a08, #c49060); display: flex; align-items: center; justify-content: center; font-size: 50px; position: relative; z-index: 2; box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 25px rgba(212,165,116,.3); border: 3px solid rgba(255,255,255,.3); }
.th-av-orbit { position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid transparent; background: conic-gradient(from 0deg, #d4a574, #8b6914, #f0d9b5, #d4a574) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: thAvSpin 4s linear infinite; }
@keyframes thAvSpin { to { transform: rotate(360deg); } }
.th-av-pulse { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(212,165,116,.1); animation: thAvP 2.5s ease-out infinite; }
@keyframes thAvP { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
.th-av-platform { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 90px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse, rgba(212,165,116,.1), transparent 70%); }
.th-center-name { font-size: 17px; font-weight: 800; color: #2a1800; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(255,255,255,.4); }
.th-center-role { font-size: 10px; color: rgba(212,165,116,.5); margin-top: 1px; }

/* ===== SPEECH ===== */
.th-speech { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 11; max-width: 320px; width: 88vw; background: #ffffff; border: 2px solid rgba(0,0,0,.1); border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 20px rgba(0,0,0,.25); font-size: 13px; line-height: 1.7; color: #333333; opacity: 0; transition: opacity .5s; }
.th-speech.th-vis { opacity: 1; }
.th-speech::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #ffffff; border-left: 2px solid rgba(0,0,0,.1); border-top: 2px solid rgba(0,0,0,.1); }
.th-speech .hl { color: #6C5CE7; font-weight: 700; }
.th-cursor { display: inline-block; width: 2px; height: 12px; background: #d4a574; margin-left: 1px; vertical-align: text-bottom; animation: thCurB .6s step-end infinite; }
@keyframes thCurB { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ===== NODES ===== */
.th-node { position: absolute; z-index: 5; cursor: pointer; transition: transform .3s cubic-bezier(.4,0,.2,1); will-change: transform, left, top; }
.th-node-dot { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; position: relative; transition: all .35s cubic-bezier(.4,0,.2,1); }
.th-node-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }

/* Active = enlarged */
.th-node.active .th-node-dot { transform: scale(1.5); z-index: 30; }

.th-nd-cyan{background:#00b4dc;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-cyan{box-shadow:0 0 35px rgba(0,180,220,.3)}
.th-nd-purple{background:#a855f7;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-purple{box-shadow:0 0 35px rgba(168,85,247,.3)}
.th-nd-pink{background:#dc648c;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-pink{box-shadow:0 0 35px rgba(220,100,140,.3)}
.th-nd-green{background:#34b478;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-green{box-shadow:0 0 35px rgba(52,180,120,.3)}
.th-nd-amber{background:#d4a574;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-amber{box-shadow:0 0 35px rgba(212,165,116,.3)}
.th-nd-blue{background:#3b82f6;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-blue{box-shadow:0 0 35px rgba(59,130,246,.3)}
.th-nd-indigo{background:#818cf8;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-indigo{box-shadow:0 0 35px rgba(129,140,248,.3)}
.th-nd-rose{background:#e66478;border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.th-node.active .th-nd-rose{box-shadow:0 0 35px rgba(230,100,120,.3)}

.th-node-label { text-align: center; margin-top: 6px; font-size: 13px; font-weight: 700; color: #3a2a10; text-shadow: 0 1px 2px rgba(255,255,255,.5); white-space: nowrap; transition: all .3s; }
.th-node.active .th-node-label { color: #1a0e00; font-weight: 800; font-size: 14px; text-shadow: 0 1px 3px rgba(255,255,255,.6); }

/* Tooltip */
.th-node-tip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) scale(.8); width: 210px; background: #ffffff; border: 2px solid rgba(0,0,0,.15); border-radius: 12px; padding: 14px 16px; box-shadow: 0 4px 20px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.4,0,.2,1); z-index: 20; }
.th-node-tip::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #ffffff; border-right: 2px solid rgba(0,0,0,.15); border-bottom: 2px solid rgba(0,0,0,.15); }
.th-node.active .th-node-tip { opacity: 1; transform: translateX(-50%) scale(1); }
.th-tip-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
.th-tip-desc { font-size: 12px; color: #444444; line-height: 1.5; }
.th-tip-enter { display: block; margin-top: 8px; text-align: center; padding: 7px 0; border-radius: 6px; background: #6C5CE7; border: none; font-size: 12px; color: #ffffff; font-weight: 700; }

/* Hints */
.th-hint { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 11; font-size: 10px; color: rgba(212,165,116,.25); letter-spacing: 3px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.th-hint.th-vis { opacity: 1; animation: thHP 3s ease-in-out infinite; }
@keyframes thHP { 0%,100% { opacity: .15; } 50% { opacity: .4; } }

/* Node track */
#th-orbit-track { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* ===== FLOATING XIAOXUE CHARACTER (bottom-right) ===== */
.th-xiaoxue {
  position: absolute; bottom: 14%; left: 12px; z-index: 12;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.th-xiaoxue-bubble {
  background: #ffffff; border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 12px 12px 12px 4px; padding: 10px 13px;
  max-width: 240px; min-width: 80px; max-height: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: 12px; line-height: 1.65; color: #333333;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  overflow-y: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  opacity: 0; transform: translateY(8px) scale(.92);
  transition: opacity .4s, transform .4s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}
.th-xiaoxue-bubble.th-bubble-vis {
  opacity: 1; transform: translateY(0) scale(1);
}
.th-xiaoxue-bubble .hl { color: #6C5CE7; font-weight: 600; }
.th-xiaoxue-bubble .th-cursor { display: inline-block; width: 2px; height: 11px; background: #6C5CE7; margin-left: 1px; vertical-align: text-bottom; animation: thCurB .6s step-end infinite; }

.th-xiaoxue-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #8b6914, #d4a574);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 16px rgba(212,165,116,.25);
  position: relative;
  animation: thXxBounce 3s ease-in-out infinite;
  transition: transform .2s;
}
.th-xiaoxue-avatar:active { transform: scale(.9); }
.th-xiaoxue-avatar::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(212,165,116,.15);
  animation: thAvP 2.5s ease-out infinite;
}
@keyframes thXxBounce {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-6px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
  60% { transform: translateY(0); }
}

/* Speech wave dots while typing */
.th-xiaoxue-wave { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.th-xiaoxue-wave span {
  width: 4px; height: 4px; border-radius: 50%; background: #6C5CE7;
  animation: thWaveDot .9s ease-in-out infinite;
}
.th-xiaoxue-wave span:nth-child(2) { animation-delay: .15s; }
.th-xiaoxue-wave span:nth-child(3) { animation-delay: .3s; }
@keyframes thWaveDot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* Name tag */
.th-xiaoxue-name {
  font-size: 9px; color: rgba(212,165,116,.5); text-align: center;
  margin-top: -2px; letter-spacing: 1px;
}

@media (max-width: 380px) {
  .th-xiaoxue-avatar { width: 44px; height: 44px; font-size: 24px; }
  .th-xiaoxue-bubble { max-width: 200px; max-height: 150px; font-size: 11px; }
}

/* Paused state for xiaoxue avatar */
.th-xiaoxue-avatar.th-xx-paused {
  animation: none !important;
  opacity: .5;
  filter: grayscale(.4);
}
.th-xiaoxue-avatar.th-xx-paused::before {
  content: '⏸';
  position: absolute; top: -6px; right: -6px;
  font-size: 12px; background: rgba(15,12,8,.85);
  border-radius: 50%; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,165,116,.2);
}
/* Fluid typing cursor */
.th-cursor { display: inline-block; width: 2px; height: 1em; background: #d4a574; margin-left: 1px; vertical-align: text-bottom; animation: thCursorBlink .6s step-end infinite; }
@keyframes thCursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }