/* =============================================================
   界面版式 v2（玫瑰）—— 竖版侧边栏
   运动机制：侧栏是钉死的底层，页面整张（.sb-page 包层）滑向右侧
   把它露出来。只有一个滑动主体，页面与侧栏天然一体、零失步。
   页面滑开后左缘是 48px 大圆角轮廓：描边细线与极淡窄投影
   烘进角贴片与边缘细条，跟着圆角走。仅 [data-style="v2"] 生效；
   挂了本栏的页面底部 dock 退场。字号/图标/间距是调定的终值。
   ============================================================= */
@import url('./brand-fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Zen+Antique&family=Outfit:wght@400;500;600;700&display=swap');

.sb,.sb-btn,.sb-catch,.sb-corner,.sb-edge{display:none}

/* ---------- 滑层：页面包在 .sb-page 里，transform 整张推右（GPU，无回流）---------- */
html[data-style="v2"]{overflow-x:hidden;overscroll-behavior:none}
[data-style="v2"] .sb-page{position:relative;z-index:2;background:var(--bg,#FAF8F4);min-height:100svh;
  transition:transform .34s cubic-bezier(.32,.72,.28,1)}
html[data-style="v2"][data-sb-open] .sb-page{transform:translateX(var(--sb-w,264px))}
/* 有侧边栏就不再需要底部 dock */
[data-style="v2"] .dock{display:none!important}

/* ---------- 悬浮小钮（左上）：与滑层同曲线同步走 ---------- */
/* 与手谈/玩具柜/记忆库顶栏那颗同款：裸的两道线，无底无框。
   40px 的盒子留着当触摸靶，视觉上只剩笔画；左移到 10px，
   笔画左缘正好落在各页 22px 的内容线上。 */
[data-style="v2"] .sb-btn{display:flex;position:fixed;top:calc(max(20px,env(safe-area-inset-top)) + 12px);left:10px;
  width:40px;height:40px;border-radius:999px;background:transparent;border:none;
  box-shadow:none;color:#574F47;align-items:center;justify-content:center;
  cursor:pointer;z-index:64;padding:0;-webkit-tap-highlight-color:transparent;
  transition:transform .34s cubic-bezier(.32,.72,.28,1)}
[data-style="v2"] .sb-btn svg{width:16px;height:16px}
[data-style="v2"] .sb-btn:active{opacity:.55}
html[data-style="v2"][data-sb-open] .sb-btn{transform:translateX(var(--sb-w,264px))}
/* 设置页内页（hash 路由挂 body.detail-open）：左上让位给内页自己的返回钮 */
[data-style="v2"] body.detail-open .sb-btn{display:none}

/* ---------- 栏体：钉死的底层，自己不动 ---------- */
[data-style="v2"] .sb{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:var(--sb-w,264px);
  box-sizing:border-box;padding:calc(max(20px,env(safe-area-inset-top)) + 8px) 0 max(16px,env(safe-area-inset-bottom));
  background:#F4F0E9;z-index:1;
  --sb-nav-fs:14.5px;--sb-ic:23px;--sb-gap:17px;--sb-rc-fs:13.5px}

/* 点外面收回：盖在被推开页面上的透明接触层 */
html[data-style="v2"][data-sb-open] .sb-catch{display:block;position:fixed;inset:0 0 0 var(--sb-w,264px);z-index:63;background:transparent}

/* ---------- 页面左缘的圆角工艺：48px 大圆角 ----------
   描边细线与极淡窄投影直接烘进角贴片的弧形渐变和边缘细条里，
   整条轮廓（弧 + 直线）共用同一组色标，投影跟着圆角走而不是矩形。
   贴片右移量 = 栏宽 - 20px 投影余量；页面方角被贴片的实色区遮平。 */
[data-style="v2"] .sb-corner{display:block;position:fixed;left:0;width:68px;height:48px;z-index:62;pointer-events:none;
  opacity:0;transition:transform .34s cubic-bezier(.32,.72,.28,1),opacity .16s}
[data-style="v2"] .sb-edge{position:fixed;left:0;top:48px;bottom:48px;width:20px;z-index:62;pointer-events:none;
  opacity:0;transition:transform .34s cubic-bezier(.32,.72,.28,1),opacity .16s;
  background:linear-gradient(to right,rgba(42,35,32,0) 0%,rgba(42,35,32,0.05) calc(100% - 1.2px),rgba(42,35,32,0.13) calc(100% - 1.2px))}
[data-style="v2"] .sb-corner,[data-style="v2"] .sb-edge{display:block}
html[data-style="v2"][data-sb-open] .sb-corner,
html[data-style="v2"][data-sb-open] .sb-edge{opacity:1;transform:translateX(calc(var(--sb-w,264px) - 20px));
  transition:transform .34s cubic-bezier(.32,.72,.28,1),opacity .2s .12s}
[data-style="v2"] .sb-corner.t{top:0;background:radial-gradient(circle at 100% 100%,
  rgba(0,0,0,0) 46.8px,#DCD7D1 47.4px 48.2px,#EAE6DF 49.5px,#F4F0E9 64px)}
[data-style="v2"] .sb-corner.b{bottom:0;background:radial-gradient(circle at 100% 0%,
  rgba(0,0,0,0) 46.8px,#DCD7D1 47.4px 48.2px,#EAE6DF 49.5px,#F4F0E9 64px)}

/* ---------- 字标：Soreneve（Source Serif 4，尾字母 e 玫瑰微斜）---------- */
/* Source Serif 4 仅内嵌 400 一档，故请求 700 触发合成加粗（500 不会合成，此前调粗无效即因此）*/
[data-style="v2"] .sb-brand{font-family:'Source Serif 4','Cormorant Garamond',serif;font-weight:700;font-synthesis:weight;
  -webkit-text-stroke:0.3px #2A2320;font-size:27px;color:#2A2320;letter-spacing:-0.01em;padding:8px 20px 14px;user-select:none;-webkit-user-select:none}
[data-style="v2"] .sb-brand .sb-e{display:inline-block;transform:rotate(-14deg);transform-origin:55% 62%;color:#9E4352;-webkit-text-stroke:0.3px #9E4352}

/* ---------- 导航 ---------- */
[data-style="v2"] .sb-nav{padding:0 10px;flex:none}
[data-style="v2"] .sb-item{display:flex;align-items:center;gap:12px;padding:var(--sb-gap,13px) 11px;border-radius:12px;
  color:#4A4438;text-decoration:none;font-size:var(--sb-nav-fs,14.5px);font-weight:400;
  font-family:'Zen Antique',Georgia,serif;letter-spacing:0.01em;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
[data-style="v2"] .sb-item svg{width:var(--sb-ic,23px);height:var(--sb-ic,23px);flex:none;color:#8B8178;
  fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
/* 预高亮（hover）：有指针设备走 :hover；触屏 iOS 的 :active 对 <a> 不可靠，
   改由 sidebar.js 的指针事件挂 .pressed 类驱动（按下亮、抬起/滚动清）。
   @media(hover:hover) 隔离，避免移动端点一下就粘住不散的「sticky hover」 */
@media (hover:hover){[data-style="v2"] .sb-item:not(.cur):hover{background:#F1ECE3}}
[data-style="v2"] .sb-item:not(.cur):active,
[data-style="v2"] .sb-item:not(.cur).pressed{background:#F1ECE3}
/* 当前页药丸：米白底 + 扁一点（pad 8 + margin 5 补偿，行占位不变）+ 去投影 */
[data-style="v2"] .sb-item.cur{background:#FAF7F2;color:#9E4352;border:1px solid rgba(42,35,32,0.05);
  padding:calc(var(--sb-gap,17px) - 6px) 11px;margin:5px 0}
[data-style="v2"] .sb-item.cur svg{color:#9E4352}

/* ---------- 分割线 + 最近（收藏窗口）---------- */
[data-style="v2"] .sb-sep{height:1px;background:rgba(42,35,32,0.08);margin:12px 20px}
[data-style="v2"] .sb-rc-h{font-size:9px;font-weight:600;letter-spacing:.22em;color:#B9A97F;padding:0 21px 7px;text-transform:uppercase}
[data-style="v2"] .sb-rc{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 10px}
[data-style="v2"] .sb-rc-item{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:calc(var(--sb-gap,13px) - 2px) 11px;border-radius:10px;border:none;background:none;text-align:left;
  color:#6B6259;font-size:var(--sb-rc-fs,13.5px);font-family:-apple-system,'PingFang SC','Noto Sans SC',sans-serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-style="v2"] .sb-rc-item:active{background:rgba(42,35,32,0.05)}
[data-style="v2"] .sb-rc-item .d{flex:none;width:17px;height:17px;display:flex;align-items:center;justify-content:center;color:#B3A89C}
[data-style="v2"] .sb-rc-item .d svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
[data-style="v2"] .sb-rc-item .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 当前窗口高亮（聊天页）：与导航当前页同款米白药丸 */
[data-style="v2"] .sb-rc-item.cur{background:#FAF7F2;color:#9E4352;box-shadow:inset 0 0 0 1px rgba(42,35,32,0.05)}
[data-style="v2"] .sb-rc-item.cur .d{color:#9E4352}
[data-style="v2"] .sb-rc-empty{padding:4px 21px;font-size:11px;color:#B5ACA2}
[data-style="v2"] .sb-all{display:flex;align-items:center;gap:6px;margin:6px 10px 0;padding:9px 11px;border-radius:10px;
  color:#9E4352;font-size:12px;font-weight:700;font-family:'Outfit',sans-serif;letter-spacing:.02em;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
[data-style="v2"] .sb-all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =============================================================
   墨夜 Encre —— 侧边栏深色（html[data-v2-skin="encre"] 时点亮）
   栏体 #26232B（比页面更沉一档）· 字 #EDE9F2 · 玫瑰 #C9A0AA
   ============================================================= */
html[data-v2-skin="encre"][data-style="v2"] .sb{background:#26232B}
html[data-v2-skin="encre"][data-style="v2"] .sb-brand{color:#EDE9F2;-webkit-text-stroke:0.3px #EDE9F2}
html[data-v2-skin="encre"][data-style="v2"] .sb-brand .sb-e{color:#C9A0AA;-webkit-text-stroke:0.3px #C9A0AA}
html[data-v2-skin="encre"][data-style="v2"] .sb-item{color:#C9C4CF}
html[data-v2-skin="encre"][data-style="v2"] .sb-item svg{color:#8F8798}
html[data-v2-skin="encre"][data-style="v2"] .sb-item:active{background:rgba(237,233,242,0.05)}
@media (hover:hover){html[data-v2-skin="encre"][data-style="v2"] .sb-item:not(.cur):hover{background:#2C2933}}
html[data-v2-skin="encre"][data-style="v2"] .sb-item:not(.cur).pressed{background:#2C2933}
html[data-v2-skin="encre"][data-style="v2"] .sb-item.cur{background:#332F3A;color:#C9A0AA;border-color:rgba(237,233,242,0.06)}
html[data-v2-skin="encre"][data-style="v2"] .sb-item.cur svg{color:#C9A0AA}
html[data-v2-skin="encre"][data-style="v2"] .sb-sep{background:rgba(237,233,242,0.08)}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-item{color:#A59FAE}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-item:active{background:rgba(237,233,242,0.05)}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-item .d{color:#6E6878}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-item.cur{background:#332F3A;color:#C9A0AA;box-shadow:inset 0 0 0 1px rgba(237,233,242,0.06)}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-item.cur .d{color:#C9A0AA}
html[data-v2-skin="encre"][data-style="v2"] .sb-rc-empty{color:#6E6878}
html[data-v2-skin="encre"][data-style="v2"] .sb-all{color:#C9A0AA}
/* 悬浮钮 */
html[data-v2-skin="encre"][data-style="v2"] .sb-btn{background:transparent;border:none;color:#D9D4E0;box-shadow:none}
/* 页面左缘圆角工艺：弧线与裙边换成墨夜的层次 */
html[data-v2-skin="encre"][data-style="v2"] .sb-corner.t{background:radial-gradient(circle at 100% 100%,
  rgba(0,0,0,0) 46.8px,#17151B 47.4px 48.2px,#1E1B22 49.5px,#26232B 64px)}
html[data-v2-skin="encre"][data-style="v2"] .sb-corner.b{background:radial-gradient(circle at 100% 0%,
  rgba(0,0,0,0) 46.8px,#17151B 47.4px 48.2px,#1E1B22 49.5px,#26232B 64px)}
html[data-v2-skin="encre"][data-style="v2"] .sb-edge{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.22) calc(100% - 1.2px),rgba(0,0,0,0.5) calc(100% - 1.2px))}