/* LearnPage 聊天 bottom sheet (/p/<id> 顶层 chrome, 移动 + 桌面都加载;
   body[data-mobile="1"] = 移动端, 桌面下 sheet 居中限宽).
   颜色走 page.css 的老 token (--bg-* / --fg-* / --accent / --border), 自动映射 --b-* 主题. */

/* ---- FAB ---------------------------------------------------------- */
/* 移动端隐藏桌面 mini-TOC (底部横排条), 改由左下角「目录」FAB + sheet 承担;
   桌面保留 mini-TOC (page.js initReadingNav), 不替换. */
body[data-mobile="1"] .lp-toc { display: none !important; }

.lp-mchat-fab,
.lp-mtoc-fab {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fg-0);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px var(--b-shadow, rgba(0,0,0,.35));
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}
.lp-mchat-fab { right: 16px; }
.lp-mtoc-fab { left: 16px; }
:root[data-scheme="light"] .lp-mchat-fab,
:root[data-scheme="light"] .lp-mtoc-fab { box-shadow: 0 8px 24px rgba(60,60,120,.18); }
.lp-mchat-fab:active, .lp-mtoc-fab:active { transform: scale(.95); }
.lp-mchat-fab .lp-mchat-fab-ico,
.lp-mtoc-fab .lp-mtoc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: var(--bg-0);
  font-size: 14px; line-height: 1;
}
.lp-mchat-fab.is-busy .lp-mchat-fab-ico { animation: lp-mchat-pulse 1.2s ease-in-out infinite; }
@keyframes lp-mchat-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.lp-mchat-fab[hidden], .lp-mtoc-fab[hidden] { display: none; }
/* 向下滚动阅读时收起 FAB 不挡正文; 向上滚 / 回顶部时召回 (body class 由 m-chat.js 维护,
   晚创建的 mtoc fab 也被同一规则覆盖). */
body.lp-fabs-hidden .lp-mchat-fab,
body.lp-fabs-hidden .lp-mtoc-fab {
  transform: translateY(140%); opacity: 0; pointer-events: none;
}

/* ---- sheet -------------------------------------------------------- */
.lp-mchat-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 80;
  height: min(78dvh, 720px);
  display: flex; flex-direction: column;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 48px var(--b-shadow, rgba(0,0,0,.45));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
  visibility: hidden;
}
:root[data-scheme="light"] .lp-mchat-sheet { box-shadow: 0 -12px 40px rgba(60,60,120,.2); }
.lp-mchat-sheet.is-open { transform: translateY(0); visibility: visible; }
/* 桌面: sheet 不再铺满全宽, 居中限宽成底栏面板, 两侧补边框. */
body:not([data-mobile="1"]) .lp-mchat-sheet {
  width: min(680px, calc(100vw - 32px));
  margin-inline: auto;
  border-inline: 1px solid var(--border);
}
/* 窄桌面 (≤1199px) mini-TOC 变底部横排条 (page.css): FAB 抬到条上方避免遮挡.
   只在 TOC 真存在时抬 (≥2 节才建, 见 page.js initReadingNav). */
@media (max-width: 1199px) {
  body:not([data-mobile="1"]):has(.lp-toc) .lp-mchat-fab {
    bottom: calc(48px + env(safe-area-inset-bottom));
  }
}
.lp-mchat-backdrop {
  position: fixed; inset: 0; z-index: 75;
  background: var(--b-scrim, rgba(0,0,0,.45));
  opacity: 0; pointer-events: none; transition: opacity .25s;
  touch-action: none;
}
.lp-mchat-backdrop.is-open { opacity: 1; pointer-events: auto; }

.lp-mchat-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.lp-mchat-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: var(--border);
}
.lp-mchat-title {
  flex: 1; margin-top: 6px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-mchat-title::before { content: "▸ "; color: var(--accent); }
.lp-mchat-hbtn {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 10px;
  color: var(--fg-2); font-family: var(--font-mono); font-size: 12px;
  cursor: pointer;
}
.lp-mchat-hbtn:active { background: var(--bg-2); }
/* 清空按钮 armed 态 (等待二次确认): 红色警示 */
.lp-mchat-hbtn.is-armed {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 50%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, var(--bg-0));
}

/* ---- log ---------------------------------------------------------- */
.lp-mchat-log {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 14px 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lp-mchat-empty {
  padding: 34px 18px; text-align: center;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9;
  color: var(--fg-2);
  white-space: pre-line; /* 空态文案含 \n 两行提示, 显式换行 */
}
.lp-mchat-msg { max-width: 92%; margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.lp-mchat-msg.user {
  margin-left: auto;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  white-space: pre-wrap; word-break: break-word;
}
.lp-mchat-msg.agent {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  word-break: break-word;
}
.lp-mchat-msg.tool {
  max-width: 100%;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2);
  padding: 2px 4px; word-break: break-all;
}
.lp-mchat-msg.tool::before { content: "⚙ "; color: var(--accent-3); }
.lp-mchat-msg.error {
  background: color-mix(in srgb, var(--bad) 10%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--border));
  color: var(--bad);
  border-radius: 12px; padding: 10px 14px;
  font-size: 13.5px;
}
.lp-mchat-msg.agent :first-child { margin-top: 0; }
.lp-mchat-msg.agent :last-child { margin-bottom: 0; }
.lp-mchat-msg.agent p { margin: 0 0 8px; }
.lp-mchat-msg.agent pre {
  background: var(--code-bg); border: 1px solid var(--border);
  padding: 10px 12px; overflow-x: auto; font-size: 13px;
  border-radius: 8px;
}
.lp-mchat-msg.agent code { font-family: var(--font-mono); font-size: 13px; }
.lp-mchat-msg.agent ul, .lp-mchat-msg.agent ol { padding-left: 20px; margin: 6px 0; }
.lp-mchat-msg.agent a { color: var(--accent); }
.lp-mchat-thinking { color: var(--fg-2); font-family: var(--font-mono); font-size: 13px; }
.lp-mchat-thinking::after { content: "▍"; animation: lp-mchat-blink 1s steps(2) infinite; color: var(--accent); }
@keyframes lp-mchat-blink { 50% { opacity: 0; } }

.lp-mchat-block-comp {
  margin: 8px 0 2px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg-2);
}
.lp-mchat-iframe {
  display: block; width: 100%; border: 0;
  height: 140px;           /* lp/chat-height postMessage 会自适应 */
  background: var(--bg-2);
}
.lp-mchat-block-err { color: var(--bad); font-family: var(--font-mono); font-size: 12px; padding: 8px; }

/* ---- login hint ---------------------------------------------------- */
.lp-mchat-login {
  margin: 8px 0 12px; padding: 14px;
  border: 1px dashed var(--border); border-radius: 12px;
  font-size: 13.5px; color: var(--fg-1); text-align: center;
}
.lp-mchat-login a {
  display: inline-block; margin-top: 8px; padding: 9px 18px;
  background: var(--grad); color: var(--bg-0);
  border-radius: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}

/* ---- input row ----------------------------------------------------- */
.lp-mchat-inputrow {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-0);
}
.lp-mchat-input {
  flex: 1; min-width: 0;
  max-height: 132px; resize: none;
  background: var(--bg-1); color: var(--fg-0);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 11px 14px;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  outline: none;
}
.lp-mchat-input:focus { border-color: var(--accent); }
.lp-mchat-send {
  flex: 0 0 auto;
  min-width: 52px; min-height: 46px;
  border: 0; border-radius: 14px;
  background: var(--grad);
  color: var(--bg-0);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.lp-mchat-send:disabled { opacity: .45; cursor: default; }
.lp-mchat-send:active:not(:disabled) { transform: scale(.95); }

/* 页面正文给 FAB 让位 (page.css 手机断点已有 88px bottom padding, 足够) */

/* ---- 目录 sheet ---------------------------------------------------- */
.lp-mtoc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 80;
  max-height: min(62dvh, 560px);
  display: flex; flex-direction: column;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 48px var(--b-shadow, rgba(0,0,0,.45));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
  visibility: hidden;
}
:root[data-scheme="light"] .lp-mtoc-sheet { box-shadow: 0 -12px 40px rgba(60,60,120,.2); }
.lp-mtoc-sheet.is-open { transform: translateY(0); visibility: visible; }
.lp-mtoc-head {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.lp-mtoc-title {
  flex: 1;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--fg-1);
}
.lp-mtoc-title::before { content: "▸ "; color: var(--accent); }
.lp-mtoc-list {
  flex: 1 1 auto; overflow-y: auto;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.lp-mtoc-item {
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 12px;
  padding: 13px 12px; cursor: pointer;
  color: var(--fg-0); font-size: 15px; line-height: 1.45;
}
.lp-mtoc-item:active { background: var(--bg-2); }
.lp-mtoc-item .idx {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-2);
}
.lp-mtoc-item.is-active { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.lp-mtoc-item.is-active .idx { color: var(--accent); }