/* Satori 通用 AI 助手组件样式（解耦、自包含），版本 20260806c。
   与 assistant-core.*.js 配套，被教程站与管理员静态托管页共同加载。所有取值内联（不依赖
   宿主 CSS 变量），类名全部 .st-assistant-* / .st-mode-* / .st-action-* / .st-ref-target /
   .st-code-explain，是这些选择器的唯一定义处（tutorial-app.css 不再重复定义）。 */

:root { --st-assistant-desktop-width: min(344px, 30.4vw, 100dvw); }

/* static 托管页允许自定义全局盒模型。助手必须建立自己的几何边界，避免宿主的
   content-box、按钮 padding 或 section 宽度规则把固定面板撑出视口。 */
.st-assistant-fab,
.st-assistant-backdrop,
.st-assistant-panel,
.st-assistant-panel *,
.st-assistant-panel *::before,
.st-assistant-panel *::after { box-sizing: border-box; }

.st-assistant-fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 8900;
  display: inline-flex;
  visibility: visible;
  opacity: 1;
  width: 3.35rem;
  min-width: 3.35rem;
  max-width: 3.35rem;
  height: 3.35rem;
  min-height: 3.35rem;
  max-height: 3.35rem;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.34);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}
.st-assistant-fab[data-static-assistant="true"] {
  position: fixed !important;
  z-index: 8900 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 3.35rem !important;
  min-width: 3.35rem !important;
  max-width: 3.35rem !important;
  height: 3.35rem !important;
  min-height: 3.35rem !important;
  max-height: 3.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
}
.st-assistant-fab:hover { background: #1d4ed8; transform: translateY(-2px); }
.st-assistant-fab svg { width: 1.45rem; height: 1.45rem; }

.st-assistant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8899;
  display: none;
  background: rgba(15, 23, 42, 0.28);
}

.st-assistant-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8901;
  display: none;
  width: var(--st-assistant-desktop-width);
  max-width: 100vw;
  max-width: 100dvw;
  height: 100dvh;
  margin: 0 !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: #1e293b;
  background: #fffdfc;
  border: 0;
  border-left: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.st-assistant-panel[data-open="true"] { display: grid; }

@media (min-width: 721px) {
  html.st-assistant-open {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  html.st-assistant-open body {
    position: fixed;
    inset: 0 var(--st-assistant-desktop-width) 0 0;
    width: auto;
    height: auto;
    margin: 0;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }
  html.st-assistant-open body::-webkit-scrollbar { width: 6px; }
  html.st-assistant-open body::-webkit-scrollbar-track { background: transparent; }
  html.st-assistant-open body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.42); border-radius: 999px; }
}

.st-assistant-header {
  display: flex;
  min-height: 4.35rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  color: #292524;
  background: #fffdfc;
  border-bottom: 1px solid #eee9e6;
}
.st-assistant-brand {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}
.st-assistant-brand svg { width: 1.65rem; height: 1.65rem; }
.st-assistant-header-copy { min-width: 0; flex: 1 1 auto; }
.st-assistant-title { margin: 0; font-size: 1rem; font-weight: 700; }
.st-assistant-usage {
  margin: 0.12rem 0 0;
  overflow-wrap: anywhere;
  color: #78716c;
  font-size: 0.7rem;
}

.st-assistant-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #78716c;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.st-assistant-icon:hover { color: #2563eb; background: #eff6ff; }
.st-assistant-icon svg { width: 1.15rem; height: 1.15rem; }

.st-assistant-controls {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border-bottom: 1px solid #dbe3ee;
}
.st-assistant-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.28rem;
  box-sizing: border-box;
  padding: 0.28rem;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  border: 1px solid #d5deea;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.st-mode-row, .st-action-row {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.16rem;
}
.st-mode-row { flex: 0 0 auto; padding: 0.12rem; background: #edf2f8; border-radius: 8px; }
.st-action-row { flex: 1 1 auto; }
.st-control-divider { width: 1px; height: 1.25rem; flex: 0 0 1px; margin: 0 0.04rem; background: #d5deea; }

.st-mode-button, .st-action-button {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0.28rem 0.45rem;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.st-action-button { flex: 1 1 auto; padding-inline: 0.32rem; }
.st-mode-button[aria-pressed="true"] {
  color: #fff;
  background: #1e3a8a;
  border-color: #1e3a8a;
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.22);
  font-weight: 700;
}
.st-action-button:hover, .st-mode-button:hover { color: #2563eb; background: #fff; border-color: #c7d5e7; }
.st-mode-button[aria-pressed="true"]:hover { color: #fff; background: #172f73; border-color: #172f73; }
.st-mode-button:disabled, .st-action-button:disabled { cursor: not-allowed; opacity: 0.5; }

.st-mode-button:focus-visible,
.st-action-button:focus-visible,
.st-assistant-icon:focus-visible,
.st-assistant-send:focus-visible,
.st-assistant-input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.st-assistant-messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  padding: 1.1rem 1rem 1.5rem;
  background: #fffdfc;
}
.st-assistant-empty {
  margin: auto;
  padding: 1.1rem;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: center;
}
.st-assistant-scroll-tail { flex: 0 0 auto; height: 0; pointer-events: none; }

.st-assistant-message {
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.st-assistant-message[data-role="user"] {
  align-self: flex-end;
  max-width: 90%;
  padding: 0.72rem 0.9rem;
  color: #292524;
  background: #f1eeec;
  border-radius: 16px;
  white-space: pre-wrap;
}
.st-assistant-message[data-role="assistant"] {
  align-self: flex-start;
  background: transparent;
  border: 0;
}
.st-assistant-message[data-state="pending"] { color: #64748b; }
.st-assistant-message > :first-child { margin-top: 0; }
.st-assistant-message > :last-child { margin-bottom: 0; }
/*
  自包含隔离：回答正文的字号只由 .st-assistant-message 容器（0.82rem）这一处决定。
  marked 渲染出的块级文字元素若不显式定字号，会被宿主页的裸元素规则（如 /static 托管页
  注入的全局 `p, li { font-size: 16px }`）直接命中并覆盖掉从容器继承来的字号——于是同一组件
  在托管页里回答字体偏大、在教程页里正常。这里让这些元素一律 font-size: inherit（回到容器的
  单一真源），宿主任何裸元素字号规则都无法再泄漏进来（h1–h6 / code 已各自显式定字号，不在此列）。
*/
.st-assistant-message p,
.st-assistant-message li,
.st-assistant-message ul,
.st-assistant-message ol,
.st-assistant-message blockquote,
.st-assistant-message td,
.st-assistant-message th { font-size: inherit; }
.st-assistant-message p { margin: 0.4rem 0; }
.st-assistant-message h1, .st-assistant-message h2, .st-assistant-message h3,
.st-assistant-message h4, .st-assistant-message h5, .st-assistant-message h6 {
  margin: 0.85rem 0 0.4rem;
  color: inherit;
  border: 0;
  font-weight: 750;
  line-height: 1.35;
}
.st-assistant-message h1 { font-size: 1.2rem; }
.st-assistant-message h2 { font-size: 1.1rem; }
.st-assistant-message h3 { font-size: 1rem; }
.st-assistant-message h4, .st-assistant-message h5, .st-assistant-message h6 { font-size: 0.92rem; }
.st-assistant-message ul, .st-assistant-message ol { margin: 0.45rem 0; padding-left: 1.35rem; }
.st-assistant-message li + li { margin-top: 0.2rem; }
.st-assistant-message blockquote {
  margin: 0.6rem 0;
  padding: 0.35rem 0.65rem;
  color: #475569;
  border-left: 3px solid #93a9c7;
  background: #f3f6fa;
}
.st-assistant-message hr { margin: 0.8rem 0; border: 0; border-top: 1px solid #dbe3ee; }
.st-assistant-message a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 0.14em; }
.st-assistant-message img { display: block; max-width: 100%; height: auto; margin: 0.6rem auto; border-radius: 8px; }
.st-assistant-message table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.65rem 0;
  overflow-x: auto;
  border-collapse: collapse;
  white-space: nowrap;
}
.st-assistant-message th, .st-assistant-message td {
  padding: 0.35rem 0.5rem;
  border: 1px solid #dbe3ee;
  text-align: left;
  vertical-align: top;
}
.st-assistant-message th { background: #edf2f8; font-weight: 700; }
.st-assistant-message .task-list-item { list-style: none; }
.st-assistant-message .task-list-item input { margin: 0 0.35rem 0 -1.1rem; accent-color: #2563eb; }
.st-assistant-message pre { overflow-x: auto; padding: 0.65rem; color: #e2e8f0; background: #172033; border-radius: 8px; white-space: pre; }
.st-assistant-message code { padding: 0.08rem 0.25rem; background: #e8edf4; border-radius: 4px; font-size: 0.78rem; }
.st-assistant-message pre code { padding: 0; color: inherit; background: transparent; }
.st-assistant-message .katex-display { margin: 0.65rem 0; overflow-x: auto; overflow-y: hidden; }
.st-assistant-message[data-role="user"] a { color: #fff; }
.st-assistant-message[data-role="user"] blockquote { color: #fff; border-left-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.12); }
.st-assistant-message[data-role="user"] code { color: #172033; }

/* 正文引用（[原文片段](#cite) 渲染出的可点击 chip）：默认淡蓝，激活套蓝框，定位失败短暂琥珀。 */
.st-assistant-ref {
  cursor: pointer;
  color: #1d4ed8;
  background: #eef4ff;
  border-bottom: 1px solid #9dbcf0;
  border-radius: 3px;
  padding: 0 3px;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.st-assistant-ref:hover { background: #dfeaff; }
.st-assistant-ref.is-active { background: #dbe7ff; border-radius: 4px; box-shadow: 0 0 0 2px #2563eb; }
.st-assistant-ref[data-unlocated="true"] { color: #92400e; background: #fef3c7; box-shadow: 0 0 0 2px #f59e0b; }

/* 正文被引用命中的段落高亮（对 .book-page / main 内段落均生效）。 */
.st-ref-target {
  background: #fff6d6 !important;
  box-shadow: 0 0 0 6px #fff6d6;
  border-radius: 4px;
  scroll-margin-top: 22vh;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.st-assistant-composer {
  position: relative;
  display: block;
  margin: 0 0.9rem max(0.9rem, env(safe-area-inset-bottom));
  padding: 0;
  background: #fffdfc;
  border-top: 1px solid #dbe3ee;
  border: 1px solid #d6d3d1;
  border-radius: 16px;
}
.st-assistant-input {
  width: 100%;
  min-height: 6.5rem;
  max-height: 11rem;
  resize: none;
  padding: 0.9rem 3.8rem 2.8rem 0.9rem;
  color: #1e293b;
  background: #fff;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
}
.st-assistant-send {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.st-assistant-send:hover { background: #1d4ed8; box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28); }
.st-assistant-send:disabled { cursor: not-allowed; opacity: 0.55; }
.st-assistant-send svg { width: 1.2rem; height: 1.2rem; }
.st-assistant-composer-hint { position: absolute; left: 0.9rem; bottom: 0.75rem; max-width: calc(100% - 4.5rem); margin: 0; color: #78716c; font-size: 0.62rem; line-height: 1.3; }
.st-assistant-composer[data-enter-armed="true"] .st-assistant-input { border-color: #7aa2f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.st-assistant-composer[data-enter-armed="true"] .st-assistant-composer-hint { color: #1d4ed8; font-weight: 650; }

.st-code-explain {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bdd0f7;
  border-radius: 6px;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.st-code-explain:hover { color: #fff; background: #2563eb; }
.st-code-explain:focus-visible,
.st-code-explanation-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.st-code-explain:disabled { cursor: wait; opacity: 0.68; }
.st-code-explain svg { width: 1.15rem; height: 1.15rem; }

.st-code-explanation {
  margin: 0.65rem 0 1.25rem;
  overflow: hidden;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
}
.st-code-explanation-header {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
}
.st-code-explanation-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  color: #1e3a8a;
  font-size: 0.78rem;
  font-weight: 700;
}
.st-code-explanation-title svg { width: 1.05rem; height: 1.05rem; }
.st-code-explanation-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #1d4ed8;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.st-code-explanation-toggle:hover { color: #1e3a8a; background: #dbeafe; }
.st-code-explanation-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 180ms ease;
}
.st-code-explanation[data-expanded="false"] .st-code-explanation-toggle svg { transform: rotate(-90deg); }
.st-code-explanation-body {
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.st-code-explanation[data-expanded="false"] .st-code-explanation-header { border-bottom: 0; }
.st-code-explanation[data-expanded="false"] .st-code-explanation-body { display: none; }
.st-code-explanation-body[data-state="pending"] { color: #475569; }
.st-code-explanation[data-state="error"] { border-left-color: #dc2626; }

@media (max-width: 720px) {
  .st-assistant-fab {
    right: calc(0.8rem + env(safe-area-inset-right));
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
  }
  .st-assistant-fab[data-static-assistant="true"] {
    right: calc(0.8rem + env(safe-area-inset-right)) !important;
    bottom: calc(var(--st-visual-bottom, 0px) + 0.8rem + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
  }
  .st-assistant-backdrop[data-open="true"] { display: block; }
  .st-assistant-panel {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-width: 100%;
    height: 100vh;
    height: 100lvh;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: 0 -18px 54px rgba(15, 23, 42, 0.18);
  }
  .st-assistant-panel {
    top: var(--st-visual-panel-top, 0px);
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    height: var(--st-visual-panel-height, 100lvh);
    border-radius: 0;
  }
  .st-assistant-header { min-height: 3.9rem; padding: 0.65rem 0.85rem; }
  .st-assistant-messages { padding-inline: 0.85rem; }
  .st-assistant-composer { margin-inline: 0.75rem; }
  .st-code-explanation { margin-top: 0.5rem; }
  .st-code-explanation-body { padding: 0.7rem; }
}
@media (max-width: 390px) {
  .st-assistant-controls { padding: 0.45rem; }
  .st-assistant-toolbar { gap: 0.2rem; padding: 0.22rem; }
  .st-mode-button, .st-action-button { padding-inline: 0.26rem; font-size: 0.62rem; }
  .st-assistant-messages { padding: 0.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-assistant-fab, .st-assistant-icon, .st-mode-button, .st-action-button, .st-assistant-send,
  .st-code-explain, .st-code-explanation-toggle, .st-code-explanation-toggle svg { transition: none; }
  .st-assistant-fab:hover { transform: none; }
}