/* 10-26 小克 smooth-a1 … a6（a5 松手弹簧、a6 视差）：基于 Theo 的 settings-reveal（20261026-settings-reveal-0eecfdfcdbce），见 jobs「smooth1026」 */
/* Settings sit behind a rounded foreground chat canvas. */
#settings-chat-layer {
  position: fixed;
  inset: 0;
  height: var(--full-h, 100dvh);
  z-index: 1;
  pointer-events: none;
}
#settings-chat-layer > #app { pointer-events: auto; }
#settings-chat-layer[data-active="true"] {
  z-index: 31;
  overflow: visible;   /* a4：原来 overflow:hidden 把整页裁成圆角，里面的毛玻璃每帧都要多画一整屏；改成墙纸和顶上那条自己是圆角（见下） */
  isolation: isolate;
  will-change: transform;
  /* 10-26 smooth-a1：圆角、阴影一次定好，不跟着手指每帧变（每帧变要重画整页，就是卡的原因）。
     停在原位时 36px 圆角藏在手机屏幕本身的圆角里，看不出来；阴影在屏幕左边外面，也看不见。 */
  border-radius: 36px;
  box-shadow: -10px 0 32px rgba(0,0,0,.18);
}
#settings-chat-layer[data-active="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 21;
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
#settings-chat-dismiss {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
#settings-chat-dismiss[hidden] { display: none; }
#settings-chat-dismiss:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.settings-reveal-closing #settings-chat-layer,
.settings-reveal-closing #settings-chat-layer *,
.settings-reveal-closing #menu-mask.sidebar-mode { pointer-events: none !important; }
#menu-mask.sidebar-mode { background: var(--settings-reveal-bg, #F2F1F5); }
:root[data-theme="dark"] #menu-mask.sidebar-mode { background: var(--settings-reveal-bg, #0E0E10); }
#menu.sidebar, #menu.sidebar.wide {
  border-radius: 0;
  box-shadow: none;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  #settings-chat-layer { transition: none !important; }
  #menu.sidebar { animation: none; }
}

/* ---- smooth-a2（10-26 小克）---- */
/* 拉设置时页面每帧改这两个变量；默认会往下传给设置栏里每一个元素，整栏跟着重算样式。登记成不往下传，只有它自己用。 */
@property --screen-sidebar-x { syntax: '*'; inherits: false; }
@property --screen-sidebar-shade { syntax: '*'; inherits: false; }
/* 压暗：跟着拉开的程度变深，只改 opacity（手机直接做，不用重画） */
#settings-chat-dim { display: none; position: absolute; inset: 0; z-index: 19; pointer-events: none;
  background: rgba(0,0,0,.14); opacity: 0; will-change: opacity; border-radius: inherit; }
:root[data-theme="dark"] #settings-chat-dim { background: rgba(0,0,0,.32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #settings-chat-dim { background: rgba(0,0,0,.32); } }
#settings-chat-layer[data-active="true"] > #settings-chat-dim { display: block; }
/* a3（10-26 17:4x）：她说滑的时候毛玻璃变化太明显 → 关毛玻璃那段拿掉，毛玻璃一直开着。
   那段原文在 ../20261026-settings-reveal-smooth-a2/settings-reveal.css，要找回来照抄。 */
@media (prefers-reduced-motion: reduce) { #settings-chat-dim { transition: none !important; } }

/* ---- a4（10-26 17:5x）：不裁整页也有圆角 ---- */
#settings-chat-layer[data-active="true"] > #wall { border-radius: 36px; }
#settings-chat-layer[data-active="true"] #app > .top-blur > * { border-top-left-radius: 36px; border-top-right-radius: 36px; }
/* 顶上那两层很轻的模糊（.5 / 1.2px，本来就几乎看不出来）只在滑的时候停一下：它们带渐变遮罩，跟着整页动最费 */
.settings-reveal-moving #settings-chat-layer #app > .top-blur > i { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---- a6（10-26 18:0x，她：前端像左右平移，官端像堆叠上去）：视差 ----
   聊天页照旧跟着手指走满全程；底下的设置栏只走 30%（从左边 30% 处慢慢挪到位），两层速度不同 = 叠在一起的感觉。
   拖动时设置栏的位置还是 --screen-sidebar-x（页面 sidebarScreen 写的），这里乘 .3；点按钮打开时换一套只走 30% 的进场动画。 */
:root.settings-reveal-active #menu.sidebar.screen-sidebar-motion { transform: translate3d(calc(var(--screen-sidebar-x, 0px) * .3), 0, 0); }
:root.settings-reveal-active #menu.sidebar { animation-name: settings-reveal-parallax-in; }
@keyframes settings-reveal-parallax-in { from { transform: translate3d(-30%, 0, 0); } to { transform: translate3d(0, 0, 0); } }