/*!
 * graph.css — 函数图像画板（数竞 / 初中数学 / 高中数学）
 *
 * 约定：
 *   · 类名统一 gf- 前缀，不和 mf-/sf-/al-/nb-/rd- 混
 *   · 颜色全部走 CSS 变量：独立页用 body[data-graph-standalone] 自己一套，
 *     APP 里（弹层 iframe 之外的按钮/入口卡/公式联动按钮）走 chat.css 的变量
 *   · [hidden] 兜底必须带 !important（.dsh-tools/check-hidden-css.mjs）
 *   · 375 宽：不横滚；输入框 16px（防 iOS 聚焦放大）
 *   · 深色主题：html[data-gf-theme="dark"] 由 graph.js 跟着 APP 的主题切
 */

/* ══════════════════════════════════════════════════════════════════
   独立页（/graph.html）自己的变量
   ══════════════════════════════════════════════════════════════════ */

body[data-graph-standalone] {
  --gf-bg: #ffffff;
  --gf-side: #f7f8fa;
  --gf-stage: #ffffff;
  --gf-line: #e6e8ee;
  --gf-ink: #1b1e28;
  --gf-ink-soft: #4a5163;
  --gf-muted: #8b93a7;
  --gf-brand: #4d6bfe;
  --gf-brand-strong: #3a56e0;
  --gf-hover: #eceef2;
  --gf-chip: #eff3ff;
  --gf-warn: #b45309;
  --gf-warn-bg: #fffbeb;
  margin: 0;
  height: 100%;
  background: var(--gf-bg);
  color: var(--gf-ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  -webkit-text-size-adjust: 100%;
}
html, body[data-graph-standalone] { height: 100%; }

html[data-gf-theme="dark"] body[data-graph-standalone] {
  --gf-bg: #17181c;
  --gf-side: #1e1f24;
  --gf-stage: #17181c;
  --gf-line: #2e3038;
  --gf-ink: #e8eaef;
  --gf-ink-soft: #b9bfcc;
  --gf-muted: #868da0;
  --gf-brand: #6d86ff;
  --gf-brand-strong: #93a6ff;
  --gf-hover: #2a2c33;
  --gf-chip: #232731;
  --gf-warn: #fbbf24;
  --gf-warn-bg: #2a2314;
}
/* 首帧（graph.js 还没跑、data-gf-theme 还没写）跟随系统 */
@media (prefers-color-scheme: dark) {
  html:not([data-gf-theme]) body[data-graph-standalone] {
    --gf-bg: #17181c;
    --gf-side: #1e1f24;
    --gf-stage: #17181c;
    --gf-line: #2e3038;
    --gf-ink: #e8eaef;
    --gf-ink-soft: #b9bfcc;
    --gf-muted: #868da0;
    --gf-brand: #6d86ff;
    --gf-brand-strong: #93a6ff;
    --gf-hover: #2a2c33;
    --gf-chip: #232731;
    --gf-warn: #fbbf24;
    --gf-warn-bg: #2a2314;
  }
}

/* ══════════════════════════════════════════════════════════════════
   骨架：上（顶栏）— 左（输入）右（画布）
   ══════════════════════════════════════════════════════════════════ */

.gf-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--gf-bg, #fff);
  color: var(--gf-ink, #1b1e28);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* 顶栏 */
.gf-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--gf-side, #f7f8fa);
  border-bottom: 1px solid var(--gf-line, #e6e8ee);
}
.gf-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gf-brand-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--gf-chip, #eff3ff);
  font-size: 18px;
}
.gf-brand-text { display: flex; flex-direction: column; min-width: 0; }
.gf-brand-text b {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-brand-text small {
  font-size: 11.5px;
  color: var(--gf-muted, #8b93a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.gf-select {
  max-width: 260px;
  padding: 7px 9px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 10px;
  background: var(--gf-bg, #fff);
  color: var(--gf-ink, #1b1e28);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.gf-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 10px;
  background: var(--gf-bg, #fff);
  color: var(--gf-ink, #1b1e28);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.gf-btn:hover { border-color: var(--gf-brand, #4d6bfe); }
.gf-btn:active { filter: brightness(.95); }
.gf-btn:disabled { opacity: .55; cursor: default; }
.gf-btn-ghost { background: transparent; }

/* 主体：左输入 / 右画布 */
.gf-main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.gf-side {
  flex: 0 0 336px;
  width: 336px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--gf-side, #f7f8fa);
  border-right: 1px solid var(--gf-line, #e6e8ee);
}
.gf-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 18px;
  -webkit-overflow-scrolling: touch;
}
.gf-sec { margin-bottom: 14px; }
.gf-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.gf-sec-head b { font-size: 13px; font-weight: 800; }
.gf-sec-tip { margin-left: auto; font-size: 11px; color: var(--gf-muted, #8b93a7); }

/* 函数行 */
.gf-row {
  padding: 8px 9px;
  margin-bottom: 7px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 12px;
  background: var(--gf-bg, #fff);
}
.gf-row.has-error { border-color: #f59e0b; background: var(--gf-warn-bg, #fffbeb); }
.gf-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gf-row-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4d6bfe;
}
.gf-row-label {
  flex: 0 0 auto;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--gf-ink-soft, #4a5163);
}
.gf-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 9px;
  background: var(--gf-bg, #fff);
  color: var(--gf-ink, #1b1e28);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 16px;              /* 16px：iOS 聚焦不放大 */
}
.gf-input:focus { outline: 2px solid var(--gf-brand, #4d6bfe); outline-offset: 1px; }
.gf-color {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.gf-row-eye {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 8px;
  background: var(--gf-bg, #fff);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.gf-row-err {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gf-warn, #b45309);
  word-break: break-word;
}

/* 参数滑动条 */
.gf-params-empty {
  padding: 8px 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gf-muted, #8b93a7);
}
.gf-param {
  padding: 7px 9px 5px;
  margin-bottom: 7px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 12px;
  background: var(--gf-bg, #fff);
}
.gf-param-top { display: flex; align-items: center; gap: 8px; }
.gf-param-name {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--gf-brand-strong, #3a56e0);
}
.gf-param-val {
  margin-left: auto;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--gf-ink, #1b1e28);
}
.gf-param-reset {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 7px;
  background: var(--gf-bg, #fff);
  color: var(--gf-muted, #8b93a7);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.gf-param-range {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  accent-color: var(--gf-brand, #4d6bfe);
  cursor: pointer;
}
.gf-range-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gf-muted, #8b93a7);
}
.gf-range-item { display: flex; align-items: center; gap: 5px; }
.gf-num {
  width: 62px;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--gf-line, #e6e8ee);
  border-radius: 8px;
  background: var(--gf-bg, #fff);
  color: var(--gf-ink, #1b1e28);
  font: inherit;
  font-size: 16px;
}
.gf-side-foot { display: flex; gap: 8px; margin: 2px 0 12px; }

/* 帮助 */
.gf-help {
  border: 1px dashed var(--gf-line, #e6e8ee);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--gf-ink-soft, #4a5163);
}
.gf-help summary { cursor: pointer; color: var(--gf-brand-strong, #3a56e0); font-weight: 700; }
.gf-help-body p { margin: 7px 0 0; line-height: 1.7; word-break: break-word; }
.gf-help code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--gf-chip, #eff3ff);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
}

/* 画布区 */
.gf-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--gf-stage, #fff);
}
/* ⚠️ JSXGraph 初始化时会往容器上写**内联**样式（position: relative 等），
   把这里的绝对定位顶掉。不写 !important 的话，收起输入区 / 转屏之后
   画布不会跟着变大（一直卡在初始化时量到的旧高度上，真机和无头浏览器都复现过）。 */
.gf-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  touch-action: none;          /* 双指缩放交给 JSXGraph，别让浏览器滚页面 */
}
/* ⚠️ JSXGraph 会给传进去的容器（就是 #gf-canvas 本身）加上 .jxgbox 类，
   并写入**内联**的 width/height（px）。不覆盖的话，收起输入区 / 转屏之后
   画布会一直卡在旧尺寸上（真机 + 无头浏览器都复现过）。 */
.gf-canvas.jxgbox,
.gf-canvas .jxgbox {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.gf-canvas .JXGtext { font-family: inherit; }

.gf-legend {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(70%, 420px);
  padding: 6px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gf-stage, #fff) 82%, transparent);
  border: 1px solid var(--gf-line, #e6e8ee);
  font-size: 12px;
  pointer-events: none;
}
.gf-legend-item { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gf-legend-line {
  flex: 0 0 auto;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #4d6bfe;
}
.gf-legend-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gf-ink, #1b1e28);
  font-family: ui-monospace, Consolas, monospace;
}
.gf-readout {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 6px 11px;
  border-radius: 10px;
  border: 1px solid var(--gf-line, #e6e8ee);
  background: var(--gf-side, #f7f8fa);
  color: var(--gf-muted, #8b93a7);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  pointer-events: none;
}
.gf-readout.is-on { color: var(--gf-ink, #1b1e28); border-color: #f59e0b; }
.gf-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  font-size: 11.5px;
  color: var(--gf-muted, #8b93a7);
  pointer-events: none;
  opacity: .85;
}

.gf-msg {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid var(--gf-line, #e6e8ee);
  background: var(--gf-chip, #eff3ff);
  color: var(--gf-brand-strong, #3a56e0);
  font-size: 13px;
  word-break: break-word;
}

/* 手机上才出现的按钮 */
.gf-only-mobile { display: none; }

/* ══════════════════════════════════════════════════════════════════
   手机：上下布局（画布在上，输入在下，可收起）
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .gf-only-mobile { display: inline-block; }
  .gf-main { flex-direction: column-reverse; }
  .gf-side {
    flex: 0 0 auto;
    width: 100%;
    max-height: 46vh;
    border-right: 0;
    border-top: 1px solid var(--gf-line, #e6e8ee);
  }
  .gf-app.is-folded .gf-side { display: none; }
  .gf-stage { flex: 1 1 auto; }
  .gf-head { padding: 8px 10px; gap: 7px; }
  .gf-brand-text b { font-size: 15px; }
  .gf-select { max-width: 40vw; font-size: 12px; padding: 6px 7px; }
  .gf-btn { padding: 7px 9px; font-size: 12px; }
  .gf-side-scroll { padding: 10px 10px 14px; }
  .gf-hint { display: none; }
  .gf-legend { top: 8px; left: 8px; font-size: 11px; padding: 5px 7px; }
}

/* 窄屏再收一档（320~375） */
@media (max-width: 420px) {
  .gf-head { padding: 7px 8px; }
  .gf-brand-icon { width: 30px; height: 30px; font-size: 16px; }
  .gf-actions { gap: 5px; }
  .gf-select { max-width: 46vw; }
  .gf-row { padding: 7px 8px; }
  .gf-row-label { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   APP 内（index.html）：入口卡 + 全屏弹层 iframe + 公式库联动按钮
   ══════════════════════════════════════════════════════════════════ */

/* 欢迎区入口卡（三个数学板块各一张，静态写在 index.html 里） */
.gf-board-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 16px;
  background: var(--bg-side, #f7f8fa);
  color: var(--ink, #1b1e28);
  text-align: left;
  cursor: pointer;
}
.gf-board-entry:hover { border-color: #8b5cf6; }
.gf-board-entry:active { background: var(--bg-hover, #eceef2); }
.gf-board-entry + .gf-board-entry,
.mf-board-entry + .gf-board-entry,
.gf-board-entry + .mf-board-entry { margin-top: 10px; }
.gf-board-entry-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 20px;
}
html[data-theme="dark"] .gf-board-entry-icon { background: #2b2547; color: #c4b5fd; }
.gf-board-entry-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gf-board-entry-text b { font-size: 15px; font-weight: 800; color: var(--ink, #1b1e28); }
.gf-board-entry-text small { font-size: 12px; color: var(--muted, #8b93a7); line-height: 1.4; }
.gf-board-entry-arrow { flex: 0 0 auto; color: var(--muted, #8b93a7); font-size: 22px; line-height: 1; }

/* 全屏弹层：里面就是 /graph.html（iframe） */
.gf-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;                 /* 高于公式面板(78)/图片查看(90)，低于更新横幅(200) */
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
}
.gf-overlay-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-side, #f7f8fa);
  border-bottom: 1px solid var(--line, #e6e8ee);
}
.gf-overlay-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #1b1e28);
}
.gf-overlay-close {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 9px;
  background: var(--bg, #fff);
  color: var(--ink-soft, #4a5163);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.gf-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg, #fff);
}
body.gf-open { overflow: hidden; }

/* 公式详情页的「📈 看图像」按钮（结构在 math-formulas.js 里，样式放这儿 ——
   math-formulas.css 不归这个模块管，不去动它） */
.mf-detail-graph {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mf-btn-graph {
  border-color: #0ea5e9;
  background: #f0f9ff;
  color: #0369a1;
  font-weight: 700;
}
.mf-btn-graph:hover { border-color: #0284c7; }
html[data-theme="dark"] .mf-btn-graph { background: #0b2b3a; border-color: #0369a1; color: #7dd3fc; }
.mf-graph-hint { font-size: 12px; line-height: 1.5; color: var(--muted, #8b93a7); }

/* [hidden] 兜底：作者样式里的 display:flex 会覆盖浏览器默认规则 */
[hidden] { display: none !important; }

/* 打印：把画布留下，按钮和输入区去掉 */
@media print {
  .gf-head, .gf-side, .gf-msg, .gf-hint, .gf-readout { display: none !important; }
  .gf-app, .gf-main, .gf-stage { height: auto; }
}