/* ============================================================
   Minecraft 我的世界游戏私教 · 像素方块风样式
   主色：深森林绿 | 辅助：泥土棕褐 | 强调：明亮橙
   ============================================================ */

:root {
  /* 深森林绿 */
  --green-950: #0c170a;
  --green-900: #14210f;
  --green-800: #1b2e16;
  --green-700: #243d1e;
  --green-600: #2e4d26;
  --green-500: #3a6130;
  --green-400: #4a7a3d;
  /* 泥土棕褐 */
  --dirt-900: #3a2a18;
  --dirt-800: #4a3320;
  --dirt-700: #5d4226;
  --dirt-600: #70502f;
  --dirt-500: #83603a;
  --dirt-400: #977247;
  --dirt-300: #ab8a5a;
  /* 明亮橙 */
  --orange: #f5a623;
  --orange-strong: #ff8c1a;
  --orange-dark: #c87f0a;
  --orange-press: #b46a05;
  /* 文本 */
  --text-light: #f2efe6;
  --text-dim: #b9c2a8;
  --text-dark: #2a2a22;      /* 浅色纸面上的主文字（深色主题下反转为浅色） */
  --btn-fg: #1f1508;         /* 橙色按钮/激活态文字 */
  /* 面板 */
  --panel-dark: rgba(20, 33, 15, 0.86);
  --paper: #ece5d4;          /* 聊天/专题纸张底色 */
  --paper-deep: #e2d9c2;
  /* 浅色纸面元素（供深色主题整体反转） */
  --card-bg: #f5eeda;        /* 专题卡片底色 */
  --card-desc: #4c4638;      /* 卡片描述文字 */
  --card-meta: #6b5d43;      /* 生电装置元信息 */
  --ai-bubble-1: #f3f1ea;    /* AI 气泡 */
  --ai-bubble-2: #e2dfd2;
  --user-bubble-1: #cfe6ff;  /* 用户气泡 */
  --user-bubble-2: #b3d4f5;
  --err-bubble-1: #ffe3d1;   /* 错误气泡 */
  --err-bubble-2: #f7c9b0;
  --code-bg: #1c2418;        /* 代码块 */
  --code-text: #e8e4d4;
  --inline-bg: #d9d2bc;      /* 行内代码 */
  --inline-bd: #b5ac92;
  --inline-fg: #244a1d;
  --ph-color: #8a8577;       /* placeholder */
  --meta-fg: #9a937f;        /* 消息元信息 */
  --fav-dim: #b8b09a;        /* 收藏按钮未点亮 */
  --think-fg: #8a7f5f;       /* 思考占位 */
  --body-ov-top: rgba(0,0,0,0.35);   /* body 渐变遮罩 */
  --body-ov-bottom: rgba(0,0,0,0.55);
  /* 像素边框 */
  --pixel-border: 2px;
  --radius: 3px;
  /* 状态灯 */
  --green-on: #3ddc84;
  --yellow-on: #ffd60a;
  --red-on: #ff5252;
  --light-off: #4a4f45;
  /* 阴影 */
  --btn-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  --card-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  --bevel: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  --bevel-light: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text-light);
  background:
    linear-gradient(180deg, var(--body-ov-top), var(--body-ov-bottom)),
    repeating-linear-gradient(0deg, var(--green-800) 0 28px, var(--green-900) 28px 56px);
  background-attachment: fixed;
  overflow: hidden;
  user-select: none;
}

body.locked { overflow: hidden; }

/* ---------- 通用按钮（方块像素风 + 按压下沉） ---------- */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--btn-fg);
  border: var(--pixel-border) solid #0f1f0c;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: var(--btn-shadow), var(--bevel-light);
  background: linear-gradient(180deg, #ffb84d, var(--orange));
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.15s ease;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.45), var(--bevel-light);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-orange { background: linear-gradient(180deg, #ffb84d, var(--orange-strong)); }
.btn-ghost {
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  color: var(--text-light);
  box-shadow: var(--btn-shadow), var(--bevel-light);
}
.btn-ghost:hover { filter: brightness(1.15); }
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.45), var(--bevel-light); }

.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ============================================================
   顶部全局导航标题区
   ============================================================ */
#topbar {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  border-bottom: var(--pixel-border) solid var(--green-950);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), var(--bevel);
  position: relative;
  z-index: 50;
  flex-shrink: 0;
}

.brand-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.brand-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  color: #fff;
  text-shadow: 3px 3px 0 var(--green-950), 0 0 18px rgba(245, 166, 35, 0.35);
  font-family: "Segoe UI", "Arial Black", "Microsoft YaHei", sans-serif;
}
.brand-sub { font-size: 12px; color: var(--dirt-300); letter-spacing: 2px; margin-top: 3px; }

.search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
#searchInput {
  flex: 1;
  height: 38px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--paper);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 0 12px;
  box-shadow: var(--bevel-light), 0 2px 0 rgba(0,0,0,.35);
  outline: none;
  user-select: text;
}
#searchInput:focus { border-color: var(--orange); box-shadow: var(--bevel-light), 0 0 0 2px rgba(245,166,35,.35); }
#searchInput::placeholder { color: var(--ph-color); }
.btn-search { height: 38px; padding: 0 22px; font-size: 14px; }

/* 状态灯 */
.status-wrap { display: flex; align-items: center; gap: 14px; position: relative; flex-shrink: 0; }
.status-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: help; }
.status-label { font-size: 10px; color: var(--text-dim); }
.light {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: var(--light-off);
}
.light-green[data-state="on"] { background: var(--green-on); box-shadow: 0 0 10px 2px rgba(61,220,132,.7); }
.light-yellow[data-state="on"] { background: var(--yellow-on); box-shadow: 0 0 10px 2px rgba(255,214,10,.7); }
.light-red[data-state="on"] { background: var(--red-on); box-shadow: 0 0 10px 2px rgba(255,82,82,.7); }

.tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  background: var(--dirt-800);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
  white-space: normal;
}
.status-wrap:hover .tooltip { opacity: 1; transform: translateY(0); }

/* 三条线汉堡菜单 */
.menu-wrap { position: relative; margin-left: 4px; }
.menu-btn {
  width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(180deg, var(--green-500), var(--green-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--btn-shadow), var(--bevel-light);
  transition: transform .06s ease, box-shadow .06s ease, background .15s ease;
  padding: 0;
}
.menu-btn:hover { background: linear-gradient(180deg, var(--green-400), var(--green-600)); filter: brightness(1.1); }
.menu-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.45), var(--bevel-light); }
.menu-line { width: 18px; height: 3px; background: var(--text-light); border-radius: 1px; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 272px;
  background: linear-gradient(180deg, var(--dirt-600), var(--dirt-800));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(0,0,0,.45), var(--bevel);
  padding: 8px;
  z-index: 250;
  animation: menuIn .15s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-head { font-size: 11px; color: var(--dirt-300); padding: 4px 8px 8px; letter-spacing: 1px; }
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-light);
  background: linear-gradient(180deg, var(--green-600), var(--green-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--bevel-light);
  transition: background .12s ease, filter .12s ease;
  text-align: left;
}
.menu-item:hover { background: linear-gradient(180deg, var(--green-500), var(--green-600)); filter: brightness(1.1); }
.menu-item:active { transform: translateY(1px); }
.menu-item-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.menu-divider { height: 2px; margin: 6px 4px; background: rgba(0,0,0,.32); border-top: 1px solid rgba(255,255,255,.08); }
.menu-row { cursor: default; }
.menu-row:hover { background: linear-gradient(180deg, var(--green-600), var(--green-700)); filter: none; }
.menu-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-chips { display: flex; gap: 6px; flex-shrink: 0; }
.theme-chip {
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 9px;
  color: var(--text-light);
  background: linear-gradient(180deg, var(--green-500), var(--green-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--bevel-light);
  transition: filter .12s ease;
}
.theme-chip:hover { filter: brightness(1.18); }
.theme-chip.active { background: linear-gradient(180deg, var(--orange-strong), var(--orange-dark)); color: var(--btn-fg); font-weight: 700; }
.lang-select {
  font-family: inherit;
  font-size: 12.5px;
  height: 30px;
  max-width: 150px;
  min-width: 0;
  background: var(--paper);
  color: var(--text-dark);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 0 6px;
  cursor: pointer;
  outline: none;
  user-select: text;
}
.lang-select:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(245,166,35,.35); }

/* ============================================================
   主布局
   ============================================================ */
#layout { display: flex; height: calc(100vh - 74px); }

/* ---------- 左侧可折叠侧边栏 ---------- */
#sidebar {
  width: 224px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--green-800), var(--green-950));
  border-right: var(--pixel-border) solid var(--green-950);
  position: relative;
  transition: width .18s ease;
}
#sidebar.collapsed { width: 58px; }

.sb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px;
  border-bottom: var(--pixel-border) solid var(--green-950);
  background: linear-gradient(180deg, var(--green-700), var(--green-800));
  box-shadow: var(--bevel);
}
.sb-logo { flex-shrink: 0; }
.sb-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.sb-title strong { font-size: 14px; }
.sb-status {
  font-size: 11px;
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
.sb-status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--light-off); flex-shrink: 0;
}
.sb-status[data-state="on"]::before { background: var(--green-on); box-shadow: 0 0 6px rgba(61,220,132,.8); }
.sb-status[data-state="standby"]::before { background: var(--yellow-on); box-shadow: 0 0 6px rgba(255,214,10,.8); }
.sb-status[data-state="off"]::before { background: var(--red-on); box-shadow: 0 0 6px rgba(255,82,82,.8); }

/* 导航 */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-settings { padding: 8px; border-top: var(--pixel-border) solid var(--green-950); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-light);
  background: linear-gradient(180deg, var(--green-600), var(--green-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--btn-shadow), var(--bevel-light);
  transition: transform .06s ease, box-shadow .06s ease, background .15s ease;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover { background: linear-gradient(180deg, var(--green-500), var(--green-600)); filter: brightness(1.08); }
.nav-item:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.45), var(--bevel-light); }
.nav-item.active {
  background: linear-gradient(180deg, var(--orange-strong), var(--orange-dark));
  color: var(--btn-fg);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(245,166,35,.4), var(--btn-shadow), var(--bevel-light);
}
.nav-item.nav-hot { border-color: var(--orange); }
.nav-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.nav-text { overflow: hidden; text-overflow: ellipsis; }

/* 折叠态：只显示图标 */
#sidebar.collapsed .nav-text,
#sidebar.collapsed .sb-title,
#sidebar.collapsed .foot-row,
#sidebar.collapsed .foot-light-text,
#sidebar.collapsed .foot-light-row,
#sidebar.collapsed .sb-foot .foot-key,
#sidebar.collapsed .sb-foot .foot-val { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; }
#sidebar.collapsed .sb-head { justify-content: center; padding: 12px 0; }
#sidebar.collapsed .sb-status { display: none; }

.sb-collapse {
  position: absolute;
  top: 78px;
  right: -16px;
  width: 30px; height: 30px;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--btn-fg);
  font-weight: 900;
  font-size: 11px;
  box-shadow: var(--btn-shadow), var(--bevel-light);
  z-index: 60;
}
.sb-collapse:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45), var(--bevel-light); }

/* 底部状态 */
.sb-foot {
  padding: 10px 12px;
  border-top: var(--pixel-border) solid var(--green-950);
  background: linear-gradient(180deg, var(--green-900), var(--green-950));
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
}
.foot-row { display: flex; justify-content: space-between; gap: 6px; }
.foot-val { color: var(--text-light); font-variant-numeric: tabular-nums; }
.foot-light-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }

/* ---------- 右侧区域 ---------- */
#right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  gap: 10px;
}

/* ============================================================
   右上方专题指导展示栏
   ============================================================ */
#topicPanel {
  flex: 0 0 34%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--dirt-600), var(--dirt-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow), var(--bevel);
  overflow: hidden;
}
.topic-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--dirt-500), var(--dirt-700));
  border-bottom: var(--pixel-border) solid var(--green-950);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
.topic-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.topic-hint { font-size: 11px; color: var(--dirt-300); }

.topic-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-content: start;
}

/* 专题卡片 */
.t-card {
  background: linear-gradient(180deg, var(--card-bg), var(--paper));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow), var(--bevel-light);
  padding: 10px 12px;
  color: var(--text-dark);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  overflow: hidden;
}
.t-card:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 0 rgba(0,0,0,.25), var(--bevel-light); border-color: var(--orange); }
.t-card:active { transform: translateY(1px); }
.t-card .c-icon { font-size: 22px; display: block; margin-bottom: 6px; }
.t-card .c-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.t-card .c-desc { font-size: 12px; line-height: 1.55; color: var(--card-desc); }
.t-card .c-tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.25);
  background: linear-gradient(180deg, #ffd68a, #f5a623);
  color: #3a2a10;
}
.tag.green { background: linear-gradient(180deg, #9fd38a, #4a7a3d); color: #fff; }
.tag.brown { background: linear-gradient(180deg, #c9a06a, #83603a); color: #fff; }
.tag.red { background: linear-gradient(180deg, #ff9d9d, #d64545); color: #fff; }
.tag.blue { background: linear-gradient(180deg, #9dc7ff, #3a6fd6); color: #fff; }

/* 生电装置子卡片（大型） */
.t-card.farm-sub .c-meta { font-size: 11px; color: var(--card-meta); margin: 4px 0; line-height: 1.5; }
.diff-dots { color: var(--orange-strong); letter-spacing: 1px; }

/* 欢迎卡片占位 */
.welcome-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow), var(--bevel);
  padding: 18px 20px;
  color: var(--text-light);
  display: flex;
  gap: 16px;
  align-items: center;
}
.welcome-banner .w-emoji { font-size: 40px; }
.welcome-banner h3 { font-size: 17px; margin-bottom: 6px; }
.welcome-banner p { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

/* ============================================================
   右下方 AI 聊天对话交互区
   ============================================================ */
#chatPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--paper), var(--paper-deep));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow), var(--bevel);
  overflow: hidden;
}

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--green-600), var(--green-800));
  border-bottom: var(--pixel-border) solid var(--green-950);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
.chat-head-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chat-ai-avatar {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--dirt-600);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
.chat-head-left strong { color: #fff; font-size: 14px; }
.chat-mode-badge {
  font-size: 11px;
  color: var(--dirt-300);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--green-950);
  border-radius: 2px;
  padding: 2px 8px;
}
.chat-head-right { display: flex; gap: 8px; }

/* 消息区 */
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,0,0,.02) 26px 27px);
}

.msg { display: flex; gap: 8px; max-width: 86%; animation: msgIn .18s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.ai { align-self: flex-start; }
.msg .col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.msg .avatar {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: var(--dirt-500);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
.msg.user .avatar { background: linear-gradient(180deg, #8fc7e8, #5a9cc8); }
.msg .bubble {
  padding: 9px 12px;
  border-radius: var(--radius);
  border: var(--pixel-border) solid var(--green-950);
  box-shadow: var(--card-shadow), var(--bevel-light);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dark);
  user-select: text;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 60px;
  max-width: 100%;
}
.msg.user .bubble { background: linear-gradient(180deg, var(--user-bubble-1), var(--user-bubble-2)); }
.msg.ai .bubble { background: linear-gradient(180deg, var(--ai-bubble-1), var(--ai-bubble-2)); }
.msg .bubble.err { background: linear-gradient(180deg, var(--err-bubble-1), var(--err-bubble-2)); border-color: #d64545; }
.msg .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  color: var(--meta-fg);
  margin-top: 5px;
  justify-content: flex-end;
}
.msg.ai .meta { justify-content: flex-start; }
.msg .fav-btn {
  border: none; background: none; cursor: pointer; font-size: 12px;
  color: var(--fav-dim); padding: 0; line-height: 1;
}
.msg .fav-btn.on { color: var(--orange-strong); }

/* 思考占位 */
.think-line { color: var(--think-fg); font-style: italic; font-size: 12px; }

/* 代码块 */
pre.code-block {
  position: relative;
  background: var(--code-bg);
  color: var(--code-text);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  user-select: text;
}
pre.code-block code { font-family: inherit; white-space: pre; }
.copy-btn {
  position: absolute;
  top: 5px; right: 5px;
  font-size: 10px;
  padding: 2px 8px;
  background: var(--orange);
  border: 1px solid var(--green-950);
  border-radius: 2px;
  cursor: pointer;
  color: var(--btn-fg);
  font-weight: 700;
}
.copy-btn:active { transform: translateY(1px); }
code.inline-code {
  background: var(--inline-bg);
  border: 1px solid var(--inline-bd);
  border-radius: 2px;
  padding: 0 5px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  color: var(--inline-fg);
}

/* 输入栏 */
.chat-input-bar {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--dirt-600), var(--dirt-700));
  border-top: var(--pixel-border) solid var(--green-950);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
#chatInput {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 140px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-dark);
  background: var(--paper);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 9px 12px;
  box-shadow: var(--bevel-light);
  outline: none;
  user-select: text;
  line-height: 1.5;
}
#chatInput:focus { border-color: var(--orange); box-shadow: var(--bevel-light), 0 0 0 2px rgba(245,166,35,.35); }
.btn-send { height: 38px; padding: 0 20px; font-size: 14px; flex-shrink: 0; }

.chat-quick-row { padding: 0 14px 8px; background: linear-gradient(180deg, var(--dirt-600), var(--dirt-700)); }
.quick-tip { font-size: 11px; color: var(--dirt-300); user-select: none; }

/* ============================================================
   弹层（设置 / 历史）
   ============================================================ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(6, 12, 4, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  animation: fadeIn .15s ease;
}
/* [hidden] 必须覆盖 display:flex，否则弹窗关不掉 */
.overlay[hidden],
.standby-veil[hidden],
.menu-panel[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(640px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--dirt-500), var(--dirt-700));
  border: 3px solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: 0 10px 0 rgba(0,0,0,.5), var(--bevel);
  animation: modalIn .18s ease;
  color: var(--text-light);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--green-600), var(--green-800));
  border-bottom: var(--pixel-border) solid var(--green-950);
  box-shadow: var(--bevel-light);
  flex-shrink: 0;
}
.modal-head h2 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.modal-head-sub { font-size: 11px; color: var(--dirt-300); font-weight: 400; }
.modal-close {
  background: linear-gradient(180deg, #ff9d9d, #d64545);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  color: #fff;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: var(--btn-shadow), var(--bevel-light);
}
.modal-close:active { transform: translateY(2px); box-shadow: none; }

/* 锁定界面 */
.lock-screen { padding: 40px 30px; text-align: center; }
.lock-icon { font-size: 44px; margin-bottom: 10px; }
.lock-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.lock-desc { font-size: 12.5px; color: var(--dirt-300); line-height: 1.8; margin-bottom: 20px; }
.lock-desc code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 2px; }
.lock-form { display: flex; gap: 10px; justify-content: center; }
.lock-form input {
  width: 260px; height: 38px;
  font-family: inherit; font-size: 14px;
  background: var(--paper);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 0 12px;
  outline: none;
  user-select: text;
}
.lock-err { color: #ff9d9d; font-size: 12px; margin-top: 12px; min-height: 16px; }

/* 设置表单 */
.settings-form { display: flex; flex-direction: column; min-height: 0; }
.settings-scroll { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.set-group {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.1));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.set-group h3 { font-size: 13.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-lock { font-size: 10px; color: #fff; background: #8a2f2f; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--green-950); }
.badge-safe { font-size: 10px; color: #14340e; background: #9fd38a; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--green-950); }

.set-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px;
  color: var(--text-light);
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.set-row:last-child { margin-bottom: 0; }
.set-row input[type="text"], .set-row input[type="password"], .set-row select {
  flex: 1; min-width: 180px; height: 32px;
  font-family: inherit; font-size: 13px;
  background: var(--paper);
  color: var(--text-dark);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 0 10px;
  outline: none;
  user-select: text;
}
.set-row select { cursor: pointer; }
.set-row input[type="range"] { flex: 1; accent-color: var(--orange); height: 22px; }
.set-val { font-size: 12px; color: var(--orange); font-weight: 700; min-width: 30px; text-align: right; }
.set-desc { font-size: 11px; color: var(--dirt-300); line-height: 1.6; margin-top: 2px; }

.switch-row { justify-content: space-between; }
.switch { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--dirt-800);
  border: 2px solid var(--green-950);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease;
}
.slider::before {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 14px; height: 14px;
  background: var(--dirt-300);
  border-radius: 2px;
  transition: transform .15s ease, background .15s ease;
}
.switch input:checked + .slider { background: var(--green-500); }
.switch input:checked + .slider::before { transform: translateX(20px); background: var(--orange); }

.btns-row { justify-content: flex-start; gap: 10px; }
.change-pass { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.change-pass input {
  width: 100%; height: 32px;
  font-family: inherit; font-size: 13px;
  background: var(--paper);
  color: var(--text-dark);
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 0 10px;
  outline: none;
  user-select: text;
}

.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-top: var(--pixel-border) solid var(--green-950);
  background: linear-gradient(180deg, var(--dirt-700), var(--dirt-800));
  flex-shrink: 0;
}
.save-tip { font-size: 11px; color: var(--dirt-300); }

/* 历史记录 */
.history-modal { width: min(720px, 94vw); }
.history-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: var(--pixel-border) solid var(--green-950);
  flex-shrink: 0;
}
.history-batch { font-size: 12.5px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.history-batch input { accent-color: var(--orange); width: 15px; height: 15px; cursor: pointer; }
.history-actions { display: flex; gap: 8px; }

.history-list {
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 52vh;
}
.history-empty { text-align: center; color: var(--dirt-300); font-size: 13px; padding: 30px 0; }

.h-item {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.08));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.h-item:hover { border-color: var(--orange); transform: translateX(2px); }
.h-item.fav { border-color: var(--orange); background: linear-gradient(180deg, rgba(245,166,35,.18), rgba(0,0,0,.08)); }
.h-item .h-check { display: none; width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; }
.history-modal.batch .h-item .h-check { display: block; }
.h-item .h-main { flex: 1; min-width: 0; }
.h-item .h-sum { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-light); }
.h-item .h-sub { font-size: 11px; color: var(--dirt-300); margin-top: 2px; }
.h-item .h-star {
  border: none; background: none; cursor: pointer;
  font-size: 15px; color: var(--dirt-300); flex-shrink: 0;
}
.h-item .h-star.on { color: var(--orange); }
.h-item .h-del {
  border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--dirt-300); flex-shrink: 0;
}
.h-item .h-del:hover { color: #ff8f8f; }
.h-item .h-fav-mark { font-size: 11px; color: var(--orange); flex-shrink: 0; display: none; }
.h-item.fav .h-fav-mark { display: inline; }

/* ============================================================
   待机遮罩 / Toast
   ============================================================ */
.standby-veil {
  position: fixed; inset: 0;
  background: rgba(8, 14, 6, 0.55);
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fadeIn .4s ease;
}
.standby-box {
  text-align: center;
  background: linear-gradient(180deg, var(--green-700), var(--green-950));
  border: 3px solid var(--green-950);
  border-radius: var(--radius);
  padding: 30px 48px;
  box-shadow: 0 8px 0 rgba(0,0,0,.5), var(--bevel);
}
.standby-z { font-size: 44px; margin-bottom: 10px; animation: breath 2.4s ease-in-out infinite; }
@keyframes breath { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.15); opacity: 1; } }
.standby-box p { font-size: 15px; font-weight: 700; }
.standby-sub { font-size: 12px; color: var(--dirt-300); margin-top: 6px; font-weight: 400 !important; }

#toastBox {
  position: fixed;
  top: 84px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 400;
}
.toast {
  background: linear-gradient(180deg, var(--dirt-500), var(--dirt-700));
  border: var(--pixel-border) solid var(--green-950);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow), var(--bevel-light);
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--text-light);
  animation: toastIn .2s ease;
  max-width: 340px;
}
.toast.ok { border-color: var(--green-400); }
.toast.err { border-color: #d64545; }
.toast.warn { border-color: var(--orange); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.toast.hide { opacity: 0; transform: translateX(20px); transition: all .25s ease; }

/* ============================================================
   滚动条（像素风）
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dirt-400), var(--dirt-600));
  border: 2px solid rgba(0,0,0,.4);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--dirt-300), var(--dirt-500)); }

/* 待机模式：降功耗（禁用动效） */
body.standby * { transition: none !important; animation: none !important; }

/* ============================================================
   响应式（PC 端自适应，防重叠溢出）
   ============================================================ */
@media (max-width: 1100px) {
  .brand-title { font-size: 26px; letter-spacing: 2px; }
  .brand-sub { display: none; }
  #searchInput { font-size: 13px; }
}
@media (max-width: 860px) {
  #topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  #layout { height: calc(100vh - 118px); }
  #topicPanel { flex-basis: 30%; }
}
@media (max-width: 700px) {
  .status-label { display: none; }
  .chat-mode-badge { display: none; }
  .msg { max-width: 94%; }
}

/* ============================================================
   深色模式（[data-theme="dark"] 变量覆盖）
   浅色纸面元素整体反转：纸张、卡片、气泡、代码块、文字
   ============================================================ */
[data-theme="dark"] {
  /* 背景绿调加深 */
  --green-800: #111c0d;
  --green-900: #0c1609;
  --green-950: #060c04;
  /* 面板棕调加深 */
  --dirt-300: #9c8558;
  --dirt-500: #4f3b22;
  --dirt-600: #43311c;
  --dirt-700: #372915;
  --dirt-800: #2b1f10;
  --panel-dark: rgba(8, 14, 6, 0.9);
  /* 浅色纸面元素 → 深色 */
  --paper: #20281d;
  --paper-deep: #1a2118;
  --text-dark: #e4e0d0;
  --card-bg: #2a3326;
  --card-desc: #b0b6a4;
  --card-meta: #a99f85;
  --ai-bubble-1: #2c352b;
  --ai-bubble-2: #252d24;
  --user-bubble-1: #28384a;
  --user-bubble-2: #22303f;
  --err-bubble-1: #4a3024;
  --err-bubble-2: #3d271d;
  --code-bg: #10170d;
  --code-text: #d8d4c4;
  --inline-bg: #333c2e;
  --inline-bd: #4a5240;
  --inline-fg: #8fd47e;
  --ph-color: #6f7768;
  --meta-fg: #7c8572;
  --fav-dim: #6f7768;
  --think-fg: #a09572;
  --body-ov-top: rgba(0, 0, 0, 0.55);
  --body-ov-bottom: rgba(0, 0, 0, 0.72);
}

/* 深色模式：聊天区网格线用亮色微纹 */
[data-theme="dark"] .chat-body {
  background:
    linear-gradient(rgba(255,255,255,.015), rgba(255,255,255,.015)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.02) 26px 27px);
}

/* 深色模式：工具提示与下拉阴影更重 */
[data-theme="dark"] .menu-panel,
[data-theme="dark"] .tooltip {
  box-shadow: 0 10px 0 rgba(0,0,0,.6), var(--bevel);
}