/* =============================================================
   botchitter — 振り返り・草・直近2週間アニメーション (archive.css)
============================================================= */

.view-archive {
  display: none;
  padding: 16px 0 24px;
  animation: fadeInTweet 0.25s var(--ease-out);
}
.view-archive.active {
  display: block;
}

.archive-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.archive-tags::-webkit-scrollbar {
  height: 4px;
}
.archive-tags::-webkit-scrollbar-track {
  background: transparent;
}
.archive-tags::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.archive-tags .tag-chip {
  flex-shrink: 0;
  white-space: nowrap;
}
.tag-chip.is-active {
  background: var(--tag-bg);
  box-shadow: inset 0 0 0 1px var(--tag);
}

.heat-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.heat-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--mood-color);
}
.heat-swatch.m1 {
  margin-left: 4px;
}
.heat-swatch.m5 {
  margin-right: 4px;
}
.heat-swatch.no-mood {
  margin: 0 3px 0 8px;
  background: var(--mood-none);
}

.archive-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 8px;
}
.archive-section-head b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.archive-section-head .heat-legend {
  margin: 0;
}
.archive-summary {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* 直近2週間：大きめの棒＋日付＋曜日 */
.recent-strip {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 2px;
}
.recent-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.recent-day:disabled {
  cursor: default;
}
.recent-day:not(:disabled):hover {
  background: var(--hover-overlay);
}
.recent-day .heat-day {
  width: 14px;
  height: 52px;
}

/* 直近2週間：1つ1つの投稿（雨粒）が不規則にポコポコ落ちて積み上がるアニメーション */
.recent-strip .heat-bar {
  gap: 1.5px;
}
.recent-strip .heat-bar.is-dense {
  gap: 0.5px;
}
.recent-strip .heat-bar > span {
  opacity: 0;
  border-radius: 2px;
  transform-origin: bottom center;
}
.recent-strip .heat-bar > span.drop-a {
  animation: dropPopA 0.68s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.recent-strip .heat-bar > span.drop-b {
  animation: dropPopB 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.recent-strip .heat-bar > span.drop-c {
  animation: dropPopC 0.74s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

@keyframes dropPopA {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(-4.5deg) scale(0.72, 1.28);
  }
  48% {
    opacity: 1;
    transform: translateY(3.5px) rotate(2deg) scale(1.18, 0.82);
  }
  68% {
    opacity: 1;
    transform: translateY(-2.5px) rotate(-1deg) scale(0.95, 1.05);
  }
  84% {
    opacity: 1;
    transform: translateY(1px) rotate(0.4deg) scale(1.02, 0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1, 1);
  }
}

@keyframes dropPopB {
  0% {
    opacity: 0;
    transform: translateY(-36px) rotate(4deg) scale(0.8, 1.2);
  }
  45% {
    opacity: 1;
    transform: translateY(2.5px) rotate(-1.5deg) scale(1.14, 0.88);
  }
  65% {
    opacity: 1;
    transform: translateY(-1.8px) rotate(0.8deg) scale(0.97, 1.03);
  }
  82% {
    opacity: 1;
    transform: translateY(0.7px) rotate(-0.3deg) scale(1.01, 0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1, 1);
  }
}

@keyframes dropPopC {
  0% {
    opacity: 0;
    transform: translateY(-62px) rotate(-2deg) scale(0.62, 1.4);
  }
  52% {
    opacity: 1;
    transform: translateY(4px) rotate(1.2deg) scale(1.24, 0.78);
  }
  72% {
    opacity: 1;
    transform: translateY(-3px) rotate(-0.6deg) scale(0.94, 1.06);
  }
  86% {
    opacity: 1;
    transform: translateY(1.2px) rotate(0.2deg) scale(1.03, 0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1, 1);
  }
}

.recent-date {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.recent-week {
  font-size: 10px;
  color: var(--text-tertiary);
}
.recent-day.is-today .recent-date,
.recent-day.is-today .recent-week {
  color: var(--text-primary);
  font-weight: 600;
}

/* 1年前（1か月前）の今日への入口 */
.memory-card {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.memory-card:hover {
  background: var(--hover-overlay);
}
.memory-label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
}
.memory-text {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 年間ヒートマップ（これまで） */
.heat-year {
  margin-bottom: 20px;
}
.heat-year-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.heat-row {
  display: grid;
  grid-template-columns: 30px repeat(31, 1fr) 24px;
  align-items: end;
  column-gap: 1px;
  padding: 4px 0;
  border-radius: 4px;
}
.heat-row.is-clickable {
  cursor: pointer;
}
.heat-row.is-clickable:hover {
  background: var(--hover-overlay);
}

.heat-month,
.heat-count {
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.heat-count {
  text-align: right;
}
.heat-month,
.heat-count {
  align-self: center;
}

/* 1日の棒：高さがポスト数、帯の色が1件ずつの気分（下から古い順） */
.heat-day {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 28px;
}
.heat-day:empty::before {
  content: "";
  height: 2px;
  border-radius: 1px;
  background: var(--heat-0);
}
.heat-day.is-future:empty::before {
  opacity: 0.4;
}
.heat-day.is-void {
  visibility: hidden;
}
.heat-day.is-today::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 1px;
  background: var(--text-secondary);
}

.heat-bar {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
}
.heat-bar.is-dense {
  gap: 0;
}
.heat-bar > span {
  flex: 1 1 0;
  min-height: 1px;
  border-radius: 1px;
  background: var(--mood-color);
}
.heat-bar > .no-mood {
  background: var(--mood-none);
}