/* ==========================================
   1. 消息气泡区美化 (Message Bubbles)
   ========================================== */

/* 用户消息气泡 - 纸张色背景 + 蓝色阴影 */
#customized-question-content {
  background-color: #e6e4dc !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  box-shadow: 4px 4px 0px #1533d8 !important;
  padding: 14px 16px !important;
}
#customized-question-content .markdown-body {
  color: #0a0a0f !important;
  font-family: "Noto Sans SC", sans-serif !important;
}
/* 用户气泡装饰条 */
#customized-question-content .bg-\[\#c9e1e9\] {
  background-color: #1533d8 !important;
  height: 4px !important;
  border-radius: 0px !important;
}

/* AI 消息气泡 - 深夜黑背景 + 红色阴影 */
#customized-answer-content {
  background-color: #0a0a0f !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  box-shadow: 4px 4px 0px #e8192c !important;
  padding: 14px 16px !important;
}
#customized-answer-content .markdown-body {
  color: #f6f5f0 !important;
  font-family: "Noto Sans SC", sans-serif !important;
}
/* AI 气泡装饰条 */
#customized-answer-content .bg-\[\#F1CBCB\] {
  background-color: #e8192c !important;
  height: 4px !important;
  border-radius: 0px !important;
}

/* 消息操作按钮 - 倾斜硬核按钮 */
#customized-reload-button,
#customized-edit-button,
#customized-resend-button,
#customized-delete-button,
#customized-create-image-button,
#customized-create-audio-button,
#customized-branch-and-share-button,
#customized-prompt-log-button {
  background-color: #e6e4dc !important;
  border: 2px solid #0a0a0f !important;
  border-radius: 0px !important;
  color: #0a0a0f !important;
  transform: skewX(-10deg) !important;
  transition: all 0.15s ease-in-out !important;
}
#customized-reload-button:hover,
#customized-edit-button:hover,
#customized-resend-button:hover,
#customized-delete-button:hover {
  background-color: #e8192c !important;
  color: #ffffff !important;
  box-shadow: 2px 2px 0px #0a0a0f !important;
}

/* 模型信息与Token消耗 */
#customized-answer-content .text-purple-500.mt-1 {
  color: #d4af37 !important;
  font-weight: bold !important;
}
#customized-answer-content .text-orange-500 {
  color: #e8192c !important;
  font-weight: 900 !important;
}

/* ==========================================
   2. 加载动画模块 (Loading Animation)
   ========================================== */

/* 隐藏默认闪烁点 */
#customized-answer-content [class*="dot-flashing"] {
  display: none !important;
}
/* 替换为《缎带英雄》等高线跳动柱状图 SVG */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 40px !important;
  height: 24px !important;
}
#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30' width='24' height='30'%3E%3Crect x='0' y='10' width='4' height='10' fill='%23e8192c'%3E%3Canimate attributeName='height' values='10%3B20%3B10' dur='0.6s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='10%3B5%3B10' dur='0.6s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='8' y='10' width='4' height='10' fill='%231533d8'%3E%3Canimate attributeName='height' values='10%3B20%3B10' dur='0.6s' begin='0.2s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='10%3B5%3B10' dur='0.6s' begin='0.2s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='16' y='10' width='4' height='10' fill='%23d4af37'%3E%3Canimate attributeName='height' values='10%3B20%3B10' dur='0.6s' begin='0.4s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='10%3B5%3B10' dur='0.6s' begin='0.4s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ==========================================
   3. 界面控制区模块 (Interface Controls)
   ========================================== */

/* 顶部控制栏 */
.sticky.top-0 {
  background-color: #0a0a0f !important;
  border-bottom: 4px solid #e8192c !important;
}
#customized-model-selector {
  background-color: #e6e4dc !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  transform: skewX(-10deg) !important;
}
#customized-model-selector .truncate {
  transform: skewX(10deg) !important;
  color: #0a0a0f !important;
  font-weight: 900 !important;
}
#header-setting-button {
  color: #f6f5f0 !important;
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  background-color: #e6e4dc !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  color: #0a0a0f !important;
  font-weight: 900 !important;
  transform: skewX(-10deg) !important;
  box-shadow: 4px 4px 0px #0a0a0f !important;
  transition: all 0.2s !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background-color: #1533d8 !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0px #e8192c !important;
}

/* 底部输入框容器 */
.bg-white.border-\[1\.5px\] {
  background-color: #e6e4dc !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  box-shadow: 6px 6px 0px #1533d8 !important;
}
#ai-chat-input {
  background: transparent !important;
  color: #0a0a0f !important;
  font-family: inherit !important;
}
#ai-chat-input::placeholder {
  color: #888896 !important;
}

/* 发送按钮 */
#ai-send-button {
  background-color: #e8192c !important;
  border: 2px solid #0a0a0f !important;
  border-radius: 0px !important;
  transform: skewX(-10deg) !important;
  box-shadow: 3px 3px 0px #0a0a0f !important;
  transition: all 0.15s !important;
}
#ai-send-button:hover {
  background-color: #1533d8 !important;
  box-shadow: 4px 4px 0px #0a0a0f !important;
}
#ai-send-button .icon-icon-send {
  transform: skewX(10deg) !important;
  color: #ffffff !important;
}

/* ==========================================
   4. 评论区模块 (Comment Section)
   ========================================== */

/* 评论面板主容器 */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
  background-color: #f6f5f0 !important;
  border-top: 4px solid #e8192c !important;
  border-left: 4px solid #0a0a0f !important;
  border-right: 4px solid #0a0a0f !important;
  box-shadow: 0px -8px 0px rgba(10, 10, 15, 0.15) !important;
}

/* 评分星星 */
.MuiRating-iconFilled {
  color: #d4af37 !important;
}
.MuiRating-iconEmpty {
  color: #888896 !important;
}

/* 评论输入框包装器 */
.flex.flex-col.border-\[1\.5px\].border-gray-200 {
  background-color: #e6e4dc !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
}
textarea[placeholder="发表评论"] {
  background: transparent !important;
  color: #0a0a0f !important;
}

/* 发送图标 */
svg[data-icon="Send03"] {
  color: #e8192c !important;
}

/* 排序按钮 */
.MuiButton-containedPrimary {
  background-color: #e8192c !important;
  border: 2.5px solid #0a0a0f !important;
  border-radius: 0px !important;
  color: #ffffff !important;
  transform: skewX(-10deg) !important;
  font-weight: 900 !important;
}
.MuiButton-outlinedPrimary {
  background-color: #e6e4dc !important;
  border: 2.5px solid #0a0a0f !important;
  border-radius: 0px !important;
  color: #0a0a0f !important;
  transform: skewX(-10deg) !important;
  font-weight: 900 !important;
}

/* ==========================================
   5. 状态栏与折叠面板美化 (Status & Details Panels)
   ========================================== */

/* 折叠面板外框 - 废土纸张底色 + 粗黑边框 */
.markdown-body details {
  background-color: #f6f5f0 !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
  margin-bottom: 14px !important;
  padding: 0px !important;
  box-shadow: 4px 4px 0px #0a0a0f !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  overflow: hidden !important;
}

/* 展开状态的面板 - 阴影变为深蓝色 */
.markdown-body details[open] {
  box-shadow: 6px 6px 0px #1533d8 !important;
}

/* 面板标题栏 - 终极深夜黑 + 倾斜感文字 */
.markdown-body summary {
  background-color: #0a0a0f !important;
  color: #f6f5f0 !important;
  padding: 12px 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  border-bottom: 3px solid #0a0a0f !important;
  list-style: none !important; /* 隐藏默认三角 */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 隐藏 Safari 的默认三角 */
.markdown-body summary::-webkit-details-marker {
  display: none !important;
}

/* 标题栏左侧前缀装饰 */
.markdown-body summary::before {
  content: "✦ " !important;
  color: #e8192c !important;
  margin-right: 8px !important;
  font-size: 14px !important;
}

/* 展开状态下的标题栏 - 变为废土红 */
.markdown-body details[open] > summary {
  background-color: #e8192c !important;
  color: #ffffff !important;
  border-bottom: 3px solid #0a0a0f !important;
}

/* 面板内部容器 */
.markdown-body details > div,
.markdown-body details > p,
.markdown-body details > ul {
  padding: 16px !important;
  color: #0a0a0f !important;
  background-color: #f6f5f0 !important;
}

/* 内嵌折叠面板（如记忆配置）- 缩进并降级样式 */
.markdown-body details details {
  margin: 12px !important;
  box-shadow: 3px 3px 0px #0a0a0f !important;
  border: 2px solid #0a0a0f !important;
}
.markdown-body details details[open] > summary {
  background-color: #1533d8 !important;
}

/* ==========================================
   6. 记忆回廊表格美化 (Memory Tables)
   ========================================== */

.markdown-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 12px 0 !important;
  border: 3px solid #0a0a0f !important;
  border-radius: 0px !important;
}

.markdown-body th {
  background-color: #1533d8 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: 2px solid #0a0a0f !important;
  padding: 8px 10px !important;
}

.markdown-body td {
  background-color: #e6e4dc !important;
  color: #0a0a0f !important;
  border: 2px solid #0a0a0f !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.markdown-body tr:hover td {
  background-color: #f6f5f0 !important;
}

/* 分割线美化 */
.markdown-body hr {
  border: none !important;
  border-top: 3px dashed #0a0a0f !important;
  margin: 16px 0 !important;
}
/* ==========================================
   7. 消息操作按钮补丁 (Copy & Refund Buttons)
   ========================================== */

/* 统一美化所有消息操作按钮（包括AI复制、截断退款、用户复制按钮） */
#customized-copy-button,
#customized-refund-button,
[id*="-copy-button"],
[id*="-refund-button"],
[id*="-truncate-button"] {
  background-color: #e6e4dc !important;
  border: 2px solid #0a0a0f !important;
  border-radius: 0px !important;
  color: #0a0a0f !important;
  transform: skewX(-10deg) !important;
  transition: all 0.15s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 悬停与激活状态 */
#customized-copy-button:hover,
#customized-refund-button:hover,
[id*="-copy-button"]:hover,
[id*="-refund-button"]:hover {
  background-color: #e8192c !important;
  color: #ffffff !important;
  box-shadow: 2px 2px 0px #0a0a0f !important;
}

/* 确保按钮内的图标或文字不因倾斜而变形 */
#customized-copy-button *,
#customized-refund-button * {
  transform: skewX(10deg) !important;
}

/* ==========================================
   8. 折叠面板左侧对齐优化 (Left-aligned Panels)
   ========================================== */

/* 确保折叠面板整体靠左，不居中 */
.markdown-body details {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* 将标题栏内容从两端对齐（space-between）改为靠左对齐（flex-start） */
.markdown-body summary {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important; /* 控制图标、标题和状态之间的间距 */
  text-align: left !important;
}

/* 针对内部列表和表格同样强制左对齐 */
.markdown-body details > div,
.markdown-body details > p {
  text-align: left !important;
}