/* ============================================================
   语文桥 · 工作台侧栏（唯一源）
   ------------------------------------------------------------
   index.html（个人中心 SPA）与 chat.html（根路径 AI问桥）共同外链本文件，
   改一次两边同时生效。禁止再在页面内内联侧栏样式。
   渲染 markup 见 /js/yq-sidebar.js（同一份源）。
   ============================================================ */
@import url('/css/rail-user.css?v=3');
:root {
  --drawer-bg: #2a3829;
  --drawer-bg-top: #344638;
  --drawer-text: #efe4cb;
  --drawer-text-mute: rgba(239, 228, 203, .55);
  --drawer-hover: rgba(239, 228, 203, .08);
  --drawer-active: rgba(239, 228, 203, .13);
  --sidebar-w: 274px;
  --yq-accent: #c9a84c;
  --yq-on-accent: #2a2410;
  --gold-line: rgba(201, 168, 76, .62);
  --gold-glow: rgba(201, 168, 76, .20);
}

.sidebar {
  /* 字体与行高在此锁定：不继承页面 body，避免两页 body 不同导致导航项高度/间距不一致 */
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, "PingFang SC", system-ui, serif;
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, var(--drawer-bg-top), var(--drawer-bg));
  color: var(--drawer-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 60;
  transition: transform .25s ease;
}

/* ---------- 品牌区 ---------- */
.sidebar .brand { padding: 22px 20px 16px; display: flex; align-items: center; gap: 13px; }
.sidebar .brand .ava {
  width: 48px; height: 48px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
  background: var(--drawer-hover); box-shadow: 0 0 0 1px var(--drawer-active);
}
.sidebar .brand .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar .brand h1 { font-size: 16px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; }
.sidebar .brand h1 img { height: 18px; width: auto; margin-right: 6px; }
.sidebar .brand p { font-size: 11px; line-height: 1.4; opacity: .55; margin-top: 3px; letter-spacing: .04em; }

/* ---------- 导航 ---------- */
.sidebar .nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.sidebar .nav::-webkit-scrollbar { width: 6px; }
.sidebar .nav::-webkit-scrollbar-thumb { background: var(--drawer-text-mute); border-radius: 6px; }

.sidebar .navi {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.55; font-family: inherit;
  color: color-mix(in srgb, var(--drawer-text) 82%, transparent);
  transition: background .15s, box-shadow .18s, color .15s;
  margin-bottom: 2px; text-decoration: none;
  box-shadow: inset 0 0 0 1px transparent;
}
.sidebar .navi svg { color: var(--drawer-text-mute); flex: 0 0 auto; }
.sidebar .navi:hover {
  background: var(--drawer-hover);
  color: var(--drawer-text);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 12px var(--gold-glow);
}
.sidebar .navi.active {
  background: var(--drawer-active);
  color: var(--drawer-text);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--drawer-hover);
}
.sidebar .navi.active svg { color: var(--drawer-text); }
/* 高亮项悬停也要有金线框（否则与普通项表现不一致） */
.sidebar .navi:hover,
.sidebar .navi.active:hover {
  background: var(--drawer-hover);
  color: var(--drawer-text);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 12px var(--gold-glow);
}
.sidebar .navi .badge {
  margin-left: auto; font-size: 10.5px; background: var(--yq-accent); color: var(--yq-on-accent);
  padding: 2px 7px; border-radius: 999px; font-weight: 700;
}

/* 首项内嵌身份切换 */
.sidebar .navi .id-switch {
  margin-left: auto; flex: 0 0 auto; max-width: 96px; font-size: 11.5px; padding: 3px 2px 3px 8px;
  border-radius: 8px; border: 1px solid var(--drawer-active); background: transparent;
  color: var(--drawer-text-mute); cursor: pointer; outline: none; color-scheme: dark; font-family: inherit;
}
.sidebar .navi .id-switch option { background: #2f4031; color: var(--drawer-text); }
.sidebar .navi .id-switch:hover, .sidebar .navi .id-switch:focus {
  color: var(--drawer-text); border-color: var(--drawer-text-mute);
}
.sidebar .navi.active .id-switch { color: var(--drawer-text); }

/* 备课中心折叠箭头 */
.navi .bk-nav-caret { margin-left: auto; font-size: 9px; color: var(--yq-accent); }
.navi.tree-closed .bk-nav-caret { transform: rotate(-90deg); }

/* 备课中心 · 课文搜索框（1:1 对齐频道页壳 /js/wb-shell.js 的 .wb-tree-search；收起时随树一起隐藏） */
.navi.tree-closed + .bk-search { display: none; }
.bk-search { padding: 4px 10px 6px; }
.bk-search-input { width: 100%; box-sizing: border-box; padding: 6px 9px; font-size: 12px;
  font-family: inherit; color: var(--drawer-text); background: rgba(239, 228, 203, .07);
  border: 1px solid var(--drawer-active); border-radius: 7px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.bk-search-input::placeholder { color: var(--drawer-text-mute); }
.bk-search-input:focus { border-color: var(--gold-line); box-shadow: 0 0 0 2px var(--gold-glow); }
.bk-empty { padding: 10px; font-size: 12px; color: var(--drawer-text-mute); }


/* ---------- 底部用户区 ---------- */
.sidebar .rail-user {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px 15px; border-top: 1px solid var(--drawer-hover);
}
.sidebar .ru-ico {
  flex: none; width: 31px; height: 31px; display: grid; place-items: center;
  background: var(--drawer-hover); border-radius: 50%; color: var(--drawer-text);
}
.sidebar .ru-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sidebar .ru-n {
  font-size: 12.5px; line-height: 1.2; color: var(--drawer-text); letter-spacing: .03em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .ru-t { font-size: 10px; color: var(--drawer-text-mute); letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.sidebar .ru-swap {
  flex: none; margin-left: auto; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--drawer-text-mute);
  transition: background .13s, color .13s, transform .25s;
}
.sidebar .ru-swap:hover { background: var(--drawer-active); color: var(--drawer-text); transform: rotate(180deg); }
.sidebar .ru-swap svg { display: block; }
.sidebar .ru-gear {
  flex: none; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--drawer-text-mute); transition: background .13s, color .13s;
}
.sidebar .ru-gear:hover { background: var(--drawer-active); color: var(--drawer-text); }
.sidebar .ru-gear svg { display: block; }

/* 移动端：抽屉式（由页面汉堡按钮切换 .open） */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 10px 28px rgba(90, 70, 49, .16); }
  .sidebar.open { transform: translateX(0); }
}

/* ===== 侧栏折叠（默认展开，点右上角 « 向左收起；收起后左上角浮出 » 可再展开）===== */
.sidebar .brand { position: relative; }
.sidebar .sb-collapse {
  position: absolute; right: 10px; top: 12px; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(239,228,203,.08); border: 1px solid rgba(239,228,203,.14);
  border-radius: 7px; color: rgba(239,228,203,.62); cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1;
  transition: background .13s, color .13s;
}
.sidebar .sb-collapse:hover { background: rgba(239,228,203,.16); color: #efe4cb; }

.sb-expand {
  display: none; position: fixed; left: 0; top: 12px; z-index: 70;
  width: 28px; height: 30px; padding: 0; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #344638, #2a3829);
  border: 1px solid rgba(201,168,76,.42); border-left: none;
  border-radius: 0 8px 8px 0; color: #efe4cb; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1;
  box-shadow: 2px 0 10px rgba(20,30,20,.18);
}
.sb-expand:hover { background: linear-gradient(180deg, #3c5040, #2f4031); }
body.sb-collapsed .sb-expand { display: inline-flex; }

/* 折叠后主区占满；顶栏/页脚跟随左移 */
body.sb-collapsed .sidebar { transform: translateX(-100%); }
body.sb-collapsed .main { margin-left: 0 !important; }
body.sb-collapsed .top-bar { left: 0 !important; }
body.sb-collapsed .site-footer { margin-left: 0 !important; }

/* ---------- 宣纸主题（左下角「切换主题」） ---------- */
body.yq-skin-paper .sidebar {
  --drawer-bg: #f2ecdd;
  --drawer-bg-top: #fbf7ec;
  --drawer-text: #2f3a2f;
  --drawer-text-mute: rgba(47, 58, 47, .56);
  --drawer-hover: rgba(47, 58, 47, .07);
  --drawer-active: rgba(47, 58, 47, .11);
  background: linear-gradient(180deg, var(--drawer-bg-top), var(--drawer-bg));
  box-shadow: 1px 0 0 rgba(47, 58, 47, .08);
}
body.yq-skin-paper .sidebar .navi .id-switch option { background: #fff; color: #2f3a2f; }
body.yq-skin-paper .sidebar .sb-collapse { background: rgba(47, 58, 47, .06); border-color: rgba(47, 58, 47, .14); color: rgba(47, 58, 47, .6); }
body.yq-skin-paper .sb-expand {
  background: linear-gradient(180deg, #fbf7ec, #f2ecdd); color: #2f3a2f;
  border-color: rgba(47, 58, 47, .25); box-shadow: 2px 0 10px rgba(47, 58, 47, .12);
}