/* =====================================================================
   临床助手 · 视觉系统
   主题：临床「纸感」工作台 —— 米白纸张 + 深青墨色 + 琥珀强调
   适配：桌面（≥900px 侧边导航）/ 平板与手机（底部标签栏 + 抽屉）
   ===================================================================== */

/* ---------------------------------------------------------------- 数字字体
   病历正文 / 标题用的是宋体（--font-serif），宋体的数字笔画细、辨识度低，
   大字号时「0 6 8」很容易看错。这里定义一套「只为数字」的字体：
   unicode-range 限定在 0-9 与常用数量符号上，字体来源是系统自带的无衬线体
   （按 Windows / iOS / Android / 兜底 的顺序挑），汉字不受影响。
   浏览器若不支持 local() 或找不到字体，会自动回退到后面的字体，显示不变。 */
@font-face {
  font-family: "ClinicDigits";
  src: local("Microsoft YaHei"), local("Microsoft YaHei UI"), local("PingFang SC"),
    local("HarmonyOS Sans SC"), local("Segoe UI"), local("Helvetica Neue"),
    local("Roboto"), local("Arial");
  unicode-range: U+0025, U+002B, U+002D, U+002E, U+002F, U+0030-0039, U+003A,
    U+003C, U+003D, U+003E, U+00B0, U+00B1, U+00D7, U+00F7, U+02C7, U+2013,
    U+2014, U+2103, U+2192, U+2264, U+2265, U+FF10-FF19;
}

:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-2: #fffdf8;
  --paper-3: #faf7f0;
  --ink: #16211f;
  --ink-2: #43534f;
  --muted: #7b8a86;
  --line: #e2ddd0;
  --line-2: #efeadf;
  --teal: #0f4c48;
  --teal-2: #12736f;
  --teal-3: #18928b;
  --teal-50: #e4efec;
  --teal-100: #cfe4df;
  --amber: #a9680f;
  --amber-2: #e0a33c;
  --amber-50: #fbf0dc;
  --red: #a2251c;
  --red-50: #fbe7e4;
  --green: #1a6b45;
  --green-50: #e3f1e9;
  --blue: #1d4f8c;
  --blue-50: #e6edf7;
  --violet-50: #efeaf6;
  --violet: #4b3a78;

  /* 数字字体：宋体 / 思源宋体里的 0-9 笔画很细（"6""0" 尤其难认），
     这里用 unicode-range 只把数字与常用数量符号映射到系统里的无衬线字体，
     汉字仍按各自字体渲染。local() 找不到对应字体时会自动往后回退，不影响任何显示。 */
  --font-serif: "ClinicDigits", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-sans: "ClinicDigits", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "ClinicDigits", "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  /* 数字专用字体：数值单元格 / 计时器 / 统计数字都用它（无衬线，配合 tabular-nums 对齐） */
  --font-num: var(--font-sans);

  --rail-w: 224px;
  --top-h: 58px;
  --tab-h: 62px;
  /* iPhone「添加到主屏幕」后，物理屏幕底部可能还有一截不在布局视口里。
     由 index.html 的首屏脚本量出 screen.height 与 innerHeight 的差，写入这里。
     非独立 App / 桌面端保持 0。 */
  --host-bottom-gap: 0px;
  /* 底栏内容与手势条之间要留出的高度：优先用系统安全区；
     独立 App 里系统安全区偶尔为 0，则用上面量到的底部差值兜底（最多 34px）。 */
  --tab-safe: max(env(safe-area-inset-bottom, 0px), min(var(--host-bottom-gap), 34px));
  /* iOS「添加到主屏幕」后是整屏显示（viewport-fit=cover），刘海 / 灵动岛 / 底部手势条
     会压在网页上。这四个变量就是系统给出的安全区尺寸，非全屏或桌面端为 0。 */
  --safe-top-base: env(safe-area-inset-top, 0px);
  /* iOS / iPadOS 26、27 顶栏上沿额外留白（设置里可调，其他系统保持 0） */
  --ios-top-extra: 0px;
  --safe-top: calc(var(--safe-top-base) + var(--ios-top-extra));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* 顶栏实际占位高度 = 顶栏本身 + 顶部安全区（灵动岛下方才是可点区域） */
  --top-total: calc(var(--top-h) + var(--safe-top));
  /* 圆角整体调大（Apple 风格：卡片 / 弹窗 / 输入框都更柔和） */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(22, 33, 31, .05), 0 1px 12px rgba(22, 33, 31, .04);
  --shadow-2: 0 6px 24px rgba(22, 33, 31, .10), 0 2px 6px rgba(22, 33, 31, .06);
  --shadow-3: 0 18px 60px rgba(15, 76, 72, .22);
  --focus: 0 0 0 3px rgba(18, 115, 111, .28);
  /* 统一的过渡语言：AI 助手、全屏切换、所有弹窗共用同一套时长与缓动 */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --dur-fade: .2s;
  --dur-pop: .24s;
  --dur-close: .14s;
  /* 弹窗 / AI 助手共用的背景高斯模糊（Safari 需 -webkit- 前缀） */
  --backdrop-blur: blur(16px) saturate(125%);
  /* 磨砂玻璃：只保留半透明底色与背景模糊，不叠加高光或渐变 */
  --glass-blur: blur(22px) saturate(145%);
  /* 顶栏、底栏、状态栏安全区共用同一块玻璃：颜色、透明度、模糊必须完全一致 */
  --glass-bar: color-mix(in srgb, var(--top-bg) 48%, transparent);
  --glass-bar-line: color-mix(in srgb, var(--teal-ink) 20%, transparent);
  --glass-panel: color-mix(in srgb, var(--paper-2) 68%, transparent);
  --glass-panel-strong: color-mix(in srgb, var(--paper-2) 74%, transparent);
  --glass-tint: color-mix(in srgb, var(--paper-3) 58%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 54%, transparent);
  /* ---- 语义补充：深色模式与配色方案只需要覆盖这一层 ---- */
  --field-bg: #fff;
  /* 浅色模式：顶栏 / 底栏用主色，和状态栏连成一块 */
  --top-bg: var(--teal);
  --tabbar-bg: var(--top-bg);
  /* 底栏纯色：给系统画布、底栏补齐层和深色模式共用 */
  --tabbar-solid: var(--top-bg);
  --tabbar-dim: color-mix(in srgb, var(--tabbar-solid) 56%, #101e1c);
  --backdrop: rgba(16, 30, 28, .44);
  --backdrop-2: rgba(16, 30, 28, .42);
  --toast-bg: #16302c;
  --toast-ink: #eaf3f0;
  --toast-err: #7d1a13;
  --thumb-bg: #f1efea;
  --skeleton-1: #efece4;
  --skeleton-2: #f7f4ec;
  --tag-grey: #f0eee8;
  --amber-line: #f0dcb8;
  --amber-line-2: #c98d24;
  --amber-mark-2: #c07d13;
  --on-amber: #24170a;
  --ink-amber: #6d4405;
  --red-line: #f0cbc6;
  --red-line-2: #e7c5c1;
  --ink-red: #7d1a13;
  --green-line: #c9e3d5;
  --blue-line: #c9d9ee;
  --violet-line: #ded4ee;
  --ink-teal: #0a3733;
  /* 自定义配色用：--teal 当底色时的文字色、--teal 当文字色时的可读版本（预设配色下等同于原值） */
  --teal-ink: #fff;
  /* 顶栏 / 底栏专属文字色：默认跟随 --teal-ink，可在自定义配色里强制黑或白 */
  --bar-ink: var(--teal-ink);
  --bar-text-shadow: 0 1px 1px color-mix(in srgb, #000000 18%, transparent);
  --teal-text: var(--teal);
  --step-urgent-bg: #fff7f6;
  --grid-line: rgba(22, 33, 31, .028);
  --glow-brand: rgba(18, 115, 111, .09);
  --glow-amber: rgba(224, 163, 60, .10);
  --login-grad-1: #f8f5ee;
  --login-grad-2: #ece7db;
  --login-glow-1: rgba(15, 76, 72, .14);
  --login-glow-2: rgba(34, 122, 112, .16);
  --shadow-tab: rgba(22, 33, 31, .06);
  /* 侧栏（深色品牌面）与只读/角色徽标 */
  --rail-1: #0f4c48;
  --rail-2: #0b3b38;
  --rail-3: #123f3c;
  --rail-ink: #e8f1ee;
  --rail-ink-strong: #fff;
  --rail-ink-dim: rgba(232, 241, 238, .62);
  --rail-ink-2: rgba(232, 241, 238, .82);
  --rail-line: rgba(255, 255, 255, .06);
  --rail-line-2: rgba(255, 255, 255, .12);
  --rail-hover: rgba(255, 255, 255, .09);
  --rail-active: rgba(224, 163, 60, .18);
  --rail-badge: rgba(255, 255, 255, .16);
  --rail-dot: #8b9a96;
  --role-bg: rgba(255, 255, 255, .14);
  --role-line: rgba(255, 255, 255, .22);
  --role-admin-bg: rgba(255, 214, 102, .2);
  --role-admin-line: rgba(255, 214, 102, .45);
  --role-admin-ink: #ffe9ac;
  --role-viewer-bg: rgba(255, 255, 255, .1);
  --role-viewer-ink: #cfe0dc;
  /* 深色模式下由配色方案提供的品牌色（默认 = 青墨） */
  --teal-dark: #1f857c;
  --teal-2-dark: #2ea79b;
  --teal-3-dark: #46c2b5;
  --teal-50-dark: rgba(31, 133, 124, .22);
  --teal-100-dark: rgba(31, 133, 124, .34);
  --rail-1-dark: #0d3b38;
  --rail-2-dark: #082b29;
  --rail-3-dark: #10312f;
}

* { box-sizing: border-box; }
/* 必须放在组件样式之前：class 上的 display 会覆盖浏览器默认的 [hidden]，导致隐藏面板仍占据屏幕 */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* 防溢出兜底：药名、剂型、检验项目、外文缩写等「没有空格的长串」默认不会断行，
   会把卡片乃至整页撑破。这里统一允许在任意位置换行；表格在 .scroll-x 里可以横向滚，不受影响。 */
.card, .patient-card, .list-item, .notice, .empty, .step, .entry-title, .entry-excerpt,
.doc-paper, .doc-paper *, .modal-body, .toast, .crumbs, .msg .bubble, label.field, .kv dd, .kv dt {
  overflow-wrap: anywhere;
}
/* html 画布铺满底栏同色：iPhone 独立 App 的手势区在布局视口之外，
   固定底栏盖不到那块系统画布，只能靠 html 背景色延伸过去。 */
html { -webkit-text-size-adjust: 100%; background-color: var(--tabbar-solid); }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% -10%, var(--glow-brand), transparent 45%),
    radial-gradient(circle at 100% 0%, var(--glow-amber), transparent 42%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  font-size: 15px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

/* 交互控件不做双击缩放：iOS 上连续点标题 / 内容进入编辑时，
   页面不会因为第二次轻点被放大；双指缩放仍然保留。 */
button, a, input, textarea, select, [role="button"], .modal-body {
  touch-action: manipulation;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; letter-spacing: .01em; margin: 0; }
h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14.5px; }
p { margin: 0 0 .6em; }
a { color: var(--teal-2); }
small { font-size: 12.5px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: var(--paper-2); padding: 6px 10px; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- 骨架布局 */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--top-total) minmax(0, 1fr);
  grid-template-areas: "rail top" "rail main";
  /* 外壳固定为一屏高、由内部 .view 自己滚动。若用 min-height 让整页滚动，
     sticky 顶栏只能在自己那一行的高度内移动，页面往下滚时会被一起滚走，
     顶栏上的「AI 临床助手」按钮就点不到了。 */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.app-shell.rail-collapsed { --rail-w: 68px; }
.app-shell.rail-collapsed .nav-label,
.app-shell.rail-collapsed .rail-foot .btn span { display: none; }
/* 折叠侧栏：左上角只留头像圆点，姓名与箭头收起（避免把 68px 的栏挤变形） */
.app-shell.rail-collapsed .rail-user { justify-content: center; padding: 6px 0 10px; }
.app-shell.rail-collapsed .rail-user-text,
.app-shell.rail-collapsed .rail-user-caret { display: none; }
.app-shell.rail-collapsed .rail-nav .nav-item { justify-content: center; }
/* 折叠侧栏只剩圆点，避免模型名把 68px 的栏挤变形 */
.app-shell.rail-collapsed .ai-state { justify-content: center; padding: 4px 0; }
.app-shell.rail-collapsed .ai-state-lines { display: none; }
.only-mobile { display: none !important; }

/* 左侧导航 */
.rail {
  grid-area: rail;
  background: color-mix(in srgb, var(--rail-1) 56%, transparent);
  color: var(--rail-ink);
  display: flex; flex-direction: column;
  padding: 12px 10px calc(12px + var(--safe-bottom));
  gap: 10px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: backdrop-filter;
  border-right: 1px solid var(--rail-line-2);
}
/* 左上角：当前用户（头像 + 粗体姓名）。点一下打开「我的账号」弹窗 */
.rail-user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px 10px; border: 0; border-bottom: 1px solid var(--rail-line-2);
  background: transparent; color: var(--rail-ink-strong); font: inherit;
  text-align: left; cursor: pointer; border-radius: 10px;
}
.rail-user:hover { background: var(--rail-hover); }
.rail-user[disabled] { cursor: default; opacity: .72; }
.rail-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.rail-user-text strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-text small { color: var(--rail-ink-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-caret { margin-left: auto; flex: none; opacity: .55; font-size: 17px; line-height: 1; }

/* 头像圆点：有图显示图，没图显示姓名首字 */
.user-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--amber-2), var(--amber-mark-2));
  color: var(--on-amber); font-weight: 700; font-size: 14px; line-height: 1;
}
.user-avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 当前页不在手机底栏的 5 个里时，给汉堡按钮一点提示色（免得看不出在哪一页） */
#menuBtn[data-has-current="true"] { color: var(--teal-text); background: var(--teal-50); border-color: var(--teal-100); }
.brand-mark {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  background: linear-gradient(145deg, var(--amber-2), var(--amber-mark-2));
  color: var(--on-amber); font-family: var(--font-serif); font-weight: 700; font-size: 19px;
  display: grid; place-items: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong { font-family: var(--font-serif); font-size: 16px; letter-spacing: .04em; }
.brand-text small { color: var(--rail-ink-dim); font-size: 11px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; border: 0;
  background: transparent; color: var(--rail-ink-2);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer; width: 100%;
  transition: background .16s ease, color .16s ease;
}
.nav-item svg { width: 19px; height: 19px; opacity: .85; }
.nav-item:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.nav-item[aria-current="true"] { background: var(--rail-active); color: var(--rail-ink-strong); box-shadow: inset 3px 0 0 var(--amber-2); }
.nav-item[aria-current="true"] svg { opacity: 1; color: var(--amber-2); }
.nav-badge { margin-left: auto; font-size: 11px; background: var(--rail-badge); padding: 1px 6px; border-radius: 20px; }
/* 侧栏上的小圆点计数（目前用于管理员的「资料审阅」待办条数） */
.nav-count {
  margin-left: auto;
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 9px;
  background: var(--amber-2);
  color: #3b2a00;
}
.nav-item .nav-count + .nav-badge { margin-left: 6px; }
.app-shell.rail-collapsed .nav-count { display: none; }
.rail-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rail-line-2); }

/* AI 平台小图标：统一用淡色底 + 品牌色图形，设置预设 / 侧栏 / AI 助手标题共用 */
.ai-brand {
  --brand: #8b949e;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 7px; color: var(--brand);
}
.ai-brand::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: .14;
}
.ai-brand svg { position: relative; z-index: 1; width: 15px; height: 15px; fill: currentColor; }
.ai-brand.sm { width: 18px; height: 18px; border-radius: 6px; }
.ai-brand.sm svg { width: 12px; height: 12px; }
.ai-brand.xs { width: 16px; height: 16px; border-radius: 5px; }
.ai-brand.xs svg { width: 11px; height: 11px; }
.ai-brand.openai { --brand: #10a37f; }
.ai-brand.qwen { --brand: #7c5cff; }
.ai-brand.deepseek { --brand: #4d6bfe; }
.ai-brand.zhipu { --brand: #2f6bff; }
.ai-brand.kimi { --brand: #16a3ff; }
.ai-brand.ollama { --brand: #d97706; }
.ai-brand.vllm { --brand: #ef7c00; }
.ai-brand.generic { --brand: #8b949e; }

/* 侧栏 AI 状态：图标 + 「AI 已接入 · 可识图」+ 平台 / 模型一行，信息更清楚 */
.ai-state {
  font-size: 11.5px; color: var(--rail-ink-dim); display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 12px; background: var(--rail-hover); border: 1px solid var(--rail-line-2);
}
.ai-state .dot { width: 7px; height: 7px; margin: 0; border-radius: 50%; background: var(--rail-dot); flex: none; }
.ai-state-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; line-height: 1.35; }
.ai-state-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ai-state-title { font-size: 12px; font-weight: 700; color: var(--rail-ink-strong); white-space: nowrap; }
.ai-state-vision {
  font-size: 9.5px; font-weight: 600; line-height: 1.55; padding: 0 5px; border-radius: 999px;
  color: #69d99b; background: rgba(79, 209, 139, .14); border: 1px solid rgba(79, 209, 139, .25); white-space: nowrap;
}
.ai-state-model { font-size: 10.5px; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-state.on .dot { background: #4fd18b; box-shadow: 0 0 0 3px rgba(79, 209, 139, .22); }
.ai-state.off .dot { background: var(--amber-2); }
.app-shell.rail-collapsed .ai-state { padding: 4px 0; background: transparent; border-color: transparent; }
.rail-foot .btn { color: var(--rail-ink-2); border-color: var(--rail-line-2); }

/* 顶栏 */
.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* 让 Safari 在内部滚动容器上方持续重绘背景模糊，避免滚动后变成一层纯色 */
  will-change: backdrop-filter;
  color: var(--bar-ink);
  text-shadow: var(--bar-text-shadow);
  border-bottom: 1px solid var(--glass-bar-line);
}
.topbar-title { display: flex; flex-direction: column; min-width: 0; }
.topbar-title h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .search-icon { position: absolute; left: 10px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
#globalSearch {
  width: 280px; max-width: 34vw;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-3); font: inherit; font-size: 13.5px; color: var(--ink);
}
#globalSearch:focus { background: var(--field-bg); border-color: var(--teal-2); box-shadow: var(--focus); }
.search-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(560px, 92vw);
  max-height: 70dvh; overflow: auto;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 8px; z-index: 40;
}
.search-group { padding: 4px 6px 8px; }
.search-group-title { font-size: 11.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; padding: 6px 6px 4px; }
.search-hit { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--ink); }
.search-hit:hover, .search-hit:focus { background: var(--teal-50); }
.search-hit .t { font-weight: 600; font-size: 14px; }
.search-hit .d { font-size: 12px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 主内容区：向上伸到顶栏下面，滚动时内容才会真正穿过毛玻璃，
   否则顶栏和内容各占一行，背景后面永远只有页面底色，看起来就像没有模糊。
   顶部内边距补回顶栏高度，初始内容仍从顶栏下方开始。 */
.view {
  grid-area: main;
  padding: calc(18px + var(--top-total)) 20px 88px;
  max-width: 1560px; width: 100%;
  margin: calc(-1 * var(--top-total)) auto 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
/* 每次切页的内容都会先渲染进一个 .view-stage 容器（防止切页过快时旧页面盖住新页面），
   所以交替动画要同时覆盖 .view 的直接子元素和舞台容器里的子元素 */
.view > *:not(.view-stage), .view-stage > * { animation: rise .34s cubic-bezier(.22, .7, .3, 1) both; }
.view > *:not(.view-stage):nth-child(2), .view-stage > *:nth-child(2) { animation-delay: .04s; }
.view > *:not(.view-stage):nth-child(3), .view-stage > *:nth-child(3) { animation-delay: .08s; }
.view > *:not(.view-stage):nth-child(4), .view-stage > *:nth-child(4) { animation-delay: .12s; }
.view > *:not(.view-stage):nth-child(n+5), .view-stage > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------- 通用组件 */
.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card.tight { padding: 12px 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2, .card-head h3 { font-size: 16px; }
.card-head .spacer { flex: 1; }
.card-sub { font-size: 12.5px; color: var(--muted); }

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.side { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
/* 按钮行摆放规范：零散/单个按钮统一靠右；多个按钮扎堆时居中整齐铺开 */
.row.act-right { justify-content: flex-end; }
.row.act-center { justify-content: center; row-gap: 8px; }
@media (max-width: 640px) {
  /* 手机上多按钮一行居中铺开（两个一行），避免挤成一小撮 */
  .row.act-center > .btn { flex: 1 1 auto; min-width: calc(50% - 4px); justify-content: center; }
}
/* 详情页的「收藏」单独一行：按内容宽度居中；手机端与上下两列网格同宽（半个板面），真正落在中间 */
.row.act-center.fav-line > .btn { flex: 0 1 auto; }
@media (max-width: 640px) {
  .row.act-center.fav-line > .btn { flex: 0 0 calc(50% - 4px); justify-content: center; }
}
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.hidden { display: none !important; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease, border-color .16s;
  min-height: 38px; text-decoration: none;
}
.btn:hover { background: var(--paper-3); border-color: var(--line); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.btn.primary:hover { background: var(--teal-2); border-color: var(--teal-2); }
.btn.accent { background: var(--amber-2); border-color: var(--amber-line-2); color: var(--on-amber); }
.btn.danger { color: var(--red); border-color: var(--red-line-2); background: var(--red-50); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12.5px; min-height: 32px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 需要权限但故意保留可点（点了给中文提示）的按钮：如「识别文件」未开通时 */
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--paper-3); }
.btn-group { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.btn-group button { border: 0; border-radius: 0; background: var(--paper-2); padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.btn-group button + button { border-left: 1px solid var(--line); }
.btn-group button[aria-pressed="true"] { background: var(--teal); color: var(--teal-ink); font-weight: 600; }

/* 标签 / 徽章 */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--teal-50); color: var(--teal-text); border: 1px solid var(--teal-100);
}
.tag.amber { background: var(--amber-50); color: var(--amber); border-color: var(--amber-line); }
.tag.red { background: var(--red-50); color: var(--red); border-color: var(--red-line); }
.tag.green { background: var(--green-50); color: var(--green); border-color: var(--green-line); }
.tag.blue { background: var(--blue-50); color: var(--blue); border-color: var(--blue-line); }
.tag.grey { background: var(--tag-grey); color: var(--ink-2); border-color: var(--line); }
.tag.violet { background: var(--violet-50); color: var(--violet); border-color: var(--violet-line); }

/* 表单 */
label.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
label.field > .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
label.field > .lbl .hint { font-weight: 400; color: var(--muted); font-size: 11.5px; }
input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"], input[type="password"], input[type="time"], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--field-bg); font: inherit; font-size: 14px; color: var(--ink);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-2); box-shadow: var(--focus); outline: none; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vitals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.vitals-grid .v { display: flex; flex-direction: column; gap: 4px; }
.vitals-grid .v span { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.vitals-grid .v input { text-align: center; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.checkbox-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; }
.checkbox-row:hover { background: var(--teal-50); }
.checkbox-row input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal-2); flex: none; }
.checkbox-row label { font-size: 13.5px; cursor: pointer; }

/* 列表 */
.list { display: flex; flex-direction: column; }
/* 选择患者：列表区固定高度，搜索出 0 / 2 / 20 人时弹窗都不会忽大忽小 */
.patient-pick-list { height: min(40dvh, 360px); min-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 899px) { .patient-pick-list { height: 38dvh; min-height: 200px; } }
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: var(--r); text-align: left; border: 1px solid transparent; background: transparent;
  font: inherit; color: var(--ink); cursor: pointer; width: 100%;
}
.list-item + .list-item { border-top: 1px solid var(--line-2); }
.list-item:hover { background: var(--paper-3); }
.list-item[aria-current="true"], .list-item.active { background: var(--teal-50); border-color: var(--teal-100); }
.list-item .li-main { min-width: 0; flex: 1; }
.list-item .li-title { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
/* 注意：li-sub 是 <span>，inline 元素上的 overflow/text-overflow 不生效，
   长简介会一路画出框外（知识库搜索疾病时看到的就是这个）。必须改成块级。 */
.list-item .li-sub { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .li-right { font-size: 12px; color: var(--muted); text-align: right; flex: none; }

/* 患者卡片 */
.patient-card {
  background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--teal-2);
  border-radius: var(--r); padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; transition: transform .14s ease, box-shadow .16s ease;
}
.patient-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.patient-card.critical { border-left-color: var(--red); }
.patient-card .pc-top { display: flex; align-items: baseline; gap: 8px; }
.patient-card .pc-name { font-family: var(--font-serif); font-size: 17px; font-weight: 700; }
.patient-card .pc-dx { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.patient-card .pc-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }

/* 资料库分类卡：统一的图标徽章 + 专属强调色（药品 / 知识库 / 值班 / 检验 / 计算 / 收藏） */
.category-card { min-width: 0; overflow: hidden; }
.category-card .category-card-row,
.drug-cat-card .drug-cat-row { min-height: 34px; gap: 8px; flex-wrap: nowrap; }
.cat-icon-badge,
.drug-cat-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; border: 1px solid var(--line-2);
  border-color: color-mix(in srgb, currentColor 18%, var(--line-2));
  background: var(--paper-3);
  background: color-mix(in srgb, currentColor 10%, var(--paper-3));
  transition: transform .16s ease, background .16s ease;
}
.cat-icon-badge svg,
.drug-cat-icon svg { width: 19px; height: 19px; }
.category-card:hover .cat-icon-badge,
.drug-cat-card:hover .drug-cat-icon {
  transform: translateY(-1px) scale(1.04);
  background: var(--paper-2);
  background: color-mix(in srgb, currentColor 16%, var(--paper-2));
}
.category-card .cat-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; line-height: 1.35; }
.category-card .cat-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.5em * 2);
}
.category-card .category-card-row > .tag { flex: none; }

/* 空状态 / 加载 */
.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty .em-title { font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); margin-bottom: 6px; }
.empty .btn { margin-top: 12px; }
.skeleton { background: linear-gradient(90deg, var(--skeleton-1) 25%, var(--skeleton-2) 37%, var(--skeleton-1) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 8px; height: 14px; margin-bottom: 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spin { width: 16px; height: 16px; border: 2px solid var(--teal-100); border-top-color: var(--teal-2); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 表格 */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
table.data th { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; background: var(--paper-3); position: sticky; top: 0; }
table.data tr:hover td { background: var(--paper-3); }
table.data td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* 表格首列（短标签：疾病名 / 药品名 / 指标名）：桌面端不换行。
   手机端由 .tbl-stack 改成「每条一块」的竖排，见下方媒体查询。 */
table.data td.cell-lead, table.data th.cell-lead { font-weight: 600; white-space: nowrap; }
table.data td.cell-dose { font-weight: 600; }
.val-h { color: var(--red); font-weight: 700; }
.val-l { color: var(--blue); font-weight: 700; }

/* 时间线 */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: 14px; }
.timeline-item::before { content: ""; position: absolute; left: -18px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 0 3px var(--teal-50); }
.timeline-item .tl-time { font-size: 12px; color: var(--muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* KV 描述列表 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); white-space: nowrap; }
.kv dd { margin: 0; word-break: break-word; }

/* 文书预览纸张 */
.doc-paper {
  background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 30px; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-1);
}
.doc-paper h2 { text-align: center; font-size: 19px; margin-bottom: 14px; letter-spacing: .08em; }
.doc-paper .doc-meta { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 12.5px; color: var(--muted); border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.doc-paper .sec-title { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--ink); margin: 14px 0 6px; }

/* 查看模式下的「② 分项填写」：一条字段一块，只读，长文本自动换行不撑破卡片 */
.doc-sec-read {
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper-3);
  border: 1px solid var(--line-2); margin-bottom: 8px;
}
.doc-sec-read:last-child { margin-bottom: 0; }
.doc-sec-read-title {
  font-size: 12.5px; font-weight: 700; color: var(--teal-text);
  letter-spacing: .02em; margin-bottom: 4px;
}
.doc-sec-read-body { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; }

/* 提示条 */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r); font-size: 13px; line-height: 1.6;
  background: var(--amber-50); border: 1px solid var(--amber-line); color: var(--ink-amber);
}
.notice.red { background: var(--red-50); border-color: var(--red-line); color: var(--ink-red); }
.notice.teal { background: var(--teal-50); border-color: var(--teal-100); color: var(--ink-teal); }
.notice svg { width: 18px; height: 18px; margin-top: 1px; }

/* 模态框
   层级要高于 AI 抽屉面板（96）：否则从抽屉里点「历史问答」弹出的窗口会被抽屉挡住 */
.modal-root { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.modal-backdrop {
  position: fixed; inset: 0; background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade var(--dur-fade) ease both; pointer-events: auto;
}
.modal {
  position: fixed; z-index: 111; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 94vw); max-height: 88dvh; overflow: auto;
  background: var(--glass-panel-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; pointer-events: auto; overscroll-behavior: contain;
}
/* 弹窗打开时锁住后面的页面：个人信息 / 选择患者这类长弹窗里滑动，只滚弹窗本身 */
html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; }
html.modal-open .view { overscroll-behavior: none; }
@media (max-width: 899px) { html.modal-open .view { overflow: hidden; } }

/* 手机侧边栏打开时同样锁住背后页面：.view 才是页面滚动容器，
   只锁 html/body 挡不住手机上落在它身上的滑动。侧边栏自己的列表照常滚动。 */
html.drawer-scroll-locked,
html.drawer-scroll-locked body { overflow: hidden; overscroll-behavior: none; }
html.drawer-scroll-locked .view { overscroll-behavior: none; }
@media (max-width: 899px) {
  html.drawer-scroll-locked .view { overflow: hidden; }
  .rail-nav { overscroll-behavior: contain; }
}
/* 先按最终内容把高度量稳，再播放弹入动画：避免数据晚到半拍、底部再弹一下 */
.modal.is-preopen { opacity: 0; pointer-events: none; }
.modal.is-open { animation: pop var(--dur-pop) var(--ease-out-soft) both; }
.modal.wide { width: min(1080px, 96vw); }
.modal.slim { width: min(460px, 94vw); }
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--glass-line); position: sticky; top: 0; z-index: 2;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: backdrop-filter;
}
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 16px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.modal-foot {
  padding: 12px 18px; border-top: 1px solid var(--glass-line);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  background: var(--glass-tint); position: sticky; bottom: 0;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: backdrop-filter;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop {
  /* 只做位移和淡入，不做缩放：缩放会让弹窗（尤其是文字刚排版好时）看起来在反复变大小 */
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes popOut {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, calc(-50% - 6px)); }
}
/* 退场：由 core.js 的 modal().close() 加上 .closing，动画结束后再移除节点 */
.modal-backdrop.closing { animation: fadeOut var(--dur-close) ease both; pointer-events: none; }
.modal.closing { animation: popOut var(--dur-close) var(--ease-out-soft) both; pointer-events: none; }

/* 提示气泡 */
.toast-root { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(520px, 92vw); }
.toast {
  background: var(--toast-bg); color: var(--toast-ink); padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; box-shadow: var(--shadow-2); animation: toastIn .22s ease both; max-width: 100%;
  display: flex; align-items: center; gap: 8px;
}
.toast.err { background: var(--toast-err); }
.toast.ok { background: #14512f; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------- 悬浮按钮（右下角 AI / 左下角返回·回顶）
   层级刻意低于 AI 面板（96）与弹窗（110）：面板一打开就把悬浮按钮盖住，不会两层叠着。
   注意给 .view 留了底部内边距，内容不会被浮起来的按钮挡住。 */
.fab-ai {
  position: fixed; z-index: 40;
  right: calc(18px + var(--safe-right)); bottom: calc(18px + var(--safe-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--teal-2), var(--teal));
  color: var(--teal-ink); font: inherit; font-size: 14.5px; font-weight: 700;
  box-shadow: var(--shadow-3);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s ease;
}
.fab-ai:hover { transform: translateY(-2px); }
.fab-ai:active { transform: translateY(0) scale(.97); }
.fab-ai svg { width: 21px; height: 21px; }

.float-left {
  position: fixed; z-index: 40;
  /* 桌面端要让开左侧导航栏（--rail-w 在 :root 里，侧栏折叠时 <html> 上的 .rail-collapsed
     会把它改成 68px），否则两个圆钮压在侧栏上挡住菜单 */
  left: calc(var(--rail-w) + 18px + var(--safe-left)); bottom: calc(18px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.float-btn {
  width: 46px; height: 46px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper-2); color: var(--ink-2); cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), background .16s ease;
}
.float-btn:hover { background: var(--paper-3); transform: translateY(-2px); }
.float-btn:active { transform: translateY(0) scale(.94); }
.float-btn svg { width: 20px; height: 20px; }
/* 刷新中：图标转一圈，让「点了有反应」看得见 */
.float-btn.spinning svg { animation: spin .7s linear infinite; }

/* 底部标签栏（移动端） */
.tabbar { display: none; }
.drawer, .drawer-backdrop { display: none; }

/* ------------------------------------------------------------ AI 助手面板
   和「AI 问答」弹窗同一种形式：整屏半透明遮罩 + 居中卡片（不再是右侧抽屉 / 底部抽屉）。
   卡片内部：标题栏 + 对话区 + 底部（输入框 / 功能按钮居中一排 / 强度+发送靠右）。 */
.ai-drawer {
  position: fixed; inset: 0; z-index: 96;
  --ai-head-h: 70px;
  --ai-bar-bg: color-mix(in srgb, var(--teal) 55%, transparent);
  --ai-bar-line: color-mix(in srgb, var(--teal-ink) 18%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade var(--dur-fade) ease both;
  overscroll-behavior: contain;
  /* 全屏切换时让留白一起收放，卡片不会瞬间跳变 */
  transition: padding var(--dur-pop) var(--ease-out-soft), background-color var(--dur-fade) ease;
}
.ai-drawer .ai-panel {
  position: relative;
  display: flex; flex-direction: column;
  /* 固定高度：不管从哪个板块打开、聊天内容多长，窗口大小都一致，不会先小后大闪一下 */
  width: min(700px, 100%); height: min(580px, calc(100% - 40px)); max-height: 100%;
  background: var(--glass-panel-strong); border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  /* 面板自身裁掉多余内容，滚动只发生在 .ai-body 里 */
  overflow: hidden; animation: aiPanelIn var(--dur-pop) var(--ease-out-soft) both;
  will-change: transform, opacity;
  /* 全屏 / 退出全屏：宽高、圆角、边框、阴影同步过渡 */
  transition:
    width var(--dur-pop) var(--ease-out-soft),
    max-width var(--dur-pop) var(--ease-out-soft),
    height var(--dur-pop) var(--ease-out-soft),
    max-height var(--dur-pop) var(--ease-out-soft),
    border-radius var(--dur-pop) var(--ease-out-soft),
    border-color var(--dur-fade) ease,
    box-shadow var(--dur-pop) var(--ease-out-soft);
}
/* 注意：不能直接用弹窗的 pop（它自带 translate(-50%,-50%)，那是给 .modal 定位用的） */
@keyframes aiPanelIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aiPanelOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }
/* 收起 AI 助手：遮罩与面板一起柔和退出（由 ai.js 延迟隐藏，避免直接消失） */
.ai-drawer.closing { animation: fadeOut var(--dur-close) ease both; pointer-events: none; }
.ai-drawer.closing .ai-panel { animation: aiPanelOut var(--dur-close) var(--ease-out-soft) both; }
/* AI 面板打开时锁住后面的页面：不然滑动手势会穿透到面板下面的页面上（面板不动、底下在滚）。
   :has() 覆盖「任何路径把面板打开」，.ui-locked 是 ai.js 给老浏览器兜底的类。 */
html:has(#aiDrawer:not([hidden])), html.ui-locked,
html:has(#aiDrawer:not([hidden])) body, html.ui-locked body { overflow: hidden; overscroll-behavior: none; }
/* 页面内容区（#main.view）本身就是滚动容器：光锁 html/body 挡不住手机上落在它身上的滑动。
   桌面端只关掉它的指针命中（不加 overflow，免得滚动条消失导致整页横移）；
   手机端是覆盖式滚动条，直接 overflow: hidden 也看不出差别。 */
html:has(#aiDrawer:not([hidden])) .view, html.ui-locked .view { pointer-events: none; }
@media (max-width: 899px) {
  html:has(#aiDrawer:not([hidden])) .view, html.ui-locked .view { overflow: hidden; }
}
.ai-drawer .ai-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  position: relative; z-index: 2;
  height: var(--ai-head-h); min-height: var(--ai-head-h);
  border-bottom: 1px solid var(--ai-bar-line);
  background: var(--ai-bar-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: backdrop-filter;
  color: var(--bar-ink);
}
.ai-drawer .ai-head, .ai-drawer .ai-foot { touch-action: none; }
.ai-drawer .ai-head h2 { font-size: 15.5px; color: var(--bar-ink); }
.ai-head-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-head-sub {
  display: flex; align-items: center; gap: 5px; max-width: 260px; min-width: 0;
  overflow: hidden; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; opacity: .72;
}
.ai-head-sub-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-drawer .ai-head .icon-btn {
  background: color-mix(in srgb, var(--bar-ink) 14%, transparent);
  border-color: color-mix(in srgb, var(--bar-ink) 26%, transparent);
  color: var(--bar-ink);
}
/* 两处都要：min-height:0（纵向 flex 子项默认 min-height:auto，会被内容顶高、永远滚不动，
   于是「滑 AI 面板」变成了滑动它下面的页面）+ flex-basis:auto（手机端面板高度是内容撑开的
   bottom sheet，basis 用 0 会让对话区被压成一条缝）。 */
.ai-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* 对话区伸到标题栏下面并从内边距开始，滚动时气泡会从毛玻璃后面穿过 */
  margin-top: calc(-1 * var(--ai-head-h));
  padding: calc(var(--ai-head-h) + 14px) 16px calc(var(--ai-foot-h, 170px) + 14px);
  display: flex; flex-direction: column; gap: 12px;
}
.ai-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--ai-bar-line); padding: 10px 12px;
  background: var(--ai-bar-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  will-change: backdrop-filter;
}
.ai-foot .ai-patient-line { color: color-mix(in srgb, var(--bar-ink) 76%, transparent); }
/* iMessage 风格气泡：用户靠右、助手靠左，大圆角 + 贴近说话一侧的小圆角 */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(5px) scale(.99); }
  to { opacity: 1; transform: none; }
}
.msg {
  display: flex; flex-direction: column; gap: 6px;
  width: fit-content; max-width: min(84%, 720px);
  align-self: flex-start; align-items: flex-start;
  animation: msg-in .2s ease-out both;
}
.msg .bubble {
  max-width: 100%; padding: 9px 14px; border-radius: 20px;
  font-size: 14.5px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 1px 2px rgba(22, 33, 31, .05);
}
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.user .bubble {
  color: var(--teal-ink);
  border: 1px solid color-mix(in srgb, var(--teal) 82%, #000);
  border-bottom-right-radius: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 84%, #fff), var(--teal));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--teal) 18%, transparent);
}
.msg.assistant .bubble {
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-bottom-left-radius: 7px;
  background: color-mix(in srgb, var(--paper-2) 86%, var(--line-2));
}
/* 面板里的按钮统一靠右排（回答下方的「复制 / 保存到本地 / 存入…库」也在右侧） */
.msg .msg-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-self: flex-end; }
.ai-foot .row { justify-content: flex-end; }
/* 底部一排功能按钮（拍照 / 图片 / 上传文件 / 历史问答 / 清屏）居中；
   强度 + 发送那一行靠右（.ai-foot .row 默认 flex-end，这里选中的居中行要盖回来）。 */
.ai-foot .row.act-center, .modal-foot .row.act-center { justify-content: center; }
/* 底部按钮按内容宽度排，不许被 .modal-foot .btn{flex:1}、.row.act-center 的两列网格
   （flex:1 1 auto + min-width:50%）拉变形；一排放不下就换行居中，
   别把「历史问答」这类文字挤成两行 */
.ai-foot .ai-media > .btn, .modal-foot .ai-media > .btn {
  flex: 0 0 auto; min-width: 0; white-space: nowrap;
  font-size: 12px; padding: 5px 8px; gap: 5px;
}
.ai-foot .ai-ctrl > .btn, .ai-foot .ai-ctrl > .strength-pick,
.modal-foot .ai-ctrl > .btn, .modal-foot .ai-ctrl > .strength-pick { flex: 0 0 auto; min-width: 0; }
.ai-ctrl .strength-pick button { flex: 0 0 auto; white-space: nowrap; }
.ai-head .icon-btn { flex: 0 0 auto; }
/* 六个功能按钮固定一行、等宽；窄屏优先保住文字，图标在极窄屏隐藏 */
.ai-foot .ai-media, .modal-foot .ai-media { flex-wrap: nowrap; gap: 6px; }
.ai-foot .row.act-center.ai-media > .btn, .modal-foot .row.act-center.ai-media > .btn {
  flex: 1 1 0; width: auto; min-width: 0; padding: 5px 3px; gap: 4px;
  font-size: 11.5px; white-space: nowrap;
}
.ai-foot .ai-media > .btn svg, .modal-foot .ai-media > .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ai-input { line-height: 1.4; padding-top: 7px; padding-bottom: 7px; }
.ai-input:focus { border-color: var(--teal-2); }
@media (max-width: 430px) {
  /* 手机上六个按钮要挤在一行：优先保证文字完整、互不重叠，图标让位 */
  .ai-foot .ai-media > .btn svg, .modal-foot .ai-media > .btn svg { display: none; }
}
/* 全屏：面板铺满整屏（.full 特异性高于媒体查询里的 .ai-drawer） */
.ai-drawer.full {
  --ai-head-h: calc(70px + var(--safe-top));
  padding: 0;
  /* 全屏时必须去掉边框（否则屏幕最顶上会留一条 1px 的白线） */
  border-left: 0; border-top: 0; border-radius: 0;
}
.ai-drawer.full .ai-panel { width: 100%; max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
/* 整屏时避开刘海 / 灵动岛，顶栏按钮照样点得到（iPhone 添加到主屏幕后尤其重要） */
.ai-drawer.full .ai-head {
  padding-top: calc(13px + var(--safe-top));
}
.ai-drawer.full .ai-head .icon-btn {
  background: color-mix(in srgb, var(--bar-ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--bar-ink) 20%, transparent);
}
/* 「建议提问」模块已删除（v1.0.6）：打开 AI 助手就是对话区，相关样式一并移除 */

/* 工作台顶部卡片右侧的「在院患者 / 已写文书」两个方框（和全站卡片同一套配色） */
/* 工作台顶部：头像 + 问候语 + 功能入口（头像点一下打开「我的账号」弹窗） */
.dash-hero-body { display: grid; gap: 14px; }
.dash-greet-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-avatar {
  flex: none; padding: 0; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; cursor: pointer;
}
.dash-avatar:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.dash-greet-row .user-avatar { width: 46px; height: 46px; font-size: 19px; }
.dash-greet { font-size: 27px; font-weight: 800; letter-spacing: .2px; line-height: 1.25; }

/* 工作台功能入口：两横四列（顺序＝用户自己排的模块顺序，见 views/dashboard.js 的 ENTRY_SLOTS） */
.dash-entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-entry {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
  color: var(--ink); font: inherit; cursor: pointer; text-align: center;
}
.dash-entry:hover { background: var(--paper-3); border-color: var(--teal-100); color: var(--teal-text); }
.dash-entry:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.dash-entry-ico { display: inline-flex; color: var(--teal-2); }
.dash-entry-ico svg { width: 22px; height: 22px; }
.dash-entry-name {
  font-size: 13px; font-weight: 600; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 在院患者板块：两个可以点的统计按钮（在院患者 / 已写文书），手机端也并排居中 */
.dash-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin: 0 auto; }
.dash-metric {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
  color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.dash-metric:hover { background: var(--paper-3); border-color: var(--teal-100); }
.dash-metric:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.dash-metric-ico { display: inline-flex; color: var(--teal-2); }
.dash-metric-ico svg { width: 22px; height: 22px; }
.dash-metric-text { display: flex; flex-direction: column; min-width: 0; }
.dash-metric-label { font-size: 12.5px; color: var(--muted); }
.dash-metric-num { font-family: var(--font-num); font-size: 24px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 收藏夹 */
/* 条目行：左边点开、右边一排小按钮（置顶 / 换分类 / 移除）；顺序靠长按拖动 */
.fav-list { display: flex; flex-direction: column; gap: 7px; }
.fav-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); padding: 8px 10px;
}
.fav-row:hover { border-color: var(--teal-100); }
.fav-head { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.fav-head .drag-grip { margin-left: auto; padding-top: 2px; }
.fav-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.fav-title {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px;
  overflow-wrap: anywhere; word-break: break-word;
}
.fav-sub { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.fav-sub .muted { overflow-wrap: anywhere; }
.fav-ops { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.fav-cat-row {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); padding: 7px 10px;
}
.fav-cat-ico { color: var(--teal-2); flex: 0 0 auto; }
.fav-pin { color: var(--amber); flex: 0 0 auto; }
/* 星标按钮：已收藏时变琥珀色，一眼能看出状态 */
.fav-btn { gap: 5px; }
.fav-btn.on { color: var(--amber); border-color: var(--amber-line); background: var(--amber-50); }
.fav-btn svg { width: 15px; height: 15px; }

/* 收藏夹：分类卡片（和临床知识库的系统卡片同一套观感） */
.fav-cat-ops { display: flex; align-items: center; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.fav-check { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--teal-2); }
/* 批量操作条（收藏 / 历史问答 / 记事本）：多按钮扎堆，居中整齐铺开 */
.fav-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* 长按拖动排序（收藏夹 / 分类 / 设置里的导航顺序共用） */
.sortable-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sortable-item.dragging { opacity: .92; border-color: var(--teal-2); box-shadow: var(--shadow-2); transform: none; }
.sorting .sortable-item:not(.dragging) { opacity: .7; }
.drag-grip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; color: var(--ink-2);
  font-size: 22px; font-weight: 900; line-height: 1;
  cursor: grab; touch-action: none;
}
.drag-grip:active { cursor: grabbing; color: var(--teal-2); }

/* 拍照 / OCR 区域 */
.ocr-zone {
  border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 18px;
  text-align: center; background: var(--paper-3); color: var(--ink-2);
}
.ocr-zone:hover { border-color: var(--teal-2); background: var(--teal-50); }
.ocr-zone svg { width: 30px; height: 30px; color: var(--teal-2); }
.ocr-tools {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; width: 100%; max-width: 640px; margin: 10px auto 0;
}
.ocr-tools > .btn {
  width: 100%; min-width: 0; padding: 8px 5px; gap: 5px;
  justify-content: center; font-size: 12.5px; white-space: nowrap;
}
.ocr-tools > .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.thumb { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.thumb img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: var(--thumb-bg); }
.ocr-progress { height: 6px; border-radius: 999px; background: var(--teal-50); overflow: hidden; }
.ocr-progress > i { display: block; height: 100%; background: var(--teal-2); transition: width .3s ease; }

/* ---------------------------------------------------- 图片裁剪框（OCR 前） */
.crop-wrap {
  /* 长图（手机长截图、连着几页化验单）在这个视口里上下拖：
     视口本身可滚动，拖动由脚本接管（见 ai.js），所以鼠标和手指都能拖。 */
  position: relative;
  max-height: min(56dvh, 540px); overflow: auto; margin-top: 10px; padding: 4px;
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* 裁剪弹窗：提示 / 图片区 / 按钮行 三块按「还剩多少高度」分配，图片区自动占中间剩下的空间 */
.modal-body.crop-body { display: flex; flex-direction: column; }
.crop-body > *:not(.crop-wrap) { flex: 0 0 auto; }
.crop-body .crop-wrap { flex: 1 1 auto; min-height: 170px; }
/* 裁剪弹窗固定高度：切换「整图一览 / 适应宽度 / 旋转」时只让图片区内部重新排版，
   弹窗本身不跟着放大缩小，避免整块界面一跳一跳的。 */
.modal.crop-modal { height: min(760px, 88dvh); }
.modal.crop-modal .modal-body.crop-body { overflow: hidden; }
.modal.crop-modal .crop-body .crop-wrap { flex: 1 1 0; max-height: none; }
/* 裁剪框下面这一排（整图一览 / 适应宽度 / 缩放 / 框住可见区域 / 全选整张图）：
   手机上也要一直看得见，不能因为弹窗里内容长了就被挤到可滚动区域外面 */
.crop-tools {
  position: sticky; bottom: 0; z-index: 3;
  padding: 8px 0 2px; background: var(--paper-2);
}
.crop-stage {
  position: relative; width: 100%; line-height: 0; margin: 0 auto;
  touch-action: none;                 /* 拖选框 / 手势平移都由脚本处理，避免与页面缩放打架 */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.crop-stage[data-drag="pan"] { cursor: grab; }
.crop-stage[data-drag="move"] { cursor: move; }
.crop-stage > img {
  display: block; width: 100%; height: auto;
  pointer-events: none; -webkit-user-drag: none;
}
.crop-shade { position: absolute; background: rgba(10, 14, 18, .5); pointer-events: none; }
.crop-box {
  position: absolute; border: 1.5px solid #fff; cursor: move;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
  touch-action: none;
}
.crop-box .crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .45) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}
.crop-handle {
  --hsz: 20px;
  position: absolute; width: var(--hsz); height: var(--hsz); z-index: 2;
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .45); border-radius: 4px;
  touch-action: none;
}
.crop-handle.nw { left: calc(var(--hsz) / -2); top: calc(var(--hsz) / -2); cursor: nwse-resize; }
.crop-handle.n { left: calc(50% - var(--hsz) / 2); top: calc(var(--hsz) / -2); cursor: ns-resize; }
.crop-handle.ne { right: calc(var(--hsz) / -2); top: calc(var(--hsz) / -2); cursor: nesw-resize; }
.crop-handle.e { right: calc(var(--hsz) / -2); top: calc(50% - var(--hsz) / 2); cursor: ew-resize; }
.crop-handle.se { right: calc(var(--hsz) / -2); bottom: calc(var(--hsz) / -2); cursor: nwse-resize; }
.crop-handle.s { left: calc(50% - var(--hsz) / 2); bottom: calc(var(--hsz) / -2); cursor: ns-resize; }
.crop-handle.sw { left: calc(var(--hsz) / -2); bottom: calc(var(--hsz) / -2); cursor: nesw-resize; }
.crop-handle.w { left: calc(var(--hsz) / -2); top: calc(50% - var(--hsz) / 2); cursor: ew-resize; }
/* 手指操作：手柄放大到 26px，长图上更好按住（位置按 --hsz 自动居中，不用逐条改） */
@media (hover: none), (pointer: coarse) {
  .crop-handle { --hsz: 26px; }
}

/* 病历文书：工具栏（录入 / 引用 两组按钮，靠分隔线区分，不放文字标签占地方） */
.tool-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.tool-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
/* 手机：按钮自动铺满一行一行（不出现长短不齐的半格空白），分隔线省略 */
@media (max-width: 640px) {
  .tool-bar .btn { flex: 1 1 auto; min-width: calc(33.333% - 8px); padding-left: 8px; padding-right: 8px; }
  .tool-bar .tool-sep { display: none; }
}

/* 病历文书：每个填写段落之间用虚线分隔，长表单更容易对号入座 */
.form-sec { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.form-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

/* 患者列表：紧凑多列（同样一屏能看到更多患者，字不会被裁掉） */
.patient-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.patient-grid .patient-card { padding: 9px 11px; gap: 3px; }
.patient-grid .patient-card .pc-name { font-size: 16px; }
/* 一行放不下时（窄卡片 / 手机）让床号与状态自己换行，别把姓名挤成一条缝 */
.patient-grid .patient-card .pc-top { flex-wrap: wrap; row-gap: 3px; }
.patient-grid .patient-card .pc-dx {
  -webkit-line-clamp: unset; display: block; overflow: visible;
  font-size: 12.5px; line-height: 1.5;
}
.patient-grid .patient-card .pc-meta { gap: 4px 8px; }
@media (max-width: 560px) {
  .patient-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
}

/* 步骤流程（抢救/值班） */
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.step .n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--teal); color: var(--teal-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; font-family: var(--font-num); }
.step .s-body { flex: 1; min-width: 0; }
.step .s-title { font-weight: 700; font-size: 14.5px; }
.step.urgent { border-color: var(--red-line); background: var(--step-urgent-bg); }
.step.urgent .n { background: var(--red); }

/* 计算器 */
.calc-out { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; color: var(--teal-text); letter-spacing: .01em; }
.calc-out small { font-size: 14px; color: var(--muted); font-family: var(--font-sans); }

/* 打印（病历/医嘱单） */
@media print {
  .rail, .topbar, .tabbar, .ai-drawer, .toast-root, .modal-foot, .no-print { display: none !important; }
  body { background: #fff; }
  /* 屏幕上外壳是一屏高 + 内部滚动，打印时必须放开，否则只会印出第一屏 */
  .app-shell { display: block; height: auto; overflow: visible; }
  .view { padding: 0; margin: 0; max-width: none; overflow: visible; }
  .card { box-shadow: none; border: 0; padding: 0; margin: 0; }
  .doc-paper { border: 0; box-shadow: none; padding: 0; font-size: 12pt; }
}

/* ============================================================== 响应式 */

/* 平板 / 窄桌面：缩小侧栏文字 */
@media (max-width: 1200px) {
  #globalSearch { width: 200px; }
  .grid.side { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
}

/* 手机 / 小平板 */
@media (max-width: 899px) {
  /* 手机端只让 .view 自己滚动，避免整页和系统画布互相抢滚动 */
  html, body { overflow: hidden; overscroll-behavior: none; }
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-total) minmax(0, 1fr);
    grid-template-areas: "top" "main";
    /* 独立 App 里 dvh 只到系统画布上沿；首屏脚本量出物理屏幕高度后写到
       --app-height，底栏才能下移到屏幕底部而不被外壳裁掉。 */
    height: 100vh;
    height: var(--app-height, 100dvh);
    position: relative;
    overflow: visible;
  }
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: 262px; z-index: 98;
    transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .7, .3, 1);
    height: 100vh;
    height: var(--app-height, 100dvh);
    /* 和桌面侧栏同一套半透明玻璃；不要再加实到 88%，否则会变回实色面板。 */
    background: color-mix(in srgb, var(--rail-1) 68%, transparent);
  }
  .drawer-open .rail { transform: none; box-shadow: var(--shadow-3); }
  /* iPadOS 26/27 独立 App：dvh 偶尔只到系统画布上沿，底栏下方留白。
     独立 App 优先用完整视口高度 lvh；JS 量到物理屏幕差值时仍以 --app-height 为准。 */
  html[data-standalone="1"] .app-shell,
  html[data-standalone="1"] .rail {
    height: 100vh;
    height: 100lvh;
    height: var(--app-height, 100lvh);
  }
  .only-mobile { display: inline-flex !important; }
  /* .icon-btn 靠 display:grid + place-items:center 把图标摆在正中；
     手机端 .only-mobile 把它改成 inline-flex 后，图标会贴到左上角（看起来「不对称」）。
     这里把居中补回来。 */
  .only-mobile.icon-btn { display: grid !important; place-items: center; }
  /* 顶栏一排控件统一成 38×38 的方块（含未选患者时的头像按钮），尺寸一致才不会显得歪 */
  .topbar-actions > .icon-btn { width: 38px; height: 38px; }
  .topbar-actions > .patient-chip[data-state="none"] { width: 38px; max-width: 38px; padding: 0; }
  .only-desktop { display: none !important; }
  .view {
    padding: calc(12px + var(--top-total)) calc(12px + var(--safe-right)) calc(var(--tab-h) + var(--tab-safe) + 24px) calc(12px + var(--safe-left));
  }

  /* 悬浮按钮上移到标签栏之上；两个小圆钮改成横排，少占竖向空间 */
  .fab-ai {
    right: calc(14px + var(--safe-right)); bottom: calc(var(--tab-h) + var(--tab-safe) + 14px);
    height: 48px; padding: 0 16px;
    transform: translateY(var(--host-bottom-gap));
  }
  .fab-ai:hover { transform: translateY(calc(var(--host-bottom-gap) - 2px)); }
  .fab-ai:active { transform: translateY(var(--host-bottom-gap)) scale(.97); }
  .float-left {
    left: calc(14px + var(--safe-left)); bottom: calc(var(--tab-h) + var(--tab-safe) + 16px);
    flex-direction: row; gap: 10px;
    transform: translateY(var(--host-bottom-gap));
  }
  .float-btn { width: 44px; height: 44px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-title h1 { font-size: 15.5px; }
  .view-sub { display: none; }
  .search-wrap { display: none; }
  #globalSearch { width: 100%; max-width: none; }
  /* 全屏（刘海 / 灵动岛）时这两个浮层也要躲进安全区，否则搜索框本身会被状态栏压住 */
  .search-open .search-wrap {
    display: flex; position: fixed; left: calc(8px + var(--safe-left)); right: calc(8px + var(--safe-right));
    top: calc(8px + var(--safe-top)); z-index: 60; gap: 8px; align-items: center;
  }
  .search-open .search-wrap #globalSearch {
    flex: 1 1 auto; min-width: 0; background: var(--paper-2); box-shadow: var(--shadow-2); padding-right: 12px;
  }
  .search-open .search-cancel { flex: none; background: var(--paper-2); box-shadow: var(--shadow-2); }
  /* 搜索浮层压在顶栏上时，把底下的标题与按钮藏起来，免得两层文字叠在一起 */
  .search-open .topbar-title,
  .search-open .topbar-actions > *:not(.search-wrap) { visibility: hidden; }
  .search-open .search-panel {
    position: fixed; left: calc(8px + var(--safe-left)); right: calc(8px + var(--safe-right));
    top: calc(var(--top-total) + 8px); width: auto;
  }
  .patient-chip { max-width: 40vw; }
  .patient-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grid.side { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 13px 14px; border-radius: var(--r); margin-bottom: 12px; }
  .doc-paper { padding: 16px 14px; font-size: 15px; }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    /* 用 absolute 而不是 fixed：iOS 独立 App 会把 fixed 元素裁在布局视口底部，
       但外壳已经补到物理屏幕高度，absolute 能贴到外壳真正的底边。 */
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
    padding-bottom: var(--tab-safe);
    background: var(--glass-bar);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    will-change: backdrop-filter;
    border-top: 1px solid var(--glass-bar-line);
  }
  /* 遮罩 / 全屏面板同样盖住这段系统画布，避免底部露出另一种颜色 */
  .modal-backdrop,
  .drawer-backdrop,
  .login-overlay,
  .ai-drawer {
    bottom: calc(-1 * var(--host-bottom-gap));
  }
  .ai-drawer.full .ai-foot { padding-bottom: calc(10px + var(--tab-safe)); }
  .login-overlay { padding-bottom: calc(20px + var(--tab-safe)); }
  .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px 2px 7px; border: 0; background: transparent; color: var(--bar-ink);
    font: inherit; font-size: 10.5px; cursor: pointer; min-height: var(--tab-h);
    text-shadow: var(--bar-text-shadow);
  }
  .tabbar button svg { width: 21px; height: 21px; }
  /* 底栏 5 格，每格更窄：功能名超过一格宽时省略号收尾，绝不溢出 */
  .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar button[aria-current="true"] { color: var(--bar-ink); font-weight: 700; }
  .tabbar button[aria-current="true"] svg { color: var(--bar-ink); }

  .drawer-backdrop {
    display: block; position: fixed; top: 0; left: 0; right: 0;
    bottom: calc(-1 * var(--host-bottom-gap));
    background: var(--backdrop-2); z-index: 97;
    animation: fade var(--dur-fade) ease both;
  }
  .drawer { display: block; }

  /* 手机端：面板四周留白、居中显示，底部按钮不会被底部标签栏挡住 */
  .ai-drawer { padding: calc(16px + var(--safe-top)) 14px 16px; }
  /* 手机上不再铺到 680px 高：小窗保持聊天够用，又不至于盖住整屏 */
  .ai-drawer .ai-panel { width: 100%; height: min(600px, 76dvh); max-height: 100%; }
  /* 手机端弹窗居中显示：以前贴在屏幕最底部（还会被底部标签栏压住），
     现在和桌面端一样上下左右居中，四周留白，底部按钮也不会被挡住 */
  .modal {
    width: min(680px, 94vw); left: 50%; right: auto;
    top: calc(50% + var(--host-bottom-gap) / 2); bottom: auto;
    transform: translate(-50%, -50%); max-height: 88dvh;
    border-radius: var(--r-lg);
  }
  .modal-foot { position: sticky; }
  .modal-foot .btn { flex: 1; }
  .toast-root { bottom: calc(var(--tab-h) + var(--tab-safe) - var(--host-bottom-gap) + 16px); }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 6px; font-size: 12px; }
  .calc-out { font-size: 26px; }

  /* 手机端工作台：在院患者 / 已写文书两个按钮并排一行、整体居中 */
  .dash-metrics { width: 100%; min-width: 0; gap: 10px; }
  .dash-metric { padding: 10px 12px; gap: 10px; }
  .dash-metric-num { font-size: 22px; }
  /* 手机端：头像和问候语都收一点，保证一行放得下、不撑破卡片 */
  .dash-greet-row { gap: 10px; }
  .dash-greet-row .user-avatar { width: 40px; height: 40px; font-size: 17px; }
  .dash-greet { font-size: 23px; }
  /* 手机端功能入口：仍是两横四列，字号和小图标收一号，保证四个一行放得下 */
  .dash-entries { gap: 8px; }
  .dash-entry { padding: 10px 4px; gap: 5px; }
  .dash-entry-ico svg { width: 20px; height: 20px; }
  .dash-entry-name { font-size: 11.5px; }

  /* 收藏：手机上按钮太多，让它们整体换到下一行、靠右排，标题不会被挤成竖排 */
  .fav-row { flex-wrap: wrap; }
  .fav-ops { width: 100%; justify-content: flex-end; }

  /* 表单控件统一 16px：iOS 上输入框字号小于 16px 时，聚焦会被浏览器自动放大，
     整个页面比例随之乱掉（点搜索框「画面被撑大」就是这个原因）。 */
  input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"],
  input[type="search"], input[type="password"], input[type="time"], select, textarea, #globalSearch {
    font-size: 16px;
  }
  /* 列表副标题（疾病简介、药品分类等）在手机上给两行并截断：信息更全，也绝不越界 */
  .list-item .li-sub {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal; overflow-wrap: anywhere;
  }
  .grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .modal-head { padding: 12px 15px; }
  .modal-body { padding: 14px 15px; }
  .modal-foot { padding: 11px 15px; }
  .card-head h2, .card-head h3 { font-size: 15.5px; }
  .topbar-title h1 { font-size: 15.5px; }
  .crumbs { font-size: 12px; }
  /* 手机上末级面包屑（当前条目名）占满一行：长标题（如「成人心脏骤停（ACLS）与复苏后管理」）
     才不会被 46vw 截得太短，也不会画出卡片外 */
  .crumbs .crumb.current { max-width: 100%; }
  /* 手机上按钮稍微大一点，手指点得准 */
  .btn.small { padding: 7px 11px; }

  /* 「短标签 + 大段说明」两列表格（鉴别诊断、用药剂量、检查项目、指标详情…）
     在手机上不再挤成两列：改成一条一块的竖排，标签单独一行、说明跟在下面，
     彻底避免「方框里全是空白、说明被挤成一竖列字」的问题。
     只对加了 .tbl-stack 的表格生效：纯数字表格（患者检验趋势等）仍旧横向滚动。 */
  .tbl-stack { overflow-x: visible; }
  .tbl-stack table.data { display: block; width: 100%; min-width: 0; }
  .tbl-stack table.data thead { display: none; }
  .tbl-stack table.data tbody { display: block; }
  .tbl-stack table.data tr {
    display: block; padding: 9px 0 10px; border-bottom: 1px solid var(--line-2);
  }
  .tbl-stack table.data tr:last-child { border-bottom: 0; }
  .tbl-stack table.data td,
  .tbl-stack table.data th {
    display: block; width: auto !important; padding: 1px 0; border: 0;
    white-space: normal !important; text-align: left !important;
  }
  .tbl-stack table.data tr:hover td { background: transparent; }
  .tbl-stack table.data td.cell-lead, .tbl-stack table.data th.cell-lead { font-weight: 700; }
  .tbl-stack table.data td[data-label]::before {
    content: attr(data-label) '：';
    color: var(--muted); font-size: 12px; font-weight: 600;
  }
  /* AI 回答里的 Markdown 表格（richText 用 .md-table 包了一层 .scroll-x）：
     窄屏下给个最小宽度，横向滚动看全，而不是把每列挤成一竖行字 */
  .md-table { max-width: 100%; }
  .md-table > table.data { min-width: 440px; }
  /* 列数少的答案表格走竖排（.tbl-stack）：这时不该再有最小宽度 */
  .md-table.tbl-stack > table.data { min-width: 0; }
}

/* ------------------------------------------- iOS 全屏安全区（刘海 / 灵动岛 / 手势条）
   必须放在上面的 padding 简写之后：简写会把 padding-top 一起重置掉。
   「添加到主屏幕」后网页铺满整屏，若顶栏与灵动岛齐平，右上角的按钮会落在
   状态栏底下点不到——这里把顶栏内容压到安全区下方；底部同样给标签栏留出手势条位置。 */
.topbar {
  padding-top: var(--safe-top);
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}
.rail {
  padding-top: calc(12px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
}
/* 手机端「汉堡」菜单用的是左侧导航抽屉（底栏只有 5 格，其余功能从这里进），
   这个额外的全功能列表一直在屏幕外，
   却会把文档撑高（全屏时能往下拖动），所以直接不渲染。 */
@media (max-width: 899px) {
  .drawer { display: none; }
  .topbar { padding-left: calc(10px + var(--safe-left)); padding-right: calc(10px + var(--safe-right)); }
}

@media (max-width: 560px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  /* 窄屏也保留「AI」两个字母：AI 临床助手要一眼能找到 */
  .fab-ai { gap: 6px; padding: 0 15px; font-size: 13.5px; }
  .fab-ai .only-mobile { font-size: 13.5px; font-weight: 700; }
  .patient-chip { max-width: 32vw; }
  /* 顶栏控件挨得近一点，一行放得下；图标按钮保持正方形 */
  .topbar-actions { gap: 6px; }
  /* 没选患者时只留一个人形图标：否则「未选择患者」会把顶栏标题挤成「工…」 */
  .patient-chip[data-state="none"] { width: 38px; max-width: 38px; padding: 0; }
  .patient-chip[data-state="none"] span { display: none; }
  .patient-chip[data-state="has"] { max-width: 30vw; }
  .topbar-title h1 { min-width: 0; }
  /* 列表项右侧是一排按钮时（用户管理 / 文书 / 医嘱），窄屏上把它换到第二行：
     否则按钮不缩、左侧的文字会被挤成一条缝（320px 宽时只剩 20 多像素）。 */
  .list-item:has(.li-right .row) { flex-wrap: wrap; row-gap: 8px; }
  .list-item:has(.li-right .row) .li-main { flex: 1 1 100%; }
  .list-item:has(.li-right .row) .li-right { flex: 1 1 100%; display: flex; justify-content: flex-end; }
}

/* ------------------------------------------- 已保存资料面板（AI 结果资料库） */
.notes-panel .notes-list { display: flex; flex-direction: column; gap: 8px; }
/* 历史问答弹窗：列表区固定高度。读取中 / 空列表 / 100 条记录都不会改变弹窗大小 */
.modal .notes-panel .notes-list {
  height: min(54dvh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
/* 对话记录弹窗：列表滚动只发生在这一块 */
.chat-list-card { display: grid; gap: 8px; }
.chat-list-scroll {
  height: min(54dvh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}
.notes-panel .entry {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2); padding: 10px 12px;
  touch-action: manipulation;
}
.notes-panel .entry-head { display: flex; align-items: center; gap: 8px; }
.notes-panel .entry-title { font-weight: 600; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.notes-panel .entry-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.notes-panel .entry-excerpt { margin-bottom: 8px; overflow-wrap: anywhere; }
.notes-panel .entry-actions { gap: 6px; }
/* 记事本每条 6 个操作：手机端两行三列，桌面端一行六列 */
.notes-panel .note-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.notes-panel .note-actions .btn {
  width: 100%; min-height: 34px; padding: 0 6px;
  justify-content: center; font-size: 12px; white-space: nowrap;
}
@media (min-width: 720px) {
  .notes-panel .note-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* 历史问答的功能按钮：等宽铺开，手机 / 电脑都不会挤成一团 */
.notes-panel .qa-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 34px; gap: 6px;
}
.notes-panel .qa-actions .btn {
  width: 100%; height: 100%; min-height: 0; padding: 0 4px;
  justify-content: center; font-size: 12px; white-space: nowrap;
}
@media (min-width: 720px) {
  .notes-panel .qa-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.notes-panel .entry-detail { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 9px; }
.notes-panel .entry-section { margin-bottom: 8px; }
.notes-panel .entry-section strong { display: block; font-size: 13px; color: var(--teal-text); margin-bottom: 2px; }

@media (max-width: 760px) {
  .notes-panel .entry-actions .spacer { display: none; }
  .notes-panel .entry-actions .btn { flex: 1 1 96px; justify-content: center; }
}

/* ------------------------------------------------------------ 登录界面 */
.login-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
  background:
    radial-gradient(1100px 620px at 8% -12%, var(--login-glow-1), transparent 62%),
    radial-gradient(900px 520px at 102% 108%, var(--login-glow-2), transparent 60%),
    linear-gradient(160deg, var(--login-grad-1) 0%, var(--login-grad-2) 100%);
  overflow-y: auto;
}
.login-overlay[hidden] { display: none; }
/* 登录界面弹出时把工作台整体藏起来，避免任何内容透出来或能被误操作 */
body.login-open .app-shell { visibility: hidden; }
.login-card {
  width: min(400px, 100%);
  background: var(--glass-panel-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 24px 22px 22px;
}
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand strong { font-size: 17px; }
.login-brand small { display: block; font-size: 12px; color: var(--muted); }

/* 「我的账号」弹窗（左上角头像点开） */
.account-card { display: flex; flex-direction: column; }
.account-head { display: flex; align-items: center; gap: 14px; }
.account-avatar { flex: none; display: flex; }
.account-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-id strong { font-size: 16px; overflow-wrap: anywhere; }
.account-id .small { overflow-wrap: anywhere; }
.account-id .role-badge { align-self: flex-start; }
.role-badge {
  flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--role-bg); border: 1px solid var(--role-line);
}
.role-badge.admin { background: var(--role-admin-bg); border-color: var(--role-admin-line); color: var(--role-admin-ink); }
.role-badge.viewer { background: var(--role-viewer-bg); color: var(--role-viewer-ink); }
/* 只读账号：隐藏所有「新增/编辑/删除/保存」类按钮 */
body.role-readonly [data-requires-write] { display: none !important; }

/* 药品详情「返回上一层」 */
.drug-backbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* ------------------------------------------------------- 层级面包屑（逐级返回） */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.5;
}
.drug-backbar .crumbs { margin-bottom: 0; }
.crumbs .crumb {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--teal-text); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.crumbs .crumb:hover { color: var(--teal-2); }
.crumbs .crumb-sep { color: var(--muted); }
.crumbs .crumb.current {
  color: var(--ink); font-weight: 600;
  max-width: min(46vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* AI 回答强度选择（AI 助手面板底部 / 设置页） */
.strength-pick {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2);
}
.strength-pick > span.small { padding: 0 4px 0 6px; white-space: nowrap; }
.strength-pick button {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer;
  background: transparent; color: var(--ink-2);
}
.strength-pick button svg { width: 14px; height: 14px; fill: currentColor; }
.strength-pick button:hover { background: var(--paper-3); }
.strength-pick button[aria-pressed="true"] { background: var(--teal); color: var(--teal-ink); font-weight: 600; }
.strength-pick button[aria-pressed="true"]:hover { background: var(--teal-2); }


/* =====================================================================
   外观（主题 + 配色）
   html[data-theme] = light | dark（自动时由脚本按系统偏好解析后写入）
   html[data-accent] = teal | indigo | forest | clay | slate
   两块都是 html[...] 选择器，深色块写在最后，通过 --*-dark 承接配色方案。
   ===================================================================== */

html[data-accent="indigo"] {
  --teal: #1e3a63; --teal-2: #2b5490; --teal-3: #3a6db0;
  --teal-50: #e6ecf6; --teal-100: #d2ddef;
  --teal-dark: #2b5490; --teal-2-dark: #3f74b8; --teal-3-dark: #5a92d6;
  --teal-50-dark: rgba(43, 84, 144, .24); --teal-100-dark: rgba(43, 84, 144, .36);
  --rail-1: #1e3a63; --rail-2: #16294a; --rail-3: #1b3159;
  --rail-1-dark: #172b4c; --rail-2-dark: #101f39; --rail-3-dark: #142542;
  --focus: 0 0 0 3px rgba(43, 84, 144, .3);
  --glow-brand: rgba(43, 84, 144, .11);
  --login-glow-1: rgba(30, 58, 99, .16); --login-glow-2: rgba(58, 109, 176, .16);
  --ink-teal: #16304f;
  --shadow-3: 0 18px 60px rgba(30, 58, 99, .24);
}
html[data-accent="forest"] {
  --teal: #17462c; --teal-2: #1f6b42; --teal-3: #2a8a56;
  --teal-50: #e5efe8; --teal-100: #cee4d7;
  --teal-dark: #1f6b42; --teal-2-dark: #2c8b56; --teal-3-dark: #3da96d;
  --teal-50-dark: rgba(31, 107, 66, .24); --teal-100-dark: rgba(31, 107, 66, .36);
  --rail-1: #17462c; --rail-2: #103322; --rail-3: #143d28;
  --rail-1-dark: #123a24; --rail-2-dark: #0b2a1a; --rail-3-dark: #0f3320;
  --focus: 0 0 0 3px rgba(31, 107, 66, .3);
  --glow-brand: rgba(23, 70, 44, .11);
  --login-glow-1: rgba(23, 70, 44, .16); --login-glow-2: rgba(42, 138, 86, .16);
  --ink-teal: #0f3320;
  --shadow-3: 0 18px 60px rgba(15, 51, 32, .24);
}
html[data-accent="clay"] {
  --teal: #6b2f1d; --teal-2: #8f4326; --teal-3: #b3583a;
  --teal-50: #f5e7e0; --teal-100: #ecd3c7;
  --teal-dark: #8f4326; --teal-2-dark: #b3583a; --teal-3-dark: #cc7250;
  --teal-50-dark: rgba(143, 67, 38, .24); --teal-100-dark: rgba(143, 67, 38, .36);
  --rail-1: #6b2f1d; --rail-2: #4e2114; --rail-3: #5c2818;
  --rail-1-dark: #552517; --rail-2-dark: #3d1a0f; --rail-3-dark: #4a2013;
  --focus: 0 0 0 3px rgba(143, 67, 38, .3);
  --glow-brand: rgba(107, 47, 29, .11);
  --login-glow-1: rgba(107, 47, 29, .16); --login-glow-2: rgba(179, 88, 58, .16);
  --ink-teal: #46200f;
  --shadow-3: 0 18px 60px rgba(78, 33, 20, .26);
}
html[data-accent="slate"] {
  --teal: #2f3a45; --teal-2: #46566b; --teal-3: #5b7089;
  --teal-50: #e9edf2; --teal-100: #d8e0ea;
  --teal-dark: #46566b; --teal-2-dark: #5f7590; --teal-3-dark: #7d95b1;
  --teal-50-dark: rgba(70, 86, 107, .26); --teal-100-dark: rgba(70, 86, 107, .38);
  --rail-1: #2f3a45; --rail-2: #1f272f; --rail-3: #28323c;
  --rail-1-dark: #262f38; --rail-2-dark: #181e24; --rail-3-dark: #212a33;
  --focus: 0 0 0 3px rgba(91, 112, 137, .32);
  --glow-brand: rgba(47, 58, 69, .12);
  --login-glow-1: rgba(47, 58, 69, .18); --login-glow-2: rgba(91, 112, 137, .18);
  --ink-teal: #1f272f;
  --shadow-3: 0 18px 60px rgba(24, 30, 36, .3);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1514;
  --paper-2: #172020;
  --paper-3: #1e2827;
  --ink: #e7eeec;
  --ink-2: #b6c3c0;
  --muted: #8a9793;
  --line: #2c3736;
  --line-2: #222d2c;
  --field-bg: #131c1b;
  /* 深色模式：顶栏 / 底栏都用不透明的卡片色，避免底栏透出页面内容 */
  --top-bg: var(--paper-2);
  --tabbar-bg: var(--paper-2);
  --tabbar-solid: var(--paper-2);
  --tabbar-dim: color-mix(in srgb, var(--tabbar-solid) 38%, #000000);
  --backdrop: rgba(0, 0, 0, .62);
  --backdrop-2: rgba(0, 0, 0, .56);
  --toast-bg: #24322f;
  --toast-ink: #e8f1ee;
  --toast-err: #8d2a22;
  --thumb-bg: #1b2524;
  --skeleton-1: #1d2727;
  --skeleton-2: #26312f;
  --tag-grey: #232e2d;
  --amber: #e3ac53;
  --amber-50: rgba(224, 163, 60, .16);
  --amber-line: rgba(224, 163, 60, .34);
  --amber-line-2: #d9a03c;
  --amber-mark-2: #b5842f;
  --ink-amber: #f0cf94;
  --red: #e58379;
  --red-50: rgba(162, 37, 28, .2);
  --red-line: rgba(229, 131, 121, .34);
  --red-line-2: rgba(229, 131, 121, .3);
  --ink-red: #f4bab3;
  --green: #63c79a;
  --green-50: rgba(26, 107, 69, .22);
  --green-line: rgba(99, 199, 154, .32);
  --blue: #84b2ea;
  --blue-50: rgba(29, 79, 140, .24);
  --blue-line: rgba(132, 178, 234, .3);
  --violet: #b6a5e2;
  --violet-50: rgba(75, 58, 120, .28);
  --violet-line: rgba(182, 165, 226, .28);
  --ink-teal: var(--ink-2);
  --step-urgent-bg: rgba(162, 37, 28, .14);
  --grid-line: rgba(255, 255, 255, .035);
  --glow-amber: rgba(224, 163, 60, .07);
  --login-grad-1: #0e1514;
  --login-grad-2: #141d1c;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 12px rgba(0, 0, 0, .28);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .46), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-3: 0 18px 60px rgba(0, 0, 0, .6);
  --shadow-tab: rgba(0, 0, 0, .4);
  --rail-dot: #7d8c88;
  --role-bg: rgba(255, 255, 255, .12);
  --role-viewer-ink: #c3d3cf;
  /* 配色方案提供的深色品牌色在这里生效 */
  --teal: var(--teal-dark);
  --teal-2: var(--teal-2-dark);
  --teal-3: var(--teal-3-dark);
  --teal-50: var(--teal-50-dark);
  --teal-100: var(--teal-100-dark);
  --rail-1: var(--rail-1-dark);
  --rail-2: var(--rail-2-dark);
  --rail-3: var(--rail-3-dark);
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 12% -10%, var(--glow-brand), transparent 45%),
    radial-gradient(circle at 100% 0%, var(--glow-amber), transparent 42%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
html[data-theme="dark"] img,
html[data-theme="dark"] .doc-paper { color-scheme: dark; }

/* ---------------------------------------------------------------- 外观面板 */
.appear-pop {
  position: fixed; right: calc(12px + var(--safe-right)); top: calc(var(--top-total) + 8px); z-index: 94;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--top-total) - var(--safe-bottom) - 24px); overflow: auto;
  padding: 14px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.appear-pop h3 { font-size: 14.5px; margin-bottom: 2px; }
/* 这几个布局类在弹层与设置页里共用，所以不加 .appear-pop 前缀 */
.ap-sec { margin-top: 12px; }
.ap-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ap-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appear-opt {
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.appear-opt:hover { border-color: var(--teal-2); }
.appear-opt[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); color: var(--ink); font-weight: 600; }
.appear-opt svg { width: 18px; height: 18px; }
.appear-accents { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--paper-2);
}
.accent-dot[aria-pressed="true"] { border-color: var(--ink); }
.appear-swatch { display: block; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); overflow: hidden; }
.appear-swatch i { display: block; height: 100%; }
.appear-card-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.appear-card-row > div { flex: 1 1 240px; }

/* 空状态里的「先选强度，再让 AI 检索」小区域（药品速查 / 临床知识库） */
.ai-empty-cta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 12px 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.ai-empty-cta .strength-pick { background: var(--paper-3); }

.appear-preview { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) {
  .appear-pop { max-height: calc(100dvh - var(--top-total) - var(--tab-h) - 24px); }
}

/* 自定义配色：开关 + 自由取色 */
.sw-toggle {
  position: relative; flex: none; width: 40px; height: 22px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--thumb-bg); cursor: pointer;
}
.sw-toggle .sw-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper-2); box-shadow: var(--shadow-1); transition: left .16s ease;
}
.sw-toggle[aria-checked="true"] { background: var(--teal); border-color: var(--teal); }
.sw-toggle[aria-checked="true"] .sw-knob { left: 20px; background: #fff; }
/* iOS 26/27 顶栏上沿留白：滑杆 + 精确数值 */
.ios-top-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ios-top-row input[type="range"] { flex: 1 1 150px; min-width: 110px; accent-color: var(--teal); }
.ios-top-row input[type="number"] {
  flex: none; width: 74px; padding: 6px 8px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field-bg); color: var(--ink); text-align: center;
}
.ios-top-row .ios-top-unit { flex: none; min-width: 36px; font-size: 12px; color: var(--muted); }
.ios-top-row input:disabled { opacity: .5; }
.color-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.color-input {
  flex: none; width: 36px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-3);
}
.color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 5px; }
.color-input::-moz-color-swatch { border: none; border-radius: 5px; }
.color-meta { flex: 1 1 auto; min-width: 0; }
.color-name { font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.color-meta .small { line-height: 1.25; }
/* 选择器要压过通用规则 input[type="text"]{width:100%}，否则十六进制框会占满整行 */
.color-row input.color-hex {
  flex: none; width: 86px; min-width: 0; padding: 5px 7px; font: inherit; font-size: 12px;
  font-family: var(--font-mono); text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--field-bg); color: var(--ink);
}
.color-eye { flex: none; }
.color-eye svg { width: 16px; height: 16px; }
.appear-accents.dim { opacity: .45; }
.appear-accents .accent-dot:disabled { cursor: not-allowed; }

/* 设置页 → 导航顺序：左侧边栏 / 手机底栏两段列表 */
.navord-list { display: flex; flex-direction: column; gap: 4px; }
.navord-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--ink-2); font-size: 13.5px;
}
.navord-row svg { width: 17px; height: 17px; opacity: .8; flex: none; }
.navord-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navord-row .btn { padding: 2px 9px; min-width: 0; }
.navord-split {
  margin: 6px 0 2px; padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--teal-50); color: var(--teal-text); font-size: 11.5px; text-align: center;
}

/* 手机端：表单字段的「标签 + 说明」不要互相挤（免得标签被切成两行），说明文字另起一行 */
@media (max-width: 640px) {
  label.field > .lbl { flex-wrap: wrap; }
  label.field > .lbl .hint { flex-basis: 100%; }
}

/* 侧栏折叠时把导航栏宽度同步到 <html>：左下角悬浮按钮跟着一起让位（桌面端） */
html.rail-collapsed { --rail-w: 68px; }

/* ------------------------------------------------ 病历文书：书写 / 查看 切换 */
.docs-modes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.docs-modes .btn-group button { padding: 8px 16px; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.docs-modes .btn-group button svg { width: 16px; height: 16px; }
/* 分类 / 文书卡片右侧的小箭头 */
.pc-chev { width: 16px; height: 16px; color: var(--muted); }

/* ------------------------------------------- 设置页：顶部横向分类 + 子页底部保存栏
   设置项不再全堆在一页：顶部一排分类（可横向滑），下面只显示当前子页，
   每个有表单的子页底部各有一条保存栏。
   分类条与「检验检查」的切换条同一种形式：连体分段控件（共用外框、选中填主色）。 */
.set-tabs {
  display: inline-flex; align-items: stretch; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
  scrollbar-width: thin;
}
.set-tabs::-webkit-scrollbar { height: 4px; }
.set-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.set-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13.5px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.set-tab + .set-tab { border-left: 1px solid var(--line); }
.set-tab svg { width: 16px; height: 16px; }
.set-tab:hover { background: var(--paper-3); color: var(--ink); }
.set-tab.primary { background: var(--teal); color: var(--teal-ink); font-weight: 600; }
/* 子页底部的保存栏：跟着内容走，不粘在屏幕中间 */
.set-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2); box-shadow: var(--shadow-1);
}
.set-tab-body > .card:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  /* 手机端：横向分类不换行、可左右滑；分类按钮小一点，一行能看到 3 个左右 */
  .set-tabs { margin-bottom: 10px; }
  .set-tab { padding: 8px 11px; font-size: 13px; }
  .set-tab svg { width: 15px; height: 15px; }
  /* 手机端保存栏：按钮撑满一行，拇指好按 */
  .set-save { position: sticky; bottom: 8px; z-index: 6; }
  .set-save > .btn { flex: 1 1 auto; justify-content: center; }
  .set-save > label { flex: 1 1 100%; }

  /* 手机端「方框」总则：一行里的方块不许互相压住，也不许伸出卡片外。
     做法就是把可伸缩项的 min-width 放开（默认 auto 会按内容顶住不缩，
     结果就是长标题 / 长按钮把整行撑破），再让长串文字能在任意位置断行。 */
  .row > *, .card-head > *, .tool-bar > *, .field-row > *, .grid > *,
  .list-item > *, .modal-foot > *, .btn-group, .btn-group > * { min-width: 0; }
  .tag, .crumb, .checkbox-row label, label.checkbox-inline, .li-right,
  .patient-chip, .navord-name { overflow-wrap: anywhere; }
  .checkbox-row { align-items: flex-start; }
  .checkbox-row label { flex: 1 1 auto; }

  /* 手机端：两个模式按钮撑满一行，手指更好点；说明文字另起一行 */
  .docs-modes { gap: 6px; }
  .docs-modes .btn-group { width: 100%; }
  .docs-modes .btn-group button { flex: 1 1 0; padding: 10px 8px; }
  .docs-modes .btn-group + .small { flex-basis: 100%; }
  /* 选定患者后顶栏只显示姓名（床号在 .only-desktop 里，手机上已隐藏），可以把宽度放宽一点 */
  .patient-chip[data-state="has"] { max-width: 40vw; }
}

/* ------------------------------------------- 顶栏 / 移动端底栏统一用主色
   顶栏与底栏是「应用外壳」，必须和 PWA 状态栏（刘海 / 灵动岛）保持同一块颜色。
   这里用 --teal（主色）+ --bar-ink（顶栏/底栏文字与图标色），
   自定义配色时两者都由 theme.js 实时计算，浅色主色会自动换成深色文字，
   也可以在自定义配色里强制黑 / 白。 */
.topbar .topbar-title h1 { color: var(--bar-ink); }
.topbar .view-sub { color: color-mix(in srgb, var(--bar-ink) 72%, transparent); }
.topbar .icon-btn,
.topbar .btn {
  background: color-mix(in srgb, var(--bar-ink) 14%, transparent);
  border-color: color-mix(in srgb, var(--bar-ink) 26%, transparent);
  color: var(--bar-ink);
}
.topbar .icon-btn:hover,
.topbar .btn:hover {
  background: color-mix(in srgb, var(--bar-ink) 22%, transparent);
}
.topbar .search-wrap .search-icon { color: color-mix(in srgb, var(--bar-ink) 70%, transparent); }
.topbar #globalSearch {
  background: color-mix(in srgb, var(--bar-ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--bar-ink) 24%, transparent);
  color: var(--bar-ink);
}
.topbar #globalSearch::placeholder { color: color-mix(in srgb, var(--bar-ink) 66%, transparent); }
.topbar #globalSearch:focus {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--bar-ink);
}
.topbar #globalSearch:focus::placeholder { color: var(--muted); }
.topbar .search-wrap:focus-within .search-icon { color: var(--muted); }
/* 搜索结果是浮在内容上的卡片，不跟随顶栏文字色 */
.topbar .search-panel { color: var(--ink); }

.tabbar button { color: color-mix(in srgb, var(--bar-ink) 68%, transparent); }
.tabbar button[aria-current="true"],
.tabbar button[aria-current="true"] svg { color: var(--bar-ink); }

@media (max-width: 899px) {
  /* 手机端搜索框展开后是一张浮层卡片，保持卡片色，文字回到正文色 */
  .search-open .search-wrap #globalSearch {
    background: var(--paper-2); color: var(--ink); border-color: var(--line);
  }
  .search-open .search-wrap #globalSearch::placeholder { color: var(--muted); }
  .search-open .search-wrap .search-icon { color: var(--muted); }
  .search-open .search-wrap .search-cancel {
    background: var(--paper-2); border-color: var(--line); color: var(--ink-2);
    box-shadow: var(--shadow-2);
  }
}

/* 深色模式：顶栏 / 底栏 / AI 标题栏恢复原来的卡片色逻辑（浅色模式仍用主色）。
   data-bar-ink="auto" 才走这套自动配色；强制黑 / 白时继续沿用 --bar-ink。 */
html[data-theme="dark"][data-bar-ink="auto"] .topbar {
  color: var(--ink);
}
html[data-theme="dark"][data-bar-ink="auto"] .topbar .topbar-title h1 { color: var(--ink); }
html[data-theme="dark"][data-bar-ink="auto"] .topbar .view-sub { color: var(--muted); }
html[data-theme="dark"][data-bar-ink="auto"] .topbar .icon-btn,
html[data-theme="dark"][data-bar-ink="auto"] .topbar .btn {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink-2);
}
html[data-theme="dark"][data-bar-ink="auto"] .topbar .icon-btn:hover,
html[data-theme="dark"][data-bar-ink="auto"] .topbar .btn:hover { background: var(--paper-3); }
html[data-theme="dark"][data-bar-ink="auto"] .topbar .search-wrap .search-icon { color: var(--muted); }
html[data-theme="dark"][data-bar-ink="auto"] .topbar #globalSearch {
  background: var(--paper-3);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"][data-bar-ink="auto"] .topbar #globalSearch::placeholder { color: var(--muted); }
html[data-theme="dark"][data-bar-ink="auto"] .topbar #globalSearch:focus {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--teal-2);
}

html[data-theme="dark"][data-bar-ink="auto"] .tabbar button { color: var(--muted); }
html[data-theme="dark"][data-bar-ink="auto"] .tabbar button[aria-current="true"] { color: var(--teal-text); }
html[data-theme="dark"][data-bar-ink="auto"] .tabbar button[aria-current="true"] svg { color: var(--teal-2); }

html[data-theme="dark"] .ai-drawer {
  --ai-bar-bg: color-mix(in srgb, var(--rail-1) 56%, transparent);
  --ai-bar-line: var(--glass-line);
}
html[data-theme="dark"][data-bar-ink="auto"] .ai-drawer .ai-head {
  color: var(--rail-ink);
}
html[data-theme="dark"][data-bar-ink="auto"] .ai-drawer .ai-head h2 { color: var(--rail-ink); }
html[data-theme="dark"][data-bar-ink="auto"] .ai-drawer .ai-head .icon-btn {
  background: var(--role-bg);
  border-color: var(--role-line);
  color: var(--rail-ink);
}
html[data-theme="dark"][data-bar-ink="auto"] .ai-drawer.full .ai-head .icon-btn {
  background: color-mix(in srgb, var(--rail-ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--rail-ink) 20%, transparent);
}

@media (max-width: 899px) {
  html[data-theme="dark"] .search-open .search-wrap #globalSearch {
    background: var(--paper-2); color: var(--ink); border-color: var(--line);
  }
  html[data-theme="dark"] .search-open .search-wrap .search-cancel {
    background: var(--paper-2); border-color: var(--line); color: var(--ink-2);
  }
}

/* 弹窗遮罩只覆盖布局视口，iPhone 手势区在视口之外；
   把画布也调成「底栏被遮罩压暗后的颜色」，白条就不会露出来。 */
html.modal-open,
html:has(#aiDrawer:not([hidden]):not(.full)) {
  background-color: var(--tabbar-dim);
}

/* 登录层的基础样式在本文件后半段，媒体查询要放在它之后才能覆盖底部位置。 */
@media (max-width: 899px) {
  .login-overlay {
    bottom: calc(-1 * var(--host-bottom-gap));
    padding-bottom: calc(20px + var(--tab-safe));
  }
}