/* 🔥 缓存倒计时（2026-09-27，指令 22；视图：Opus 5.5）
   住在输入区左上方，和右上方的捏捏小狗一左一右。浮在消息区底部那 72px 留白里（pinch.css 给小狗留的），
   不压最后一条消息、不碰输入框/发送键/header。整颗 pointer-events:none：手机上点不到它，也就不会抢走输入框焦点收起键盘。
   六种样子（data-phase，JS 在 js/cache-countdown.js）：
     hot     蜜色胶囊、静静的，火苗随剩余比例慢慢变矮（蜡烛烧短）
     warm    琥珀色 + 呼吸光圈（该回了）
     urgent  实心珊瑚红 + 一跳一跳 + 火苗乱窜（马上凉）
     cold    冰蓝 + 雪花 +「凉了」（回晚了；和"档位关着"不同——关着时整颗不显示）
     sending 发送中：··· + 火苗重新点着
     off/none → [hidden]，不占位
   深浅色：聊天室全站只有浅色一套（base.css 无 prefers-color-scheme）。这里跟着全站走，不单独做深色；
   各档靠"图标（火/雪）+ 文字（倒数/凉了）+ 实心与否 + 动效"区分，不只靠色相——浏览器强制深色反色后也分得出。 */

.cache-cd {
  position: absolute; left: 14px; bottom: calc(100% + 9px);
  z-index: 14;                                /* 捏捏小狗是 15：被拖到一起时小狗盖在上面，手势照旧 */
  display: flex;                              /* 不用 inline：避免基线下方多出一截行高 */
  pointer-events: none; user-select: none; -webkit-user-select: none;
  --cd-frac: 1;
  animation: cd-pop .38s var(--spring);        /* 从 [hidden] 出现时软弹一下 */
}
.cache-cd[hidden] { display: none; }
@media (max-width: 600px) { .cache-cd { left: 12px; } }       /* 对齐 input-area 手机端左内边距 */
@media (hover: hover) and (pointer: fine) { .cache-cd { pointer-events: auto; cursor: default; } } /* 电脑端：悬停看几点变凉 */
/* 🎫#111 胶囊本身接点击（外层 .cache-cd 照旧 none，胶囊旁边的空白不挡输入框）；pointerdown 在 js 里 preventDefault，点它不抢焦点、键盘不收 */
.cache-cd-pill { pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.cache-cd-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px 0 6px; border-radius: 11px;
  font: 500 12px/1 var(--font); letter-spacing: .2px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: #85663c;
  background: rgba(255,250,242,.94);
  border: 1px solid rgba(217,168,106,.42);
  box-shadow: 0 1px 5px rgba(170,135,90,.16);
  transition: color .45s, background-color .45s, border-color .45s, box-shadow .45s;
}
.cache-cd-time { min-width: 4.6ch; text-align: center; white-space: nowrap; } /* "60:00" 最宽；定宽 + 等宽数字：每秒跳也不抖 */
.cache-cd-dots { display: none; min-width: 4.6ch; justify-content: center; align-items: center; gap: 3px; height: 12px; }
.cache-cd-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; opacity: .35; animation: cd-dot 1.1s ease-in-out infinite; }
.cache-cd-dots i:nth-child(2) { animation-delay: .18s; }
.cache-cd-dots i:nth-child(3) { animation-delay: .36s; }

/* 图标：火苗 / 雪花叠在同一格里交叉淡入 */
.cache-cd-ico { width: 15px; height: 15px; flex-shrink: 0; overflow: visible; }
.cd-flame {
  transform-origin: 8px 15px;
  transform: scale(calc(.74 + .26 * var(--cd-frac)));   /* 满 1h/5m 时 1，快到头 .74：变矮但还认得出是火 */
  transition: transform .7s var(--spring), opacity .3s;
}
.cd-flame-out { fill: #ec963a; transition: fill .45s; }
.cd-flame-in  { fill: #fcd67c; transition: fill .45s; }
.cd-snow {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  opacity: 0; transform-origin: 8px 8px; transform: scale(.3) rotate(-90deg);
  transition: opacity .3s, transform .55s var(--spring);
}

/* ── warm：≤5 分钟，该回了 ── */
.cache-cd[data-phase="warm"] .cache-cd-pill {
  color: #8a470c; background: rgba(255,231,200,.97); border-color: rgba(226,142,56,.66);
  animation: cd-breathe 2.4s ease-in-out infinite;
}
.cache-cd[data-phase="warm"] .cd-flame-out { fill: #e67f26; }
.cache-cd[data-phase="warm"] .cd-flame-in  { fill: #f9bf55; }
@keyframes cd-breathe {
  0%, 100% { box-shadow: 0 1px 5px rgba(226,142,56,.18), 0 0 0 0 rgba(236,150,58,0); }
  50%      { box-shadow: 0 1px 6px rgba(226,142,56,.24), 0 0 0 4px rgba(236,150,58,.2); }
}

/* ── urgent：≤1 分钟，实心 + 跳 ── */
.cache-cd[data-phase="urgent"] .cache-cd-pill {
  color: #fff; font-weight: 600; border-color: transparent;
  background: linear-gradient(135deg, #d9573c, #c1432c);
  box-shadow: 0 2px 7px rgba(193,67,44,.32);
  animation: cd-throb 1s ease-in-out infinite;
}
.cache-cd[data-phase="urgent"] .cd-flame-out { fill: #ffe7b8; }
.cache-cd[data-phase="urgent"] .cd-flame-in  { fill: #ffbe5c; }
.cache-cd[data-phase="urgent"] .cd-flame { animation: cd-flicker .45s ease-in-out infinite alternate; }
@keyframes cd-throb {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes cd-flicker {
  from { transform: scale(.76) rotate(-7deg); }
  to   { transform: scale(.88, .78) rotate(6deg); }
}

/* ── cold：凉了 ── */
.cache-cd[data-phase="cold"] .cache-cd-pill {
  color: #465f7a; background: rgba(233,240,247,.96); border-color: rgba(112,142,178,.45);
  box-shadow: 0 1px 5px rgba(90,120,160,.14);
}
.cache-cd[data-phase="cold"] .cd-flame { opacity: 0; transform: scale(.15); }
.cache-cd[data-phase="cold"] .cd-snow  { opacity: 1; transform: none; }
.cache-cd.cd-shiver .cache-cd-pill { animation: cd-shiver .6s ease-out; }  /* 眼看着凉掉那一下（JS 只在连续 tick 里加） */
@keyframes cd-shiver {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-2.5px) rotate(-2deg); }
  35% { transform: translateX(2.5px) rotate(2deg); }
  55% { transform: translateX(-1.5px); }
  75% { transform: translateX(1px); }
}

/* ── sending：发出去了，火苗续上 ── */
.cache-cd[data-phase="sending"] .cache-cd-time { display: none; }
.cache-cd[data-phase="sending"] .cache-cd-dots { display: inline-flex; }
.cache-cd[data-phase="sending"] .cd-flame { animation: cd-kindle .9s ease-in-out infinite alternate; }
@keyframes cd-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes cd-kindle {
  from { transform: scale(.9) rotate(-4deg); }
  to   { transform: scale(1.02, .94) rotate(4deg); }
}

@keyframes cd-pop {
  from { opacity: 0; transform: translateY(6px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* 减弱动效：base.css 的全局规则只把时长压成 0.01ms，infinite 的呼吸/跳动会变成乱闪——这里直接关掉 */
@media (prefers-reduced-motion: reduce) {
  .cache-cd, .cache-cd * { animation: none !important; }
}