/* ==========================================
   高中青春校园风 · Rilichat 完整适配版
   基于旧类名重写，统一使用 Rilichat 结构
   ========================================== */

/* ---------- 1. 移除顶部无关装饰条 ---------- */
/* 如果 Rilichat 顶部存在彩色通知栏/横幅，将其隐藏 */
.announcement-bar,
.header-banner,
[class*="top-banner"] {
  display: none !important;
}

/* ---------- 2. 聊天气泡主体（用户 & 助手通用） ---------- */
/* 原：.bg-gray-100\/90.relative.inline-block */
.is-user > div,
.is-assistant > div {
  /* 信纸/便签纸风格 */
  background: linear-gradient(135deg, #fefefe 0%, #fdf6f0 100%);
  border: 2px solid #c8e6f5;          /* 淡蓝铅笔线边框 */
  border-radius: 16px 4px 16px 4px;   /* 不对称圆角，像撕下的纸 */
  box-shadow: 0 4px 12px rgba(120, 160, 200, 0.2), inset 0 0 0 1px rgba(255,255,255,0.8);
  padding: 18px 20px;
  position: relative;
  font-family: 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;
  color: #3a3a4a;
  transition: all 0.25s ease;
}

/* 左上角折角效果 */
.is-user > div::before,
.is-assistant > div::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, #b8dff0 0%, #fefefe 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-radius: 0 0 4px 0;
}

/* ---------- 3. 用户气泡专属（自己发出的消息） ---------- */
/* 原：.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container ...) */
.is-user > div {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  border-color: #7ec8e3;               /* 天空蓝边框 */
  border-radius: 4px 16px 4px 16px;    /* 反向圆角 */
}

/* ---------- 4. 正文文本样式 ---------- */
/* 原：.markdown-body */
.rili-markdown-renderer {
  font-size: 16px;
  line-height: 1.75;
  color: #2c3e4e;
  font-family: 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;
  font-weight: 450;
  background: transparent;
  text-shadow: none;
}

/* 粗体强调色：樱花粉 */
.rili-markdown-renderer strong {
  color: #ff7b9c;
}

/* 链接颜色：青春蓝 */
.rili-markdown-renderer a {
  color: #4a90e2;
  border-bottom: 1px dashed #4a90e2;
}

/* ---------- 5. 底部操作按钮（复制、编辑等） ---------- */
/* 原：.MuiButtonBase-root.MuiButton-root... */
.is-assistant > div button,
.is-user > div button {
  background: rgba(255, 255, 255, 0.7);
  color: #5b7a9a;
  border: 1px solid #c8dbe8;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.85em;
  padding: 4px 12px;
  transition: all 0.25s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.is-assistant > div button:hover,
.is-user > div button:hover {
  background: #d4e7f5;
  color: #2c3e4e;
  border-color: #7ec8e3;
  box-shadow: 0 4px 10px rgba(120, 160, 200, 0.3);
}

/* 按钮内图标 */
.is-assistant > div button svg,
.is-user > div button svg {
  stroke: #5b7a9a !important;
  transition: stroke 0.25s;
}
.is-assistant > div button:hover svg,
.is-user > div button:hover svg {
  stroke: #2c3e4e !important;
}

/* ---------- 6. 模型名称 / 详细信息文字 ---------- */
/* 原：.MuiTypography-root.MuiTypography-body2.css-6c0gf2 */
#prompt-input-footer .truncate,
.model-selector-text {
  color: #6b8fa0 !important;
  font-weight: 500;
  font-size: 0.85rem;
}

/* ---------- 7. Token 消耗文字 ---------- */
/* 原：.text-orange-500 */
.token-info,
[class*="token-usage"],
[class*="text-orange"] {
  color: #f08a5d !important;    /* 活力橙，不刺眼 */
  font-weight: 500;
}

/* ---------- 8. 加载动画 ---------- */
/* 隐藏原有闪烁点 */
.style_dot-flashing__8L91Q {
  display: none !important;
}

/* 加载容器 */
.sonner-loading-wrapper,
.flex.items-center.justify-center.w-6.h-5 {
  position: relative;
  width: 28px !important;
  height: 28px !important;
}

/* 替换为旋转的纸飞机 ✈️ （青春校园意象） */
.sonner-loading-wrapper::before,
.flex.items-center.justify-center.w-6.h-5::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237ec8e3' d='M21.5 3.5L2.5 9.5L9.5 12.5L21.5 3.5Z'%3E%3C/path%3E%3Cpath fill='%23ffb7c5' d='M9.5 12.5L8.5 20.5L12.5 15.5L21.5 3.5L9.5 12.5Z'%3E%3C/path%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1.2s' repeatCount='indefinite'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 天机演算文字替换 */
.sonner-loading-wrapper::after,
.flex.items-center.justify-center.w-6.h-5::after {
  content: '传递中...';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 8px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 13px;
  color: #7ec8e3;
  font-family: 'PingFang SC', sans-serif;
}

/* ---------- 9. 状态栏（Details 折叠块）重写 ---------- */
/* 使用学生手册/试卷风格 */
.rili-markdown-renderer details {
  margin: 16px 0;
  border: 2px solid #b8dff0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(100, 140, 170, 0.15);
  transition: all 0.3s;
}

.rili-markdown-renderer details[open] {
  background: rgba(255, 255, 255, 0.95);
  border-color: #7ec8e3;
  box-shadow: 0 8px 20px rgba(100, 140, 170, 0.25);
}

/* 标题栏：像便利贴的彩色条 */
.rili-markdown-renderer summary {
  padding: 12px 20px;
  font-weight: 600;
  font-size: 1.05em;
  color: #315f72;
  background: linear-gradient(90deg, #e6f4fa, #ffffff);
  border-bottom: 1px dashed #b8dff0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC', 'Hiragino Sans', sans-serif;
  border-radius: 10px 10px 0 0;
}

.rili-markdown-renderer summary:hover {
  background: linear-gradient(90deg, #d2ecf7, #ffffff);
  color: #1f4b5e;
}

/* 自定义展开箭头（小铅笔图标） */
.rili-markdown-renderer summary::after {
  content: '✎';
  margin-left: auto;
  font-size: 1.2em;
  color: #7ec8e3;
  transition: transform 0.3s;
}
.rili-markdown-renderer details[open] > summary::after {
  transform: rotate(180deg);
}
.rili-markdown-renderer summary::-webkit-details-marker {
  display: none;
}

/* 折叠内容区：笔记本内页线 */
.rili-markdown-renderer details > :not(summary) {
  padding: 16px 20px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 95%,
    #e0e8f0 100%
  );
  background-size: 100% 24px;
  line-height: 1.8;
  color: #2c3e4e;
  border-top: none;
}

/* 内容区内的表格 */
.rili-markdown-renderer details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 10px 0;
  background: rgba(255,255,255,0.6);
}
.rili-markdown-renderer details th,
.rili-markdown-renderer details td {
  border: 1px solid #c8e6f5;
  padding: 8px 10px;
  text-align: left;
}
.rili-markdown-renderer details th {
  background: #e6f4fa;
  color: #2c3e4e;
  font-weight: 600;
}

/* 内容区代码 */
.rili-markdown-renderer details code {
  background: #f0f7fc;
  color: #f08a5d;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', monospace;
}

/* 正文中的特殊故事块（如用户需要） */
.rili-markdown-renderer .story-body {
  text-align: justify;
  line-height: 2;
  margin: 10px 0;
  padding: 10px 5px;
  font-size: 1rem;
}
.rili-markdown-renderer .story-body strong {
  color: #ff7b9c;
}

/* 角色卡片（若输出中包含） */
.rili-markdown-renderer .char-card {
  border-bottom: 1px dotted #b8dff0;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* 好感度/进度条 */
.rili-markdown-renderer .progress-bar-bg {
  width: 100%;
  height: 8px;
  background: #e0e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}
.rili-markdown-renderer .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbc2eb, #a6c1ee);
  border-radius: 4px;
  transition: width 0.5s;
}

/* ---------- 10. 输入框区域（补充优化） ---------- */
/* 外圈容器 */
div[data-slot="input-group"] {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #c8e6f5;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(120, 160, 200, 0.2);
}
div[data-slot="input-group"]:focus-within {
  border-color: #7ec8e3;
  box-shadow: 0 0 10px rgba(126, 200, 227, 0.3);
}

/* 输入框本体 */
#prompt-input textarea {
  background: transparent;
  color: #2c3e4e;
  font-family: 'PingFang SC', sans-serif;
  font-size: 16px;
}

/* 发送按钮 */
#prompt-input-footer button[type="submit"] {
  background: linear-gradient(135deg, #7ec8e3, #a6e0f0);
  color: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(120, 160, 200, 0.4);
}
#prompt-input-footer button[type="submit"]:hover {
  background: linear-gradient(135deg, #5bafd4, #8cd6ea);
  box-shadow: 0 5px 12px rgba(120, 160, 200, 0.6);
}

/* ---------- 11. 移动端微调 ---------- */
@media (max-width: 480px) {
  .is-user > div,
  .is-assistant > div {
    padding: 14px 16px;
    border-radius: 12px 4px 12px 4px;
  }
  .rili-markdown-renderer {
    font-size: 15px;
  }
  .rili-markdown-renderer summary {
    font-size: 1em;
    padding: 10px 16px;
  }
  .rili-markdown-renderer details > :not(summary) {
    padding: 12px 16px;
  }
}