/* === 极客终端样式 === */
.cmd-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cmd-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.cmd-box {
  width: 600px;
  max-width: 90%;
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: translateY(-20px);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  font-family: 'Consolas', 'Monaco', monospace; /* 极客等宽字体 */
}

.cmd-overlay.visible .cmd-box {
  transform: translateY(0);
}

.cmd-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cmd-icon {
  color: #0b74de;
  font-weight: bold;
  font-size: 20px;
  margin-right: 12px;
  animation: blink 1s infinite;
}

@keyframes blink { 50% { opacity: 0; } }

#cmdInput {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  font-family: inherit;
  outline: none;
}

.cmd-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.cmd-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: 300px;
  overflow-y: auto;
}

.cmd-item {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.1s;
  font-size: 14px;
}

.cmd-item:hover, .cmd-item.selected {
  background: rgba(11, 116, 222, 0.2);
  color: #fff;
  border-left: 3px solid #0b74de;
}

.cmd-key {
  font-size: 12px;
  opacity: 0.5;
  font-family: sans-serif;
}

/* 滚动条隐藏但可滚动 */
.cmd-list::-webkit-scrollbar { width: 4px; }
.cmd-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
/* 定义进场动画关键帧 */
@keyframes slideInUpFade {
  from {
    opacity: 0;
    transform: translateY(20px); /* 从下方20px处开始 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#todoWidget, #calcWidget {
  /* 1. 移除强制背景色，让它自动使用 birthday-container 的颜色，保持一致 */
  /* background: ... !important;  <-- 删掉这行 */
  
  /* 2. 移除我之前多加的阴影，这会让颜色看起来不一样 */
  box-shadow: none !important; 
  
  /* 3. 保留排版修复，防止它们扁掉 */
  flex: 1;
  margin: 0 !important; /* 覆盖 HTML 里的 margin:0 */
  padding: 15px !important;
  height: auto !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 如果仍然觉得备忘录里面“脏脏的”，可以把列表背景也去掉 */
#todoList {
  background: transparent !important; /* 原来是浅灰色，现在改透明 */
  padding: 0;
}
/* 翻转容器 */
.flip-container {
  /* 必须指定高度，否则绝对定位会塌陷 */
  min-height: 140px; 
}

/* 翻转核心层 */
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d; /* 关键：开启3D空间 */
}

/* 激活翻转状态 */
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}

/* 正反面通用样式 */
.front, .back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden; /* 关键：背面不可见 */
  border-radius: 16px;
}

/* 正面默认 */
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* 背面初始状态（先转过去藏起来） */
.back {
  transform: rotateY(180deg);
}
/* 删除过程的动画 */
@keyframes fadeOutLeft {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-30px); height: 0; margin: 0; padding: 0; }
}

.deleting-item {
  animation: fadeOutLeft 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  pointer-events: none; /* 防止重复点击 */
}
/* =========================================
   🧠 AI 模式呼吸光晕特效
   ========================================= */

/* 1. 定义呼吸动画关键帧 */
@keyframes aiBreathing {
  0% {
    /* 初始状态：淡淡的蓝光 */
    box-shadow: 0 0 8px rgba(11, 116, 222, 0.3);
    border-color: rgba(11, 116, 222, 0.4);
  }
  50% {
    /* 呼吸高潮：光晕扩散，颜色变亮 */
    box-shadow: 0 0 25px rgba(11, 116, 222, 0.85);
    border-color: #0b74de;
  }
  100% {
    /* 回到初始状态 */
    box-shadow: 0 0 8px rgba(11, 116, 222, 0.3);
    border-color: rgba(11, 116, 222, 0.4);
  }
}

/* 2. 应用到 AI 模式下的输入框 */
/* 注意：这里使用了 !important 确保动画覆盖默认样式 */
.search-container.ai-mode input {
  animation: aiBreathing 3s infinite ease-in-out !important;
  transition: all 0.3s ease;
}

/* 3. (可选) 让 AI 按钮本身也一起呼吸，增加沉浸感 */
#aiSwitch.active {
  animation: aiBreathing 3s infinite ease-in-out !important;
}
/* Add to style2.css */
#aiChatWidget {
  background-image: url('images/ai.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(0, 0, 0, 0.145) !important; /* Optional: adds a slight dark overlay for text readability */
  background-blend-mode: multiply !important; /* Optional: blends the background color with the image */
}
/* Add to style2.css */
/* Custom scrollbar for the right panel's main content area */
.panelright::-webkit-scrollbar {
  width: 8px;
}

.panelright::-webkit-scrollbar-track {
  background: transparent;
}

.panelright::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.6); /* Grey, semi-transparent thumb */
  border-radius: 4px;
}

.panelright::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.8); /* Darker grey on hover */
}

/* Apply similar styling to the chatMessages scrollbar */
#chatMessages::-webkit-scrollbar {
  width: 8px;
}

#chatMessages::-webkit-scrollbar-track {
  background: transparent;
}

#chatMessages::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.6); /* Grey, semi-transparent thumb */
  border-radius: 4px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.8); /* Darker grey on hover */
}
/* Add to style2.css */
#chatInput::placeholder {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Add a subtle shadow for better readability */
  opacity: 0.8; /* You can adjust opacity if pure white is too bright */
}

#chatInput::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: white;
  opacity: 0.8;
}

#chatInput::-moz-placeholder { /* Firefox 19+ */
  color: white;
  opacity: 0.8;
}

#chatInput:-ms-input-placeholder { /* IE 10+, Edge */
  color: white;
  opacity: 0.8;
}

#chatInput:-moz-placeholder { /* Firefox 18- */
  color: white;
  opacity: 0.8;
}

/* =========================================
   ⛩️ 每日一签 - 神社风格背景皮肤
   ========================================= */

/* 1. 清除最外层容器的默认背景和边框，让它变透明 */
#fortuneWidget {
  background: transparent !important;
  border: none !important;
  padding-top: 0px;
  padding-bottom: 0px;
  box-shadow: none !important;
  backdrop-filter: none !important; /* 关掉毛玻璃，因为我们要用高清图 */
}

/* 2. 给“正面”和“背面”都加上背景图 */
#fortuneWidget .front, 
#fortuneWidget .back {
  /* 设置背景图路径 */
  background-image: url('images/chouqian.png') !important;
  
  /* 确保图片铺满整个卡片 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 🎨 视觉优化：加一层淡淡的黑色遮罩，防止背景太花看不清字 */
  background-color: rgba(0, 0, 0, 0.1) !important;
  background-blend-mode: multiply; /* 让图片稍微暗沉一点，更有质感 */
  
  /* 保持圆角 */
  border-radius: 16px;
  /* 给边缘加一点淡淡的光晕 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 3. 强化文字的可读性 (加粗 + 阴影) */
#fortuneWidget h4,
#fortuneWidget #fortuneTitle,
#fortuneWidget #fortuneText {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.5); /* 金色光晕 */
  font-weight: bold;
}

#fortuneWidget h4 {
  font-size: 18px;
  letter-spacing: 2px; /* 标题字间距拉大，更有仪式感 */
}
/* =========================================
   🎂 生日倒计时 - 专属背景皮肤
   ========================================= */

/* 1. 应用背景图到整个组件 */
#birthdayWidget {
  /* 替换为你生成的图片 */
  background-image: url('images/shengri.png') !important;
  
  /* 图片布局设置 */
  background-size: cover;      /* 铺满 */
  background-position: center; /* 居中 (关键：确保空白区域在中间) */
  background-repeat: no-repeat;
  
  /* 视觉优化 */
  background-color: rgba(255, 255, 255, 0) !important; /* 微微压暗，防止图片太亮刺眼 */
  background-blend-mode: multiply; /* 混合模式，增加质感 */
  
  /* 边框和阴影 */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* 2. 🔴 关键修改：让中间的“天数圆圈”变透明 */
/* 因为你的背景图中间已经是留白的了，所以不需要原来的红色圆底了 */
.days-circle {
  background: transparent !important; /* 去掉红色渐变背景 */
  box-shadow: none !important;        /* 去掉圆圈阴影 */
  border: 2px solid rgba(255, 255, 255, 0.6); /* (可选) 加一个淡淡的白圈边框 */
  
  /* 稍微放大一点文字，利用背景的留白空间 */
  width: auto !important;
  height: auto !important;
  padding: 10px 20px;
  border-radius: 50px; /* 改成椭圆胶囊状，或者保持 50% 圆形都可以 */
  margin-bottom: 5px !important;
}

/* 3. 强化文字清晰度 (在花哨背景上也能看清) */
#birthdayWidget h4, 
#birthdayWidget .label, 
#daysNumber,
#birthdayWidget small {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9); /* 加上重一点的文字阴影 */
  font-weight: bold;
}

/* 4. 特别放大倒计时数字 */
#daysNumber {
  font-size: 42px !important; /* 字体加大 */
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  /* 给数字加一点金色光晕，增加庆祝感 */
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 2px 5px rgba(0,0,0,0.8);
}

/* 5. 调整“重置”按钮 */
.reset-link {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(0,0,0,0.3); /* 加个深色底让按钮更明显 */
  padding: 2px 8px;
  border-radius: 10px;
  text-decoration: none !important;
}
.reset-link:hover {
  background: rgba(0,0,0,0.5);
  color: #fff !important;
}
/* =========================================
   📅 日历组件 - 专属背景皮肤
   ========================================= */

#calendarWidget {
  /* 1. 设置背景图 */
  background-image: url('images/rili.png') !important;
  
  /* 图片布局 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* 文字阴影提升可读性 */
  
  /* 2. 视觉优化：正片叠底模式，让背景更有质感且不刺眼 */
  background-blend-mode: multiply;
  
  /* 3. 统一边框风格 */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* 4. 让日历头部（月份/年份）清晰可见 */
#calendarHeader {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#monthYear {
  color: #fff !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9); /* 强阴影 */
  font-weight: bold;
  font-size: 1.2em;
}

/* 5. 星期几的标题 (Sun, Mon...) */
.calendar-days div {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  font-weight: bold;
}

/* 6. 日期数字网格 */
.calendar-body div {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  font-weight: 500;
  transition: all 0.2s;
}

/* 7. 鼠标悬停在日期上的效果 */
.calendar-body div:not(.current-date):hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50%;
  transform: scale(1.1);
  cursor: pointer;
}

/* 8. “今天”的高亮样式优化 */
.calendar-body .current-date {
  background: #0b74de !important; /* 保持蓝色高亮，或者改成 #ff6b6b (红色) 配合神社风 */
  color: #fff !important;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(11, 116, 222, 0.8); /* 发光效果 */
  text-shadow: none; /* 选中状态不需要文字阴影 */
  font-weight: bold;
}

/* 9. 切换月份的按钮箭头 */
#prevMonth, #nextMonth {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: block;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  transition: 0.2s;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
#prevMonth:hover, #nextMonth:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}
/* =========================================
   🐍 贪吃蛇游戏 - 专属背景皮肤
   ========================================= */

#snakeWidget {
  background: linear-gradient(135deg, #134E5E, #71B280) !important;
  
  background-size: cover !important;
  background-position: center !important;
  
  /* 2. 混合模式与边框 */
  background-blend-mode: multiply;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

#snakeCanvas {
  /* 游戏区域样式 */
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  image-rendering: pixelated; /* 让像素格更清晰 */
}

/* 游戏结束时的文字覆盖 */
.snake-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
/* === 📅 日历组件：回到今天按钮样式优化 === */
#toToday {
  /* 1. 统一阴影格式 (与左右切换按钮一致) */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  transition: all 0.2s;
}

/* 4. 添加悬停效果 (可选，为了和左右按钮体验更一致) */
#toToday:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05); /* 微微放大 */
}
/* === 📅 日历组件：按钮颜色统一修正 === */

/* 强制将“回到今天”和“左右切换”按钮的文字/图标都改为黑色 */
#toToday, 
#prevMonth, 
#nextMonth {
  color: rgb(255, 162, 0) !important; /* 核心：使用 !important 覆盖 HTML 中的 color:white */
}

/* 统一鼠标悬停时的效果 (可选，让它们看起来更一致) */
#toToday:hover, 
#prevMonth:hover, 
#nextMonth:hover {
  background: rgba(255, 255, 255, 0.4) !important; /* 悬停背景稍微变白 */
  transform: scale(1.1); /* 微微放大 */
}
/* === 🎬 动态壁纸管理：齿轮与删除弹窗 === */

/* 1. 齿轮按钮 (默认隐藏，悬停显示) */
.video-tile .iconSettings {
  position: absolute;
  right: 6px;
  bottom: 6px; /* 放在右下角 */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑底，保证在不同壁纸上可见 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; /* 默认不挡鼠标 */
  z-index: 20;
  cursor: pointer;
}

.video-tile .iconSettings img {
  width: 16px;
  height: 16px;
  display: block;
  filter: invert(1); /* 确保齿轮是白色的 */
}

/* 只有当卡片被标记为“已下载”且鼠标悬停时，才显示齿轮 */
.video-tile[data-downloaded="true"]:hover .iconSettings {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.video-tile .iconSettings:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* 2. 删除确认遮罩 (覆盖整个卡片) */
.video-tile .iconPopover.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 深色遮罩 */
  backdrop-filter: blur(2px);
  border-radius: 8px; /* 保持圆角 */
  display: none; /* 默认隐藏 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.2s;
}

.video-tile .iconPopover.overlay.show {
  display: flex;
  opacity: 1;
}

/* 遮罩内的按钮样式 */
.video-tile .iconPopover.overlay button {
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s;
  min-width: 80px;
}

.video-tile .iconPopover.overlay .delBtn {
  background: #ff6b6b;
  color: white;
}

.video-tile .iconPopover.overlay .cancelBtn {
  background: white;
  color: #333;
}

.video-tile .iconPopover.overlay button:hover {
  transform: scale(1.05);
}
/* === 自定义壁纸页面的特殊布局 (居中 + 放大) === */
.wallpaper-grid.custom-mode {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  height: 100%;            /* 占满容器高度 */
  min-height: 400px;       /* 保证有足够空间 */
}

/* 放大上传按钮 */
.wallpaper-grid.custom-mode .add-wallpaper {
  width: 280px !important; /* 强制宽度加大 */
  height: 160px !important;/* 强制高度加大 */
  font-size: 60px;         /* 加号变大 */
  border: 2px dashed #ccc; /* 虚线边框更有上传的感觉 */
  background: #f9f9f9;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  margin-bottom: 20px;     /* 与下方文字拉开距离 */
}

/* 悬停效果 */
.wallpaper-grid.custom-mode .add-wallpaper:hover {
  transform: scale(1.05);
  border-color: #0b74de;
  color: #0b74de;
  background: #fff;
  box-shadow: 0 15px 35px rgba(11, 116, 222, 0.15);
}
/* =========================================
   📝 备忘录 - 本地图片背景样式
   ========================================= */
#todoWidget {
  /* 1. 设置背景图片路径 (相对于 css 文件的位置) */
  background-image: url('images/beiwanglu.png') !important;
  
  /* 2. 图片填充方式：cover 会自动裁剪以填满，contain 会完整显示但留白 */
  background-size: cover !important;
  
  /* 3. 图片居中显示 */
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* 4. (可选) 增加一层半透明底色，防止图片太花看不清字 */
  /* 如果图片是深色的，把下面的 255,255,255 改成 0,0,0 */
  background-color: rgba(255, 255, 255, 0.212) !important; 
  background-blend-mode: overlay !important; /* 混合模式，让背景更有质感 */

  /* 5. 保持边框和圆角风格 */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* --- 优化：让里面的文字条目更清晰 --- */
#todoList li {
  /* 给每一行任务加一点磨砂玻璃背景，防止被背景图干扰 */
  background: rgba(0, 0, 0, 0) !important; 
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff; /* 强制文字颜色深一点，如果背景是黑的请改为 #fff */
  text-shadow: none; /* 去掉阴影让文字更实 */
}

/* 标题文字优化 */
#todoWidget h4 {
  color: #fff; /* 标题保持白色 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6); /* 加重阴影确保在任何图片上都能看清 */
  font-weight: bold;
}
/* =========================================
   🧮 计算器 - 本地图片背景样式
   ========================================= */
#calcWidget {
  /* 1. 设置背景图片路径 */
  background-image: url('images/jisuanqi.png') !important;
  
  /* 2. 图片铺满且居中 */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* 3. 视觉优化：给背景加一层深色滤镜 */
  /* 计算器通常文字是白色的，所以加深背景能让按钮更清晰 */
  background-color: rgba(0, 0, 0, 0) !important; 
  background-blend-mode: multiply !important; /* 正片叠底模式，让背景变暗 */

  /* 4. 边框和阴影 */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* --- 优化：让计算器按钮和文字更清晰 --- */

/* 标题文字 */
#calcWidget h4 {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 强阴影 */
  font-weight: bold;
}

/* 按钮样式微调 */
.calc-btn {
  /* 给按钮加一点半透明背景，防止被背景图花纹干扰 */
  background: rgba(255, 255, 255, 0) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px black; /* 增加文字阴影 */
}

/* 按钮悬停效果 */
.calc-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.05);
}

/* 等号按钮特殊处理 (保持蓝色或你喜欢的颜色) */
.calc-btn[data-val="="] {
  background: #0b74de !important; /* 保持主题蓝 */
  border: none !important;
  box-shadow: 0 4px 10px rgba(11, 116, 222, 0.5);
}

/* 清除按钮特殊处理 (保持红色) */
.calc-btn[data-val="C"] {
  color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.15) !important;
}
/* --- style.css 新增 --- */

/* 定义删除时的动画状态 */
.iconWrapper.is-deleting {
  /* 1. 视觉缩小与淡出 */
  transform: scale(0) !important;
  opacity: 0 !important;
  
  /* 2. 布局收缩 (让下方的图标平滑滑上来，而不是突然跳上来) */
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  
  /* 3. 动画过渡设定 */
  transition: all 0.3s cubic-bezier(0.55, -0.04, 0.91, 0.94) !important;
  
  /* 4. 防止动画过程中还能点击 */
  pointer-events: none;
}
/* === 修复：添加快捷方式弹窗专用样式 === */

/* 1. 覆盖通用的弹窗容器样式，改为紧凑的对话框模式 */
#addIconModal .modal-content {
  width: 90% !important;
  max-width: 380px !important;    /* 限制最大宽度，不再是 900px */
  height: auto !important;        /* 高度随内容自适应，不再是 80vh */
  min-height: auto !important;
  padding: 24px 28px !important;  /* 增加内边距 */
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;   /* 允许显示溢出的阴影等 */
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important;
}

/* 2. 修正关闭按钮的位置 (放到右上角) */
#closeAddModal {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 32px;
  height: 32px;
  font-size: 22px !important;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  color: #999;
  background: transparent;
  transition: all 0.2s ease;
  z-index: 10;
}

#closeAddModal:hover {
  background: rgba(0,0,0,0.05);
  color: #ff4d4f;
  transform: rotate(90deg);
}

/* 3. 标题样式优化 */
#addIconTitle {
  margin: 0 0 20px 0 !important;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 4. 表单间距调整 */
#addIconModal .form-row {
  margin-bottom: 15px !important; /* 增加行与行之间的呼吸感 */
  margin-top: 0 !important;
  gap: 8px !important;
}

#addIconModal label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin-left: 2px;
}

/* 5. 输入框美化 */
#addIconModal input[type="text"], 
#addIconModal input[type="file"] {
  background: #f7f9fc !important;
  border: 1px solid #eef0f5 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: all 0.2s;
}

#addIconModal input[type="text"]:focus {
  background: #fff !important;
  border-color: #0b74de !important;
  box-shadow: 0 0 0 3px rgba(11, 116, 222, 0.1) !important;
}

/* 6. 底部按钮区域调整 */
/* 选中包含 Save/Cancel 按钮的那个 div */
#addIconModal .modal-content > div:last-child {
  margin-top: 20px !important;
  padding-top: 10px;
  border-top: 1px solid #eee; /* 加一条分割线 */
}
/* =========================================
   🖼️ 壁纸选择弹窗 - 专属背景皮肤
   ========================================= */

/* 1. 应用背景图到弹窗主体 */
#wallpaperModal .modal-content {
  /* ✅ 设置背景图路径 */
  background-image: url('images/genggaibizhibeijing.png') !important;

  /* 图片布局 */
  background-size: cover !important;       /* 铺满整个弹窗 */
  background-position: center !important;  /* 居中显示 */
  background-repeat: no-repeat !important;

  /* 🎨 视觉优化：叠加一层半透明白色，防止背景太花看不清文字 */
  /* 如果你的背景图很深，可以把 255,255,255 改成 0,0,0 (黑色) */
  background-color: rgba(255, 255, 255, 0.504) !important; 
  background-blend-mode: overlay !important; /* 混合模式，让质感更好 */

  /* 边框和圆角优化 */
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
  border-radius: 16px !important;
}

/* 2. 让内部各个区域变透明，透出大背景 */

/* 头部 (标题栏) */
#wallpaperModal .modal-header {
  background: rgba(255, 255, 255, 0.3) !important; /* 半透明 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px); /* 毛玻璃模糊 */
}

/* 左侧侧边栏 */
#wallpaperModal .wp-sidebar {
  background: rgba(255, 255, 255, 0.2) !important; /* 淡淡的背景 */
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 右侧内容区 */
#wallpaperModal .wp-right-panel {
  background: transparent !important; /* 完全透明，直接显示大背景 */
}

/* 3. 文字增强 (加描边/阴影，确保在任何背景上都清晰) */
#wallpaperModal .modal-title,
#wallpaperModal .parallax-label,
#wallpaperModal .wp-tab span {
  color: #222 !important; /* 深色文字 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important; /* 白色光晕 */
  font-weight: 700;
}

/* 4. 侧边栏选中项样式优化 */
#wallpaperModal .wp-tab.active {
  background: rgba(255, 255, 255, 0.85) !important; /* 选中时变白 */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
  color: #0b74de !important;
}

/* 5. 未选中的选项悬停效果 */
#wallpaperModal .wp-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* 6. 关闭按钮优化 */
#closeModal {
  color: #555 !important;
  background: rgba(255, 255, 255, 0.5); /* 给叉号加个小圆底 */
  width: 32px; height: 32px;
  text-align: center;
  line-height: 28px;
  justify-content: center;
  border-radius: 50%;
  font-size:22px;
  transition: all 0.2s;
}
#closeModal:hover {
  background: #ff6b6b !important; /* 悬停变红 */
  color: white !important;
  transform: rotate(90deg);
}

/* 7. 针对自定义上传区域的微调 */
.wallpaper-grid.custom-mode .add-wallpaper {
  background: rgba(255, 255, 255, 0.5) !important; /* 半透明白色 */
  border: 2px dashed rgba(0, 0, 0, 0.2) !important;
}
.wallpaper-grid.custom-mode .add-wallpaper:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}
/* style.css 末尾 */

/* ✅ 专用的禁止滚动样式类 */
.wp-right-panel.no-scroll {
  overflow: hidden !important; /* 强制隐藏滚动条并禁止滚动 */
}
/* === 📩 信封提示弹窗样式 === */

/* 信封按钮悬停特效 */
#wpTipBtn:hover {
  transform: scale(1.1) rotate(10deg);
}

/* 弹窗容器（遮罩层概念，但这里它是绝对定位在右侧面板内的） */
.envelope-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 80%;            /* 宽度较宽，长信封风格 */
  max-width: 500px;      /* 最大宽度 */
  min-height: 220px;
  background: transparent;
  z-index: 50;           /* 在壁纸列表之上 */
  opacity: 0;
  pointer-events: none;  /* 隐藏时不可点 */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Q弹的过渡 */
}

/* 激活状态 */
.envelope-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* 信纸主体 */
.envelope-inner {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  background: #fdfbf7; /* 米黄色信纸底色 */
  padding: 30px 40px;
  border-radius: 4px;
  box-shadow: 
    0 1px 1px rgba(0,0,0,0.15), 
    0 10px 0 -5px #eee,      /* 模拟叠纸厚度 */
    0 10px 1px -4px rgba(0,0,0,0.15),
    0 20px 0 -10px #e5e5e5,  /* 模拟叠纸厚度 */
    0 20px 1px -9px rgba(0,0,0,0.15),
    0 30px 50px rgba(0,0,0,0.3); /* 大投影 */
  
  /* 顶部红蓝条纹装饰（航空信风格） */
  background-image: repeating-linear-gradient(
    135deg,
    #ff6b6b 0px, #ff6b6b 10px,
    transparent 10px, transparent 20px,
    #5ca1e6 20px, #5ca1e6 30px,
    transparent 30px, transparent 40px
  );
  background-size: 100% 8px; /* 仅在顶部显示一条 */
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

/* 关闭按钮 */
#closeTipPopup {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
#closeTipPopup:hover {
  color: #ff6b6b;
}

/* 标题 */
.envelope-title {
  font-family: 'Courier New', Courier, monospace; /* 打字机字体 */
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px dashed #ddd; /* 虚线分割 */
  padding-bottom: 10px;
  margin-top: 10px;
}

/* 内容区域 */
.envelope-content-text {
  flex: 1;
  font-family: "Segoe UI", sans-serif;
  color: #555;
  font-size: 14px;
  line-height: 1.8;
}

.envelope-content-text p {
  margin-bottom: 8px;
}

/* 邮戳装饰 */
.envelope-stamp {
  position: absolute;
  bottom: 20px;
  right: 30px;
  width: 60px;
  height: 60px;
  border: 3px double #e0e0e0;
  border-radius: 50%;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: sans-serif;
  transform: rotate(-20deg);
  pointer-events: none;
  opacity: 0.5;
}
/* === 📩 新消息提示特效 (红点 + 晃动) === */

/* 定义晃动动画 */
@keyframes newMsgShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

/* 当按钮拥有 .has-new-tip 类时应用动画 */
#wpTipBtn.has-new-tip {
  position: relative; /* 为了定位红点 */
  animation: newMsgShake 1s ease-in-out infinite; /* 持续晃动 */
  color: #ff6b6b; /* 图标稍微变红一点吸引注意 */
}

/* 红点样式 */
#wpTipBtn.has-new-tip::after {
  content: "";
  position: absolute;
  top: 0px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: #ff4d4f; /* 鲜艳的红色 */
  border-radius: 50%;
  border: 2px solid #fff; /* 白边让红点更突出 */
  box-shadow: 0 0 5px rgba(255, 77, 79, 0.6);
  pointer-events: none; /* 防止红点挡住点击 */
}
body::after {
  content: '';
  display: none;
  background-image: 
    url('images/chouqian.png'),
    url('images/shengri.png'),
    url('images/rili.png'),
    url('images/beiwanglu.png'),
    url('images/jisuanqi.png');
}
/* style.css */

/* === ✨ 首次访问欢迎弹窗样式 === */

.welcome-modal {
  display: none; /* 默认不显示，JS控制 */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4); /* 背景压暗 */
  backdrop-filter: blur(8px);      /* 背景毛玻璃 */
  z-index: 20000;                  /* 确保在最顶层 */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-modal.show {
  opacity: 1;
}

.welcome-card {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: linear-gradient(135deg,rgb(255, 255, 255) 0%, rgb(199, 255, 250)50%,#00d5ff 100%); /* 淡蓝渐变 */
  border-radius: 24px;
  padding: 40px 30px 60px 30px;
  text-align: center;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Q弹动画 */
  border: 3px solid rgba(255, 255, 255, 0.6);
}

.welcome-modal.show .welcome-card {
  transform: scale(1) translateY(0);
}
.decor-paw1 {
  position: absolute;
  top: -35px;
  left: -20px;
  width: 70px;
  height: auto;
  transform: rotate(-15deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  animation: pawWiggle1 3s infinite ease-in-out; /* 摇摆动画 */
}

@keyframes pawWiggle1 {
  0%, 100% { transform: rotate(-15deg) translateY(0); }
  50% { transform: rotate(-25deg) translateY(5px); }
}
/* 装饰猫爪 */
.decor-paw {
  position: absolute;
  top: -35px;
  right: -20px;
  width: 70px;
  height: auto;
  transform: rotate(15deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  animation: pawWiggle 3s infinite ease-in-out; /* 摇摆动画 */
}

@keyframes pawWiggle {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(25deg) translateY(-5px); }
}

.welcome-header h2 {
  color: #0b74de; /* 主题蓝 */
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
}

.welcome-body {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

.welcome-body p {
  margin-bottom: 8px;
}

/* 按钮样式 */
#closeWelcomeBtn {
  background: linear-gradient(90deg, #0b74de, #4facfe);
  color: white;
  border: none;
  padding: 12px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 116, 222, 0.3);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

#closeWelcomeBtn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 25px rgba(11, 116, 222, 0.4);
}

#closeWelcomeBtn:active {
  transform: translateY(1px) scale(0.98);
}

/* 欢迎弹窗底部容器样式 */
.welcome-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

/* 版权链接样式 */
.copyright-link {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 13px;
  color: #999;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
}

.copyright-link:hover {
  color: #0b74de;
  border-color: #0b74de;
  background-color: rgba(11, 116, 222, 0.08);
  transform: scale(1.08);
}

.copyright-link:active {
  transform: scale(0.95);
}

/* ===============================================
   版权声明弹窗样式
   =============================================== */

.copyright-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 25000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copyright-modal.show {
  display: flex !important;
  opacity: 1;
}

/* 版权声明卡片 */
.copyright-card {
  position: relative;
  width: 90%;
  max-width: 560px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
              0 0 1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transform: scale(0.8) translateY(30px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: slideInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copyright-modal.show .copyright-card {
  transform: scale(1) translateY(0);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 弹入动画 */
@keyframes popIn {
  0% {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) translateY(-5px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  0% {
    transform: scale(0.9) translateY(40px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 版权弹窗收起弹性动画 */
.copyright-modal.closing .copyright-card {
  animation: popOut 520ms cubic-bezier(0.22, 1.6, 0.36, 1) forwards;
}

@keyframes popOut {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  40% {
    transform: scale(1.06) translateY(-6px);
    opacity: 0.95;
  }
  100% {
    transform: scale(0.86) translateY(30px);
    opacity: 0;
  }
}

/* 关闭按钮 */
.copyright-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #f5f5f5, #efefef);
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
  line-height: 1;
}

.copyright-close:hover {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: white;
  border-color: #ff5252;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.copyright-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* 标题 */
.copyright-header h2 {
  color: #333;
  margin: 0 0 25px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
}

/* 正文 */
.copyright-body {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  text-align: left;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.copyright-body::-webkit-scrollbar {
  width: 6px;
}

.copyright-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.copyright-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.copyright-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.copyright-body p {
  margin: 0 0 16px 0;
  text-indent: 2em;
  letter-spacing: 0.3px;
}

.copyright-body p:last-child {
  margin-bottom: 0;
}

.copyright-body strong {
  color: #0b74de;
  font-weight: 600;
}
#mediaWidget.shifted-left {
  /* 右侧面板内容区宽度(500px) + 音乐组件原始右侧间距(20px) */
  right: 540px;
}
/* --- style.css 新增 --- */

/* 动态壁纸“智能切换”标签样式 */
.wallpaper-special-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #ffbf00, #fec95700); /* 温暖的渐变色 */
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    z-index: 10;
    pointer-events: none; /* 确保不影响点击 */
}
/* --- style.css 新增或覆盖 --- */

/* 1. 调整壁纸网格布局 */
.wallpaper-grid {
  /* 将minmax的最小值从140px增加到220px，这将强制每行最多显示3个项目 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px; /* 稍微增加间隙，让布局更宽松 */
}

/* 2. 放大壁纸占位符和真实缩略图的高度 */
.wallpaper-placeholder,
.lazy-video-thumb {
  height: 130px !important; /* 从90px增加到130px，!important确保覆盖JS内联样式 */
}

/* 3. 放大下载遮罩中的加载动画和文字 */
.download-mask .loading-spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
.download-mask .progress-text {
  font-size: 14px; /* 字体稍大一些 */
}

/* 4. 放大“智能切换”标签 */
.wallpaper-special-tag {
  font-size: 12px; /* 字体变大 */
  padding: 4px 9px;
  border-radius: 6px;
}

/* 5. 放大壁纸卡片右下角的“设置”齿轮图标 */
.video-tile .iconSettings {
  width: 28px;
  height: 28px;
  right: 8px;   /* 调整位置 */
  bottom: 8px;  /* 调整位置 */
}
.video-tile .iconSettings img {
  width: 18px;
  height: 18px;
}

/* 6. 放大自定义上传页面的“+”号按钮 */
.wallpaper-grid.custom-mode .add-wallpaper {
    width: 280px !important;   /* 宽度占满新格子 */
    height: 180px !important; /* 高度也相应增加 */
    font-size: 80px;
}
/* =========================================
   🐾 小猫特殊节日对话框样式
   ========================================= */

/* 基础：为所有特殊对话框准备好装饰元素的容器 */
#catSpeechBubble.bubble-birthday,
#catSpeechBubble.bubble-chunjie,
#catSpeechBubble.bubble-yuanxiao,
#catSpeechBubble.bubble-duanwu,
#catSpeechBubble.bubble-zhongqiu,
#catSpeechBubble.bubble-qixi,
#catSpeechBubble.bubble-shengdan,
#catSpeechBubble.bubble-yuandan,
#catSpeechBubble.bubble-guoqing,
#catSpeechBubble.bubble-ertong,
#catSpeechBubble.bubble-qingrenjie {
  overflow: visible; /* 允许装饰溢出 */
  border: 2px solid;
  color: #333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  padding: 12px 20px;
}

/* 通用装饰元素样式 */
#catSpeechBubble[class*="bubble-"]::before,
#catSpeechBubble[class*="bubble-"]::after {
  content: '';
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1; /* 放在对话框后面 */
  pointer-events: none;
}

/* 1. 生日快乐 .bubble-birthday */
#catSpeechBubble.bubble-birthday {
  background: linear-gradient(135deg, #fff0f5, #ffe4e1);
  border-color: #ffb6c1;
  box-shadow: 0 5px 20px rgba(255, 182, 193, 0.5);
}
#catSpeechBubble.bubble-birthday::before {
  background-image: url('images/dangao.png');
  width: 50px;
  height: 50px;
  left: -20px;
  bottom: -25px;
  transform: rotate(-15deg);
}
#catSpeechBubble.bubble-birthday::after {
  background-image: url('images/caidai.png');
  width: 100%;
  height: 40px;
  top: -20px;
  left: 0;
  opacity: 0.8;
}

/* 2. 春节/除夕 .bubble-chunjie */
#catSpeechBubble.bubble-chunjie {
  background: linear-gradient(135deg, #fce9a5, #ffb67b);
  border-color: #e67e22;
  box-shadow: 0 5px 20px rgba(230, 126, 34, 0.5);
}
#catSpeechBubble.bubble-chunjie::before {
  background-image: url('images/bianpao.png');
  width: 40px;
  height: 80px;
  left: -25px;
  top: -15px;
}
#catSpeechBubble.bubble-chunjie::after {
  background-image: url('images/denglong.png');
  width: 50px;
  height: 50px;
  right: -25px;
  top: -20px;
}

/* 3. 元宵节 .bubble-yuanxiao */
#catSpeechBubble.bubble-yuanxiao {
  background: #fdf5e6;
  border-color: #f5deb3;
}
#catSpeechBubble.bubble-yuanxiao::before {
  background-image: url('images/tangyuan.png');
  width: 55px;
  height: 55px;
  right: -20px;
  bottom: 20px;
}
#catSpeechBubble.bubble-yuanxiao::after {
  background-image: url('images/denglong.png');
  width: 45px;
  height: 45px;
  left: -20px;
  top: -20px;
}

/* 4. 端午节 .bubble-duanwu */
#catSpeechBubble.bubble-duanwu {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-color: #81c784;
}
#catSpeechBubble.bubble-duanwu::before {
  background-image: url('images/zongzi.png');
  width: 50px;
  height: 50px;
  left: -20px;
  bottom: -20px;
}
#catSpeechBubble.bubble-duanwu::after {
  background-image: url('images/longzhou.png');
  width: 80px;
  height: 40px;
  right: -50px;
  top: -15px;
}
/* 5. 中秋节 .bubble-zhongqiu */
#catSpeechBubble.bubble-zhongqiu {
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  border-color: #9fa8da;
}
#catSpeechBubble.bubble-zhongqiu::before {
  background-image: url('images/yuebing.png');
  width: 50px;
  height: 50px;
  right: -15px;
  bottom: 20px;
}
#catSpeechBubble.bubble-zhongqiu::after {
  background-image: url('images/yutu.png');
  width: 45px;
  height: 45px;
  left: -15px;
  top: -15px;
}

/* 6. 七夕节 .bubble-qixi */
#catSpeechBubble.bubble-qixi {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border-color: #ce93d8;
}
#catSpeechBubble.bubble-qixi::before {
  background-image: url('images/xique.png');
  width: 50px;
  height: 50px;
  right: -20px;
  top: -20px;
}
#catSpeechBubble.bubble-qixi::after {
  background-image: url('images/aixin.png');
  width: 40px;
  height: 40px;
  left: -10px;
  bottom: -20px;
  opacity: 1;
}

/* 7. 圣诞节 .bubble-shengdan */
#catSpeechBubble.bubble-shengdan {
  background: #e8f5e9;
  border-color: #a5d6a7;
}
#catSpeechBubble.bubble-shengdan::before {
  background-image: url('images/shengdanshu.png');
  width: 50px;
  height: 60px;
  left: -25px;
  bottom: -10px;
}
#catSpeechBubble.bubble-shengdan::after {
  background-image: url('images/xuehua.png');
  width: 35px;
  height: 35px;
  right: -15px;
  top: -15px;
}

/* 8. 元旦 .bubble-yuandan */
#catSpeechBubble.bubble-yuandan {
  background: #e3f2fd;
  border-color: #90caf9;
}
#catSpeechBubble.bubble-yuandan::before {
  background-image: url('images/yanhua.png');
  width: 100%;
  height: 60px;
  top: -30px;
  left: 0;
  background-position: center;
  opacity: 0.9;
}
/* 9. 国庆节 .bubble-guoqing */
#catSpeechBubble.bubble-guoqing {
  background: linear-gradient(to right, #ffeda0, #feb24c);
  border-color: #fd8d3c;
}
#catSpeechBubble.bubble-guoqing::before {
  background-image: url('images/guoqi.png');
  width: 50px;
  height: 50px;
  left: -15px;
  top: -15px;
}
#catSpeechBubble.bubble-guoqing::after {
  background-image: url('images/gezi.png');
  right: 0px;
  bottom: 20px;
  width: 50px;
  height: 50px;
}
/* 10. 儿童节 .bubble-ertong */
#catSpeechBubble.bubble-ertong {
  background: #e0f7fa;
  border-color: #80deea;
}
#catSpeechBubble.bubble-ertong::before {
  background-image: url('images/qiqiu.png');
  width: 50px;
  height: 60px;
  left: -20px;
  top: -25px;
}
#catSpeechBubble.bubble-ertong::after {
  background-image: url('images/bangbangtang.png');
  width: 40px;
  height: 40px;
  right: -15px;
  bottom: -20px;
}

/* 11. 情人节 .bubble-qingrenjie */
#catSpeechBubble.bubble-qingrenjie {
  background: #fce4ec;
  border-color: #f8bbd0;
}
#catSpeechBubble.bubble-qingrenjie::before {
  background-image: url('images/qiaokeli.png');
  width: 50px;
  height: 50px;
  left: -20px;
  bottom: -25px;
}
#catSpeechBubble.bubble-qingrenjie::after {
  background-image: url('images/aixin.png');
  width: 45px;
  height: 45px;
  right: -18px;
  top: -18px;
  opacity: 0.8;
}
/* 12. 万圣节 .bubble-wanshengjie */
#catSpeechBubble.bubble-wanshengjie {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border-color: #d35400;
  box-shadow: 0 5px 20px rgba(211, 84, 0, 0.4);
}
#catSpeechBubble.bubble-wanshengjie::before {
  background-image: url('images/nangua.png');
  width: 50px;
  height: 45px;
  left: -20px;
  bottom: -20px;
  transform: rotate(-10deg);
}
#catSpeechBubble.bubble-wanshengjie::after {
  background-image: url('images/youling.png');
  width: 40px;
  height: 40px;
  right: -15px;
  top: -15px;
  opacity: 0.8;
}
/* 禅模式中央时间组件 - 优化版 */
#zenTimeWidget {
  position: fixed;
  top: 45%; /* 向上移动，从50%改为45% */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 减小间距，让组件更紧凑 */
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              visibility 0.6s;
}

#zenTimeWidget.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#zenDate {
  font-size: 1.5rem; /* 调小字体 */
  font-weight: 300; /* 字体变细 */
  opacity: 0.8;
  letter-spacing: 1px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

#zenTime {
  /* 使用等宽字体确保数字间距均匀，避免跳动 */
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 8.5rem;
  font-weight: 600; /* 字体变细，更显精致 */
  letter-spacing: -2px; 
  line-height: 1;
  text-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

#zenInfo {
  display: flex;
  align-items: center;
  font-size: 1.3rem; /* 调小字体 */
  font-weight: 300; /* 字体变细 */
  opacity: 0.9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* =========================================
   🎊 页面全局节日装饰 (完整版)
   ========================================= */

/* --- 通用动画 --- */

/* 轻微摇摆 (用于灯笼等悬挂物) */
@keyframes gentle-sway {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
}
/* 水平翻转后的摇摆动画 */
@keyframes gentle-sway-flipped {
  0%, 100% { transform: scaleX(-1) rotate(2deg); }
  50% { transform: scaleX(-1) rotate(-2deg); }
}

/* 上下浮动 */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 龙舟摇晃 */
@keyframes boat-rock {
    0% { transform: rotate(-1deg) translateX(0); }
    50% { transform: rotate(1deg) translateX(-10px); }
    100% { transform: rotate(-1deg) translateX(0); }
}

/* 气球上升 */
@keyframes float-up {
    0% { transform: translateY(0); opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh); opacity: 0; }
}
/* =========================================
   🎵 音乐播放器样式 (布局修正版)
   ========================================= */
#musicPlayerWidget {
  background-image: url('images/yinyuebofangqi.png') !important;
  width: 468px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.362);
}

/* 顶部容器：唱片 + 信息 */
.music-top-row {
  display: flex;
  align-items: center;
  gap: 15px; /* 唱片和信息块之间的距离 */
  margin-bottom: 10px;
}

/* 唱片 */
.music-vinyl {
  width: 60px;
  height: 60px;
  flex-shrink: 0; /* 防止唱片被压缩 */
  border-radius: 50%;
  background: #111;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.music-vinyl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.music-vinyl.rotating {
  animation: vinylSpin 4s linear infinite;
}

@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 修正：信息块（包含歌名和作者）*/
.music-info {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* ★ 核心修改：使用 flex 布局，让内部元素横向排列 */
  align-items: baseline; /* 让歌名和作者的文字基线对齐，看起来更专业 */
  gap: 10px; /* 歌名和作者之间的距离 */
  min-width: 0; /* 防止 flex 内部元素（如过长的歌名）溢出容器 */
}

/* 歌名 */
#localMusicTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  flex-shrink: 1; /* 当空间不足时，优先压缩歌名，而不是作者名 */
}

/* 作者 */
#localMusicArtist {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap; /* 不换行 */
  flex-shrink: 0; /* 尽量不压缩作者名，保持其完整 */
}

/* 歌词容器 */
.lyric-container {
  height: 120px; /* 保持较大的歌词区域 */
  overflow: hidden;
  position: relative;
  text-align: center;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.lyric-wrapper {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lyric-line {
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s, font-weight 0.3s;
  line-height: 26px;
}

.lyric-line.current {
  color: #0b74de;
  font-weight: bold;
  /* ✅ 新增：添加白色文字描边效果，让歌词更清晰 */
  text-shadow: 
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 0 5px rgba(0,0,0,0.3); /* (可选) 在白色描边外再加一层淡淡的阴影，增加立体感 */
}


/* 进度条 */
.music-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin: 10px 0;
  opacity: 0.9;
}

#musicProgressBar {
  flex: 1;
  height: 4px;
  appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
}

#musicProgressBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: #0b74de;
  border-radius: 50%;
  cursor: pointer;
}

/* 控制按钮 */
.music-controls {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
}

.music-controls button {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.music-controls button:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}
.music-controls button#stopSongBtn:hover {
  background: rgba(255, 107, 107, 0.4); /* 悬停时显示淡淡的红色，以示警告 */
  color: white;
}
/* 播放列表 */
.music-playlist {
  margin-top: 10px;
  max-height:145px;
  overflow-y: auto;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 5px;
}

.music-playlist::-webkit-scrollbar {
  width: 4px;
}
.music-playlist::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}

#songListUl {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.song-item:hover {
  background: rgba(255,255,255,0.1);
}

.song-item.active {
  color: #0b74de;
  font-weight: bold;
}

.song-item .song-status-icon {
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.7;
}

.song-item .song-status-icon:hover {
  opacity: 1;
  transform: scale(1.2);
}


/* =========================================
   🎤 禅模式歌词组件
   ========================================= */
#zenLyricsWidget {
  position: fixed;
  top: 67%; /* 垂直定位于时间组件的上方 */
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  width: 90%;
  max-width: 1000px; /* 允许更宽的歌词显示区域 */
  z-index: 99; /* 层级低于时间组件 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              visibility 0.6s;
}

#zenLyricsWidget.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#zenLyricsContent {
  font-size: 2rem; /* 字体大小适中 */
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 3px 15px rgba(0,0,0,0.7); /* 增强阴影以提高可读性 */
  display: inline-block;
  padding: 5px 25px;
}
/* 
 * 每一行歌词（包含原文和翻译）
 */
.dual-column .lyric-row {
  display: flex;
  justify-content: space-between; /* 两列之间留有空隙 */
  width: 100%;
  margin-bottom: 8px; /* 行间距 */
  transition: all 0.3s ease;
  opacity: 0.5; /* 非当前行半透明 */
  transform: scale(0.95);
}

/* 
 * 高亮的当前行
 */
.dual-column .lyric-row.current {
  opacity: 1;
  transform: scale(1);
  color: #87CEFA; /* 高亮颜色，您可以自定义 */
  font-weight: bold;
}

/* 
 * 每一列（原文或翻译）
 */
.dual-column .lyric-col {
  flex-basis: 49%; /* 每列占据大约一半的宽度 */
  margin: 0;
  padding: 0;
  text-align: center; /* 列内文本居中 */
  line-height: 1.4;
}

/*
 * （可选）让原文和翻译的对齐方式不同，更有层次感
 */
.dual-column .lyric-original {
   text-align: left;
}
.dual-column .lyric-translation {
   text-align: right;
   color: #ccc; /* 翻译文本颜色可以浅一些 */
}

.dual-column .lyric-row.current .lyric-translation {
    color: #87CEFA; /* 高亮时，翻译也变色 */
}
/* style2.css */

/* 修正后的“固定”开关容器样式 */
.pin-panel-container {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px; /* 文字与开关的间距 */
  background: rgba(0, 0, 0, 0.2); /* 添加一个半透明背景，更美观 */
  padding: 4px 8px;
  border-radius: 15px;
  backdrop-filter: blur(2px);
}

/* “固定”文字标签的样式 */
.pin-panel-label {
  font-size: 12px;
  color: white;
  font-weight: 500;
  user-select: none;
}

/* 一个更小巧的开关样式，适配播放器 */
.switch.small-switch {
  width: 34px;
  height: 20px;
  transform: scale(0.9); /* 整体缩小一点 */
}
.switch.small-switch .slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
}
.switch.small-switch input:checked + .slider:before {
  transform: translateX(14px);
}
/*
 * --- 新增：自定义右侧面板的滚动条样式 ---
 */

/* 1. 针对整个滚动条的设置 */
.wp-right-panel::-webkit-scrollbar {
  width: 12px; /* 稍微加宽一点，方便点击 */
}

/* 2. 滚动条轨道（背景） */
.wp-right-panel::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景设为透明 */
}

/* 3. 滚动条滑块（可以拖动的部分） */
.wp-right-panel::-webkit-scrollbar-thumb {
  background-color: #00a6ff; /* 深蓝色 */
  border-radius: 6px; /* 圆角 */
  border: 3px solid transparent; /* 利用边框创建内边距效果，让滑块变细 */
  background-clip: content-box; /* 让背景色只在内容区域显示（即边框内部） */
}

/* 4. （可选）鼠标悬停在滑块上的效果 */
.wp-right-panel::-webkit-scrollbar-thumb:hover {
  background-color: #00b7ff; /* 悬停时变为稍亮一点的蓝色 */
}
/* =========================================
   🌤️/📰/📜 新增三大组件样式
   ========================================= */

/* 组件内部自定义滚动条 (新闻和历史列表) */
.custom-scroll::-webkit-scrollbar {
  width: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
/* 基础样式修复 */
#imgModeBtn {
  transition: all 0.3s ease !important; /* 缩短过渡时间，让反馈更灵敏 */
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  outline: none;
}

/* 悬停效果 */
#imgModeBtn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
/* 确保 AI 消息区域允许被选中 */
#chatMessages, .ai-message, .user-message {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text; /* 鼠标移上去变成 I 型，提示可选中 */
}
/* =========================================
   💬 聊天气泡弹性进场动画
   ========================================= */
@keyframes messageBounceIn {
  0%   { opacity: 0; transform: scale(0.85) translateY(12px); }
  55%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  75%  { transform: scale(0.97) translateY(2px); }
  90%  { transform: scale(1.02) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 聊天行容器 */
.chat-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  width: 100%;
  opacity: 0;
  animation: messageBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 头像样式 */
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* 气泡通用样式 */
.chat-bubble {
  max-width: 70%;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  position: relative;
  word-wrap: break-word;
  line-height: 1.5;
}

/* ---- 用户气泡（右侧）：蓝白渐变 + 半透明 ---- */
.user-row {
  flex-direction: row-reverse;
}
.user-row .chat-bubble {
  margin-right: 10px;
  background: linear-gradient(135deg,
    rgba(0, 136, 255, 1) 0%,rgba(255, 255, 255, 0.7) 90%,
    rgba(200, 230, 255, 0.70) 100%);
  backdrop-filter: blur(4px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  border-radius: 12px 12px 12px 12px;
}
/* 用户气泡右侧小尖角 */
.user-row .chat-bubble::after {
  content: "";
  position: absolute;
  top: 10px; right: -5px;
  border-width: 5px 0 5px 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(191, 225, 255, 0.7);
}

/* ---- AI/猫猫气泡（左侧）：淡粉白渐变 + 爪印装饰 ---- */
.ai-row {
  flex-direction: row;
}
.ai-row .chat-bubble {
  margin-left: 10px;
  /* 粉白渐变底色 */
  background: linear-gradient(135deg, #ffd6e0 0%, #ffffff 100%);
  color: #444;
  border-radius: 12px 12px 12px 12px;
  /* 爪印图案叠加在右下角 */
  background-image:
    url('cat/maozhuazhi.png'),
    linear-gradient(135deg, #ffd6e0 0%, #ffffff 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom -2px right 0px, 0 0;
  background-size: 34px 34px, 100% 100%;
}
/* AI气泡左侧小尖角（颜色匹配渐变起点） */
.ai-row .chat-bubble::after {
  content: "";
  position: absolute;
  top: 10px; left: -5px;
  border-width: 5px 6px 5px 0;
  border-style: solid;
  border-color: transparent #ffd6e0 transparent transparent;
}
/* =========================================
   🖼️ AI 专属头像框样式
   ========================================= */

/* AI 头像的外层容器 */
.ai-avatar-wrapper {
  position: relative;
  width: 50px;  /* 容器宽度与头像框一致 */
  height: 50px; /* 保持正方形以便于垂直居中 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px; /* 微调：抵消变宽的20px，防止气泡被挤压得太靠右 */
}

/* AI 的本体头像保持 40px 不变 */
.ai-avatar-wrapper .chat-avatar {
  width: 40px;
  height: 40px;
  margin: 0; /* 清除默认的 margin 影响 */
  position: relative;
  z-index: 1; /* 放在底层 */
}

/* 叠加的头像框图片 */
.ai-avatar-wrapper .avatar-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 绝对居中对齐 */
  width: 50px;      /* 强制 60px 宽度 */
  height: auto;     /* 高度自适应 */
  z-index: 2;       /* 盖在头像上方 */
  pointer-events: none; /* 防止遮挡头像的右键或点击事件 */
}