/* 循证生活 · 全局样式补充 */

html {
  scroll-behavior: smooth;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.2);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.4);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #7C3AED;
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: rgba(124, 58, 237, 0.3);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ 浮动气泡（桌面端 ≥ 1280px） ============ */
.floating-host {
  /* 容器由 #floating-presets 提供 */
}

.floating-bubble {
  position: absolute;
  pointer-events: auto;
  z-index: 5;
  max-width: 200px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.4s;
  user-select: none;
  text-align: left;
  font-family: inherit;
}

.floating-bubble .type-label {
  display: inline-block;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  opacity: 0.7;
}

.floating-bubble .q {
  display: block;
  color: #fff;
  line-height: 1.35;
}

/* === 两种气泡样式 === */
/* 快速问：彩色 + 亮边框 + 发光 */
.floating-bubble.bubble-quick {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.floating-bubble.bubble-quick:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 30px -10px rgba(124, 58, 237, 0.5);
  transform: scale(1.05);
}

/* 别人在问：单色 + 低调（社会证明感） */
.floating-bubble.bubble-others {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.85;
}
.floating-bubble.bubble-others::before {
  content: '👥';
  display: inline-block;
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.6;
}
.floating-bubble.bubble-others:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

/* 悬停时暂停飘动动画 */
.floating-bubble:hover {
  animation-play-state: paused !important;
}

/* 6 个不同节奏的飘动 */
@keyframes float1 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(8px,-12px); } 50% { transform: translate(-6px,-6px); } 75% { transform: translate(4px,8px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-10px,6px); } 50% { transform: translate(8px,-8px); } 75% { transform: translate(-4px,4px); } }
@keyframes float3 { 0%,100% { transform: translate(0,0); } 33% { transform: translate(6px,8px); } 66% { transform: translate(-8px,-4px); } }
@keyframes float4 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(12px,-4px); } 50% { transform: translate(-8px,8px); } 75% { transform: translate(-4px,-8px); } }
@keyframes float5 { 0%,100% { transform: translate(0,0); } 33% { transform: translate(-8px,-6px); } 66% { transform: translate(6px,10px); } }
@keyframes float6 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(8px,10px); } 50% { transform: translate(-6px,-8px); } 75% { transform: translate(10px,4px); } }

.floating-bubble.anim-float1 { animation: float1 14s ease-in-out infinite; }
.floating-bubble.anim-float2 { animation: float2 16s ease-in-out infinite; }
.floating-bubble.anim-float3 { animation: float3 18s ease-in-out infinite; }
.floating-bubble.anim-float4 { animation: float4 13s ease-in-out infinite; }
.floating-bubble.anim-float5 { animation: float5 17s ease-in-out infinite; }
.floating-bubble.anim-float6 { animation: float6 15s ease-in-out infinite; }

/* 移动端 / 平板：完全不显示气泡（避免遮挡） */
@media (max-width: 1279px) {
  .floating-bubble { display: none !important; }
}

/* ============ 气泡内：倒计时 + 头部布局 ============ */
.floating-bubble .bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.floating-bubble .countdown {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s, color 0.2s;
}

.floating-bubble .countdown.urgent {
  background: rgba(245, 158, 11, 0.25);
  color: #FCD34D;
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============ 右下角控制按钮 ============ */
#bubble-controls {
  /* 由 Tailwind utility class 设置定位 */
}

.ctrl-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(20, 18, 31, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.ctrl-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.5);
  color: #fff;
  transform: scale(1.05);
}

.ctrl-btn.is-paused {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #FCD34D;
}

.ctrl-btn.spinning svg {
  animation: spin 0.5s ease-out;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 移动端：控制按钮放右下角但缩小 */
@media (max-width: 640px) {
  #bubble-controls {
    bottom: 4rem !important;  /* 留出底部输入框空间 */
    right: 1rem !important;
  }
  .ctrl-btn {
    width: 36px;
    height: 36px;
  }
}