/* ═══════════════════════════════════════════
   ∞ 无限世界 · 正文渲染样式
   大背景：白色 | 正文底色：浅米灰 | 对话框：粉色基调
   ═══════════════════════════════════════════ */

/* ── 全局变量 ── */
:root{
  --iw-pink:      #f48fb1;   /* 主粉 */
  --iw-pink-deep: #ec6a92;   /* 深粉（强调） */
  --iw-pink-soft: #fce4ec;   /* 浅粉（对话框/引用块） */
  --iw-pink-line: #f8bbd0;   /* 粉色线条 */
  --iw-pink-glow: rgba(244,143,177,.25);
  --iw-bg-page:   #ffffff;   /* 页面大背景：纯白 */
  --iw-bg-mes:    #f5f5f0;   /* 正文输出框底色：浅米灰 */
  --iw-txt:       #33302e;   /* 正文字色（深色阅读色，不变） */
  --iw-sub:       #8a8078;   /* 次要文字 */
}

/* ═══════════════════════════════════════════
   页面大背景 —— 纯白
   ═══════════════════════════════════════════ */

body,
#chat,
.chat-container,
.main-container{
  background: var(--iw-bg-page) !important;
}

/* ═══════════════════════════════════════════
   消息主体 —— 浅米灰底色
   ═══════════════════════════════════════════ */

.mes_text,
.mes_block,
.mes{
  background: var(--iw-bg-mes) !important;
  color: var(--iw-txt) !important;
  line-height: 1.9 !important;
  font-size: 15.5px !important;
  letter-spacing: .3px;
  padding: 16px 18px !important;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* 正文段落保持默认阅读色 */
.mes_text p{
  color: var(--iw-txt) !important;
  margin: 0 0 14px !important;
}

/* ═══════════════════════════════════════════
   对话/台词 —— 粉色对话框
   ═══════════════════════════════════════════ */

/* 双引号台词（q标签或被引号包裹的对话）—— 粉色背景框 */
.mes_text q,
.mes_text .quote{
  display: inline-block;
  background: var(--iw-pink-soft) !important;
  color: var(--iw-pink-deep) !important;
  padding: 2px 10px 2px 8px;
  border-radius: 8px;
  border-left: 3px solid var(--iw-pink);
  font-weight: 600;
  font-style: normal;
  margin: 0 2px;
  box-shadow: 0 1px 6px var(--iw-pink-glow);
}
.mes_text q::before,
.mes_text q::after{
  color: var(--iw-pink);
}

/* 如果用 blockquote 表示对话块（多行台词） */
.mes_text blockquote.dialogue{
  background: var(--iw-pink-soft) !important;
  border-left: 4px solid var(--iw-pink) !important;
  border-radius: 0 12px 12px 0;
  padding: 12px 16px !important;
  margin: 14px 0 !important;
  color: var(--iw-pink-deep) !important;
  box-shadow: 0 2px 10px var(--iw-pink-glow);
  font-weight: 600;
}
.mes_text blockquote.dialogue p{
  color: var(--iw-pink-deep) !important;
  margin: 0 0 6px !important;
}

/* ═══════════════════════════════════════════
   强调文本
   ═══════════════════════════════════════════ */

/* 斜体：常用于心理活动/旁白强调 → 柔粉 */
.mes_text em,
.mes_text i{
  color: var(--iw-pink) !important;
  font-style: italic;
  font-weight: 500;
}

/* 加粗：关键信息 → 深粉 */
.mes_text strong,
.mes_text b{
  color: var(--iw-pink-deep) !important;
  font-weight: 800;
}

/* ═══════════════════════════════════════════
   标题
   ═══════════════════════════════════════════ */

.mes_text h1,
.mes_text h2,
.mes_text h3,
.mes_text h4{
  color: var(--iw-pink-deep) !important;
  border-bottom: 2px solid var(--iw-pink-line);
  padding-bottom: 6px;
  margin: 20px 0 12px !important;
  font-weight: 800;
  letter-spacing: 1px;
}
.mes_text h1{ font-size: 22px !important; }
.mes_text h2{ font-size: 19px !important; }
.mes_text h3{ font-size: 17px !important; }

/* 标题前缀小装饰 */
.mes_text h1::before,
.mes_text h2::before,
.mes_text h3::before{
  content: "❀ ";
  color: var(--iw-pink);
}

/* ═══════════════════════════════════════════
   引用块 —— 系统提示/状态/旁白框（非对话）
   ═══════════════════════════════════════════ */

.mes_text blockquote{
  background: var(--iw-pink-soft) !important;
  border-left: 4px solid var(--iw-pink) !important;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px !important;
  margin: 14px 0 !important;
  color: var(--iw-txt) !important;
  box-shadow: 0 2px 10px var(--iw-pink-glow);
}
.mes_text blockquote p{
  margin: 0 0 6px !important;
}

/* ═══════════════════════════════════════════
   分隔线
   ═══════════════════════════════════════════ */

.mes_text hr{
  border: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--iw-pink), var(--iw-pink-deep), var(--iw-pink), transparent);
  margin: 22px 0;
  opacity: .8;
}

/* ═══════════════════════════════════════════
   代码/行内标记 —— 用于状态数值/物品名等
   ═══════════════════════════════════════════ */

.mes_text code{
  background: var(--iw-pink-soft) !important;
  color: var(--iw-pink-deep) !important;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--iw-pink-line);
  font-size: 13.5px;
  font-family: "Consolas","PingFang SC",monospace;
  font-weight: 600;
}

.mes_text pre{
  background: var(--iw-pink-soft) !important;
  border: 1px solid var(--iw-pink-line) !important;
  border-radius: 10px;
  padding: 14px 16px !important;
  box-shadow: inset 0 0 12px var(--iw-pink-glow);
}
.mes_text pre code{
  background: transparent !important;
  border: 0;
  color: var(--iw-txt) !important;
}

/* ═══════════════════════════════════════════
   列表
   ═══════════════════════════════════════════ */

.mes_text ul,
.mes_text ol{
  padding-left: 22px !important;
  margin: 10px 0 !important;
}
.mes_text li{
  margin: 6px 0 !important;
  color: var(--iw-txt) !important;
}
.mes_text ul li::marker{
  color: var(--iw-pink);
  content: "❀ ";
}
.mes_text ol li::marker{
  color: var(--iw-pink-deep);
  font-weight: 800;
}

/* ═══════════════════════════════════════════
   表格 —— 用于属性面板/物品栏/关系表
   ═══════════════════════════════════════════ */

.mes_text table{
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px var(--iw-pink-glow);
}
.mes_text th{
  background: linear-gradient(135deg, var(--iw-pink), var(--iw-pink-deep)) !important;
  color: #fff !important;
  padding: 10px 12px !important;
  font-weight: 700;
  letter-spacing: 1px;
}
.mes_text td{
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--iw-pink-line) !important;
  color: var(--iw-txt) !important;
  background: #fff;
}
.mes_text tr:nth-child(even) td{
  background: var(--iw-pink-soft) !important;
}

/* ═══════════════════════════════════════════
   折叠面板（details）—— 状态栏/进度面板
   ═══════════════════════════════════════════ */

.mes_text details{
  background: var(--iw-pink-soft) !important;
  border: 1px solid var(--iw-pink-line) !important;
  border-radius: 12px;
  padding: 6px 14px;
  margin: 14px 0;
  box-shadow: 0 2px 10px var(--iw-pink-glow);
}
.mes_text summary{
  color: var(--iw-pink-deep) !important;
  font-weight: 800;
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: 1px;
}
.mes_text details[open] summary{
  border-bottom: 1px dashed var(--iw-pink-line);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════
   链接
   ═══════════════════════════════════════════ */

.mes_text a{
  color: var(--iw-pink-deep) !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--iw-pink);
  transition: .2s;
}
.mes_text a:hover{
  color: var(--iw-pink) !important;
  border-bottom-style: solid;
}

/* ═══════════════════════════════════════════
   输入框（用户输入区域）—— 粉色边框
   ═══════════════════════════════════════════ */

textarea,
input[type="text"],
.user-input,
.send-textarea{
  background: #fff !important;
  border: 2px solid var(--iw-pink-line) !important;
  border-radius: 12px;
  padding: 12px 14px !important;
  color: var(--iw-txt) !important;
  transition: .25s;
}
textarea:focus,
input[type="text"]:focus,
.user-input:focus,
.send-textarea:focus{
  border-color: var(--iw-pink) !important;
  box-shadow: 0 0 0 3px var(--iw-pink-glow) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════
   按钮 —— 粉色基调
   ═══════════════════════════════════════════ */

button,
.button,
.send-button{
  background: linear-gradient(135deg, var(--iw-pink), var(--iw-pink-deep)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px;
  padding: 10px 20px !important;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 2px 10px var(--iw-pink-glow);
}
button:hover,
.button:hover,
.send-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--iw-pink-glow);
}
button:active,
.button:active,
.send-button:active{
  transform: scale(.97);
}

/* ═══════════════════════════════════════════
   滚动条美化 —— 粉色
   ═══════════════════════════════════════════ */

.mes_text::-webkit-scrollbar,
.mes_text pre::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.mes_text::-webkit-scrollbar-thumb,
.mes_text pre::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background: var(--iw-pink);
  border-radius: 5px;
}
.mes_text::-webkit-scrollbar-track,
.mes_text pre::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background: var(--iw-pink-soft);
}
.mes_text::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background: var(--iw-pink-deep);
}

/* ═══════════════════════════════════════════
   选中文字高亮 —— 粉色
   ═══════════════════════════════════════════ */

.mes_text ::selection,
::selection{
  background: var(--iw-pink-glow);
  color: var(--iw-pink-deep);
}

/* ═══════════════════════════════════════════
   选项区（若正文末尾生成选项列表）
   ═══════════════════════════════════════════ */

.mes_text ol li{
  transition: .2s;
  padding: 6px 8px;
  border-radius: 6px;
}
.mes_text ol li:hover{
  background: var(--iw-pink-soft);
  color: var(--iw-pink-deep) !important;
  cursor: pointer;
}