/* ============================================
   漫画风格聊天框完整美化方案 - 简洁版
   ============================================ */

/* 覆盖外层聊天气泡容器 - AI输出侧和用户侧 */
.relative.inline-block.w-full.bg-gray-100\/90,
.relative.inline-block.max-w-full.bg-gray-100\/90 {
  /* 移除原始灰色背景和圆角 */
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  
  /* 使用新的漫画风格容器 */
  background-image: url('https://tutu.to/image/fTKB4') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: local !important;
  border: 4px solid #333 !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15) !important;
  padding: 24px !important;
  position: relative !important;
}

/* AI输出侧 - 添加米黄色遮罩层 */
.relative.inline-block.w-full.bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 248, 225, 0.85) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 用户输入侧 - 添加浅蓝色遮罩层区分 */
.relative.inline-block.max-w-full.bg-gray-100\/90::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(232, 245, 248, 0.85) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 确保所有子元素在遮罩层之上 */
.relative.inline-block > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 隐藏原有顶部装饰线 */
.relative.inline-block > .absolute.top-0 {
  display: none !important;
}

/* markdown-body 容器样式调整 */
.markdown-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif !important;
  line-height: 1.8 !important;
  color: #2C3E50 !important;
}

/* 段落样式 */
.markdown-body p {
  margin: 16px 0 !important; /* 保持分段间距 */
  padding: 0 !important;
  background: transparent !important; /* 背景透明，不分段 */
  border: none !important;
  box-shadow: none !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 粉色对话文字 */
.markdown-body span[style*="color: pink"] {
  color: #EC407A !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(to right, #FCE4EC, transparent) !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  border: 2px solid #F48FB1 !important;
}

/* 紫色对话文字 */
.markdown-body span[style*="color: purple"] {
  color: #7B1FA2 !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(to right, #F3E5F5, transparent) !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  border: 2px solid #AB47BC !important;
}

/* Details折叠块基础样式 */
.markdown-body details {
  margin: 20px 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 3px solid #333 !important;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.markdown-body details:hover {
  transform: translateY(-4px) !important;
  box-shadow: 8px 12px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Summary标题样式 */
.markdown-body details summary {
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  list-style: none !important;
  border-bottom: 3px solid #333 !important;
  transition: all 0.2s ease !important;
}

.markdown-body details summary::-webkit-details-marker {
  display: none !important;
}

/* 基础信息 - 天蓝色 */
.markdown-body details:nth-of-type(1) summary {
  background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%) !important;
  color: #01579B !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.markdown-body details:nth-of-type(1) summary:hover {
  background: linear-gradient(135deg, #29B6F6 0%, #03A9F4 100%) !important;
  transform: translateX(4px) !important;
}

/* 行动选项/第二个折叠块 - 橙黄色 */
.markdown-body details:nth-of-type(2) summary {
  background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%) !important;
  color: #F57F17 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.markdown-body details:nth-of-type(2) summary:hover {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%) !important;
  transform: translateX(4px) !important;
}

/* 当前交互角色/第三个折叠块 - 粉红色 */
.markdown-body details:nth-of-type(3) summary {
  background: linear-gradient(135deg, #F48FB1 0%, #EC407A 100%) !important;
  color: #880E4F !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.markdown-body details:nth-of-type(3) summary:hover {
  background: linear-gradient(135deg, #EC407A 0%, #E91E63 100%) !important;
  transform: translateX(4px) !important;
}

/* 记忆区/第四个折叠块 - 薄荷绿 */
.markdown-body details:nth-of-type(4) summary {
  background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%) !important;
  color: #1B5E20 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.markdown-body details:nth-of-type(4) summary:hover {
  background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%) !important;
  transform: translateX(4px) !important;
}

/* 小剧场/第五个折叠块 - 紫色 */
.markdown-body details:nth-of-type(5) summary {
  background: linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
  color: #4A148C !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.markdown-body details:nth-of-type(5) summary:hover {
  background: linear-gradient(135deg, #AB47BC 0%, #9C27B0 100%) !important;
  transform: translateX(4px) !important;
}

/* 展开状态样式 */
.markdown-body details[open] summary {
  border-bottom: 3px solid #333 !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.05) 20px
  ) !important;
}

/* 展开/收起图标 */
.markdown-body details summary::after {
  content: '▼' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  transition: transform 0.3s ease !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.markdown-body details[open] summary::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Pre代码块样式 */
.markdown-body pre {
  margin: 0 !important;
  padding: 16px !important;
  background: rgba(255, 254, 247, 0.98) !important;
  border: none !important;
  overflow-x: auto !important;
}

.markdown-body pre div {
  background: transparent !important;
}

/* Code内容样式 */
.markdown-body code {
  color: #2C3E50 !important;
  font-family: 'Consolas', 'Monaco', monospace !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* 代码块头部工具栏 */
.markdown-body .flex.justify-between {
  background: rgba(245, 245, 245, 0.98) !important;
  border-bottom: 2px solid #333 !important;
  padding: 8px 16px !important;
}

/* 复制按钮样式 */
.markdown-body .style_copyIcon__GJL9e {
  border: 2px solid #333 !important;
  background: #FFF !important;
  transition: all 0.2s ease !important;
}

.markdown-body .style_copyIcon__GJL9e:hover {
  background: #FFB300 !important;
  transform: translateY(-2px) !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

/* HR分隔线 */
.markdown-body hr {
  border: none !important;
  border-top: 4px dashed #333 !important;
  margin: 24px 0 !important;
  opacity: 0.5 !important;
}

/* 滚动条美化 */
.markdown-body pre::-webkit-scrollbar {
  height: 8px !important;
  background: #F5F5F5 !important;
  border: 2px solid #333 !important;
}

.markdown-body pre::-webkit-scrollbar-thumb {
  background: #FFC107 !important;
  border: 1px solid #333 !important;
}

.markdown-body pre::-webkit-scrollbar-thumb:hover {
  background: #FFB300 !important;
}

/* ============================================
   底部信息和按钮组美化
   ============================================ */

/* 积分消耗信息栏 */
.MuiStack-root.text-purple-500 {
  margin-top: 16px !important;
  padding: 12px 16px !important;
  background: rgba(243, 229, 245, 0.95) !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.MuiStack-root.text-purple-500 p {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

/* 底部按钮组容器 */
.MuiStack-root.css-1dzoql9 {
  margin-top: 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* 按钮基础样式 */
.MuiButton-root.css-1t7rg57 {
  background: #fff !important;
  color: #2C3E50 !important;
  border: 2px solid #333 !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-transform: none !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* 按钮悬停效果 */
.MuiButton-root.css-1t7rg57:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.2) !important;
}

/* 按钮点击效果 */
.MuiButton-root.css-1t7rg57:active {
  transform: translateY(0) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* 不同按钮的配色 */
.MuiButton-root.css-1t7rg57:nth-child(1) {
  /* 复制按钮 - 绿色 */
  background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%) !important;
  color: #1B5E20 !important;
}

.MuiButton-root.css-1t7rg57:nth-child(2) {
  /* 刷新/编辑按钮 - 蓝色 */
  background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%) !important;
  color: #01579B !important;
}

.MuiButton-root.css-1t7rg57:nth-child(3) {
  /* 编辑/删除按钮 - 橙色 */
  background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%) !important;
  color: #F57F17 !important;
}

.MuiButton-root.css-1t7rg57:nth-child(4) {
  /* 删除按钮 - 红色 */
  background: linear-gradient(135deg, #EF9A9A 0%, #E57373 100%) !important;
  color: #B71C1C !important;
}

.MuiButton-root.css-1t7rg57:nth-child(5) {
  /* 生成音频按钮 - 紫色 */
  background: linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
  color: #4A148C !important;
}

.MuiButton-root.css-1t7rg57:nth-child(6) {
  /* 生成图片按钮 - 粉色 */
  background: linear-gradient(135deg, #F48FB1 0%, #EC407A 100%) !important;
  color: #880E4F !important;
}

/* 按钮图标样式 */
.MuiButton-root svg {
  margin-right: 4px !important;
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.5)) !important;
}

/* ============================================
   响应式适配
   ============================================ */

@media (max-width: 768px) {
  .relative.inline-block.w-full.bg-gray-100\/90,
  .relative.inline-block.max-w-full.bg-gray-100\/90 {
    padding: 16px !important;
    border-width: 3px !important;
  }
  
  .markdown-body details summary {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  .MuiButton-root.css-1t7rg57 {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

/* ============================================
   打印样式优化
   ============================================ */

@media print {
  .relative.inline-block::before {
    display: none !important;
  }
  
  .relative.inline-block {
    background: white !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
  }
  
  .MuiStack-root.css-1dzoql9 {
    display: none !important;
  }
}

/* ============================================
   模块二：功能按钮美化（漫画风格）
   ============================================ */

/* mod、流式、评论、回到底部等按钮 */
.flex.items-center.gap-2.pb-2 > button {
  background: #fff !important;
  color: #2C3E50 !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important; /* 矩形设计 */
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
  font-weight: bold !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  min-height: 36px !important;
}

/* 按钮悬停效果 - 向上浮动 */
.flex.items-center.gap-2.pb-2 > button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.25) !important;
}

/* 按钮点击效果 */
.flex.items-center.gap-2.pb-2 > button:active {
  transform: translateY(0) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* 不同按钮配色（根据位置） */
.flex.items-center.gap-2.pb-2 > button:nth-child(1) {
  background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%) !important;
  color: #1B5E20 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.flex.items-center.gap-2.pb-2 > button:nth-child(2) {
  background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%) !important;
  color: #01579B !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.flex.items-center.gap-2.pb-2 > button:nth-child(3) {
  background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%) !important;
  color: #F57F17 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.flex.items-center.gap-2.pb-2 > button:nth-child(4) {
  background: linear-gradient(135deg, #F48FB1 0%, #EC407A 100%) !important;
  color: #880E4F !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.flex.items-center.gap-2.pb-2 > button:nth-child(5) {
  background: linear-gradient(135deg, #CE93D8 0%, #AB47BC 100%) !important;
  color: #4A148C !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* 如果还有更多按钮，继续添加配色 */
.flex.items-center.gap-2.pb-2 > button:nth-child(n+6) {
  background: linear-gradient(135deg, #80DEEA 0%, #26C6DA 100%) !important;
  color: #006064 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* 按钮图标样式优化 */
.flex.items-center.gap-2.pb-2 > button svg {
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.5)) !important;
}

/* ============================================
   模块四：输入框容器美化
   ============================================ */

/* 输入框容器 - 添加漫画风格背景 */
#ai-chat-bottom-input {
  background: linear-gradient(135deg, #FFF9C4 0%, #FFEB3B 50%, #FFF59D 100%) !important;
  border: 4px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* 输入框容器内部遮罩（可选，如果需要图片背景） */
#ai-chat-bottom-input::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 248, 225, 0.5) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 确保输入框容器内的元素在遮罩层之上 */
#ai-chat-bottom-input > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 输入框本身 */
#ai-chat-input {
  background-color: #FFFFFF !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  color: #2C3E50 !important;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.08) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif !important;
  transition: box-shadow 0.2s ease !important;
  resize: vertical !important;
  min-height: 80px !important;
}

/* 输入框聚焦状态 */
#ai-chat-input:focus {
  outline: none !important;
  box-shadow: 
    inset 3px 3px 0 rgba(0, 0, 0, 0.08),
    0 0 0 3px #FFD54F !important;
}

/* 输入框占位符文字 */
#ai-chat-input::placeholder {
  color: #9E9E9E !important;
  opacity: 0.8 !important;
}

/* ============================================
   输入框底部功能按钮组（发送、清空等）
   ============================================ */

/* 输入框区域内的按钮 */
#ai-chat-bottom-input button {
  background: #fff !important;
  border: 3px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
  font-weight: bold !important;
  padding: 8px 20px !important;
  transition: all 0.2s ease !important;
  font-size: 13px !important;
}

/* 发送按钮特殊配色 */
#ai-chat-bottom-input button[type="submit"],
#ai-chat-bottom-input button:has(svg[class*="send"]),
#ai-chat-bottom-input button:last-child {
  background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%) !important;
  color: #1B5E20 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* 清空/重置按钮配色 */
#ai-chat-bottom-input button:first-child {
  background: linear-gradient(135deg, #EF9A9A 0%, #E57373 100%) !important;
  color: #B71C1C !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* 输入框区域按钮悬停 */
#ai-chat-bottom-input button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.25) !important;
}

/* 输入框区域按钮点击 */
#ai-chat-bottom-input button:active {
  transform: translateY(0) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   响应式适配
   ============================================ */

@media (max-width: 768px) {
  .flex.items-center.gap-2.pb-2 > button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }
  
  #ai-chat-bottom-input {
    padding: 12px !important;
    border-width: 3px !important;
  }
  
  #ai-chat-input {
    min-height: 60px !important;
    font-size: 13px !important;
  }
  
  #ai-chat-bottom-input button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* ============================================
   辅助功能优化
   ============================================ */

/* 按钮禁用状态 */
.flex.items-center.gap-2.pb-2 > button:disabled,
#ai-chat-bottom-input button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

/* 输入框禁用状态 */
#ai-chat-input:disabled {
  background-color: #F5F5F5 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* 打印样式 */
@media print {
  #ai-chat-bottom-input,
  .flex.items-center.gap-2.pb-2 {
    display: none !important;
  }
}

/* ========== 表情差分系统 ========== */
expr {
  display: inline-block;
  width: 108px;
  height: 108px;
  background-size: 92% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  vertical-align: middle;
  margin: 0 8px;
  position: relative;
  border-radius: 26px;
  border: 2px solid rgba(255, 236, 246, 0.95);
  background-color: rgba(255, 248, 252, 0.92);
  box-shadow:
    0 4px 12px rgba(160, 72, 116, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 -10px 18px rgba(255, 204, 229, 0.28);
  filter: drop-shadow(0 2px 3px rgba(120, 60, 90, 0.12));
  overflow: hidden;
}

expr::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 8px 16px rgba(255, 255, 255, 0.38),
    inset 0 -8px 14px rgba(255, 175, 214, 0.16);
  pointer-events: none;
}

expr::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 42%;
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  transform: rotate(-16deg);
  pointer-events: none;
}

expr.smile { background-image: url("https://catai.wiki/a3a201f4-8f3a-472f-8c3e-b3267b48a200/w=3000"); }
expr.sigh { background-image: url("https://catai.wiki/de28402b-1ee2-4e91-9d15-c6f82597d100/w=3000"); }
expr.cold-smile { background-image: url("https://catai.wiki/87636dc0-0492-4793-c19f-adf4a3ebec00/w=3000"); }
expr.teary { background-image: url("https://catai.wiki/41c3021a-bffb-42e0-c732-2a3bd9050600/w=3000"); }
expr.shy { background-image: url("https://catai.wiki/f80b739d-6c13-447f-325c-68f9fc054900/w=3000"); }
expr.awkward { background-image: url("https://catai.wiki/8e403654-7a6f-4e17-f779-540ecf0e2400/w=3000"); }
expr.sleep { background-image: url("https://catai.wiki/f5215bd9-a473-44dc-ef46-3baf117dec00/w=3000"); }
expr.blank { background-image: url("https://catai.wiki/b00d0f7c-8d13-4e2b-f381-7e6cb23ac100/w=3000"); }

/* ========== 服装差分系统 ========== */

/* 仅显示最新一轮立绘：旧 AI 回复中的 outfit 会被隐藏 */
[id="ai-chat-answer"]:has(outfit):has(~ [id="ai-chat-answer"] outfit) outfit {
  display: none !important;
}

outfit {
  position: fixed;
  bottom: -60%;
  right: -15%;
  width: 450px;
  height: 800px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transform: rotate(-12deg);
  transform-origin: bottom right;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.3));
  display: block;
  pointer-events: none;
}

/* 独立判定区（伪元素） */
outfit::before {
  content: "";
  position: absolute;
  top: 15%;
  right: 20%;
  width: 120px;
  height: 150px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10000;
}

/* 长按判定区时展开 */
outfit:active {
  bottom: 0;
  right: 5%;
  transform: rotate(0deg) scale(0.8);
  filter: drop-shadow(4px 8px 16px rgba(0,0,0,0.4));
}

/* 服装资源映射 */
outfit.pink-kimono { background-image: url("https://catai.wiki/d1336415-552b-4695-5b0a-9aa699e21f00/w=3000"); }
outfit.orange-hoodie { background-image: url("https://catai.wiki/7838ddb8-cc68-420a-48de-d612180a9a00/w=3000"); }
outfit.swimsuit { background-image: url("https://catai.wiki/90a6b640-d38f-4d8a-0101-3b871fdb3400/w=3000"); }
outfit.home-shorts { background-image: url("https://catai.wiki/cc30a036-835b-43f1-e974-121994715900/w=3000"); }
outfit.blue-jk { background-image: url("https://catai.wiki/826c0553-82c4-479d-6718-9c9774b11600/w=3000"); }
outfit.green-casual { background-image: url("https://catai.wiki/96451a9a-db72-402c-7cd7-6923ea712b00/w=3000"); }
outfit.maid-outfit { background-image: url("https://catai.wiki/46491145-2492-4215-ee6c-c178cd533700/w=3000"); }
outfit.black-jk { background-image: url("https://catai.wiki/cfadfb6f-6226-4dc4-2fb4-ee9a1b07bb00/w=3000"); }
outfit.gray-ol { background-image: url("https://catai.wiki/1bb3b04c-f2b5-4660-931f-909e5db6af00/w=3000"); }
outfit.black-coat-academy { background-image: url("https://catai.wiki/09f59f4e-3ef2-421b-e501-82360211b700/w=3000"); }
outfit.khaki-coat-turtleneck { background-image: url("https://catai.wiki/b2cf8e73-0140-4206-3964-cef0752eb000/w=3000"); }

/* 移动端适配 */
@media (max-width: 768px) {
  expr {
    width: 86px;
    height: 86px;
    border-radius: 22px;
    margin: 0 5px;
    background-size: 92% auto;
  }

  expr::before {
    inset: 3px;
    border-radius: 18px;
  }

  expr::after {
    top: 7px;
    left: 8px;
    width: 40%;
    height: 20%;
  }

  outfit {
    width: 280px;
    height: 500px;
    bottom: auto;
    top: 50%;
    right: -35%;
    transform: translateY(-50%) rotate(-8deg);
    transform-origin: center right;
  }
  
  /* 移动端判定区 */
  outfit::before {
    top: 15%;
    right: 25%;
    width: 100px;
    height: 100px;
  }
  
  outfit:active {
    right: 2%;
    top: 50%;
    transform: translateY(-50%) rotate(0deg) scale(1.05);
  }
}