/* ============================================================
 * 模块：主题 & 颜色变量
 * 负责人：🎨 美术同学
 * 说明：改颜色、背景、阴影、猫咪配色都在这里
 * ============================================================ */

/* ===== CSS Variables ===== */
:root {
  --green-50: #f0f5f2;  --green-100: #e2ece7; --green-200: #cadcd4;
  --green-300: #adc9bd; --green-400: #90b3a5; --green-500: #769d8e;
  --green-600: #608578; --green-700: #4d6b61; --green-800: #40584f;
  --sky-50: #f1f7f9;    --sky-100: #e2f0f4;  --sky-200: #cbe4ec;
  --sky-300: #acd3df;   --sky-400: #8bbfd0;  --sky-500: #6ca8bd;
  --sky-600: #578da1;   --sky-700: #477486;
  --coral-50: #fbf2ef;  --coral-100: #f5dfd7; --coral-300: #dfaa98;
  --coral-500: #ce8069; --coral-600: #b86d58;
  --cream: #f6f3ed;     --warm-white: #fbfaf7;
  --cat-cream: #f7f3ed; --cat-brown: #8c7d75; --cat-blue: #7fa7bd;
  --cat-pink: #e7c2ba;  --cat-gray: #d6d2cc;
  --text-primary: #405149; --text-secondary: #68766f; --text-muted: #929d98;
  --shadow-sm: 0 2px 5px rgba(70,83,77,.055);
  --shadow-md: 0 10px 30px rgba(70,83,77,.075), 0 2px 8px rgba(70,83,77,.04);
  --shadow-lg: 0 24px 70px rgba(70,83,77,.12), 0 5px 18px rgba(70,83,77,.06);
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px;
  --transition: 0.3s cubic-bezier(.4,0,.2,1);
  --art-welcome-illustration: url("../assets/welcome-illustration.png");
  --art-ragdoll-layer: url("../assets/ragdoll-cat-layer.png");
}

/* ===== 页面背景 ===== */
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(206,128,105,.14), transparent 30rem),
    radial-gradient(circle at 90% 16%, rgba(108,168,189,.15), transparent 32rem),
    radial-gradient(circle at 52% 92%, rgba(118,157,142,.12), transparent 34rem),
    linear-gradient(150deg, #f8f6f1 0%, var(--warm-white) 46%, #f1f4f2 100%);
}

/* ===== 布偶猫装饰层 ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/background-cat.png") center/cover no-repeat;
  pointer-events: none;
  opacity: .25;
  z-index: 0;
}

/* ===== 头像图片 ===== */
.ragdoll-avatar {
  border-radius: 50%;
  object-fit: cover;
}

/* ===== 布偶猫图片头像 ===== */
.ragdoll-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cat-logo .ragdoll-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border: 3px solid rgba(255,255,255,.86);
  box-shadow: 0 8px 24px rgba(74,91,83,.12), 0 0 0 2px rgba(118,157,142,.16);
}

.chat-header-avatar .ragdoll-avatar,
.msg-avatar .ragdoll-avatar {
  border: 2px solid rgba(255,255,255,.82);
  box-shadow: 0 3px 10px rgba(74,91,83,.11);
}

#welcomeCatIcon .ragdoll-avatar {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border: 3px solid rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(74,91,83,.13);
  animation: ragdollBreathe 4s ease-in-out infinite;
}

.chat-header-avatar .ragdoll-avatar {
  animation: ragdollBreathe 4.8s ease-in-out infinite;
}

@keyframes ragdollBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .ragdoll-avatar { animation: none !important; }
}