/* ============================================================
   treehole.css — 心情树洞：心情选择、气泡、打字机、按钮
   ============================================================ */

.treehole {
  padding: var(--space-6);
}

/* ---------- 心情按钮组 ---------- */
.treehole__moods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-6);
}

.mood {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base) ease,
    border-color var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.mood i {
  font-style: normal;
  font-size: 18px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.mood:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--glass-border-hover);
  color: var(--ink);
}
.mood:hover i {
  transform: scale(1.22) rotate(-6deg);
}
.mood:active {
  transform: translateY(-1px) scale(0.97);
}

/* 选中态：暖橘光晕 */
.mood.is-active {
  color: #221106;
  background: linear-gradient(135deg, var(--lamp-core), var(--lamp));
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(255, 154, 77, 0.16), var(--glow-lamp);
  font-weight: 600;
}
.mood.is-active i {
  transform: scale(1.12);
}

/* 点击时的扩散涟漪 */
.mood__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 200, 140, 0.5);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: ripple 0.7s var(--ease-out) forwards;
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ---------- 气泡舞台 ---------- */
.treehole__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.treehole__bubble {
  position: relative;
  min-height: 132px;
  display: flex;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 184, 112, 0.09), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 184, 112, 0.14);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.treehole__bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 34px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-left: 1px solid rgba(255, 184, 112, 0.14);
  border-top: 1px solid rgba(255, 184, 112, 0.14);
  transform: rotate(45deg);
  border-radius: 3px;
}
.treehole__bubble.is-pop {
  animation: bubblePop 0.5s var(--ease-spring);
}
@keyframes bubblePop {
  0% {
    transform: scale(0.96);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.014);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.treehole__text {
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink);
  letter-spacing: 0.015em;
}
/* 打字机光标 */
.treehole__text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.18em;
  background: var(--lamp);
  opacity: 0;
  border-radius: 2px;
}
.treehole__text.is-typing::after {
  opacity: 1;
  animation: caret 0.9s steps(2) infinite;
}
@keyframes caret {
  50% {
    opacity: 0.1;
  }
}

/* ---------- 操作按钮 ---------- */
.treehole__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) ease,
    background var(--dur-base) ease, opacity var(--dur-base) ease, border-color var(--dur-base) ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--ghost {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn--ghost:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
}

.btn--warm {
  color: #221106;
  font-weight: 600;
  background: linear-gradient(135deg, var(--lamp-bright), var(--lamp-deep));
  box-shadow: 0 10px 26px -12px rgba(232, 116, 59, 0.9);
}
.btn--warm:hover:not(:disabled) {
  box-shadow: 0 14px 32px -12px rgba(255, 154, 77, 0.95), var(--glow-soft);
}

/* ---------- 计数 ---------- */
.treehole__counter {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  color: var(--ink-ghost);
  letter-spacing: 0.03em;
}
.treehole__counter b {
  color: var(--lamp-bright);
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .treehole {
    padding: var(--space-5) var(--space-4);
  }
  .mood {
    padding: 9px 13px;
    font-size: var(--fs-xs);
  }
  .treehole__bubble {
    padding: var(--space-4);
    min-height: 118px;
  }
  .treehole__text {
    font-size: 15.5px;
  }
}