/* ScreenBuddy (web) — hoạt động hằng ngày: 🌱 cây kỷ niệm (room.js + activities.js), 🕊 câu hỏi 8 giờ tối (questions.js). */

/* Chấm hồng nhỏ trên nút: thư tối nay còn đợi / cây hôm nay chưa tưới — nhắc khẽ, không nhấp nháy */
.action-bar .act-btn.dot {
  position: relative;
}

.action-bar .act-btn.dot::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6f91;
  box-shadow: 0 0 0 2px var(--panel, #1c1f2e);
}

/* =====================================================================
 * 🌱 Cây kỷ niệm
 * ===================================================================== */
.tree-pot { fill: #d9885f; }
.tree-rim { fill: #e79b71; }
.tree-trunk { fill: #8a5a35; }
.tl { fill: #6bb07a; }
.tl2 { fill: #5aa469; }
.tc1 { fill: #5aa469; }
.tc2 { fill: #4a8f5a; }
.tc3 { fill: #6bb07a; }
.theme-night .tc1,
.theme-night .tl2 { fill: #4f8f64; }
.theme-night .tc2 { fill: #3e7a52; }
.theme-night .tc3,
.theme-night .tl { fill: #5ea372; }

.furn-plant .tree-art {
  position: absolute;
  inset: 0;
}

.furn-plant .tree-green {
  transform-box: view-box;
  transform-origin: 43px 125px;
  transition: transform 0.8s ease, filter 0.8s ease;
}

.furn-plant .tree-fallen {
  display: none;
}

/* Cây rũ: lá nghiêng xuống, bạc màu, vài chiếc lá rụng trên đất (không chết) */
.furn-plant.wilted .tree-green {
  filter: saturate(0.35) sepia(0.45) brightness(0.95);
  transform: rotate(9deg) translateY(4px) scaleY(0.94);
}

.furn-plant.wilted .tree-fallen {
  display: inline;
}

/* Gió nhẹ lay cây */
.furn-plant:not(.wilted) .tree-green {
  animation: tree-sway 6s ease-in-out infinite;
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.6deg); }
}

/* Huy hiệu nhỏ trên ngọn cây: 💧 hôm nay mình chưa tưới · 🤗 n/5 khi cây rũ */
.tree-badge {
  position: absolute;
  left: 50%;
  top: calc(var(--tree-top, 96px) - 30px);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #2b6cb0;
  font: 700 13px/18px "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  animation: tree-bob 2.6s ease-in-out infinite;
}

.tree-badge[hidden] {
  display: none;
}

.tree-badge.hug {
  color: #c2466e;
  font-size: 12px;
}

@keyframes tree-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

/* Bình tưới + giọt nước */
.tree-can,
.tree-drops,
.tree-spark {
  position: absolute;
  pointer-events: none;
}

.tree-can {
  display: none;
  left: 50%;
  top: calc(var(--tree-top, 96px) - 44px);
  width: 44px;
  margin-left: -8px;
  height: 30px;
  transform-origin: 30% 80%;
}

.tree-drops {
  left: 50%;
  top: calc(var(--tree-top, 96px) - 14px);
  width: 30px;
  margin-left: -15px;
  height: 60px;
}

.tree-drop {
  position: absolute;
  top: 0;
  width: 4px;
  height: 7px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #7cc4f5;
  opacity: 0;
}

.tree-drop.d0 { left: 2px; }
.tree-drop.d1 { left: 8px; }
.tree-drop.d2 { left: 14px; }
.tree-drop.d3 { left: 5px; }
.tree-drop.d4 { left: 11px; }
.tree-drop.d5 { left: 17px; }

.furn-plant.watering .tree-can {
  display: block;
  animation: can-tilt 1.9s ease forwards;
}

.furn-plant.watering .tree-drop {
  animation: drop-fall 0.55s ease-in 3;
}

.furn-plant.watering .tree-drop.d1,
.furn-plant.watering .tree-drop.d4 { animation-delay: 0.62s; }
.furn-plant.watering .tree-drop.d2,
.furn-plant.watering .tree-drop.d5 { animation-delay: 0.8s; }
.furn-plant.watering .tree-drop.d0,
.furn-plant.watering .tree-drop.d3 { animation-delay: 0.5s; }

.furn-plant.watering .tree-badge {
  opacity: 0;
}

@keyframes can-tilt {
  0% { opacity: 0; transform: translate(-10%, -6px) rotate(0deg); }
  15% { opacity: 1; }
  35%, 80% { opacity: 1; transform: translate(-10%, 0) rotate(28deg); }
  100% { opacity: 0; transform: translate(-10%, -6px) rotate(0deg); }
}

@keyframes drop-fall {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(48px); }
}

/* Lấp lánh khi cây lớn / lên giai đoạn / tươi lại */
.tree-spark {
  inset: 0;
}

.furn-plant.celebrate .tree-spark::before,
.furn-plant.celebrate .tree-spark::after {
  content: "✨";
  position: absolute;
  font-size: 18px;
  animation: spark-up 1.6s ease-out 2;
}

.furn-plant.celebrate .tree-spark::before {
  left: 8%;
  top: calc(var(--tree-top, 96px) + 10px);
}

.furn-plant.celebrate .tree-spark::after {
  right: 6%;
  top: calc(var(--tree-top, 96px) + 26px);
  animation-delay: 0.4s;
}

.furn-plant.celebrate .tree-art {
  animation: tree-pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1);
  transform-origin: 50% 100%;
}

@keyframes spark-up {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.2); }
}

@keyframes tree-pop {
  40% { transform: scale(1.07, 1.1); }
}

/* Khung "Cây kỷ niệm" (popover của activities.js) */
.tree-panel {
  max-width: 300px;
}

.tree-progress {
  height: 8px;
  margin: 6px 0 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.22);
}

.tree-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7cc38a, #3fa66b);
}

.tree-today {
  display: flex;
  gap: 10px;
  margin: 6px 0 2px;
  font-size: 12.5px;
}

.tree-today span {
  opacity: 0.55;
}

.tree-today span.on {
  opacity: 1;
  font-weight: 600;
}

.tree-hugs {
  display: flex;
  gap: 4px;
  margin: 6px 0;
  font-size: 18px;
}

.tree-hugs span {
  filter: grayscale(1);
  opacity: 0.35;
}

.tree-hugs span.on {
  filter: none;
  opacity: 1;
}

/* =====================================================================
 * 🕊 Bồ câu trên bậu cửa sổ
 * ===================================================================== */
.room-pigeon {
  position: absolute;
  left: 4px;
  bottom: -8px;
  z-index: 2;
  width: 48px;
  height: 42px;
  pointer-events: auto;
  cursor: pointer;
  transform: scale(var(--k, 1));
  transform-origin: 50% 100%;
}

.room-pigeon[hidden] {
  display: none;
}

.room-pigeon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: scaleX(-1); /* đậu bên trái bậu cửa (giá vẽ hay che bên phải), quay mặt vào giữa cửa sổ */
}

.room-pigeon:hover {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95));
}

.room-pigeon .pg-head {
  transform-box: view-box;
  transform-origin: 16px 21px;
  animation: pg-peck 5s ease-in-out infinite;
}

.room-pigeon .pg-letter {
  filter: drop-shadow(0 0 3px rgba(255, 214, 102, 0.95));
  animation: pg-glow 2s ease-in-out infinite;
}

@keyframes pg-peck {
  0%, 70%, 100% { transform: rotate(0deg); }
  76% { transform: rotate(-12deg) translateY(1px); }
  82% { transform: rotate(0deg); }
  88% { transform: rotate(-8deg); }
}

@keyframes pg-glow {
  50% { filter: drop-shadow(0 0 6px rgba(255, 214, 102, 1)); }
}

/* Bay tới: từ phía trên bên phải, vỗ cánh, đáp xuống bậu cửa */
.room-pigeon.arrive {
  animation: pg-arrive 1.7s cubic-bezier(0.25, 0.7, 0.3, 1) both;
}

.room-pigeon.arrive .pg-wing,
.room-pigeon.leave .pg-wing {
  transform-box: view-box;
  transform-origin: 26px 23px;
  animation: pg-flap 0.16s ease-in-out infinite alternate;
}

.room-pigeon.leave {
  animation: pg-leave 1.3s ease-in forwards;
  pointer-events: none;
}

@keyframes pg-arrive {
  0% { opacity: 0; transform: translate(-150px, -120px) scale(calc(var(--k, 1) * 0.55)) rotate(8deg); }
  15% { opacity: 1; }
  80% { transform: translate(0, -6px) scale(var(--k, 1)) rotate(0deg); }
  100% { transform: translate(0, 0) scale(var(--k, 1)); }
}

@keyframes pg-leave {
  0% { transform: scale(var(--k, 1)); opacity: 1; }
  100% { transform: translate(160px, -140px) scale(calc(var(--k, 1) * 0.5)) rotate(10deg); opacity: 0; }
}

@keyframes pg-flap {
  from { transform: rotate(-24deg) translateY(-3px); }
  to { transform: rotate(14deg); }
}

/* =====================================================================
 * 🕊 Lá thư câu hỏi
 * ===================================================================== */
.qa-zoom {
  position: absolute;
  inset: 0;
  z-index: 56;
  container-type: size;
  display: grid;
  place-items: center;
  padding: 10px;
}

.qa-zoom[hidden] {
  display: none;
}

.qa-panel {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.7), transparent 45%),
    repeating-linear-gradient(0deg, rgba(160, 120, 80, 0.05) 0 1px, transparent 1px 27px),
    #fdf7ec;
  color: #4a3a44;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(160, 120, 80, 0.18);
}

.qa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px 8px 16px;
  border-bottom: 1px dashed rgba(160, 120, 80, 0.35);
  font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif;
}

.qa-head b {
  color: #c2466e;
}

.qa-streak {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}

.qa-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.qa-btn {
  padding: 6px 12px;
  border: 1px solid rgba(160, 120, 80, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #6b4a5a;
  font: 600 12.5px/1.2 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.qa-btn:hover:not(:disabled) {
  background: #ffffff;
  border-color: #ec4899;
}

.qa-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.qa-btn.primary {
  border-color: #ec4899;
  background: #ec4899;
  color: #ffffff;
}

.qa-btn.primary:hover:not(:disabled) {
  background: #db2777;
}

.qa-btn.qa-tab.on {
  border-color: #ec4899;
  background: #ffe4f0;
  color: #b0416a;
}

.qa-btn.close {
  padding: 4px 10px;
}

.qa-btn.ghost {
  border-style: dashed;
  background: transparent;
}

.qa-btn.edit {
  align-self: flex-end;
  padding: 3px 9px;
  font-size: 11.5px;
}

.qa-btn.more {
  align-self: center;
}

.qa-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
  overflow-y: auto;
}

.qa-date {
  color: #b0416a;
  font: 600 12px/1.2 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.8;
}

.qa-q {
  font: 700 clamp(17px, 2.2vw, 22px)/1.35 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #3f2d3a;
}

.qa-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-input {
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid rgba(160, 120, 80, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #3f2d3a;
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  resize: vertical;
  box-sizing: border-box;
}

.qa-input:focus {
  border-color: #ec4899;
  outline: none;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}

.qa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.qa-count {
  margin-left: auto;
  font: 11px/1 "Segoe UI", system-ui, sans-serif;
  opacity: 0.55;
}

.qa-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(60, 30, 10, 0.1);
}

.qa-card.me {
  border-left: 4px solid #a5b4fc;
}

.qa-card.peer {
  border-left: 4px solid #f9a8d4;
  animation: qa-open 0.5s cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes qa-open {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.qa-who {
  color: #8a6b7a;
  font: 700 11.5px/1.2 "Segoe UI", system-ui, sans-serif;
}

.qa-text {
  font: 14.5px/1.5 "Segoe UI", system-ui, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qa-card.small .qa-text {
  font-size: 13px;
}

.qa-note {
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
}

.qa-note.soft {
  color: #8a6b7a;
}

.qa-note.small {
  font-size: 12px;
}

/* Thư của người kia còn niêm phong */
.qa-sealed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(236, 72, 153, 0.45);
  border-radius: 12px;
  background: rgba(255, 228, 240, 0.55);
  color: #9d3a63;
}

.qa-envelope {
  position: relative;
  flex: none;
  width: 44px;
  height: 30px;
  border-radius: 3px;
  background: #fffaf2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 0 0 1px #e3d6c4;
}

.qa-envelope::before {
  content: "";
  position: absolute;
  inset: 0 0 45% 0;
  background: linear-gradient(to bottom right, transparent 49%, #e3d6c4 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, #e3d6c4 50%, transparent 52%);
}

.qa-envelope::after {
  content: "❤";
  position: absolute;
  left: 50%;
  top: 38%;
  color: #e5484d;
  font-size: 12px;
  transform: translate(-50%, -50%);
}

.qa-foot {
  color: #8a6b7a;
  font: 11.5px/1.3 "Segoe UI", system-ui, sans-serif;
  text-align: right;
}

/* Sổ câu hỏi */
.qa-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(160, 120, 80, 0.2);
}

.qa-day.today {
  box-shadow: inset 0 0 0 1.5px rgba(236, 72, 153, 0.45);
}

.qa-day-date {
  color: #b0416a;
  font: 700 11.5px/1 "Segoe UI", system-ui, sans-serif;
}

.qa-day-q {
  font: 700 15px/1.4 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

.qa-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

.qa-pair .qa-sealed {
  gap: 8px;
  padding: 8px;
}

.qa-pair .qa-envelope {
  width: 32px;
  height: 22px;
}

.qa-pair > .qa-compose {
  grid-column: 1 / -1;
}

@container (max-width: 520px) {
  .qa-pair {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .furn-plant .tree-green,
  .tree-badge,
  .room-pigeon .pg-head,
  .room-pigeon .pg-letter,
  .room-pigeon.arrive,
  .qa-card.peer {
    animation: none;
  }
}