/* 易枢 · 中式术数文化主题
   目标：与 docs/yishu-ui-mockup.html（首页）和 docs/yishu-chat-mockup.html（聊天态）
        逐值一致。宣纸米白底 + 朱砂红点缀 + 金棕引文 + 宋体。
   说明：本文件只描述「Chainlit 真实 DOM」的样式，选择器与 Chainlit 2.1.2 的
        实际结构对应（class 组合 + [data-step-type]），不含历史遗留的 Mantine 规则。 */

:root {
  --paper:#f7f4ee !important;
  --paper-deep:#efeae0 !important;
  --ink:#2b2620 !important;
  --ink-soft:#6f675c !important;
  --ink-faint:#9a9184 !important;
  --cinnabar:#a8403a !important;
  --cinnabar-deep:#8c322d !important;
  --gold:#a08347 !important;
  --line:#e3dccf !important;
  --card:#fffdf9 !important;
}

/* ============================================================
   全局：宋体 + 宣纸底
   ============================================================ */
html, body {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif !important;
  color: var(--ink) !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  background: var(--paper) !important;
}

/* 隐藏 Chainlit 自带顶栏（首页与聊天态的顶栏都由原型 header 承担） */
html.yz-welcome #header,
html.yz-top #header {
  display: none !important;
}
html.yz-welcome body { overflow: hidden !important; }

/* 隐藏 Chainlit 水印 */
a.watermark { display: none !important; }

/* ============================================================
   聊天态：对齐 docs/yishu-chat-mockup.html
   线程容器 880px 居中（原型 .wrap），消息 = 头像 + 署名 + 气泡
   ============================================================ */

/* ---------- 1. 底色：整页宣纸（原型 body 背景） ---------- */
html.yz-top body,
html.yz-top #root,
html.yz-top div.h-screen.w-screen.flex,
html.yz-top div.h-full.w-full,
html.yz-top div.flex.flex-col.h-full,
html.yz-top div.flex.flex-row.flex-grow,
html.yz-top div.flex.w-full.h-full.flex-col.relative,
html.yz-top div.relative.flex.flex-col.flex-grow.overflow-y-auto,
html.yz-top div.flex.flex-col.flex-grow.overflow-y-auto {
  background: var(--paper) !important;
}

/* ---------- 2. 滚动区：顶栏留白只作用于最外层，避免双倍 ---------- */
html.yz-top div.relative.flex.flex-col.flex-grow.overflow-y-auto {
  padding-top: var(--yz-top-h, 86px) !important;
}
html.yz-top div.relative.flex.flex-col.flex-grow.overflow-y-auto > div.flex.flex-col.flex-grow.overflow-y-auto {
  padding-top: 0 !important;
}

/* ---------- 3. 线程容器：880 居中 + 为底部输入区留白 ---------- */
html.yz-top div.flex.flex-col.mx-auto.w-full.flex-grow.p-4 {
  max-width: 880px !important;
  padding: 28px 24px 208px !important;
}
/* Chainlit 为固定输入区预留的占位：改由容器 padding 承担 */
html.yz-top div.flex.flex-col.mx-auto.w-full.flex-grow.p-4 > div.flex-shrink-0 {
  height: 0 !important;
}

/* ---------- 4. 消息行：去掉 Chainlit 的步骤卡外观（原型 .msg） ---------- */
html.yz-top div.step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 26px !important;
  font-size: inherit !important;
  color: inherit !important;
}
html.yz-top div.step > div.flex.flex-col {
  max-width: 100% !important;
}
html.yz-top div.step > div > div.flex.flex-grow {
  display: block !important;
  padding-bottom: 0 !important;
}
/* 一次提问对应的一组助手消息（状态行 / 排盘卡 / 正文）紧凑排布 */
html.yz-top div[data-step-type="assistant_message"] + div[data-step-type="assistant_message"] {
  margin-top: -10px !important;
}
/* 工具步骤（仅 DEV_MODE 下产生）不进用户界面 */
html.yz-top div[data-step-type="tool"] {
  display: none !important;
}
/* 空消息（尚未开始输出的占位）不占位、不显示 */
html.yz-top div[data-step-type="assistant_message"]:has(div.message-content:empty) {
  display: none !important;
}
/* 复制 / 编辑按钮：原型里没有，隐去（正文可直接选中复制） */
html.yz-top div.step div.-ml-1\.5 {
  display: none !important;
}

/* ---------- 5. 用户消息（原型 .msg.user） ---------- */
html.yz-top div[data-step-type="user_message"] div.flex.flex-row.items-center {
  position: relative !important;
  justify-content: flex-end !important;
  padding-top: 22px !important;
  padding-right: 42px !important;
}
/* 「我」头像：30×30 圆角印章 */
html.yz-top div[data-step-type="user_message"] div.flex.flex-row.items-center::after {
  content: "我";
  position: absolute; right: 0; top: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink-faint); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
/* 「你」署名：气泡右上方 */
html.yz-top div[data-step-type="user_message"] div.flex.flex-row.items-center::before {
  content: "你";
  position: absolute; right: 42px; top: 6px;
  font-size: 11px; letter-spacing: 2px; color: var(--ink-faint);
}
/* 气泡：宣纸深色块，右下角直角（原型 .msg.user .bubble） */
html.yz-top div[data-step-type="user_message"] div.px-5.py-2\.5.relative.bg-accent {
  background: var(--paper-deep) !important;
  border: 0 !important;
  border-radius: 12px 12px 2px 12px !important;
  padding: 14px 18px !important;
  max-width: 76% !important;
  font-size: 13.5px !important;
  line-height: 1.95 !important;
  color: var(--ink) !important;
}
html.yz-top div[data-step-type="user_message"] div.message-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
html.yz-top div[data-step-type="user_message"] div.message-content .prose div[role="article"] {
  font-size: 13.5px !important;
  line-height: 1.95 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ---------- 6. 助手消息（原型 .msg + .avatar + .who + .bubble） ---------- */
html.yz-top div.ai-message {
  position: relative !important;
  display: block !important;
  padding-left: 42px !important;
  padding-top: 22px !important;
  gap: 0 !important;
}
/* 隐去 Chainlit 的骨架头像（灰圆点） */
html.yz-top div.ai-message > span.inline-block {
  display: none !important;
}
/* 「易」头像：朱砂印章 */
html.yz-top div.ai-message::before {
  content: "易";
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--cinnabar); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
/* 「易枢」署名 */
html.yz-top div.ai-message::after {
  content: "易枢";
  position: absolute; left: 42px; top: 6px;
  font-size: 11px; letter-spacing: 2px; color: var(--ink-faint);
}
/* 同组后续消息不再重复头像与署名，仅对齐缩进 */
html.yz-top div[data-step-type="assistant_message"] + div[data-step-type="assistant_message"] div.ai-message {
  padding-top: 0 !important;
}
html.yz-top div[data-step-type="assistant_message"] + div[data-step-type="assistant_message"] div.ai-message::before,
html.yz-top div[data-step-type="assistant_message"] + div[data-step-type="assistant_message"] div.ai-message::after {
  display: none !important;
}
html.yz-top div.ai-message > div.flex.flex-col.items-start {
  max-width: 76% !important;
  width: auto !important;
  min-width: 0 !important;
}

/* 气泡：宣纸卡片，左下角直角（原型 .bubble） */
html.yz-top div[data-step-type="assistant_message"] div.message-content:not(:empty) {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px 12px 12px 2px !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  line-height: 1.95 !important;
  color: var(--ink) !important;
}

/* 排盘卡与紧随其后的解读正文，拼成「同一张卡」（原型里卡就画在气泡内）。
   条件：正文已有内容时才合并 —— 否则生成期间会看到缺一条边的卡片。 */
html.yz-top div[data-step-type="assistant_message"]:has(.yz-card):has(+ div[data-step-type="assistant_message"] div.message-content:not(:empty)) div.message-content {
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 12px !important;
}
html.yz-top div[data-step-type="assistant_message"]:has(.yz-card) + div[data-step-type="assistant_message"] div.message-content {
  border-radius: 0 0 12px 2px !important;
  border-top: 0 !important;
}
html.yz-top div[data-step-type="assistant_message"]:has(.yz-card):has(+ div[data-step-type="assistant_message"] div.message-content:not(:empty)) + div[data-step-type="assistant_message"] {
  margin-top: -26px !important;
}

/* ---------- 7. 状态行（原型 .status：金色呼吸点 + 12px 小字） ---------- */
html.yz-top div[data-step-type="assistant_message"].yz-status div.message-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  align-self: flex-start !important;
}
html.yz-top div[data-step-type="assistant_message"].yz-status div.message-content::before {
  content: "";
  flex: 0 0 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}
html.yz-top div[data-step-type="assistant_message"].yz-status.yz-pulse div.message-content::before {
  animation: yz-breathe 1.4s ease-in-out infinite;
}
@keyframes yz-breathe {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
html.yz-top div[data-step-type="assistant_message"].yz-status div.message-content .prose,
html.yz-top div[data-step-type="assistant_message"].yz-status div.message-content .prose div[role="article"],
html.yz-top div[data-step-type="assistant_message"].yz-status div.message-content .prose * {
  font-size: 12px !important;
  line-height: 1.85 !important;
  color: var(--ink-faint) !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}

/* ---------- 8. 助手正文排版（原型 .bubble 内） ---------- */
html.yz-top div.message-content .prose {
  max-width: none !important;
}
html.yz-top div.message-content .prose div[role="article"],
html.yz-top div.message-content .prose p {
  font-size: 13.5px !important;
  line-height: 1.95 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
}
html.yz-top div.message-content .prose div[role="article"]:last-child,
html.yz-top div.message-content .prose p:last-child {
  margin-bottom: 0 !important;
}
html.yz-top div.message-content .prose strong { font-weight: 500 !important; color: var(--ink) !important; }
html.yz-top div.message-content .prose em { font-style: normal !important; color: var(--cinnabar) !important; }

/* 列表 → 原型同款「豆腐块」小卡（两列网格 + 朱砂圆点） */
html.yz-top div[data-step-type="assistant_message"] .prose ul,
html.yz-top div[data-step-type="assistant_message"] .prose ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
html.yz-top div[data-step-type="assistant_message"] .prose li {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
}
html.yz-top div[data-step-type="assistant_message"] .prose li::before {
  content: "·";
  color: var(--cinnabar);
  margin-right: 6px;
}
/* 嵌套列表回到普通排布 */
html.yz-top div[data-step-type="assistant_message"] .prose li > ul,
html.yz-top div[data-step-type="assistant_message"] .prose li > ol {
  display: block !important;
  margin: 8px 0 0 !important;
}
html.yz-top div[data-step-type="assistant_message"] .prose li > ul > li,
html.yz-top div[data-step-type="assistant_message"] .prose li > ol > li {
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
}

/* 表格 / 引用块 / 代码（排盘、引文） */
html.yz-top div.message-content table {
  border-collapse: collapse !important;
  font-size: 13px !important;
  width: 100% !important;
}
html.yz-top div.message-content table th {
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px !important;
  letter-spacing: 1px !important;
  text-align: left !important;
}
html.yz-top div.message-content table td {
  padding: 12px !important;
  border-bottom: 1px dashed var(--line) !important;
  color: var(--ink) !important;
}
html.yz-top div.message-content blockquote {
  border-left: 3px solid var(--gold) !important;
  color: var(--gold) !important;
  background: var(--paper) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  font-size: 12.5px !important;
  letter-spacing: 1px !important;
}
html.yz-top div.message-content code {
  background: var(--paper-deep) !important;
  color: var(--cinnabar-deep) !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  padding: 1px 5px !important;
}
html.yz-top a { color: var(--cinnabar) !important; }

/* 排盘「豆腐块」卡片（scripts/agent/chart_blocks.py 输出） */
.yz-card,
.yz-card * {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
}
.yz-card { margin: 4px 0 !important; }
.yz-card h3 {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 2px;
  margin: 0 !important;
}
.yz-note { font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }

/* ---------- 9. 底部输入区（原型 .dock + .composer + .dock-note） ---------- */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 {
  display: block !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  max-width: none !important;
  padding: 18px 0 16px !important;
  background: linear-gradient(to bottom, rgba(247,244,238,0) 0, var(--paper) 22px) !important;
}
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 > div.relative {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
/* 输入框外框 = 原型 .composer */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 div.bg-accent.rounded-3xl {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
html.yz-top #chat-input {
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  min-height: 24px !important;
  max-height: 180px !important;
}
html.yz-top #chat-input:empty::before {
  color: var(--ink-faint) !important;
  font-size: 14px !important;
}
/* 底部一行：左侧提示语（原型 .hint），右侧圆形朱砂按钮 */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 div.flex.items-center.justify-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
}
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 div.flex.items-center.justify-between::before {
  content: "回车发送 · 换一种术数可直接在问题里说明";
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: .5px;
}
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 div.flex.items-center.justify-between > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* 上传按钮：原型 composer 里没有 */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 span.inline-block:has(#upload-button-input) {
  display: none !important;
}
/* 发送 / 停止：32px 圆形朱砂（原型 .send-btn） */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: var(--cinnabar) !important;
  border: 0 !important;
  color: #fff !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0 button:hover {
  background: var(--cinnabar-deep) !important;
}
/* 输入区下方免责声明（原型 .dock-note） */
html.yz-top div.flex.flex-col.mx-auto.w-full.p-4.pt-0::after {
  content: "本服务以传播中国传统术数文化为宗旨，仅供文化学习与参考。";
  display: block;
  max-width: 880px;
  margin: 10px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .3px;
}

/* ---------- 10. 顶部连接异常提示（低调化，不破坏版面） ---------- */
html.yz-top div.w-full.mx-auto.my-2 {
  max-width: 880px !important;
  margin: var(--yz-top-h, 86px) auto 0 !important;   /* 让开固定顶栏 */
  padding: 14px 24px 0 !important;
  background: transparent !important;
}
html.yz-top #session-error {
  background: rgba(168, 64, 58, .05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}
html.yz-top #session-error *,
html.yz-top #session-error p {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- 11. 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }