/* ==========================================================
 * app-shell.css —— 应用外壳：左侧主导航（2026-10-21 用户定稿）
 * ------------------------------------------------------------
 * 信息架构（不可随意调整层级，见 .workbuddy/memory/MEMORY.md）：
 *   品牌 → 找报价（一级大板块，置顶 + 实心按钮凸显）
 *        → 工作台（报价单比对）
 *        → 管理（我的规则 / 后台管理）
 *        → 底部（账号 / 主题）
 *
 * 实现方式：侧栏 position:fixed + body 左内边距，
 *   **不改各页原有 DOM 层级**，避免影响 Univer 容器测量（C35 75vh）与全屏（C33）。
 * 材质沿用 base.css 的 --raised-* / --sunken-*，不新增色板。
 * 只挂载在三个主界面：index / market / admin。
 * ========================================================== */

:root { --rail-w: 220px; --rail-w-mini: 64px; }

body.has-rail { padding-left: var(--rail-w); }
body.has-rail .wrap { padding-left: 32px; max-width: none; }   /* 后台页原本锁 1080 居中，与另两页版心不一致，统一为满宽 */

.app-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px; box-sizing: border-box;
  /* 新拟物：侧栏与页面同一表面，不再是一块浮起来的白板；
     只留一条极淡分隔线保证左右区域分得清（可用性取舍）。 */
  background: var(--bg);
  border-right: 1px solid var(--line);
  box-shadow: none;
  z-index: 60;
  font-size: 13px;
  overflow-y: auto; overflow-x: hidden;
}

/* ---------- 品牌 ----------
 * 2026-11-02 用户定：logo 与标题放大、更显眼，并与下方「找报价」拉开一点距离。
 *   原尺寸 26px logo / 13px 标题，与导航只隔 4px（gap 2 + margin 2），品牌和导航粘在一起。
 *   现 34px / 17px，底部留 12px 呼吸位；标题加字距，避免四个汉字挤成一坨。
 * ⚠️ 窄屏（<=1080px）要单独覆盖 —— 那里 rail 只有 64px 宽（内容 48px），
 *    34px logo 仍放得下，但 margin-bottom 要收回来，否则图标栏会很空。 */
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 12px; text-decoration: none; color: var(--text); border-radius: var(--radius-sm); }
.rail-brand:hover { background: var(--fill-hover); }
.rail-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-brand); box-shadow: var(--raised-1); }
.rail-logo svg { width: 25px; height: 25px; display: block; }
.rail-brand b { font-size: 17px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }

/* ---------- 一级板块：找报价（实心按钮，置顶凸显） ---------- */
.rail-cta {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 4px; padding: 8px 10px; min-height: 46px; box-sizing: border-box;
  border-radius: var(--radius-sm); text-decoration: none;
  background: var(--brand); color: var(--on-brand);
  box-shadow: var(--raised-1);
  transition: box-shadow .3s ease-in-out, background .3s ease-in-out;
}
/* hover 阴影缩小（不位移、不放大） */
.rail-cta:hover { background: var(--brand-dark); box-shadow: 2px 2px 4px #b8bcc2, -2px -2px 4px #ffffff; }
.rail-cta:active { box-shadow: var(--press-1); }
.rail-cta[aria-current="page"] { background: var(--brand-dark); box-shadow: var(--raised-1); }
body.dark .rail-cta:hover { box-shadow: 2px 2px 4px #212429, -2px -2px 4px #3a3f47; }
.rail-cta .rail-ico { width: 16px; height: 16px; flex: none; }
.rail-cta-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rail-cta-txt b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.rail-cta-txt i { font-style: normal; font-size: 10px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-chev { width: 12px; height: 12px; flex: none; opacity: .8; }

/* ---------- 分组 ---------- */
/* 分组标题：新拟物对比度天然偏低，这里提高一档保证可读（AA） */
.rail-group { padding: 10px 10px 6px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; }
body.dark .rail-group { color: var(--muted); }
.rail-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: none; background: none; font-family: inherit; text-align: left;
  font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: none;
  width: 100%; box-sizing: border-box;
  transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
}
.rail-item:hover { background: none; color: var(--text); box-shadow: var(--raised-1); }
.rail-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* 选中 = 按进表面（凹），不用色块，靠凹槽 + 品牌字色表达 */
.rail-item.active { background: transparent; color: var(--brand); font-weight: 600; box-shadow: var(--sunken-1); }
body.dark .rail-item.active { background: transparent; color: var(--brand); }
.rail-ico { width: 16px; height: 16px; flex: none; }
.rail-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-spacer { flex: 1 1 auto; min-height: 12px; }

/* ---------- 底部：账号按钮 + 设置齿轮（2026-10-23 改版） ----------
 * 原结构是「登录/注册 + 退出 + 主题下拉」三件平铺；现在账号收进一个按钮，
 * 已登录时点它向上弹菜单（设置 / 退出登录），主题移入设置弹层。
 * 齿轮常驻：未登录（含离线、游客）也要能进设置改主题，否则无入口。 */
.rail-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.rail-foot .user-box { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; }
.rail-foot #loginBtn { flex: 1 1 auto; min-width: 0; width: auto; }
.rail-foot #mkLoginBtn { flex: 1 1 auto; min-width: 0; width: auto; }
.rail-foot .user-info { flex: 1 1 auto; min-width: 0; width: auto; display: block; }

/* 账号按钮：头像 + 昵称 + 向上箭头；悬停/展开用凹凸区分 */
/* 2026-10-27 用户定：头像 + 昵称做成按钮（常驻凸起材质，不再只在 hover 时才看得见）；
 * 同时取消底部齿轮 —— 设置入口只留账号菜单里的「设置」。 */
.user-menu-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--btn); color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--raised-1);
  transition: box-shadow .3s ease-in-out, background .3s ease-in-out, border-color .3s ease-in-out;
}
.user-menu-btn:hover { background: var(--btn-hover); border-color: var(--border-strong); box-shadow: var(--raised-1); }
.user-menu-btn:active { box-shadow: var(--press-1); }
.user-menu-btn[aria-expanded="true"] { background: var(--btn-press); border-color: var(--border-strong); box-shadow: var(--press-1); }

/* 已登录 → 底部齿轮让位给头像按钮；未登录仍保留齿轮（否则没有入口进设置切主题） */
.user-box .user-info:not(.hidden) ~ #settingsBtn { display: none; }
.user-menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 头像：品牌色圆片 + 反白字；深色下同样走变量，不手写色值 */
.user-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  font-size: 11px; font-weight: 700; letter-spacing: -.2px; font-variant-numeric: tabular-nums;
  box-shadow: var(--raised-1);
}
.rail-foot .user-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-caret { flex: none; display: flex; color: var(--muted); transition: color .12s; }
.user-menu-btn:hover .user-caret, .user-menu-btn[aria-expanded="true"] .user-caret { color: var(--text); }

/* 设置齿轮：32×32 点击区（与删除等危险操作的点击区同一标准），线性图标 */
.rail-icon-btn {
  flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer;
  transition: box-shadow .3s ease-in-out, color .3s ease-in-out;
}
.rail-icon-btn:hover { background: none; color: var(--text); border-color: transparent; box-shadow: var(--raised-1); }
.rail-icon-btn:active { box-shadow: var(--press-1); }
.rail-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 账号菜单：向上弹（侧栏底部下方没有空间），凸起卡片 */
.user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px; box-shadow: var(--raised-3);
}
.um-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.um-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.um-id b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-id i { font-size: 11px; font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar.um-avatar { width: 34px; height: 34px; font-size: 13px; }
.um-sep { height: 1px; background: var(--line); margin: 2px 4px 6px; }
.um-item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 8px 9px; border: none; border-radius: var(--radius-sm); background: none;
  color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.um-item:hover { background: none; box-shadow: var(--raised-1); }
.um-item:active { box-shadow: var(--press-1); }
.um-item .qc-ico { flex: none; color: var(--muted); }
.um-item:hover .qc-ico { color: var(--text); }
.um-item.danger { color: var(--up); }
.um-item.danger .qc-ico { color: var(--up); }
.um-item.danger:hover { background: rgba(219,0,0,.10); box-shadow: none; }
body.dark .um-item.danger:hover { background: rgba(255,122,122,.14); }
/* 市场页把「登录状态」胶囊搬进侧栏底部：撑满整行、居中，过长省略 */
.rail-status { width: 100%; box-sizing: border-box; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }

/* ---------- 页头瘦身：外壳承担导航后，header 不再做卡片 ---------- */
body.has-rail header {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 2px 0 14px; margin-bottom: 16px; overflow: visible;
}
body.has-rail header::before { display: none; }
body.has-rail header h1 { font-size: 22px; letter-spacing: -.015em; }
body.has-rail header p { margin-top: 4px; }

/* ---------- 窄屏：收成图标栏 ---------- */
@media (max-width: 1080px) {
  body.has-rail { padding-left: var(--rail-w-mini); }
  body.has-rail .wrap { padding-left: 20px; }
  .app-rail { width: var(--rail-w-mini); padding: 10px 8px; align-items: center; }
  .rail-label, .rail-brand b, .rail-cta-txt, .rail-chev, .rail-group { display: none; }
  /* 二级菜单在 44px 图标栏里放不下 → 收进页面顶部的 .mk-tabs（见 market.css） */
  .rail-sub { display: none; }
  /* 窄屏图标栏：logo 保持 34px（48px 内容宽放得下），但要收回品牌区的下间距 */
  .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; padding-bottom: 8px; margin-bottom: 6px; }
  .rail-item, .rail-cta { justify-content: center; padding-left: 0; padding-right: 0; }
  .rail-item, .rail-cta { width: 44px; }
  .rail-foot { width: 100%; }
  /* 窄栏只有 44px：账号与齿轮竖着摞，昵称/箭头收起，只留头像 */
  .rail-foot .user-box { flex-direction: column; gap: 6px; align-items: center; }
  .rail-foot #loginBtn { width: 44px; flex: none; }
  .rail-foot .user-info { width: 44px; flex: none; }
  .user-menu-btn { width: 44px; padding: 4px; justify-content: center; }
  .rail-foot .user-name, .user-caret { display: none; }
  /* 菜单不能被 44px 挤扁：贴侧栏右侧给固定宽度 */
  .user-menu { left: 4px; right: auto; width: 212px; }
}

/* ========== 侧栏二级菜单（2026-10-25 找报价改版） ==========
 * 父级 .rail-cta 点回首页，两个二级项常驻展开（不做折叠箭头，减少一次点击）。
 * 缩进 + 左侧细线表达层级；不引入新色板，复用 rail-item 的语言。 */
.rail-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 8px 20px; padding-left: 10px;
  border-left: 1px solid var(--line);
}
.rail-subitem {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s, box-shadow .12s;
}
.rail-subitem::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .45; flex: none;
}
.rail-subitem:hover { color: var(--text); background: var(--fill-hover); }
.rail-subitem:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rail-subitem.active {
  color: var(--brand); font-weight: 600;
  background: var(--card); box-shadow: var(--raised-1);
}
.rail-subitem.active::before { opacity: 1; }
/* 三级菜单（2026-10-25）：挂在上一个二级项下面，缩进 + 小一号字，靠层级而不是新颜色区分 */
.rail-subitem.lv3 { padding-left: 22px; font-size: 11.5px; }
.rail-subitem.lv3::before { width: 3px; height: 3px; opacity: .35; }
.rail-subitem.lv3.active::before { opacity: 1; }
body.dark .rail-subitem:hover { background: var(--fill-hover); }
body.dark .rail-subitem.active { background: var(--card); }

/* 窄屏收敛（必须放在基础 .rail-sub 之后：同特异性下后者胜出） */
@media (max-width: 1080px) {
  .rail-sub { display: none; }
  /* 会话徽标是长文案，在 64px 图标栏里会被压成「录 · 仅可」；窄屏直接收起 */
  .app-rail .mk-preview-badge { display: none; }
}