/* ===== 深色主题（默认 · 深空蓝黑 · 全息科技感） =====
   配色思路：贾维斯的冷科技骨架（深空蓝黑 + 青蓝全息） + 玛利亚的女性柔光（洋红玫瑰描边） */
:root {
  --bg: #04070d;
  --bg2: #070c16;
  --panel: rgba(11,20,34,.72);
  --panel2: #0b1422;
  --border: rgba(88,200,255,.18);
  --text: #e9f4ff;
  --muted: #7d97b5;
  --pink: #ff5fa2;          /* 洋红·玫瑰（女性主色） */
  --purple: #4dd8ff;        /* 青蓝·全息（科技主色） */
  --cyan: #5ef0e0;
  --blue: #6ab7ff;
  --user: rgba(18,38,64,.55);
  --danger: #ff5b7f;
  --ok: #3ff0b2;
  --glow1: #0d2136;         /* 左上：深蓝青光晕 */
  --glow2: #2a1030;         /* 右下：洋红光晕 */
  --chip-bg: rgba(77,216,255,.12);
  --chip-bd: rgba(77,216,255,.32);
  --code-bg: #060d18;
  --code-bd: #16324d;
  --code-fg: #7ff0e0;
  --accent: #4dd8ff;        /* 补定义：此前缺失导致若干规则失效 */
  --accent2: #ff5fa2;
}

/* ===== 浅色主题（全息白 · 科技线稿） ===== */
body.light {
  --bg: #f4f8fc;
  --bg2: #e9f2fa;
  --panel: rgba(255,255,255,.86);
  --panel2: #eef5fb;
  --border: rgba(28,120,190,.22);
  --text: #0a1b2a;
  --muted: #4a6a85;
  --pink: #e0408f;
  --purple: #0f8fd6;
  --cyan: #0e8f86;
  --blue: #0f8fd6;
  --user: #e3eef8;
  --danger: #e5484d;
  --ok: #12a37a;
  --glow1: #dcecf8;
  --glow2: #fbe6f1;
  --chip-bg: rgba(15,143,214,.10);
  --chip-bd: rgba(15,143,214,.32);
  --code-bg: #f2f7fb;
  --code-bd: #cfe2f0;
  --code-fg: #0d7a68;
  --accent: #0f8fd6;
  --accent2: #e0408f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, var(--glow1) 0%, transparent 60%),
              radial-gradient(1000px 700px at 110% 110%, var(--glow2) 0%, transparent 55%),
              var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background .3s ease, color .3s ease;
}

#app { display: flex; height: 100vh; height: 100dvh; }

/* ---------- 侧栏 ---------- */
#sidebar {
  width: 280px; min-width: 280px;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.side-scroll {
  /* flex:1 + min-height:0 —— 必须撑满 #sidebar，内部 #sessionSection 的 flex:1
     才能拿到剩余空间；min-height:0 保证子元素可正常收缩滚动 */
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 12px 10px 8px;
  gap: 6px;
}
/* 会话列表：高度随可用空间自由缩放，底部始终顶到监控模块顶部 */
#sessionSection {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 60px;
  background: linear-gradient(160deg, rgba(77,216,255,.06), rgba(255,95,162,.04) 60%, var(--panel));
  border-color: rgba(77,216,255,.14);
}
#sessionSection .side-head {
  padding: 2px 2px 8px;
  font-size: 12px; letter-spacing: .08em;
}
#sessionSection .side-head .sess-count {
  margin-left: auto; font-weight: 400; font-size: 11px;
  color: var(--muted); background: rgba(255,255,255,.06);
  padding: 1px 8px; border-radius: 20px; letter-spacing: 0;
}
#sessionList {
  flex: 1; min-height: 28px; max-height: none;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 2px;
  scrollbar-width: thin;
}
#sessionList::-webkit-scrollbar { width: 4px; }
#sessionList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
/* 历史会话条：柔和卡片 + 悬停微交互 + 当前高亮 */
#sessionList .sess-item2 {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: all .18s ease;
  overflow: hidden;
}
#sessionList .sess-item2::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--tech, #4dd8ff), var(--pink, #ff5fa2));
  border-radius: 0 3px 3px 0;
  opacity: 0; transition: opacity .18s ease;
}
#sessionList .sess-item2:hover {
  background: rgba(77,216,255,.09);
  border-color: rgba(77,216,255,.25);
  transform: translateX(2px);
}
#sessionList .sess-item2:hover::before { opacity: 1; }
#sessionList .sess-item2.cur {
  background: rgba(77,216,255,.12);
  border-color: rgba(77,216,255,.35);
  box-shadow: 0 0 14px rgba(77,216,255,.12);
}
#sessionList .sess-item2.cur::before { opacity: 1; }
#sessionList .sess-item2 .sess-ico {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(77,216,255,.18), rgba(255,95,162,.14));
  color: var(--tech, #4dd8ff);
  font-size: 14px;
  border: 1px solid rgba(77,216,255,.18);
}
#sessionList .sess-item2.cur .sess-ico {
  background: linear-gradient(135deg, rgba(77,216,255,.28), rgba(255,95,162,.2));
  box-shadow: 0 0 8px rgba(77,216,255,.2);
}
#sessionList .sess-item2 .fname {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
#sessionList .sess-item2 .fmeta {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap;
  padding: 1px 6px; border-radius: 20px;
  background: rgba(255,255,255,.05);
}
#sessionList .sess-item2 .sess-del-btn {
  flex: 0 0 auto;
  width: 18px; height: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted);
  background: transparent; border: none; border-radius: 50%;
  cursor: pointer;
  opacity: 0; transition: all .15s ease;
}
#sessionList .sess-item2:hover .sess-del-btn,
#sessionList .sess-item2.cur .sess-del-btn { opacity: .85; }
#sessionList .sess-item2 .sess-del-btn:hover {
  opacity: 1; color: #fff;
  background: rgba(255,95,130,.35);
}
/* 空状态 */
#sessionList .sess-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 10px;
  color: var(--muted);
}
#sessionList .sess-empty-ico {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  background: rgba(77,216,255,.08);
  border: 1px dashed rgba(77,216,255,.25);
  animation: sess-float 3s ease-in-out infinite;
}
#sessionList .sess-empty-txt {
  font-size: 12.5px; text-align: center; line-height: 1.6;
}
#sessionList .sess-empty-txt span { font-size: 11px; color: var(--muted); opacity: .75; }
@keyframes sess-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
/* 新对话按钮 */
#btnNew {
  margin-top: 8px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  font-size: 12.5px; font-weight: 500;
  color: var(--tech, #4dd8ff);
  background: rgba(77,216,255,.08);
  border: 1px dashed rgba(77,216,255,.3);
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s ease;
}
#btnNew:hover {
  background: rgba(77,216,255,.16);
  border-style: solid;
  border-color: rgba(77,216,255,.5);
  box-shadow: 0 2px 12px rgba(77,216,255,.15);
  transform: translateY(-1px);
}
#sidebar::-webkit-scrollbar, #messages::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb, #messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* 侧栏吸底工具条：始终贴在侧栏底部（监控区块 + 底部标语一体，不随内容滚动） */
.side-sticky {
  position: sticky; bottom: 0; z-index: 3;
  margin-top: auto; padding: 6px 0 2px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg);
}
.side-sticky .side-foot { margin-top: 1px; }
.side-monitor-btn { width: 100%; justify-content: center; }
body.light .side-sticky { background: var(--bg); }

.brand { display: flex; gap: 10px; align-items: center; padding: 2px 2px 6px; }
.brand-logo { font-size: 27px; filter: drop-shadow(0 0 8px rgba(124,92,255,.6)); }
.brand-title { font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.brand-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 侧栏粒子球核心区(放品牌下方,原搜索框位置) */
.side-core {
  position: relative;
  margin-bottom: 14px;
}
.side-core canvas { display: block; width: 210px; height: 210px; margin: 0 auto; cursor: pointer; }
/* 矮屏响应式：粒子球逐级缩小，给会话区/监控区让出空间，避免元素重叠 */
@media (max-height: 800px) {
  .side-core canvas { width: 168px; height: 168px; }
  .side-core { margin-bottom: 8px; }
}
@media (max-height: 700px) {
  .side-core canvas { width: 130px; height: 130px; }
  .side-core { margin-bottom: 6px; }
  .brand { padding: 0 2px 2px; }
}
@media (max-height: 620px) {
  .side-core canvas { width: 96px; height: 96px; }
}
.side-core-cap {
  text-align: center;
  font-size: 12px; color: var(--muted); letter-spacing: .5px;
  margin-top: 2px;
}
.side-core-cap b { color: var(--accent); font-weight: 600; }
.side-core-cap em { color: var(--accent2); font-style: normal; font-weight: 600; }

/* 运行模式（极简，位于核心形象下方）：只留 本地/在线 切换条 */
.mode-mini { display: flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 4px 4px 2px; margin-top: -4px; }
.mode-mini .mode-toggle { flex: 1; }
.mode-mini .mode-btn { padding: 7px 10px; font-size: 12.5px; border-radius: 7px; }
.mode-mini .mode-chip { margin: 0; font-size: 11px; white-space: nowrap; }

.side-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.side-head {
  font-size: 12px; font-weight: 600; color: var(--tech);
  margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.chip {
  font-size: 11px; background: rgba(255,255,255,.08);
  padding: 1px 7px; border-radius: 20px; color: var(--muted); font-weight: 400;
}
.lbl { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 3px; }
select, input, textarea {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; font-size: 13px; outline: none;
  font-family: inherit;
  color-scheme: dark;
}
select option { background: #1a1a2e !important; color: #f0f4fa !important; }
select option:checked, select option:hover { background: #2a2a44 !important; color: #ffffff !important; }
/* 模型下拉：强制深色色方案，确保打开时下拉面板用深色背景、选项清晰可读 */
#codexModelSel, #wmModelSel, #engModelSel { color-scheme: dark !important; }
select:focus, input:focus, textarea:focus { border-color: var(--purple); }
textarea { resize: vertical; }
.btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn {
  border: none; border-radius: 9px; padding: 8px 12px; font-size: 13px;
  cursor: pointer; font-family: inherit; transition: .15s;
}
.btn.primary { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: rgba(255,255,255,.07); color: var(--text); }
.btn.ghost:hover { background: rgba(255,255,255,.13); }
.btn.small { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.hint { font-size: 12px; margin-top: 8px; color: var(--muted); line-height: 1.5; }
.hint.ok { color: var(--ok); }
.hint.err { color: var(--danger); }

/* 模型区：带边框标签 */
#localModelSection { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
#localModelSection .hint { margin-top: 4px; font-size: 11.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#localModelSection .hint.ok { color: var(--tech); }

/* 双 AI 学习状态 */
.learn-records {
  margin-top: 6px; padding: 10px 11px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 11px;
}
.learn-track {
  font-size: 12.5px; color: var(--text); line-height: 1.6;
  background: rgba(255,255,255,.05); border-radius: 9px;
  padding: 7px 10px; margin-bottom: 6px;
}
.learn-track.prince { border-left: 3px solid var(--cyan); }
.learn-track.maria { border-left: 3px solid var(--pink); }
.learn-track .lt-cur { color: var(--cyan); font-size: 12px; }
.learn-track.maria .lt-cur { color: var(--pink); }
.learn-tip { font-size: 12px; color: var(--muted); margin-top: 2px; }

.kb-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.kb-item {
  font-size: 12px; background: rgba(255,255,255,.05);
  border-radius: 7px; padding: 6px 8px; color: var(--text);
  display: flex; justify-content: space-between; gap: 6px;
}
.kb-item .fname { word-break: break-all; }
.kb-item .fmeta { color: var(--muted); white-space: nowrap; font-size: 11px; }
.kb-item.sess-item2:hover { background: rgba(255,255,255,.09); }
/* 会话删除按钮：加大点击区域 + 明显的悬停反馈 */
.sess-del-btn {
  cursor: pointer; border: none; background: transparent;
  color: var(--muted); font-size: 14px;
  padding: 2px 6px; margin-left: 4px; border-radius: 4px;
  line-height: 1; transition: color .15s, background .15s;
}
.sess-del-btn:hover { color: var(--danger); background: rgba(255,107,107,.12); }
.muted { color: var(--muted); font-size: 12px; }
.upload-row { display: flex; flex-direction: column; gap: 6px; }
.upload-row textarea { font-size: 12px; }

/* 玛利亚技能模块 */
.skill-list { display: flex; flex-direction: column; gap: 8px; }
.skill-item {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(77,127,255,.12));
  border: 1px solid rgba(124,92,255,.28);
  border-radius: 12px; padding: 10px 12px;
}
.s-ico { font-size: 22px; flex-shrink: 0; }
.s-t { display: flex; flex-direction: column; line-height: 1.4; }
.s-t b { font-size: 14px; color: var(--text); }
.s-t i { font-size: 12px; color: var(--muted); font-style: normal; margin-top: 2px; }
.skill-tip { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 6px; }

.jar-item {
  font-size: 12px; background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(77,127,255,.10));
  border: 1px solid rgba(124,92,255,.25); border-radius: 8px;
  padding: 7px 9px; display: flex; gap: 6px; align-items: flex-start;
}
.jar-item .jtxt { flex: 1; line-height: 1.5; }
.jar-item .jdel { cursor: pointer; color: var(--muted); font-size: 13px; }
.jar-item .jdel:hover { color: var(--danger); }
/* 玛利亚的成长弹窗（居中卡片，复用左下角 monitor-overlay 容器，但改为居中） */
#growthOverlay.monitor-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,20,.55); backdrop-filter: blur(3px); pointer-events: auto;
}
.growth-panel {
  width: min(480px, calc(100vw - 32px)); height: min(76vh, 620px);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
#growthOverlay.monitor-overlay .monitor-head { padding: 12px 16px; }
/* 顶部快捷封面按钮 */
.top-shortcuts { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 6px; }
.top-shortcuts .sc {
  font-size: 11.5px; padding: 2px 7px; border-radius: 20px;
  background: rgba(124,92,255,.12); color: var(--text);
  border: 1px solid rgba(124,92,255,.25); cursor: pointer; line-height: 1.4;
  transition: all .15s;
}
.top-shortcuts .sc:hover { background: rgba(124,92,255,.28); border-color: var(--pink); }
/* 通用小弹窗（技能 / 学习 共用居中卡片） */
.pop-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,20,.55); backdrop-filter: blur(3px);
}
.pop-card {
  width: min(430px, calc(100vw - 32px)); height: min(62vh, 500px);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
/* 通用确认弹窗（删除会话等） */
.confirm-card { width: min(380px, calc(100vw - 32px)); height: auto; min-height: 0; padding: 20px; gap: 18px; }
.confirm-body { white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: var(--text); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn.danger { background: linear-gradient(135deg, #ff5b7f, #ff3b5c); color: #fff; font-weight: 600; }
.btn.danger:hover { filter: brightness(1.1); }
/* 权限确认弹窗 */
.perm-card { width: min(420px, calc(100vw - 32px)); gap: 16px; }
.perm-title { font-size: 17px; font-weight: 700; color: var(--text); padding: 2px 0; }
.perm-desc { font-size: 13.5px; line-height: 1.75; color: var(--muted); white-space: pre-wrap; }
.perm-ack {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.perm-ack input { width: 15px; height: 15px; accent-color: var(--pink); cursor: pointer; }
/* 实时对讲（语音面板内） */
.tts-talk { margin-top: 12px; padding: 11px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 11px; }
.tts-talk-title { font-size: 13.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: .3px; }
.tts-talk .tts-switch { margin-bottom: 6px; }
.tts-talk .tts-tip { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 8px; }
#talkState.hint { font-size: 12.5px; }
#talkState.hint:not(:empty) { color: var(--ok); }
.growth-body { padding: 14px 16px; }
.growth-diary { white-space: pre-wrap; font-size: 13.5px; line-height: 1.85; color: var(--text); margin-bottom: 12px; }
.growth-day-head {
  font-size: 13px; font-weight: 700; color: var(--pink); margin: 8px 0 4px;
  display: flex; align-items: center; gap: 6px;
}
.growth-cur { font-size: 12px; font-weight: 600; color: var(--accent2); }
.growth-empty { color: var(--muted); text-align: center; margin-top: 30px; }
/* 成长日记·日历 */
.growth-cal { padding: 10px 14px 8px; border-bottom: 1px solid var(--border); }
.growth-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.growth-cal-title { font-size: 14px; font-weight: 700; color: var(--text); }
.growth-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.growth-cal-dow { font-size: 11px; color: var(--muted); text-align: center; padding: 2px 0; }
.growth-cal-cell {
  font-size: 12px; text-align: center; padding: 5px 0; border-radius: 7px;
  color: var(--muted); cursor: default;
}
.growth-cal-cell.has { color: var(--text); cursor: pointer; background: rgba(124,92,255,.10); }
.growth-cal-cell.has:hover { background: rgba(124,92,255,.28); }
.growth-cal-cell.sel { background: linear-gradient(135deg, var(--pink), var(--accent)); color: #fff; font-weight: 700; }
.growth-cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent2); }
.growth-cal-cell.empty { cursor: default; }
/* 成长弹窗里的近期日记小条目 */
.growth-extra { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.7; background: rgba(124,92,255,.07); border-radius: 8px; padding: 7px 10px; }
.growth-diary-sm {
  font-size: 13px; color: var(--muted); line-height: 1.6; padding: 4px 2px;
  border-bottom: 1px dashed var(--border);
}
.growth-diary-sm .gdate { color: var(--accent2); font-weight: 600; margin-right: 6px; }
/* 收藏的回忆句 */
.jar-item {
  font-size: 12px; background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(77,127,255,.10));
  border: 1px solid rgba(124,92,255,.25); border-radius: 8px;
  padding: 7px 9px; display: flex; gap: 6px; align-items: flex-start; margin-bottom: 4px;
}
.jar-item .jtxt { flex: 1; line-height: 1.5; }
.jar-item .jdel { cursor: pointer; color: var(--muted); font-size: 13px; }
.jar-item .jdel:hover { color: var(--danger); }
/* 兼容旧的 jar 样式（若仍被引用） */
.jar-head, .jar-diary, .jar-extra, .jar-diary-sm, .jar-diary-sm .jdate { display: none; }

.side-foot { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0 2px; line-height: 1.6; white-space: nowrap; }

/* ---------- 主区 ---------- */
#main { flex: 1; display: flex; flex-direction: row; min-width: 0; }
#chatCol { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------- 右侧沙箱（WorkBuddy 风格） ---------- */
.sandbox {
  width: 46%; min-width: 320px; max-width: 560px;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg2);
}
.sandbox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.sb-head-left { display: flex; align-items: center; gap: 8px; position: relative; min-width: 0; }
.sb-head-right { display: flex; align-items: center; gap: 4px; }
.sb-menu-btn {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 6px 11px; cursor: pointer; transition: .15s;
}
.sb-menu-btn:hover { border-color: var(--tech); color: var(--tech); box-shadow: 0 0 12px rgba(77,216,255,.25); }
.sb-icon-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; border-radius: 8px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted); transition: .15s;
}
.sb-icon-btn:hover { border-color: var(--tech); color: var(--tech); }
.sb-menu {
  position: absolute; top: 40px; left: 0; z-index: 30;
  min-width: 188px; padding: 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); backdrop-filter: blur(10px);
}
.sb-menu-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 4px 8px 6px; }
.sb-menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; color: var(--text);
  font-size: 13.5px; padding: 9px 10px; border-radius: 9px; transition: .12s;
}
.sb-menu-item:hover { background: rgba(77,216,255,.12); color: var(--tech); }
.sandbox-title { font-size: 14px; font-weight: 700; color: var(--pink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-body { flex: 1; overflow: auto; padding: 14px; }
.sandbox-body::-webkit-scrollbar { width: 6px; }
.sandbox-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sandbox-foot {
  padding: 9px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); text-align: center;
}
/* 沙箱内长文本 */
.sandbox-text {
  font-size: 14.5px; line-height: 1.85; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
/* 沙箱内 iframe 预览（网页成品） */
.sandbox-frame {
  width: 100%; height: 100%; min-height: 420px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff;
}
/* 长回答气泡提示（内容在右侧沙箱） */
.sandbox-note {
  font-size: 13.5px; color: var(--cyan);
  background: rgba(94,234,213,.08); border: 1px dashed rgba(94,234,212,.35);
  border-radius: 10px; padding: 10px 13px; line-height: 1.6;
}

/* —— 沙箱窗口状态：收起右栏 / 最大化 —— */
#main.collapsed #sandbox { display: none !important; }
#main.maximized #chatCol { display: none; }
#main.maximized #sandbox { width: 100%; max-width: none; min-width: 0; }

/* —— 沙箱：工作空间文件浏览 —— */
.sb-crumb { font-size: 12px; color: var(--muted); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sb-crumb b { color: var(--tech); font-weight: 600; }
.sb-files { display: flex; flex-direction: column; gap: 2px; }
.sb-file {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; transition: .12s;
}
.sb-file:hover { background: rgba(77,216,255,.1); border-color: rgba(77,216,255,.25); }
.sb-file .f-ico { width: 20px; text-align: center; }
.sb-file .f-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.sb-file .f-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sb-file.dir .f-name { color: var(--tech); font-weight: 600; }

/* —— 沙箱：浏览器 —— */
.sb-browser-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.sb-browser-bar input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px; font-size: 13.5px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
}
.sb-browser-bar input:focus { outline: none; border-color: var(--tech); box-shadow: 0 0 12px rgba(77,216,255,.25); }
.sb-browser-frame { width: 100%; height: calc(100vh - 150px); min-height: 320px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }

/* —— 沙箱：概览 / 变更 —— */
.sb-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 10px; margin-bottom: 14px; }
.sb-ov-card { background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.sb-ov-card .v { font-size: 22px; font-weight: 700; color: var(--tech); }
.sb-ov-card .k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sb-ov-sec { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px; }
.sb-ov-act { font-size: 13px; color: var(--text); line-height: 1.7; padding-left: 14px; position: relative; }
.sb-ov-act::before { content: '·'; position: absolute; left: 2px; color: var(--pink); }
.sb-change { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; transition: .12s; }
.sb-change:hover { background: rgba(77,216,255,.1); border-color: rgba(77,216,255,.25); }
.sb-change .c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.sb-change .c-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sb-file-view { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.7; font-family: var(--mono); max-height: calc(100vh - 160px); overflow: auto; }
.sb-empty { color: var(--muted); text-align: center; padding: 30px 10px; font-size: 13px; }

@media (max-width: 900px) {
  /* 移动端沙箱改为覆盖在聊天上方 */
  #sandbox { position: fixed; inset: 0 0 0 0; z-index: 90; width: 100%; min-width: 0; max-width: none; border-left: none; }
}

#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  backdrop-filter: blur(8px);
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; flex-shrink: 0;
  box-shadow: 0 0 18px rgba(124,92,255,.35);
}
.avatar.maria { background: linear-gradient(135deg, #8b6cff, #b388ff); }
.avatar.prince { background: linear-gradient(135deg, #4dd8ff, #7a7aff); }
.top-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #888; display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.8s infinite; }
.dot.off { background: var(--danger); }
@keyframes pulse { 50% { opacity: .45; } }
.top-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 顶栏右侧工具按钮（搜索 / 历史 / 展开右栏） */
.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.top-action-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.top-action-btn:hover {
  background: rgba(124,92,255,.12);
  color: var(--tech);
}

/* ============ 玛利亚核心 · 粒子球 Canvas（仅侧栏 #sideCoreCanvas，顶栏圆形图标已移除，布局整体前移） ============ */

#messages { flex: 1; overflow-y: auto; padding: 20px 24px 8px; }
.msg { display: flex; margin-bottom: 16px; animation: rise .25s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: min(580px, 75%);
  padding: 10px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}
.msg.user .bubble { background: var(--user); border-top-right-radius: 4px; }
.msg.maria .bubble { background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(77,127,255,.14)); border: none; border-top-left-radius: 4px; box-shadow: none; }
.msg.prince .bubble { background: linear-gradient(135deg, rgba(94,234,212,.13), rgba(122,130,255,.13)); border: none; border-top-left-radius: 4px; box-shadow: none; }

/* 气泡内 Markdown 渲染 */
.md-body { display: block; white-space: normal; }
.md-p { margin: 4px 0; white-space: pre-wrap; }
.md-h { margin: 8px 0 4px; color: var(--pink); }
.md-ul { margin: 4px 0; padding-left: 18px; }
.md-li { margin: 2px 0; white-space: pre-wrap; }
.md-q { border-left: 3px solid var(--purple); padding: 4px 10px; margin: 6px 0; color: var(--muted); font-style: italic; }
.md-code {
  display: block; background: var(--code-bg); border: 1px solid var(--code-bd); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; font-size: 13.5px; line-height: 1.6;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  white-space: pre; overflow-x: auto; color: var(--code-fg);
}
.md-inline {
  background: rgba(77,127,255,.16); color: var(--purple); border-radius: 4px;
  padding: 1px 6px; font-size: 13.5px; font-family: Consolas, monospace;
}

.delegate-banner {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--cyan);
  background: rgba(94,234,212,.08); border: 1px dashed rgba(94,234,212,.35);
  border-radius: 20px; padding: 5px 14px; margin: 2px 0 14px;
  width: fit-content; max-width: 90%;
}
.tool-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--cyan);
  background: rgba(94,234,212,.08); border-radius: 14px;
  padding: 3px 10px; margin: 2px 2px 6px;
}
.tool-chip .tname { font-weight: 600; }
.tool-chip.ok { color: var(--ok); }
.tool-chip.err { color: var(--danger); }

#inputbar {
  display: flex; justify-content: center;
  padding: 6px 22px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(124,92,255,.04) 40%, rgba(77,127,255,.06) 100%);
}
#composer {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(124,92,255,.07), rgba(77,127,255,.06), rgba(94,234,212,.04));
  border: none;
  border-radius: 18px;
  padding: 8px;
  box-shadow: none;
}
.cp-head {
  display: none; /* 已移至工具栏内联 */
}
/* 模型选择：纯文字按钮（无图标、无气泡浮窗，点击后从底部上拉列表） */
.cp-btn.cp-model-text {
  width: auto; height: 27px; padding: 0 8px;
  background: transparent; border: none; color: var(--muted);
  border-radius: 9px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 200px; transition: .16s;
}
.cp-btn.cp-model-text:hover {
  background: rgba(124,92,255,.10); color: var(--text);
}
.cp-btn.cp-model-text.on {
  background: rgba(124,92,255,.14); color: var(--text);
}
.cp-name-text { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cp-caret { flex-shrink: 0; font-size: 11px; color: var(--muted); transition: transform .2s; }
.cp-btn.cp-model-text.on .cp-caret { transform: rotate(180deg); }
.cp-model {
  flex: 1; display: flex; align-items: center; gap: 7px;
  min-width: 0; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 14px;
  padding: 6px 10px; border-radius: 10px; transition: .15s;
  text-align: left;
}
.cp-model:hover { border-color: var(--pink); background: rgba(124,92,255,.10); }
.cp-dot { font-size: 15px; flex-shrink: 0; }
.cp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cp-ctx {
  flex-shrink: 0; font-size: 12.5px; padding: 2px 8px; border-radius: 20px;
  background: rgba(77,127,255,.16); color: var(--purple);
}
.cp-ctx.warn { background: rgba(239,159,39,.18); color: #ef9f27; }
.cp-ctx.hot { background: rgba(226,75,74,.18); color: #e24b4a; }
.cp-arrow { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.cp-body { position: relative; }
/* 底部工具行：添加按钮在最左，其余工具靠右 */
.cp-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 2px 6px 6px;
}
.cp-tools {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
/* 权限开关（替换原 🔒 按钮，作为默认权限 ⇄ 完全访问 的切换开关） */
.perm-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); border: none;
  border-radius: 999px; padding: 4px 12px 4px 12px; cursor: pointer;
  flex-shrink: 0; transition: .18s; color: var(--muted); font-size: 12px;
  user-select: none; line-height: 1;
}
.perm-toggle:hover { background: rgba(77,216,255,.08); }
.perm-toggle .pt-label { white-space: nowrap; transition: color .18s; }
.perm-toggle.on { color: var(--ok); background: rgba(74,222,128,.10); }
.perm-toggle.on .pt-label { color: var(--ok); }
.perm-toggle .pt-track {
  position: relative; width: 34px; height: 18px; border-radius: 999px;
  background: var(--border); transition: background .25s; flex-shrink: 0;
}
.perm-toggle.on .pt-track { background: var(--ok); }
.perm-toggle .pt-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.perm-toggle.on .pt-knob { transform: translateX(16px); }
.cp-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; cursor: pointer; flex-shrink: 0;
  font-size: 16px; line-height: 1; transition: .18s;
}
/* 上下文用量圆环（模型按钮左侧） */
.ctx-ring {
  width: 17px; height: 17px; flex-shrink: 0; display: block;
  cursor: default;
}
.ctx-ring .cr-bg { fill: none; stroke: var(--border); stroke-width: 2.2; }
.ctx-ring .cr-fg {
  fill: none; stroke: var(--tech); stroke-width: 2.2;
  stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .35s ease, stroke .35s ease;
}
/* ===== Token 用量状态栏（输入框下方常驻，真实 usage 优先） ===== */
.tok-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 14px;
  padding: 5px 22px 12px;
  font-size: 11.5px; color: var(--muted);
  user-select: none;
}
.tok-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tok-item b { color: var(--text); font-weight: 500; font-family: var(--font-mono, Consolas, monospace); }
.tok-total b { color: var(--purple); }
.tok-ctx { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; }
.tok-ctx-track {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--border); overflow: hidden; min-width: 60px;
}
.tok-ctx-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 99px; background: var(--tech);
  transition: width .4s ease, background .4s ease;
}
.tok-ctx-pct { font-size: 11px; color: var(--text); font-family: var(--font-mono, Consolas, monospace); white-space: nowrap; }
.tok-src {
  font-size: 10.5px; padding: 1px 7px; border-radius: 99px;
  background: rgba(77,216,255,.10); color: var(--muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.tok-src.real {
  background: rgba(63,240,178,.12); color: var(--ok);
  border-color: rgba(63,240,178,.35);
}
body.light .tok-src.real { color: #0e8f86; border-color: rgba(14,143,134,.4); background: rgba(14,143,134,.08); }
@media (max-width: 560px) {
  .tok-bar { justify-content: flex-start; padding-left: 26px; }
}
.cp-btn.send {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #07120f; font-weight: 700; border: none;
}
.cp-btn.send.busy { background: linear-gradient(135deg, var(--danger), #ff5a5a); color: #fff; }
.cp-btn.mic {
  background: transparent; border: none; color: var(--muted);
}
.cp-btn.mic:hover { color: var(--pink); }
.cp-btn.mic.mic-on {
  color: var(--text);
  background: linear-gradient(135deg, rgba(255,107,107,.2), rgba(77,216,255,.08));
  animation: micPulse 1.2s ease-in-out infinite;
}
.cp-btn.boost {
  background: transparent; border: none; color: var(--muted);
}
.cp-btn.boost:hover { color: #ffc46b; }
.cp-btn.boost.busy {
  color: #ffc46b;
  background: linear-gradient(135deg, rgba(255,176,59,.22), rgba(255,107,107,.18));
  animation: stopPulse 1.4s ease-in-out infinite;
}
.cp-btn.attach {
  background: var(--panel2); border: none; color: var(--muted);
}
.cp-btn.attach:hover { color: var(--tech); }
.cp-btn.attach .plus-ico { transition: transform .25s ease; transform-origin: 50% 50%; }

/* ===== 附件：输入框上方预览区 ===== */
.attach-zone {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px 0; max-height: 172px; overflow-y: auto;
}
/* 文件卡片（统一风格：图标 + 文件名，圆角卡片） */
.att-item {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 28px 5px 10px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--border);
  cursor: default; max-width: 220px; transition: border-color .18s, box-shadow .18s;
}
.att-item:hover { border-color: var(--tech); box-shadow: 0 0 10px rgba(77,216,255,.15); }
.att-ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
.att-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.att-rm {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.att-rm:hover { color: var(--danger); border-color: var(--danger); }

/* 悬停缩略图预览浮层 */
.att-preview {
  position: fixed; z-index: 9999; pointer-events: auto;
  padding: 8px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(77,216,255,.15);
}

/* ===== 自主引擎：玛利亚主动说的话 ===== */
.msg.autonomy .bubble { border: 1px solid rgba(77,216,255,.35); }
.auto-tag {
  font-size: 11.5px; color: var(--tech); margin-bottom: 6px;
  letter-spacing: .3px; opacity: .9;
}
.auto-text { font-size: 14.5px; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
/* 流式长文：正在写时末尾跟一个闪烁光标（写完由 JS 移除 .streaming） */
.msg.autonomy.streaming .auto-text::after {
  content: '▌'; margin-left: 1px; color: var(--tech);
  animation: autoCaret .9s steps(2, start) infinite;
}
@keyframes autoCaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* ===== 消息中的附件（用户气泡内） ===== */
.att-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.att-inline-img {
  max-width: 220px; max-height: 220px; border-radius: 10px; display: block;
  border: 1px solid var(--border); cursor: pointer;
}
.att-file {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px; text-decoration: none;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  font-size: 12px;
}
.att-file:hover { border-color: var(--tech); }
.af-size { color: var(--muted); font-size: 10px; }

/* 玛利亚闲时一句话悬浮条 */
.musing-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 22px 4px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px; color: var(--muted);
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(77,127,255,.10));
  border: 1px solid rgba(124,92,255,.22);
  opacity: 0; transform: translateY(4px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  min-height: 22px;
}
.musing-bar.on { opacity: 1; transform: translateY(0); }
.musing-ico { flex-shrink: 0; }
.musing-text { line-height: 1.5; word-break: break-word; }

/* 本地/在线 切换 */
.mode-toggle { display: flex; gap: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.mode-btn {
  flex: 1; border: none; background: transparent; color: var(--muted);
  border-radius: 7px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: .15s;
}
.mode-btn.active {
  background: linear-gradient(135deg, rgba(77,127,255,.28), rgba(124,92,255,.22));
  color: var(--text); box-shadow: 0 2px 8px rgba(77,127,255,.15);
}

/* 文件交付卡 */
.deliver-card {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(94,234,213,.12), rgba(122,130,255,.12));
  border: 1px solid rgba(94,234,212,.35);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 8px;
}
.dl-ico { font-size: 23px; flex-shrink: 0; }
.dl-info { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dl-info b { font-size: 14px; color: var(--text); word-break: break-all; }
.dl-info i { font-size: 12px; color: var(--muted); font-style: normal; }
.dl-btn {
  flex-shrink: 0; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #07120f; font-weight: 700; font-size: 13px; padding: 7px 14px;
  border-radius: 9px; text-align: center;
}
.dl-btn.ghost {
  background: transparent; border: 1px solid rgba(94,234,212,.4); color: var(--cyan);
}
.deliver-tip { font-size: 13px; color: var(--cyan); opacity: .9; }

/* 动手能力审批卡 */
.ac-tip { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.action-card {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(201,167,255,.10), rgba(255,143,152,.10));
  border: 1px solid rgba(201,167,255,.4);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.action-card .ac-ico { font-size: 19px; }
.action-card .ac-info { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
.action-card .ac-info b { font-size: 14px; color: var(--text); }
.action-card .ac-info i { font-size: 13px; color: var(--muted); font-style: normal; word-break: break-all; }
.action-card .ac-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.action-card .ac-status { font-size: 13px; color: var(--muted); margin-left: 4px; }
.action-card.ac-auto { border-color: var(--tech); box-shadow: 0 0 12px rgba(77,216,255,.18); }
.action-card.ac-auto .ac-status { color: var(--tech); font-weight: 600; }
.ac-btn {
  border: none; cursor: pointer; font-size: 14px; font-weight: 600;
  padding: 7px 16px; border-radius: 10px; color: #fff;
}
.ac-btn.allow { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.ac-btn.deny { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.ac-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 审批确认后询问卡自动淡出消失 */
.ac-fadeout {
  opacity: 0 !important;
  transform: translateY(-6px) scale(.98);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.ac-fadeout * { opacity: 0 !important; transition: opacity .3s ease; }

/* 定时提醒 */
.sd-row {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 5px 4px; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.sd-row .sd-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sd-row .sd-main b { color: var(--text); }
.sd-row .sd-main i { color: var(--muted); font-style: normal; }
.sd-row .sd-del {
  cursor: pointer; border: none; background: transparent; color: var(--muted);
  font-size: 14px; flex-shrink: 0;
}
.sd-row .sd-del:hover { color: var(--danger); }

#input {
  display: block; width: 100%; box-sizing: border-box;
  height: 130px; max-height: 130px; resize: none;   /* 固定最大化，不可调节 */
  font-size: 15px;
  background: transparent; border-radius: 14px;     /* 透明填充：与 composer 融为一体，避免"框中有框"的双层观感 */
  border: none;
  padding: 12px 16px;
}
#input::placeholder { color: var(--muted); }
/* 打字区聚焦：不显示聚焦环（避免像边框），仅由光标指示输入位置 */
#input:focus { outline: none; box-shadow: none; border-color: transparent; }
.btn.send {
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; flex-shrink: 0;
}
.send-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.send-ico.play svg { display: block; }   /* 纸飞机图标（发送语义） */
.btn.send .send-ico.stop {
  width: 16px; height: 16px; font-size: 0; position: relative;
}
.btn.send .send-ico.stop::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; transform: translate(-50%,-50%);
  background: #fff; border-radius: 3px;
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.btn.send.busy {
  background: linear-gradient(135deg, var(--danger), #ff5a5a);
  box-shadow: 0 0 16px rgba(255,107,107,.45);
  animation: stopPulse 1.4s ease-in-out infinite;
}
@keyframes stopPulse { 50% { opacity: .8; } }

/* 语音输入麦克风按钮 */
#btnMic.btn {
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; flex-shrink: 0; font-size: 19px;
  color: var(--muted); background: var(--panel2); border: none;
  transition: .18s; cursor: pointer;
}
#btnMic.btn:hover { color: var(--pink); background: rgba(255,95,162,.10); }
#btnMic.btn.mic-on {
  color: var(--text); background: rgba(226,75,74,.12);
  background: linear-gradient(135deg, rgba(255,107,107,.2), var(--panel2));
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse { 50% { box-shadow: 0 0 14px rgba(255,107,107,.5); } }

/* 模型选择：底部上拉面板（点击输入法左侧的纯文字模型名打开） */
.model-mask {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.45);
  animation: maskIn .18s ease;
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.model-sheet {
  position: fixed;
  z-index: 401;
  width: auto;                       /* 宽度/位置由 JS 对齐模型按钮（正上方、同宽） */
  max-height: 64vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid rgba(124,92,255,.30);
  border-radius: 14px;
  padding: 6px 10px 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 20px rgba(77,216,255,.12);
  animation: sheetPop .18s ease;
  transform-origin: bottom center;
}
@keyframes sheetPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ms-grabber { width: 38px; height: 4px; border-radius: 3px; background: var(--border); margin: 2px auto 10px; flex-shrink: 0; }
.mm-title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; flex-shrink: 0; }
.mm-foot { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; flex-shrink: 0; }
.ms-hint { float: right; font-size: 12px; color: var(--muted); font-weight: 400; }
.ms-list { flex: 1; min-height: 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
/* 列表滚动条：更细、无边框、半透明 */
.ms-list::-webkit-scrollbar { width: 4px; }
.ms-list::-webkit-scrollbar-track { background: transparent; border: none; }
.ms-list::-webkit-scrollbar-thumb { background: rgba(77,216,255,.35); border: none; border-radius: 2px; }
.ms-list::-webkit-scrollbar-thumb:hover { background: rgba(77,216,255,.55); }
.ms-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent; transition: .15s;
}
.ms-item:hover { background: rgba(124,92,255,.10); }
.ms-item.cur { background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.38); }
.ms-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ms-info b { font-size: 13.5px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.ms-info i { font-size: 12px; color: var(--muted); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ms-check { color: var(--pink); font-size: 14px; flex-shrink: 0; width: 14px; text-align: center; }
/* 受限模型（Uncensored 无审查版等）：未成年禁用红标 */
.ms-item.r18 { border-color: rgba(226,75,74,.45); }
.ms-badge18 {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 11px; line-height: 1.5; border-radius: 6px;
  color: #ffd9d9; background: rgba(226,75,74,.22);
  border: 1px solid rgba(226,75,74,.55); white-space: nowrap;
  vertical-align: 1px; font-weight: 400;
}

.typing { display: inline-block; }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin: 0 2px; animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,100% { transform: translateY(0); opacity:.5 } 50% { transform: translateY(-5px); opacity:1 } }

/* 玛利亚等待动画气泡 */
.msg.waiting .bubble.waiting-bubble {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(77,127,255,.10));
  border: 1px solid rgba(124,92,255,.25);
}
.waiting-bubble .typing { display: inline-flex; align-items: center; }
.waiting-hint {
  font-size: 13px; color: var(--muted);
  animation: hintBlink 1.6s ease-in-out infinite;
}
@keyframes hintBlink { 50% { opacity: .55; } }

/* 思考过程面板 */
.waiting-line { display: flex; align-items: center; gap: 10px; }
.think-wrap { margin-top: 8px; border-top: 1px dashed rgba(124,92,255,.25); padding-top: 6px; }
.think-toggle {
  font-size: 12px; color: var(--pink); user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.think-steps {
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.think-wrap.open .think-steps { max-height: 260px; overflow-y: auto; scrollbar-width: none; }
.think-wrap.open .think-steps::-webkit-scrollbar { display: none; }
.think-step {
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
  padding: 1px 0 1px 4px;
}
/* 模型推理正文：与"工具步骤"行区分 —— 左侧竖线 + 淡紫底，像引述块 */
.think-step.think-reason {
  font-size: 12px; color: var(--muted); opacity: .95; line-height: 1.75;
  padding: 3px 8px; margin: 2px 0;
  border-left: 2px solid rgba(124,92,255,.35);
  background: rgba(124,92,255,.07);
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap; word-break: break-word;
}
/* 答毕收起态：标题弱化，不抢答案的视觉重心 */
.think-wrap.think-done > .think-toggle { color: var(--muted); }
/* 自主引擎长文的思考区（思考中展开，正文一出来自动收起） */
.auto-think-head {
  font-size: 12px; color: var(--pink); cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px;
}
.auto-think {
  max-height: 200px; overflow-y: auto; scrollbar-width: none;
  margin: 2px 0 6px; padding: 6px 8px;
  font-size: 12px; color: var(--muted); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  border-left: 2px solid rgba(124,92,255,.35);
  background: rgba(124,92,255,.07);
  border-radius: 0 4px 4px 0;
  transition: max-height .25s ease;
}
.auto-think::-webkit-scrollbar { display: none; }
.auto-think.collapsed {
  max-height: 0; overflow: hidden; margin: 0; padding-top: 0; padding-bottom: 0;
  border-left: none;
}
/* 答案消息里内嵌的思考面板（迁移后）：贴在气泡下方 */
.think-inline { margin: 4px 0 0; padding: 6px 10px; border-top: 1px dashed rgba(124,92,255,.2); }
.think-inline .think-toggle { cursor: pointer; }

@media (max-width: 900px) {
  #sidebar { display: none; }
  #sidebar.open { display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; }
  #inputbar { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ---------- 监控记录浮层 ---------- */
.monitor-overlay {
  position: fixed; left: 16px; bottom: 26px; z-index: 300;
  /* 贴近底部，但留出 .side-foot（"由太子驱动·数据仅存本机"）的高度 */
  pointer-events: none;
}
.monitor-panel {
  width: min(360px, calc(100vw - 24px)); height: min(440px, 70vh);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  pointer-events: auto;
}
.monitor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.monitor-head-actions { display: flex; gap: 6px; align-items: center; }
.monitor-title { font-size: 14px; font-weight: 700; color: var(--pink); }
.monitor-title .chip { white-space: nowrap; }
/* 太子学习进度（监控顶部） */
.monitor-learn {
  display: none !important;
}
.monitor-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.monitor-body::-webkit-scrollbar { width: 6px; }
.monitor-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.monitor-foot {
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); text-align: center;
}
/* 监控条目 */
.monst {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 8px; border-radius: 9px; font-size: 13px; line-height: 1.5;
  margin-bottom: 3px;
}
.monst:hover { background: rgba(255,255,255,.04); }
.monst .mlabel {
  flex-shrink: 0; min-width: 46px; text-align: center;
  border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700;
}
.monst.boss .mlabel { background: rgba(122,162,255,.18); color: #8fb1ff; }
.monst.maria .mlabel { background: rgba(124,92,255,.18); color: #8b6cff; }
.monst.prince .mlabel { background: rgba(94,234,213,.16); color: #5eead4; }
.monst.tool .mlabel { background: rgba(255,215,106,.16); color: #ffd76a; }
.monst.status .mlabel { background: rgba(255,255,255,.1); color: var(--muted); }
.monst.note .mlabel { background: rgba(255,255,255,.1); color: var(--muted); }
.monst .mbadge { flex-shrink: 0; font-size: 11px; color: var(--muted); padding-top: 2px; }
.monst .mtext { flex: 1; word-break: break-word; color: var(--text); }
.monst .mtext b { color: var(--accent2); font-weight: 600; }

/* ===== 玛利亚语音（IndexTTS-2） ===== */
/* 让朗读按钮能换到气泡的下一行；.msg 原本是单行 flex，这里只补 wrap 能力 */
.msg { flex-wrap: wrap; }
.tts-row { flex: 0 0 100%; margin-top: 6px; display: flex; }
.msg.user .tts-row { justify-content: flex-end; }

.tts-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; line-height: 1.6; font-family: inherit;
  cursor: pointer; transition: all .18s ease;
  background: var(--chip-bg); color: var(--text);
  border: 1px solid var(--chip-bd);
}
.tts-btn:hover { background: rgba(124,92,255,.24); border-color: var(--pink); }
.tts-btn.tts-loading { color: var(--muted); cursor: progress; animation: ttsPulse 1.1s ease-in-out infinite; }
.tts-btn.tts-playing { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.45); color: var(--ok); }
.tts-btn:disabled { opacity: .6; cursor: default; }
@keyframes ttsPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ===== WorkBuddy 风格回复底部栏 ===== */
/* 顶部耗时提示（气泡上方） */
.reply-meta {
  font-size: 11.5px; color: var(--muted); margin-bottom: 3px;
  cursor: default; user-select: none; transition: color .2s;
}
.reply-meta.done { color: var(--ok); }
.reply-meta:hover { color: var(--text); }

/* 底部操作整行 */
.reply-footer {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 100%; margin-top: 7px;
  padding: 5px 2px 2px; border-top: 1px solid rgba(128,128,128,.10);
}
.msg.user .reply-footer { justify-content: flex-end; }

/* 操作按钮 */
.rf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  border: none; border-radius: 7px; background: transparent;
  font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--muted); transition: all .16s ease; flex-shrink: 0;
}
.rf-btn:hover { background: var(--chip-bg); color: var(--text); }
.rf-btn:active { transform: scale(.9); }

/* 点赞/点踩激活态 */
.rf-btn.rf-like.active { color: #4ade80; }
.rf-btn.rf-dislike.active { color: #f87171; }

/* TTS 按钮在底部栏内的样式复用 */
.reply-footer .tts-btn { width: auto; padding: 0 7px; border-radius: 999px; font-size: 12px; gap: 4px; background: var(--chip-bg); border: 1px solid var(--chip-bd); }
.reply-footer .tts-btn:hover { background: rgba(124,92,255,.24); border-color: var(--pink); }
.reply-footer .tts-btn.tts-loading { color: var(--muted); cursor: progress; animation: ttsPulse 1.1s ease-in-out infinite; }
.reply-footer .tts-btn.tts-playing { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.45); color: var(--ok); }

/* 右侧模型+时间标签（带边框标签风格） */
.rf-model {
  margin-left: auto; font-size: 11.5px; color: var(--tech);
  white-space: nowrap; cursor: default; user-select: none;
  padding: 3px 10px; border: 1px solid rgba(77,216,255,.22);
  border-radius: 8px; background: rgba(77,216,255,.06);
}
.rf-model:hover { color: var(--text); border-color: rgba(77,216,255,.35); background: rgba(77,216,255,.10); }

/* 产物 / 变更链接行 */
.reply-links {
  display: flex; gap: 14px; flex: 0 0 100%;
  margin-top: 4px; font-size: 11.5px;
}
.rl-link {
  color: var(--tech); cursor: pointer; user-select: none;
  transition: color .15s;
}
.rl-link:hover { color: var(--pink); text-decoration: underline; }

/* 语音设置弹窗：自动朗读开关行 */
.tts-switch {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-size: 13px; color: var(--text); cursor: pointer;
  user-select: none;
}
.tts-switch input { width: 15px; height: 15px; accent-color: var(--pink); cursor: pointer; flex-shrink: 0; }

/* ===== 语音面板：标签页 + 文字转语音 + 音色克隆 ===== */
.tts-card { width: min(470px, calc(100vw - 32px)); height: min(74vh, 620px); }

.tts-tabs {
  display: flex; gap: 4px; padding: 8px 12px 0;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tts-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--muted);
  padding: 7px 4px 9px; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; transition: .15s;
  white-space: nowrap;
}
.tts-tab:hover { color: var(--text); background: var(--chip-bg); }
.tts-tab.active {
  color: var(--pink); font-weight: 600;
  border-bottom-color: var(--pink); background: var(--chip-bg);
}

.tts-area { min-height: 68px; line-height: 1.7; font-size: 13.5px; }

.tts-row2 { display: flex; gap: 10px; }
.tts-col { flex: 1; min-width: 0; }

.tts-tip {
  font-size: 12.5px; line-height: 1.75; color: var(--muted);
  background: var(--chip-bg); border: 1px solid var(--chip-bd);
  border-radius: 10px; padding: 8px 11px; margin-bottom: 4px;
}
.tts-tip b { color: var(--text); }

.tts-upload {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border: 1px dashed var(--chip-bd);
  border-radius: 10px; background: var(--chip-bg);
}
.tts-fname {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tts-out { margin-top: 12px; }
.tts-out:empty { display: none; }
.tts-audio { width: 100%; height: 34px; margin-bottom: 8px; display: block; }
.tts-dl { display: inline-block; text-decoration: none; line-height: 1.6; }

/* =========================================================================
   ===== 全息科技感增强层 =====
   贾维斯的冷科技骨架（网格 / 扫描线 / 角标 / 等宽数据字）
   + 玛利亚的女性柔光（洋红描边 / 柔和辉光 / 保留圆角）
   所有装饰层 pointer-events:none，不改任何布局，不遮挡内容。
   ========================================================================= */
:root {
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
  --tech: #4dd8ff;
  --tech2: #ff5fa2;
}

/* —— 全局：细网格底纹 —— */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(77,216,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,216,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 45% 35%, #000 0%, transparent 82%);
          mask-image: radial-gradient(ellipse at 45% 35%, #000 0%, transparent 82%);
}
/* —— 全局：缓慢下移的扫描光带 —— */
body::after {
  content: ''; position: fixed; left: 0; right: 0; height: 200px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(77,216,255,.055), transparent);
  animation: hudScan 11s linear infinite;
}
@keyframes hudScan { 0% { transform: translateY(-220px); } 100% { transform: translateY(100vh); } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; display: none; } }

/* —— 数据/标签统一用等宽字（中文自动回退系统中文字体）—— */
.side-head, .chip, .lbl, .hint, .brand-sub, .top-sub, .side-foot,
.fmeta, .monitor-title, .monitor-foot, .tts-talk-title, .mode-chip, .sess-del-btn {
  font-family: var(--mono);
  letter-spacing: .5px;
}

/* —— 侧栏：玻璃 + 青蓝发光右边界 —— */
#sidebar {
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 88%, var(--tech) 6%), var(--bg));
  border-right: 1px solid rgba(77,216,255,.22);
  box-shadow: 1px 0 26px rgba(77,216,255,.07), inset -1px 0 0 rgba(77,216,255,.10);
}

/* —— 品牌：全息光晕 —— */
.brand-logo { filter: drop-shadow(0 0 10px rgba(77,216,255,.85)) drop-shadow(0 0 22px rgba(255,95,162,.35)); }
.brand-title {
  background: linear-gradient(96deg, var(--text) 10%, var(--tech) 55%, var(--tech2) 95%);
  -webkit-background-clip: text; background-clip: text;
  /* 保险：渐变文字失败时仍有可读颜色 */
  color: var(--text);
  letter-spacing: 1.2px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-title { color: transparent; }
}
.brand-sub { letter-spacing: 1.5px; text-transform: uppercase; font-size: 10.5px; opacity: .85; }

/* —— 侧栏核心形象说明（core.js 粒子球不变）—— */
.side-core-cap { letter-spacing: 2px; font-family: var(--mono); text-transform: uppercase; font-size: 10.5px; }

/* —— 面板：玻璃 + 细边 + 四角角标 —— */
.side-section, .pop-card, .musing-bar, .sandbox, .tts-talk, .confirm-card {
  position: relative;
  border: 1px solid var(--border);   /* 用变量：双主题自动适配描边色 */
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045),
              inset 0 0 26px rgba(77,216,255,.045);
}
.side-section::before, .pop-card::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 2; opacity: .5;
  background:
    linear-gradient(var(--tech), var(--tech)) left top / 11px 1px no-repeat,
    linear-gradient(var(--tech), var(--tech)) left top / 1px 11px no-repeat,
    linear-gradient(var(--tech), var(--tech)) right top / 11px 1px no-repeat,
    linear-gradient(var(--tech), var(--tech)) right top / 1px 11px no-repeat,
    linear-gradient(var(--tech2), var(--tech2)) left bottom / 11px 1px no-repeat,
    linear-gradient(var(--tech2), var(--tech2)) left bottom / 1px 11px no-repeat,
    linear-gradient(var(--tech2), var(--tech2)) right bottom / 11px 1px no-repeat,
    linear-gradient(var(--tech2), var(--tech2)) right bottom / 1px 11px no-repeat;
}

/* —— 侧栏小标题：青蓝发光 + 科技竖标 —— */
.side-head { color: var(--tech); text-shadow: 0 0 12px rgba(77,216,255,.45); text-transform: uppercase; font-size: 12px; }
.side-head::before { content: '▎'; color: var(--tech); margin-right: 1px; }
.brand-sub::before { content: '◆ '; color: var(--tech); }
.chip { border: 1px solid var(--chip-bd); background: var(--chip-bg); color: var(--tech); }
.side-foot { letter-spacing: 1.4px; opacity: .7; text-transform: uppercase; font-size: 10px; }

/* —— 顶栏：底部全息渐隐光带 —— */
#topbar { position: relative; }
#topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tech) 30%, var(--tech2) 70%, transparent);
  opacity: .75; box-shadow: 0 0 14px rgba(77,216,255,.55);
}
.top-name { letter-spacing: .8px; }
.top-sub { letter-spacing: 1.2px; }
/* 状态点：青蓝脉冲 */
#statusDot.on, .dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok), 0 0 22px rgba(63,240,178,.5); }

/* —— 顶栏快捷按钮：科技边框 + hover 辉光 —— */
.top-shortcuts .sc {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2px;
  border: 1px solid var(--border);
  background: rgba(77,216,255,.05);
  transition: all .18s ease;
}
.top-shortcuts .sc:hover {
  border-color: var(--tech);
  background: rgba(77,216,255,.13);
  box-shadow: 0 0 14px rgba(77,216,255,.3), inset 0 0 12px rgba(77,216,255,.08);
  transform: translateY(-1px);
}

/* —— 按钮：微字距 + 发光 —— */
.btn { letter-spacing: .6px; transition: all .18s ease; }
.btn.primary {
  background: linear-gradient(135deg, var(--purple), var(--tech2));
  box-shadow: 0 0 16px rgba(77,216,255,.32), 0 0 30px rgba(255,95,162,.16);
}
.btn.primary:hover { box-shadow: 0 0 22px rgba(77,216,255,.5), 0 0 40px rgba(255,95,162,.26); }
.btn.ghost { border: 1px solid var(--border); background: rgba(77,216,255,.05); }
.btn.ghost:hover { border-color: var(--tech); background: rgba(77,216,255,.12); box-shadow: 0 0 14px rgba(77,216,255,.26); }

/* —— 输入框/下拉：科技描边 —— */
select, input, textarea { transition: border-color .18s ease, box-shadow .18s ease; }
select:focus, input:focus, textarea:focus {
  border-color: var(--tech);
  box-shadow: 0 0 0 2px rgba(77,216,255,.14), 0 0 16px rgba(77,216,255,.2);
}

/* —— 输入区：玻璃质感，无边框、无外圈辉光（保持纯净无框观感） —— */
#composer {
  border: none;
  backdrop-filter: blur(10px);
  box-shadow: none;
  transition: box-shadow .2s ease;
}
#composer:focus-within {
  box-shadow: none;
}
.cp-btn { transition: all .18s ease; }
.cp-btn:hover { box-shadow: 0 0 12px rgba(77,216,255,.28); }
.cp-btn.cp-model-text { border: none; }
.cp-btn.cp-model-text:hover, .cp-btn.cp-model-text.on { background: rgba(77,216,255,.12); }
.cp-btn.send {
  background: linear-gradient(135deg, var(--purple), var(--tech2));
  box-shadow: 0 0 16px rgba(77,216,255,.35);
}

/* —— 气泡：无边框无辉光（纯净色块） —— */
.msg.maria .bubble {
  background: linear-gradient(135deg, rgba(77,216,255,.11), rgba(255,95,162,.075));
  border: none;
  box-shadow: none;
}
.msg.user .bubble {
  background: var(--user);
  border: none;
  box-shadow: none;
}
.msg.prince .bubble { border: none; box-shadow: none; }
.tool-chip { border: 1px solid var(--chip-bd); background: var(--chip-bg); font-family: var(--mono); }

/* —— 弹窗：青蓝描边 + 标题发光 —— */
.pop-card { box-shadow: 0 0 0 1px rgba(255,95,162,.10), 0 26px 70px rgba(0,0,0,.7), 0 0 44px rgba(77,216,255,.13); }
.monitor-head { border-bottom: 1px solid rgba(77,216,255,.18); }
.monitor-title { color: var(--tech); text-shadow: 0 0 16px rgba(77,216,255,.5); letter-spacing: .6px; }
.monitor-foot, .tts-tip { letter-spacing: .6px; }
.tts-talk-title { color: var(--tech); text-shadow: 0 0 14px rgba(77,216,255,.45); }
.tts-switch { font-family: var(--mono); }

/* —— 会话列表项 —— */
.kb-item { transition: background .16s ease, box-shadow .16s ease; }
.sess-del-btn { font-family: var(--mono); }

/* —— 滚动条：青蓝渐变 —— */
#sidebar::-webkit-scrollbar-thumb, #messages::-webkit-scrollbar-thumb,
.sandbox-body::-webkit-scrollbar-thumb, #sessionList::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tech), var(--tech2));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(77,216,255,.35);
}

/* —— 闲时一句话悬浮条：洋红微光 —— */
.musing-bar {
  border: 1px solid rgba(255,95,162,.22);
  box-shadow: 0 0 18px rgba(255,95,162,.10), inset 0 0 20px rgba(255,95,162,.05);
}
.musing-text { letter-spacing: .6px; }
/* 输入框上方轮播文字：去掉边框/背景/阴影，纯悬浮文字 */
.musing-bar { border: none !important; background: transparent !important; box-shadow: none !important; }

/* —— 浅色主题下把科技色换成深色版本（青蓝在白底上会看不见）—— */
body.light { --tech: #0f8fd6; --tech2: #e0408f; }
body.light::before {
  background-image:
    linear-gradient(rgba(15,143,214,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,143,214,.055) 1px, transparent 1px);
}
body.light::after { background: linear-gradient(180deg, transparent, rgba(15,143,214,.05), transparent); }

/* —— 浅色主题下收敛发光强度，保证清爽可读 —— */
body.light .side-section, body.light .pop-card, body.light .musing-bar, body.light .sandbox,
body.light .tts-talk, body.light .confirm-card {
  box-shadow: 0 8px 24px rgba(15,60,100,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
body.light .side-section::before, body.light .pop-card::before { opacity: .38; }
/* 浅色主题：会话区渐变弱化，避免深色 rgba 在浅底发灰 */
body.light #sessionSection {
  background: linear-gradient(160deg, rgba(15,143,214,.06), rgba(224,64,143,.04) 60%, var(--panel));
  border-color: rgba(15,143,214,.18);
}
body.light #sessionList .sess-item2 { background: rgba(15,143,214,.04); border-color: rgba(15,143,214,.1); }
body.light #sessionList .sess-item2:hover { background: rgba(15,143,214,.09); border-color: rgba(15,143,214,.22); }
body.light #sessionList .sess-item2.cur { background: rgba(15,143,214,.1); border-color: rgba(15,143,214,.3); }
body.light #sessionList .sess-item2 .sess-ico { background: linear-gradient(135deg, rgba(15,143,214,.14), rgba(224,64,143,.1)); }
body.light #sessionList .sess-empty-ico { background: rgba(15,143,214,.08); }
body.light #btnNew { background: rgba(15,143,214,.06); border-color: rgba(15,143,214,.25); color: var(--tech); }
body.light #btnNew:hover { background: rgba(15,143,214,.12); }
body.light #sessionList .sess-item2 .sess-del-btn:hover { background: rgba(224,64,143,.2); color: #fff; }
body.light .brand-title { background: linear-gradient(96deg, var(--text) 20%, var(--purple) 60%, var(--pink) 100%); }
body.light .side-head, body.light .monitor-title, body.light .tts-talk-title { text-shadow: none; }
/* 浅色下气泡/输入区描边换成深色，避免淡青描边看不见 */
body.light .msg.maria .bubble { border-color: rgba(15,143,214,.32); }
body.light .msg.user .bubble { border-color: rgba(28,120,190,.32); }
body.light .msg.prince .bubble { border-color: rgba(14,143,134,.32); }
body.light #composer { border-color: rgba(28,120,190,.32); }
body.light .musing-bar { border-color: rgba(224,64,143,.28); }

/* ===================== 工程师 · 阿俊（隐藏工作台） ===================== */
/* 阿俊主面板不模糊背景 */
#engineerOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.65); }
.eng-card { width: min(980px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.eng-card .monitor-head { flex: 0 0 auto; }

/* ===================== AI 创作面板（文生图 + 文生视频） ===================== */
.creative-card { width: min(760px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.creative-card .monitor-head { flex: 0 0 auto; }
.creative-tabs {
  flex: 0 0 auto; display: flex; gap: 6px;
  padding: 2px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.cr-tab {
  padding: 6px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: all .18s ease;
}
.cr-tab:hover { color: var(--text); background: rgba(255,143,199,.08); }
.cr-tab.active {
  color: var(--text); background: rgba(255,143,199,.12);
  border-color: rgba(255,143,199,.3); box-shadow: 0 0 10px rgba(255,143,199,.1);
}
.cr-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cr-form { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.cr-form textarea {
  width: 100%; resize: vertical; min-height: 64px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  color: var(--text); font-size: 13.5px; line-height: 1.6;
  font-family: inherit;
}
.cr-form textarea:focus { outline: none; border-color: rgba(255,143,199,.4); }
.cr-row { display: flex; align-items: center; gap: 10px; }
.cr-row .lbl { margin: 0; }
.cr-row select {
  flex: 0 0 auto; padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--border); font-size: 12.5px;
}
.cr-row .btn.primary { margin-left: auto; }
.cr-result {
  flex: 1 1 auto; min-height: 220px; max-height: 46vh;
  overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); border: 1px dashed var(--border);
  border-radius: 12px; padding: 10px;
}
.cr-placeholder { color: var(--muted); font-size: 12.5px; }
.cr-result img, .cr-result video {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.cr-status { font-size: 12px; color: var(--text2); }
.cr-status .spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid rgba(255,143,199,.3); border-top-color: var(--pink);
  border-radius: 50%; animation: cr-rot 0.9s linear infinite;
  margin-right: 6px;
}
@keyframes cr-rot { to { transform: rotate(360deg); } }
.cr-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; padding: 8px 0 2px; opacity: .8; }
body.light .cr-tab { background: rgba(10,27,42,.04); }
body.light .cr-tab.active { background: rgba(224,64,143,.1); border-color: rgba(224,64,143,.3); }
body.light .cr-result { background: rgba(10,27,42,.04); }
body.light .cr-form textarea { background: rgba(255,255,255,.8); }

/* ===================== DeepSeek 工作台（嵌入 dsh · 3080 · 与做网页同款全屏内嵌） ===================== */
#dshOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.7); }
.dsh-card { width: min(1500px, 99vw); height: min(900px, 96vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.dsh-card .monitor-head { flex: 0 0 auto; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dsh-body { flex: 1 1 auto; min-height: 0; background: #0e0e12; }
.dsh-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.dsh-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; padding: 4px 0 8px; opacity: .8; }
#btnDsh { font-size: 15px; line-height: 1; }

/* ===================== 微信 AI 内嵌浮窗（Coze/扣子 · 全屏覆盖） ===================== */
#wechatOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.8); }
.wechat-card { width: min(1400px, 99vw); max-height: 98vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.wechat-card .monitor-head { flex: 0 0 auto; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.wechat-body { flex: 1 1 auto; min-height: 0; background: #fff; }
.wechat-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.wechat-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; padding: 4px 0 8px; opacity: .8; }

/* ===== Codex 编程助手全屏覆盖层 ===== */
#codexOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.85); }
.codex-card { width: min(1500px, 99vw); height: min(900px, 96vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--bg); }
.codex-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.codex-sidebar { width: 160px; flex: 0 0 auto; border-right: 1px solid var(--border); padding: 8px; overflow-y: auto; background: rgba(0,0,0,.2); }
.codex-file { padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; transition: background .15s; }
.codex-file:hover { background: rgba(255,255,255,.06); color: var(--text); }
.codex-file.active { background: var(--teal); color: #000; font-weight: 600; }
.codex-main { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
.codex-editor-wrap { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; }
.codex-editor-wrap textarea { flex: 1 1 auto; width: 100%; resize: none; background: #1a1a2e; color: #e0e0e0; border: none; padding: 12px 14px; font-family: 'Cascadia Code','Fira Code','Consolas','Courier New',monospace; font-size: 13.5px; line-height: 1.55; tab-size: 2; outline: none; white-space: pre; overflow: auto; box-sizing: border-box; }
.codex-split-bar { width: 4px; flex: 0 0 auto; background: var(--border); cursor: col-resize; transition: background .15s; }
.codex-split-bar:hover { background: var(--teal); }
.codex-chat { flex: 1 1 45%; min-width: 280px; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: rgba(0,0,0,.15); }
.codex-msgs { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.codex-msg { max-width: 100%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.codex-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.codex-msg.sys { align-self: center; background: rgba(94,234,212,.12); color: var(--teal); text-align: center; font-size: 12px; }
.codex-msg.ai { align-self: flex-start; background: var(--card); color: var(--text); border-bottom-left-radius: 3px; border: 1px solid var(--border); }
.codex-msg.ai code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }
.codex-input-row { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.codex-input-row input { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; outline: none; }
.codex-input-row input:focus { border-color: var(--teal); }
.codex-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0 8px; opacity: .7; }

/* ===== 做网页（webMaker）覆盖层 ===== */
#webMakerOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.85); }
.webmaker-card { width: min(1500px, 99vw); height: min(900px, 96vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--bg); }
.webmaker-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.webmaker-chat { flex: 1 1 42%; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: rgba(0,0,0,.15); }
.webmaker-msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wm-msg { max-width: 100%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.65; word-break: break-word; white-space: pre-wrap; }
.wm-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; max-width: 85%; }
.wm-msg.sys { align-self: center; background: rgba(94,234,212,.12); color: var(--teal); text-align: center; font-size: 12.5px; line-height: 1.7; }
.wm-msg.ai { align-self: flex-start; background: var(--card); color: var(--text); border-bottom-left-radius: 3px; border: 1px solid var(--border); max-width: 90%; }
.webmaker-input-row { flex: 0 0 auto; display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
.webmaker-input-row input { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13px; outline: none; }
.webmaker-input-row input:focus { border-color: var(--teal); }
.webmaker-preview { flex: 1 1 58%; min-width: 320px; display: flex; flex-direction: column; background: #12121a !important; }
.wm-preview-bar { flex: 0 0 auto; font-size: 12px; color: var(--muted); padding: 6px 12px; background: #1a1a24 !important; border-bottom: 1px solid var(--border); }
.wm-preview-bar span { color: var(--teal); }
.wm-preview-frame { flex: 1 1 auto; width: 100%; border: none; background-color: #12121a !important; }
.webmaker-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0 8px; opacity: .7; }
.eng-note {
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
  background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.2);
  border-radius: 8px; padding: 8px 10px; margin: 8px 0;
}
.eng-note b { color: var(--pink); }
/* 阿俊窗口标签栏：对话 / 创造者控制台 */
.eng-tabs {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.eng-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s ease;
}
.eng-tab:hover { color: var(--text); background: rgba(77,216,255,.08); }
.eng-tab.active {
  color: var(--text);
  background: rgba(77,216,255,.12);
  border-color: rgba(77,216,255,.3);
  box-shadow: 0 0 10px rgba(77,216,255,.1);
}
/* 聊天视图（原 eng-msg 所在容器） */
.eng-chat {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
/* 世界视图（创造者控制台内嵌） */
.eng-world {
  flex: 1 1 auto; min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0a0d13;
}
.eng-world iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
body.light .eng-tab { background: rgba(10,27,42,.04); }
body.light .eng-tab.active { background: rgba(15,143,214,.1); border-color: rgba(15,143,214,.3); }
body.light .eng-world { background: #f4f8fc; border-color: rgba(10,27,42,.12); }
.eng-msg {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 2px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none;
}
.eng-msg::-webkit-scrollbar { display: none; }
.eng-msg .m { max-width: 94%; line-height: 1.7; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.eng-msg .m.user { align-self: flex-end; background: rgba(77,216,255,.12); border: 1px solid rgba(77,216,255,.3); border-radius: 10px 10px 2px 10px; padding: 8px 11px; color: var(--text); }
.eng-msg .m.ajun { align-self: flex-start; background: rgba(124,92,255,.1); border: 1px solid rgba(124,92,255,.28); border-radius: 10px 10px 10px 2px; padding: 8px 11px; color: var(--text); }
.eng-msg .m.sys { align-self: center; font-size: 11px; color: var(--muted); background: transparent; }
/* 阿俊「正在思考」占位气泡：跳动三点动画，等待回复期间显示 */
.eng-msg .m.ajun-think {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.22);
  border-radius: 10px 10px 10px 2px; padding: 9px 13px;
  color: var(--text2); font-size: 13px;
}
.eng-msg .m.ajun-think .at-dots { display: inline-flex; gap: 3px; }
.eng-msg .m.ajun-think .at-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tech, #5b8cff);
  animation: at-bounce 1.2s infinite ease-in-out;
}
.eng-msg .m.ajun-think .at-dots i:nth-child(2) { animation-delay: .15s; }
.eng-msg .m.ajun-think .at-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes at-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.eng-proposal {
  align-self: stretch; margin: 2px 0; border: 1px solid rgba(255,170,80,.4);
  background: rgba(255,170,80,.07); border-radius: 10px; padding: 10px 12px;
}
.eng-proposal .ep-path { font-size: 12px; font-weight: 700; color: var(--tech); margin-bottom: 3px; }
.eng-proposal .ep-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.6; }
.eng-proposal .ep-actions { display: flex; gap: 8px; margin-top: 4px; }
/* 已应用状态：绿色描边 + 半透明 + 右下角完成标记 */
.eng-proposal.eng-applied {
  border-color: rgba(80,220,140,.45);
  background: rgba(80,220,140,.06);
  position: relative;
}
.eng-proposal.eng-applied::after {
  content: '✓ 已修改';
  position: absolute; right: 8px; top: 8px;
  font-size: 11px; color: #6ee7a0;
  font-family: var(--mono); letter-spacing: .5px;
}
.eng-proposal.eng-applied .ep-path { color: #6ee7a0; }
.eng-proposal.eng-applied .ep-note { opacity: .7; }
.eng-diff { margin: 4px 0; }
.eng-diff-h { font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.eng-diff pre {
  margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 11.5px; line-height: 1.5;
  max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
  scrollbar-width: none;
}
.eng-diff pre::-webkit-scrollbar { display: none; }
.eng-diff-old { background: rgba(255,90,90,.1); border: 1px solid rgba(255,90,90,.3); color: #ff9a9a; }
.eng-diff-new { background: rgba(80,220,140,.1); border: 1px solid rgba(80,220,140,.3); color: #8af0b0; }
.eng-input-row { flex: 0 0 auto; display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.eng-input-row #engInput { flex: 1; }
.eng-foot { flex: 0 0 auto; font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; opacity: .8; }
/* 阿俊标题栏模型选择器 */
#engModelSel {
  font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: rgba(77,216,255,.10); border: 1px solid rgba(77,216,255,.25);
  color: var(--purple); outline: none; cursor: pointer;
  max-width: 160px; margin-left: 6px; vertical-align: middle;
}
#engModelSel option { background: var(--bg2); color: var(--text); }
.eng-apply-card {
  width: min(560px, 90vw);
  max-height: 82vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 阿俊确认弹窗不模糊背景 */
#engApplyOverlay { backdrop-filter: none !important; background: rgba(0,0,0,.65); }
.eng-apply-title { font-size: 14px; font-weight: 700; color: var(--pink); margin-bottom: 8px; flex: 0 0 auto; }
.eng-apply-path { font-size: 12px; color: var(--tech); font-family: var(--mono); margin-bottom: 4px; word-break: break-all; flex: 0 0 auto; }
.eng-apply-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.6; flex: 0 0 auto; }
/* diff 区域可滚动，不撑爆弹框 */
.eng-apply-card .eng-diff { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.eng-apply-card .eng-diff pre { max-height: 120px; }  /* 每个代码块限高 */
.eng-apply-warn { font-size: 11px; color: var(--muted); line-height: 1.6; border-top: 1px dashed var(--border); padding-top: 6px; flex: 0 0 auto; margin-top: 6px; }
/* 暗号授权栏 */
.eng-apply-code { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-top: 8px; }
.eng-apply-code #engCode {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text); outline: none;
}
.eng-apply-code #engCode:focus { border-color: var(--pink); }
.eng-apply-code #engCode.bad { border-color: #ff6a6a; }
.eng-code-hint { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.eng-code-hint.ok { color: #6ee7a0; }
/* 确认按钮区始终可见、可点 */
.eng-apply-card .confirm-actions { flex: 0 0 auto; margin-top: 10px; display: flex; justify-content: flex-end; gap: 10px; position: relative; z-index: 10; }
/* confirm-body 在阿俊弹框内允许收缩 */
.eng-apply-card .confirm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; white-space: normal; display: flex; flex-direction: column; }