/* ==========================================================================
   012.tw 卡通貓助手 cat-assistant.css
   ★ 風格對齊 012.tw 深色主題（底 #02121c／青 accent #67e8f9／文字 #eaf6ff）。
   ★ 全部選擇器走 cat12- 前綴；容器 position:fixed，不影響頁面滾動與原有功能。
   ========================================================================== */

/* ---- 容器 ---- */
.cat12-root {
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 10px));
  bottom: max(10px, env(safe-area-inset-bottom, 10px));
  z-index: 2147400000;
  width: clamp(80px, 14vw, 116px);
  font-family: inherit;
  line-height: 1.45;
  color: #eaf6ff;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;              /* 只讓貓和泡泡可點，其餘穿透 */
}
.cat12-root.cat12--hidden { display: none; }

/* ---- 貓本體 ---- */
.cat12-stage {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat12-stage:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; border-radius: 50%; }

.cat12-figure {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
  transition: transform .18s ease;
  filter: drop-shadow(0 4px 10px rgba(2, 18, 28, .55));
}
.cat12-stage:hover .cat12-figure { transform: translateY(-4px) scale(1.04); }

/* 待機呼吸 */
@keyframes cat12-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.015, .985); }
}
.cat12--idle .cat12-figure { animation: cat12-breathe 3.2s ease-in-out infinite; }

/* 搖尾巴（SVG 尾巴層；圖片模式＝整體輕擺） */
@keyframes cat12-wag {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(14deg); }
}
.cat12--wag .cat12-tail { animation: cat12-wag 1s ease-in-out 3; transform-origin: 74% 82%; }
.cat12--wag.cat12--imgmode .cat12-figure { animation: cat12-breathe 1s ease-in-out 3; }

/* 揮手（SVG 手臂層；圖片模式＝整體前傾擺動） */
@keyframes cat12-wave-arm {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(-38deg); }
  70%      { transform: rotate(-14deg); }
}
.cat12--wave .cat12-arm {
  animation: cat12-wave-arm .8s ease-in-out 4;
  transform-origin: 30% 58%;
}
.cat12--wave.cat12--imgmode .cat12-figure { animation: cat12-wave-arm .8s ease-in-out 4; transform-origin: 50% 92%; }

/* 開心（跳一下＋瞇眼） */
@keyframes cat12-hop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-14px) rotate(-4deg); }
  60%      { transform: translateY(0) scale(1.04, .96); }
}
.cat12--happy .cat12-figure { animation: cat12-hop .7s ease-in-out 2; }
.cat12--happy .cat12-eye { transform: scaleY(.12) translateY(38%); }

/* 警示（地震／颱風）：耳動＋外圈脈衝 */
@keyframes cat12-alert-ring {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
  100% { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
}
.cat12--alert .cat12-stage { border-radius: 50%; animation: cat12-alert-ring 1.2s ease-out 5; }
@keyframes cat12-quake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-3px, 1px); }
  40%      { transform: translate(3px, -1px); }
  60%      { transform: translate(-2px, -2px); }
  80%      { transform: translate(2px, 2px); }
}
.cat12--quake .cat12-figure { animation: cat12-quake .5s linear 6; }
@keyframes cat12-sway {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-7deg); }
  70%      { transform: rotate(7deg); }
}
.cat12--typhoon .cat12-figure { animation: cat12-sway 1.1s ease-in-out 5; transform-origin: 50% 92%; }

/* 眨眼（SVG 模式；圖片模式改用整體輕壓） */
@keyframes cat12-blink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.08); }
}
.cat12--blink .cat12-eye { animation: cat12-blink .22s ease-in-out 1; transform-origin: 50% 50%; }
.cat12--blink.cat12--imgmode .cat12-figure { animation: cat12-breathe .22s ease-in-out 1; }

/* ---- 對話泡泡（012 深色玻璃風） ---- */
.cat12-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 150px;
  max-width: min(280px, calc(100vw - 48px));
  padding: 10px 13px;
  background: rgba(4, 26, 40, .94);
  color: #eaf6ff;
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px rgba(2, 18, 28, .5), inset 0 1px 0 rgba(103, 232, 249, .12);
  font-size: 14px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .22s ease, transform .22s ease;
  visibility: hidden;
}
@supports (backdrop-filter: blur(6px)) {
  .cat12-bubble { background: rgba(4, 26, 40, .82); backdrop-filter: blur(6px); }
}
.cat12-bubble.cat12-bubble--on { opacity: 1; transform: none; visibility: visible; }
.cat12-bubble .cat12-bubble__scene {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #02121c;
  background: #67e8f9;
}
.cat12-bubble .cat12-bubble__text { color: #eaf6ff; }
.cat12-bubble.cat12-scene--quake   .cat12-bubble__scene { background: #fca5a5; }
.cat12-bubble.cat12-scene--typhoon .cat12-bubble__scene { background: #fcd34d; }
.cat12-bubble.cat12-scene--notice  .cat12-bubble__scene { background: #93c5fd; }
.cat12-bubble.cat12-scene--hello   .cat12-bubble__scene { background: #6ee7b7; }
.cat12-bubble.cat12-scene--air     .cat12-bubble__scene { background: #99f6e4; }
.cat12-bubble.cat12-scene--rain    .cat12-bubble__scene { background: #a5f3fc; }
.cat12-bubble.cat12-scene--cny     .cat12-bubble__scene { background: #fda4af; }
.cat12-bubble.cat12-scene--xmas    .cat12-bubble__scene { background: #86efac; }
.cat12-bubble .cat12-bubble__close {
  position: absolute;
  top: -9px; right: -9px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(103, 232, 249, .4); border-radius: 50%;
  background: #07263a;
  color: #9fb9e0; font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(2, 18, 28, .5);
}
.cat12-bubble .cat12-bubble__close:hover { color: #eaf6ff; background: #0b3a56; }

/* ---- 通知面板（未讀清單） ---- */
.cat12-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 40px));
  max-height: min(380px, calc(100vh - 160px));
  overflow-y: auto;
  padding: 12px;
  background: rgba(4, 26, 40, .96);
  color: #eaf6ff;
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 10px 30px rgba(2, 18, 28, .55);
  font-size: 13px;
  pointer-events: auto;
  display: none;
}
@supports (backdrop-filter: blur(8px)) {
  .cat12-panel { background: rgba(4, 26, 40, .86); backdrop-filter: blur(8px); }
}
.cat12-panel.cat12-panel--on { display: block; }
.cat12-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(103, 232, 249, .18);
  font-weight: 600; font-size: 13px; color: #c7d9f7;
}
.cat12-panel__markall {
  border: 1px solid rgba(103, 232, 249, .4); border-radius: 999px;
  background: none; color: #67e8f9;
  font-size: 11px; padding: 3px 10px; cursor: pointer;
}
.cat12-panel__markall:hover { background: rgba(103, 232, 249, .12); }
.cat12-panel__empty { color: #8fa9cd; font-size: 12px; padding: 8px 0 4px; }
.cat12-item {
  padding: 8px 2px;
  border-bottom: 1px dashed rgba(103, 232, 249, .14);
  cursor: pointer;
}
.cat12-item:hover { background: rgba(103, 232, 249, .06); }
.cat12-item:last-child { border-bottom: 0; }
.cat12-item__tag {
  display: inline-block;
  padding: 1px 8px; margin-right: 6px; margin-bottom: 3px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #02121c;
  background: #67e8f9;
}
.cat12-item--quake .cat12-item__tag   { background: #fca5a5; }
.cat12-item--typhoon .cat12-item__tag { background: #fcd34d; }
.cat12-item--notice .cat12-item__tag  { background: #93c5fd; }
.cat12-item__time { color: #8fa9cd; font-size: 11px; }
.cat12-item__text { margin: 3px 0 6px; color: #eaf6ff; }
.cat12-item__read {
  border: 1px solid rgba(103, 232, 249, .4); border-radius: 999px;
  background: none; color: #67e8f9;
  font-size: 11px; padding: 2px 12px; cursor: pointer;
}
.cat12-item__read:hover { background: rgba(103, 232, 249, .14); }

/* ---- 未讀徽標 ---- */
.cat12-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: none; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .5);
  pointer-events: none;
}
.cat12-badge.cat12-badge--on { display: flex; }

/* ---- 收起／展開鈕 ---- */
.cat12-fold {
  pointer-events: auto;
  margin: 0 0 2px auto;
  display: none;
  width: 30px; height: 30px;
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 50%;
  background: rgba(4, 26, 40, .92);
  color: #eaf6ff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2, 18, 28, .4);
  align-items: center; justify-content: center;
}
.cat12-root.cat12--ready .cat12-fold { display: flex; }
.cat12-root.cat12--folded .cat12-stage { display: none; }
.cat12-root.cat12--folded .cat12-bubble,
.cat12-root.cat12--folded .cat12-panel { display: none; }

/* ---- 減少動態效果（系統設定） ---- */
@media (prefers-reduced-motion: reduce) {
  .cat12-figure,
  .cat12-tail, .cat12-arm, .cat12-eye,
  .cat12-bubble, .cat12-panel,
  .cat12-stage { animation: none !important; transition: none !important; }
  .cat12--alert .cat12-stage { box-shadow: 0 0 0 3px rgba(248, 113, 113, .5); }
  .cat12--happy .cat12-eye { transform: scaleY(.12) translateY(38%); }
}

/* ---- 手機 ---- */
@media (max-width: 640px) {
  .cat12-root { width: clamp(64px, 15vw, 88px); }
  .cat12-bubble { font-size: 13px; min-width: 132px; }
  .cat12-panel { width: min(280px, calc(100vw - 32px)); }
}